Editing Colour of Font
-
Hi There,
I have upgraded to gain access to edit my CSS code and am trying to alter the colour of the font.I have gone to ‘View original style sheet’ which opens up the code in dreamweaver, i have then edited my font colour in dreamweaver but am unsure what do do next?
I tried pasting it back into the CSS Stylesheet Edtior box but it comes up with a completely different look to before?
I also tried just hitting ‘save’ in dreamweaver but that doesnt seem to connect..How do I maintain the exact template and just edit the font and colours?
The blog I need help with is: (visible only to logged in users)
-
Don’t use dreamweaver as a CSS editor first off. I’ve had it b0rk stylesheets before.
With wordpress.COM, what is best is to add only the selectors, and only the specific definitions that you are changing to the CSS edit window and then make sure “add to existing… is selected before saving. Your changes are loaded after the original CSS which means any of your additions or changes will override the original stylesheet.
If your body selector looked like this,
body { color:#222222; font-family:Georgia,"Times New Roman",Times,serif; font-size:1em; }and all you were changing was the font-size in that selector, then the following is what you would add to the CSS edit window and change the size value
body { font-size:1.5em; }Pasting the entire stylesheet typically will cause problems, as you have found out although some of the issue may be dreamweaver related.
-
Thank you very much for that.
For some reason when i click on ‘add to existing’ it automatically prompts dreamweaver to opn, is there a way to change that?
-
Clear everything out of the CSS edit window and then click “add to existing…” and click “save stylesheet.” That will take you back to the original. Then start adding in your changes as I explained above.
-
Thank you for your patience.
I followed the above instructions, but after i save the style sheet the original text comes up which is just:
“/* Welcome to Custom CSS!
If you are familiar with CSS or you have a stylesheet ready to paste, you may delete these comments and get started.
CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. Here’s an example:
img { border: 1px solid red; }
That line basically means “give images a red border one pixel thick.”
CSS is not very hard to learn. If you already know a little HTML it will be fun to move things around on the web page by changing your stylesheet. There are many free references to help you get started. You can find helpful links, starter stylesheets and knowledgable people in the forum:
http://wordpress.com/forums/forum.php?id=3We hope you enjoy developing your custom CSS. Here are a few things to keep in mind:
You can not edit the stylesheets of your theme. Your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. The Sandbox theme is recommended for those who would prefer to start from scratch.
CSS comments will be stripped from your stylesheet. */
/* This is a comment. Comments begin with /* and end with */
/*
Things we strip out include:
* HTML code
* @import rules
* expressions
* invalid and unsafe code
* URLs not using the http: protocolThings we encourage include:
* @media blocks!
* sharing your CSS!
* testing in several browsers!
* helping others in the forum!Please use the contact form if you believe there is something wrong with the way the CSS Editor filters your code.
*/ -
Yes, that is just sort of general information text. Nothing to worry about.
When you get ready to start adding your CSS changes, just delete that info text and add your stuff in.
-
-
Sorry I must be going mad, but i want to edit the current CSS code, but it only opens in Dreamweaver, how can i access it without opening dreamweaver so I can make my changes?
-
I would like all the correct code in that box so i can go in and just make my colour changes
-
As I said, you cannot edit the original code. What you have to do is pull out the selectors, and the specific declarations you want to change and then make your changes to what you add to the CSS edit window. Your changes there will override the like declarations in the original CSS. If you paste the entire CSS, it will typically cause issues, even if you select “start from scratch.”
Right click on the original CSS link and then open it in a new browser window or tab. Then you can copy and paste what you need out of that window or tab.
-
-
Sorry another questiom,
How do you know how much of the code section to cut and paste,
for example if i want to change the colour #ffe413 in this text block, how much do i copy across?.rightnav a {
float: right;
background: url(‘images/rightnav.gif’) top right no-repeat;
padding: 5px 47px 8px 0;
}.rightnav a:hover {
color: #ffe413;
border-bottom: 1px dashed;
text-decoration: none; }.leftnav a {
float: left;
background: url(‘images/leftnav.gif’) top left no-repeat;
padding: 5px 0 8px 47px;
}.leftnav a:hover {
color: #ffe413;
border-bottom: 1px dashed;
text-decoration: none; } -
You would just put the selector (class/ID) information and the specific line you are changing such as below.
.rightnav a:hover { color: #ffe413; } .leftnav a:hover { color: #ffe413; } -
I have tried this but it does not seem to be working.
I am tring to change the red in this site:
http://groupgsa.wordpress.com/And have changed all the red coloured code and pasted it back into that box but it does not seem to be working. Are you able to locate the correct location the ‘home’ red button and the titel for the posts are and give me an example of what it would look like?
-
OK, I think the last time I looked, you were using a different theme, or perhaps I got your site mixed up with another. Also, it is always best to identify exactly what element you are wanting to change. I thought about asking, but didn’t. I should have.
What you want is here:
.menu-header ul li.current_page_item > a, .menu-header ul li.current-menu-item > a { background-color:#CC0000; color:#FFFFFF; } -
Thank you for that.
I have deleted all the previous code in that box and replaced it with the code above, and changed the background colour code to my preferred colour, selected ‘add this to the theme’, then ‘preview’ – but it does not seem to change anything?
-
The preview thing doesn’t seem to be working correctly lately. Save the changes and then go directly to your blog instead of using the preview. Also, make sure and refresh the browser window since some browsers will hang onto cached pages tenaciously.
-
Great thank you. That worked!
Are you able to please highlight the code that will change the colour for the post headings that are currently bolded in red?
-
-
It looks like you’ve already figured it out but you don’t need to add in the font-family or other selectors if you’re not changing them, just add in the new colour and it will still work OK.
- The topic ‘Editing Colour of Font’ is closed to new replies.
WordPress.com Forums 