CSS Help

Summary:

Mobile error and fonts.

CSS Help

Moschinius 22 Jan 2012 20:44

Hello, I'm using the theme Midnight Minimalist which I've had some help making changes to and just now I changed some values myself too.
After refreshing on my iPhone it looks like this though:
http://img9.imageshack.us/img9/907/bild1os.png
There's an obvious error on the right side that only appears on my mobile. What did I miss? Someone might be able to tell right away but I'll put the code is further down.
Before refreshing the site was thinner and centered… I believe search, login, the rightmost border of the white field and the license text further down all should be moved to align with the "Powered by Wikidot" field which seems to have the correct dimensions.

No matter if it's related I'd like to know what this code means, the 480 part sounds mobile-related:

@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}

I'm also interested in knowing how to change fonts and get more correct font sizes on my site.
Take this code piece for example:

#header h1 a {
    font-family: Trebuchet MS,Arial,Sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 32px;

}

This gives me text that's only size 24 if I copy it and paste into Word… how come? Why isn't it 32?

Also what fonts does Wikidot support? I don't really know anything about how fonts work online. Any? From what I understand you need to have the sites font installed locally in order to view it correctly… which fonts are safe to use?

Anyways here's the full code that I'm using:

+ Show the code

html, body {
    min-height: 101%;
}

#container-wrap {
    padding-right: 8px;
    overflow: hidden;
}

#container {
    width: 792px;
    margin: 0 auto;
    position: relative;
}
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}

a:link {
    text-decoration:none;
}

a:active {
    text-decoration:none;
}

a:visited {
    text-decoration:none;
}

a:hover {
    background: transparent;
    color:#000000;
    text-decoration:underline;
}

#header {
    height: 116px;
}

#header h1 {
    float: left;
    padding: 28px 0 0 16px;
}

#header h1 span {
    padding-right: 8px;
}

#header h1 a {
    font-family: Trebuchet MS,Arial,Sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 32px;
}

#header h1 a:hover {
    text-decoration: none;
}

#header h2 {
    color: #999999;
    font-family: "Verdana", Arial, Helvetica, sans;
    font-size: 16px;
    line-height: 20px;
    padding: 38px 8px 14px;
}

#header h2:before {
    content: "|";
}

#header h2 span {
    font-size:10px;
    letter-spacing:2px;
    padding-left:8px;
    text-transform:uppercase;
}

#top-bar {
    background-color:#FFFFFF;
    border-left:3px outset #000000;
    border-right:3px outset #000000;
    border-top:3px outset #000000;
    height:64px;
    left:0;
    position:relative;
    width:792px;
}

#top-bar ul {
    height:30px;
    left:10px;
    padding:0;
    position:relative;
    top:10px;
    width:772px;
}

#top-bar li {
    margin: 0;
}

#top-bar ul ul {
    margin-right: 0;
}

#top-bar li a {
    border-right: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    padding: 0 16px;
    text-decoration: none;
}

#top-bar li a:hover {
    text-decoration: none;
}

#top-bar li ul {
    border: none;
    left: 0;
    position: relative;
    top: 0;
    width: 1em;
}

#top-bar li ul li a {
    width: 18em;
}

#login-status {
    top: 93px;
    right: 16px;
}

#search-top-box {
    right: -64px;
    top: 40px;
}

#search-top-box .button {
    visibility: hidden;
}

#search-top-box .text {
    padding: 2px 2px 2px 5px;
    width: 220px;
}

#search-top-box input.empty {
    color:#888888;
}

#search-top-box input.text {
    border:1px solid #888888;
    color:#888888;
}

#login-status a {
    text-decoration: none;
}

#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    color: #FFFFFF;
}

#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    color: #000;
}

#side-bar {
    float:right;
    margin:5px;
    overflow:hidden;
    padding:5px;
    width:350px;
}

div.buttons input, input.button, button, a.button {
    background-color: #FFFFFF;
    font-weight: bold;
    border-radius: 8px 8px;
    -moz-border-radius: 8px 8px;
    -webkit-border-radius: 8px 8px;
}

div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    color: #FFFFFF;
    text-decoration: none;
}

#main-content {
    margin: 20px 0 0 0;
    padding: 0 16px;
    min-height: 600px;
    overflow: hidden;
}

#content-wrap {
    background-color: #FFFFFF;
    border-bottom: 3px outset #000000;
    border-left: 3px outset #000000;
    border-right: 3px outset #000000;
    min-height: 1px;
    width: 100%;
}

#page-content > *:first-child {
    margin-top: 0;
}

#page-title {
    border:medium none;
    color:#222222;
    font-family:Arial,Helvetica,Sans-serif;
    font-size:200%;
    font-weight:bold;
    margin-top:0;
    padding-bottom:2px;
}

#page-content > h1,
#page-content > h2,
#page-content > h3,
#page-content > h4 {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    letter-spacing: -1px;
    margin: 15px 0;
    padding: 0;
}

h1 {
    font-size: 180%;
}

#main-content h1 span,
#main-content h2 span,
#main-content h3 span,
#main-content h4 span {
    color:#000000;
}

#main-content h1 span a,
#main-content h2 span a,
#main-content h3 span a,
#main-content h4 span a {
    color:#000000;
    text-decoration: none;
}

#main-content h1 span a:hover,
#main-content h2 span a:hover,
#main-content h3 span a:hover,
#main-content h4 span a:hover {
    text-decoration: none;
}

div.page-calendar-box {
    padding: 0;
}

blockquote {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-right.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

blockquote p {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif);
    background-repeat: no-repeat;
    margin-top: 0;
    padding-top: 1em;
    min-height: 37px;
}

blockquote p + p {
    padding-top: 0;
    background-image: none;
}

#breadcrumbs {
    margin-bottom: 1em;
}

.odate, .like-odate {
    font-size: 85%;
    font-weight: bold;
    color: #666;
    background: transparent;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#membership-by-password-box error-block,
#membership-apply-box error-block,
.member .error-block {
    display:none;
}

#footer {
    background-color: #888888;
    border: 1px solid #222222;
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 776px;
}

#footer a {
    color: #222222;
}

#license-area {
    color: #888888;
    padding-bottom: 10px;
    text-align: center;
}

#license-area a {
    color: #888888;
}

.image-container {
    padding:0 1em 0 1em;
}

.side-box {
    background-color:#F5F5F5;
    border:1px solid #DADADA;
    margin-bottom:10px;
    margin-left:10px;
    padding:8px;
    width:310px;
}

.side-box h2 {
    background-color:#EBF3FB;
    font-size:10px;
    margin-left:-8px;
    margin-right:-8px;
    margin-top:-8px;
    padding:5px 10px;
}

#side-bar ul {
    padding: 0 0 0 1em;
    margin: 0;
}

.hover span {
    display: none;
}

.hover:hover span {
    position: absolute;
    display: inline;
    margin: 20px -20px 0 0;
    height: auto;
    width: auto;
    background: #eee;
    border: 1px solid #555;
    color: #555;
    padding: 1em;
    font-size: 12px;
}

.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}

.hover:hover {
    background-color: transparent;
    text-decoration: underline;
}

.join-text a {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    text-decoration: none; 
}

.join-text a:hover {
    text-decoration: underline; 
}

.code {
     -moz-box-shadow: 10px -5px 15px #ddd;
     background-color:#E1E8E8;
     background-image:url(http://community.wikidot.com/local--files/admin:css/brackets.png);
     background-repeat:no-repeat;
     border:2px dotted darkgrey;
     font-family:monospace;
     font-size:12px;
     margin:0.4em 0 0.4em 40px;
     min-height:65px;
     overflow:auto;
     padding: 0 1em 0 40px;
     width:85%;
}

.layout {
    border-collapse:collapse;
    color:#3B485F;
    width: 100%;
    table-layout:fixed;
}

.layout tr {
    background: #FCFFDF;
    border-bottom:1px solid #EFEFEF;
}

.layout td {
    padding-left: 1em;
}

.layout .truncate {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

.layout .header {
    height: 2em;
    background: #AFCCFF;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
    font-size: 13px;
}

.layout .footer {
    background: #FCFFDF;
    border-top: 1px solid #9F9F9F;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
}

.nobreak p {
    display: inline;
    margin: 0px;
    padding: 0px
}

#header h1 a {
    color: #888888;
}

#top-bar ul {
    background-color: #383838;
    border-bottom:4px solid #888888;
}

#top-bar li a:hover {
    background-color: #888888;
}

div.buttons input, input.button, button, a.button {
    border: solid 1px #888888;
}

div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    background-color: #888888;
}

a:link {
    color: #888888;
}

a:active {
    color: #888888;
}

a:visited {
    color: #888888;
}

#main-content h1 span a:hover,
#main-content h2 span a:hover,
#main-content h3 span a:hover,
#main-content h4 span a:hover {
    color: #383838;
}

#container-wrap {
    background-color: #383838;
}

#header {
    background-color: #383838;
}

#top-bar li ul li a {
    background-color: #383838;
}

#search-top-box input.empty {
    background-color: #383838;
}
#search-top-box input.text {
    background-color: #383838;
}

div.buttons input, input.button, button, a.button {
    color: #383838;
}

.hover {
    color: #0a9200;
}

.hover:hover{
    color: #0a9200;
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border:solid #888888; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}

.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}

.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#383838 url(http://hackedforum.wikidot.com/local--files/tabpage/tabcolor.png) repeat-x -3px; /* tab background */
    border-top:solid #888888 1px;
    border-left:solid #888888 1px;
    border-right:solid #888888 1px;
    font-weight:600;
    font-size:80%;
    color:#000;/*tab text color*/

}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#888888
}

.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #f00 0px;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#888888 url(http://hackedforum.wikidot.com/local--files/tabpage/tabcolor.png) repeat-x -3px; /* selected tab background */
    color:#fff;border:1px solid #888888;
}

#account-topbutton {
    border: 0; 
}

#login-status #account-topbutton {
    background-color:transparent;
    color: black;
}

#login-status #account-topbutton:hover {
    color: white;
}

#account-options li a:hover {
    color: black;
}

Last edited on 22 Jan 2012 21:00 by Ed Johnson + Show more

Re: CSS Help

Ed Johnson 22 Jan 2012 20:57

Yes, the @media query in the CSS is for mobile devices. Anything inside that section will only be applied when the width of the device is detected to be 480px or less. You can also have it apply to the width of the browser window on any screen size by changing the code to include a "max-width" setting like this:

@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
  #container {
    width: 100%;
  }
}

You can see a great example of how the max-width setting works by visiting bcammo's blog and changing the width of your browser window.

You should also consider setting the viewport meta tag if you're trying to make your site mobile-friendly. There's a pretty good, short read on the subject here.

You can add the meta tag under +Options > Edit Meta at the bottom of your page. Select "viewport" in the drop-down list and set the content to "width=device-width".

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: CSS Help

Moschinius 22 Jan 2012 21:22

Thanks, that's quite helpful. I'm not sure if I'll actually need the… "viewport meta tag" though :-P Just for now I'll just make my wiki pleasant and functional so that I can focus on content, personal notes.
I haven't really studied CSS other than one class six years ago, very basic. I'm only graduating gymnasium this spring. I might study CSS sometime though, seems really worth learning.
Many local companies really have the worst sites and my family has a domain that we haven't really touched in years. I could see a job opportunity in helping people modernize their sites.
Bcammo's blog seemed really nice, never seen width adjustment quite like that. Very elegant.

Re: CSS Help

RobElliott 22 Jan 2012 21:53

I might study CSS sometime though, seems really worth learning.

Yes it is, and it's satisfying! If you are going to re-design your site extensively or help others with their design then you willl need to learn CSS.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: CSS Help

Moschinius 25 Jan 2012 17:35

When viewing the page on a tall monitor there's an empty, white space below the page (which has a dark grey background) on pages that are short, is there any way to make the page always extend the length of the browser window vertically?

Edit: oh and I can still scroll slightly up and down even though there's a white space and the page obviously isn't too long… funny.

Last edited on 25 Jan 2012 17:37 by Moschinius + Show more

Re: CSS Help

Ed Johnson 25 Jan 2012 21:19

Can you provide link(s) to examples? It would be easier to help you if we can see what you're referring to.

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: CSS Help

Moschinius 25 Jan 2012 21:40

Well… figured as much.

Is it possible to make the page extend all the way to the bottom? I guess there has to be something already that's preventing the page from being only 2 rows tall and having the page end right after that.

Re: CSS Help

Ed Johnson 25 Jan 2012 22:40

I'm not sure what the purpose is, but I think the always-visible vertical scroll bar is a result of:

html, body {
    min-height: 101%;
 
}

Try commenting that out and see if helps.

Also, try adding background-color: #383838; to the html, body section above. That should extend the grey background color to the bottom of the page.

It would be really nice if you could make your site public, at least temporarily, so we can use our handy-dandy tools to actually inspect your site and offer real solutions instead of trying to figure it out from screen shots and making really intelligent guesses. ;-)

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: CSS Help

RobElliott 25 Jan 2012 22:56

There's an explanation for the min-height:101% hack here.

The #main-content has a min-height of 600px. Increasing this not an elegant solution but might help with the white space at the bottom.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: CSS Help

Moschinius 25 Jan 2012 23:04

Excellent, no more scroll bar and I guess that the background color solution works. Yeah, might make the site public for a little while. Not much on it right now.

I'd still like to move the top of the page slightly higher, probably not that hard by editing the padding values whichever one value it is, change up the fonts a little bit and fix the mobile issues.

Overall I'm not so sure about my theme. Picked it a year ago and I guess something with a bit more texture would be somewhat prettier.
Probably doesn't matter, looks good enough. Looks worse when editing… oh and all buttons say "H1" when hovering over them still? Thought that would be gone a year from one year ago.

Oh and there's probably a lot of features in my theme code that I'm not using and won't ever use… I might clean that out to make it easier for me to navigate the other code.

@RobElliott: yes, increasing #main-content would probably work… though it would end up being too long on any screen that's not 1200 pixels vertical.

Edit: I read some in this thread:
http://community.wikidot.com/forum/t-206887/typography
What do I add where to use a Google Web Font? Do I paste that code at the bottom onto a blank page, or my theme… or somewhere else?
I'd like to try Open Sans as the default wiki font instead of Verdana.

Last edited on 26 Jan 2012 13:08 by Moschinius + Show more

Re: CSS Help

dealliker 01 Feb 2012 12:34

It says here that you like to move the top of the page . I would like to ask if how did you make it last time?can you tell me,if you don't mind.:-)

Re: CSS Help

Moschinius 31 Jan 2012 16:32

Anyone who knows how I can get Google Web Fonts working? Tried a bunch of ways, didn't work. Where do I paste it and where do it put its name to apply it to all of my pages as default?

Re: CSS Help

RobElliott 31 Jan 2012 17:36

This was discussed briefly at http://community.wikidot.com/helpon:typography/comments/show#post-1355700 and it works well.

On your css page import the css for the google web font you want to use. The import must be at the beginning of your CSS like this:

[[code type="css"]]
@import url("/dark:css/code/1");
@import url(http://fonts.googleapis.com/css?family=Tangerine);

---rest of your custom css--
[[/code]]

It can also go into a css module if you just want to use it on one page.

Then you can use it on your site in a couple of ways:

1) adding a span to a heading or to text, for example ++ [[span style="font-family:Tangerine, serif;font-size: 48px;"]]%%form_data{species}%% [[/span]]. See the live code for that on my test live template at http://vineyard.wikidot.com/edible-plants:_template

2) to add it across your site add it to a rule in your site-wide css, for example:

#page-title {
    font-family: Tangerine,serif;
    font-size: 48px;
    padding-top:10px;
}

This what I have done with the page title on my test page at http://vineyard.wikidot.com/edible-plants:main. See the css for that at http://vineyard.wikidot.com/plants:css which shows both the @import rule and the css for the page title.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 31 Jan 2012 17:43 by RobElliott + Show more

Re: CSS Help

Moschinius 31 Jan 2012 17:52

Well what's the code for the "plain text"? Not the page title, headings etc… I've never understood that.

Re: CSS Help

RobElliott 31 Jan 2012 18:15

p (for paragraph)

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: CSS Help

Moschinius 31 Jan 2012 18:32

#p {
    font-family: "Open Sans";
    font-size: 13px;
}

Would something like that make the default font to Open Sans if I've got the @import at the top too?

Last edited on 31 Jan 2012 18:32 by Moschinius + Show more

Re: CSS Help

RobElliott 31 Jan 2012 20:58

No, if you look at my post you'll see I wrote p, not #p. There is a difference:

# id selectors are for things like the #page-title, #header #main-content. You can have only one of that selector on a page;

. class selectors are for things like .hovertip or other classes you define yourself and you can have more than one of those on the page;

p, hr etc are global elements on the page, there can be multiple instances of them, they can be styled with different colors, fonts etc.

So you were nearly right, just remove the # so that you have:

p {
    font-family: "Open Sans";
    font-size: 13px;
}

A good place to start to learn about CSS is at http://www.w3schools.com/css/css_intro.asp

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 31 Jan 2012 21:01 by RobElliott + Show more

Re: CSS Help

Moschinius 31 Jan 2012 23:22

Neat. The text in my top bar is still Verdana though… and I guess there's no way to change the "edit" text and all that to Open Sans?

Re: CSS Help

RobElliott 01 Feb 2012 08:01

That is because the text in the top bar isn't paragraph text but is a link inside the #top-bar list rule. So you should add the font-family: Opens Sans; to #top-bar li a like this. Just add the extra line into the existing rule on your css1 page:

#top-bar li a {
   ---your existing properties and values--
    font-family: Open Sans;
}

I guess there's no way to change the "edit" text and all that to Open Sans?

If you mean the text in the text editor while you are editig the page then that, like everyother graphical element, can be changed:

input [type="text"], textarea {
    font-family: Open Sans;
}

A comma means "and" so you might want to add this to the bottom of your css and add to it as necessary:

#header h1 a, #header h2 a, #top-bar li a, #top-bar ul li ul li a, #page-title, h1, h2, h3, h4, h5,h6, p, input [type="text"], text area, input.empty, input.text {
    font-family: Open Sans;
}

I have noticed that the CSS on your CSS1 page has no structure to it, so for example you get top bar rules near the top and also near the bottom. This is important because it makes maintenace of your CSS harder and also, more importantly, because css is read from top to bottom. So if you add a rule at the top of the page and don't notice the same rule lower down the page you might get very frustrated when the addition or change you make does not work.

It might just me being picky but I keep the css rules for particular areas together, starting with containers and global elements then working down the page from header, topbar, sidebar, main content, page content, dataforms, buttons, tabs, then footer and so on. And if I have a lot of css I add headers to separate the rules to make things easier to find. An example of where I have done that is here.

If yu use Firefox there is a brilliant tool called Firebug which lets you see the rule, property and values that are being used on any element in the css on your page and try changes on-the-fly without committing to them. You can get Firebug from http://getfirebug.com/. (IE has an equivalent but is not quite as good in my opinion.) Firebug is one of the development tools I wouold never want to be without!

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 01 Feb 2012 18:34 by RobElliott + Show more

Re: CSS Help

Moschinius 01 Feb 2012 12:14

No structure? :P Well no. I don't know how well structured it was to begin with and I've kind of made my own additions where they seemed logical to me… when I have the time I'll do what I can to structure it and clean out the bits that don't really do anything such as some code near the bottom that enables a hovering feature which I'm not using. Since I don't know at the top of my head what most of the code does I can't really start sorting or cleaning it right away though. Indeed structure will make things easier but it can wait for now.

By the way the "edit" text I meant was actually the one at the bottom of each page… literally the buttons you press for editing, tags and such.

Re: CSS Help

RobElliott 01 Feb 2012 12:35

Yes you can change the font on those buttons with:

.page-options-bottom a {
    font-family: Open Sans;
}

or add .page-options-bottom a to the list I mentioned in my previous post.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: CSS Help

Moschinius 01 Feb 2012 15:36

Is there any tutorial saying which parts of the site is named what perhaps? My account, page revision, stop watching, powered by and license is still in Verdana I think. Oh and all the text while you're editing a page? The text in the editing field and all surrounding text… I can imagine it being locked sp,ehpw to prevent people from breaking their sites, but it's probably not?

Might be easier if I knew the names of the different parts of the page myself, I'll probably change the fonts more later once I know what's what.
Would Firebug do something like that? I'm not using Firefox but I guess I could change while editing the CSS.

Re: CSS Help

RobElliott 01 Feb 2012 16:27

Have a look at what Timothy Foster has produced at http://css.wikidot.com/page-structure

Oh and all the text while you're editing a page?

The reason that is not showing up in Open Sans in your editor is that on your css1 page you have spelt it text area with a space instead of textarea.

There are a number of different rules that affect the text around the editing box.

I can imagine it being locked to prevent people from breaking their sites, but it's probably not?

No, it's not locked

Would Firebug do something like that?

Yes, that's exactly what it does. see an example below. I clicked on the select arrow in Firebug then clicked on the Login Status. The result shows the #login-status a rule that you've put into the css on your css1 page. You can add extra properties and values or delete existing ones and see what the effect is. It also allows you to look at the base css.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 01 Feb 2012 16:37 by RobElliott + Show more

Re: CSS Help

Moschinius 01 Feb 2012 18:28

Ah, now I managed to change a lot of text. Main issue now would be how it looks funny on my iPhone.
The "content wrap" kinda extends too far horizontally. Just like in the image up in the first post.

Re: CSS Help

Moschinius 03 Feb 2012 17:44

I figured out what's causing the iPhone error…

}
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}

Errr… so I just took it away. Now everything looks fine. Someday I must take a class in CSS though. Very exciting.