Where do I place this code in CSS edit box?
-
Here is the blog address:
http://www.finishwellendurance.wordpress.com
I think I’m close to figuring this out. I’m using the Tarski theme, and I bought the CSS upgrade. When I click ‘Edit CSS” under Appearance, I get a big white box full of css code. All I want to do is lock down the font sizes on my page.
I think I should add something like this for example:
<html>
<head>
<style>
h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:16px}
</style>
</head>
<body>but I’m not sure to where to put it. Do I erase all that pops up in the box and replace with this, or just add it in some place? Also, it list a lot of padding and such in relative (em) units. Can I just get rid of that, or is it neccessary?
Thanks for any help!
Thanks!The blog I need help with is: (visible only to logged in users)
-
You cannot put HTML into CSS. CSS is not markup.
You need to familiarize yourself with what CSS is and what it is not, and gain some experience with it and then add your changes using CSS syntax.
-
The other thing is that with CSS, never use px for font size, use either percentages or em units. Pixels are for margins and padding and such – positional.
-
OK, I just looked at your site and see other issues.
Do not paste the entire stylesheet into the CSS edit window. It will cause issues here at wordpress.COM because CSS uses relative URL’s and your modifications are saved in a different folder (location) which will break all the relative links. http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ .
IF you paste the entire stylesheet, then you have to make sure that “start from scratch…” is selected. Otherwise you are loading two stylesheets, and they can end up fighting each other and causing issues. You will also have to search through the entire stylesheet for any relative URL’s and make them absolute.
-
First of all, thanks, you have been great to answer so many of my questions.
Secondly, oops, first one is my mistake – I see I did post html instead. I’ve done some simple css in the past and should have caught that one. I’m by no means a CSS guru, but I do know how it differs from HTML and should have noticed that goof.
You mention that I should either use em or percentages, but I thought that was only if you wanted your fonts to be relative? Although perhaps unpopular, I’m trying to override the browser’s ability to resize my fonts, and I thought the only way to do that was to enter absolute units (i.e. pixels) I’m definitley the amatuer here though, so I could be off base.
What am I seeing in that box? Is that my actual style sheet, or something that I can edit which would be added to the style sheet? The default radio button says Add, and from reading a help file my understanding was that this setting would simply add this to the theme’s existing CSS. All I want to do is lock down the font sizes so resizing the text in a browser doesn’t alter my page arrangement.
For instance, in the box that comes up, I see the value for p, font-size:1.2em. If 1 em is 16px, could I just change this line to read font-size:19.2px to create an absolute font size and then save the changes? Or am I greatly oversimplifying things. All I am really trying to do is control the way font sizes display.
-
The thing is pixel units are not absolute, but are relative to monitor resolution. If you are using a 17″ monitor set at 800 x 600 resolution, text will be huge compared to the same monitor set to 1280 x 1024 (over 1.5 times larger). Pixels are NOT an absolute measurement.
Also, taking away the ability for a person to use the browser zoom feature is not a good idea for people with visual disabilities and is completely contrary to accessibility laws, standards and guidelines. At some point in the near future, these laws are likely going to be actively enforced.
Typically in CSS, the main font size and family is set in the body section of the CSS. That ends up being the base size for all fonts in the document. Then, you make any further declarations as required for h1, h2, etc., p, small, and whatever other sizes you happen to need for your design, and those override the base size set in the body section.
em and percentages also take into account the settings the person has made in their browser preferences for font sizes. Again taking that away from visually impaired visitors is simply not a good idea.
The debate about using pixels or points for font sizes vs. em or percentages gets a lot of debate, and I’ve come down on the size of em and percentages, especially since at least a handful of my blog’s visitors that I know of have visual disabilities, and I want to make sure they have access to my blog.
You have to consider function as well as form.
-
All good points. Thanks for giving me something to consider here. I see what you mean about monitor resolution as well. hmmm. To be precise, here is what is bugging me, maybe you can offer a solution? If you look at my blog:
http://www.finishwellendurance.wordpress.com
I have 7 categories that run across the top navigation. What I don’t care for is that in say, IE8, if someone changes the text size to large in the browser to larger, those categories get thrown into 2 rows instead of 1. I don’t mind so much I suppose if the text on a post is larger or smaller, and the photos I embed should remain in the same relative locations. It’s some of the navigation items I want to control. Any ideas? -
IE has had this issue since the zoom feature was first implemented and MS has refused to fix it. Thankfully IE’s browser market share continues to drop like a stone and within a few years it will hopefully just be a memory.
Go to this link, http://www.w3schools.com/css/css_font.asp , and scroll down to “Using a Combination of Percent and Em.” There is your solution to the IE issue. Set the font-size on the body section as a percentage, and then set all the other font sizes in em units and IE will zoom correctly and all other browsers will still work as well.
-
One other thing I’ll mention is that not all browsers will render a page exactly the same. IE has typically always rendered text slightly larger than other browsers or other systems. If you look at a page on a Mac using FF or Safari and look at the same page in IE (with font size preferences and monitor resolutions set the same on both systems), you will notice that a block of text will wrap differently between the two systems. This there is absolutely nothing you can do about.
-
That looks like a great resource, I’m sure I will spend a lot of time there, thanks for the tip. So when I want to implement changes like these, If I choose the default “Add” this stuff to my existing theme option in the Edit CSS dialog, and make my changes in the text that automatically pops up in the edit window and then save it, will this avoid the catastrophe you warned of earlier (i.e., all of my links could get blow away)?
I heard that I should NOT just copy and paste the CSS from the theme into the box and then make changes.
-
What you want to do is to delete everything in the CSS edit window so that it is blank and make sure “add to existing…” is selected. Then, you add only the specific sections and the specific declarations you are adding or changing. As an example if you wanted to change the font-family in the body section, this is what you might see in the original CSS:
body { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; -x-system-font:none; background:#ACACAC none repeat scroll 0 0; font-family:Arial,Helvetica,sans-serif; font-size:1em; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; margin:0; }To change the font-family declaration in body, you would put this and only this into the CSS edit window:
body { font-family:Times,Times New Roman,serif; }Continue on with the other sections you are adding to or changing as I’ve shown above.
Read the link I gave a while back by devblog about the CSS upgrade here and it explains it all very nicely: http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ .
When you get done, all that will be in the CSS edit window will be your specific changes and nothing else. Your changes will be loaded after the original CSS and override the original declarations.
-
This is fantastic! Thanks again SO much for all of your helpful advice. I’ll be sure to refer to the link you posted as well!
-
- The topic ‘Where do I place this code in CSS edit box?’ is closed to new replies.
WordPress.com Forums 