} @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.

Timothy Foster

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.

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.

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

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

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.

 #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!

# 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

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

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.

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.

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.

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

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. ;-)

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.