Editing CSS for Fusion theme
-
Hi, I’m trying to find some CSS coding (as have no experience of using this) to change
1. the background of my header from dark grey to white
2. The page buttons from grey to the same light green as my header image ( or similar).Any help greatly apprieciated.
Thanks.The blog I need help with is: (visible only to logged in users)
-
The two gradients at the top use an advanced CSS3 trick and are all controlled together. Do you want to get rid of the entire grey area at the top including the grey gradient behind the tagline, or just get rid of the gradient behind the header image?
-
-
OK, the tag line is pretty much going to disappear and colors will have to be changed. This will get rid of the gradient backgrounds in the header area. Note after taking away the gradient, that the page tabs, with their squared bottoms, look like they are hanging in mid air. The second line in the below adds a 1px bottom border that gives them something to sit on.
#page-wrap1 { background: none repeat scroll 0 0 transparent; border-bottom:1px solid #000000; }An alternate to the bottom border above is to round bottom of the tabs to look like the top which sort of lets them exist not needing something to sit on. I added just a touch of bottom padding to bring them up in alignment with the bottom of your header image.
#tabs a { -moz-border-radius: 8px 8px 8px 8px; } #tabs { padding-bottom:4px; }The following is where the tagline text is styled. Removing the text shadow (text-shadow:none;) is one way to clean it up. The other way is to change the color of the text itself (color declaration) to something different such as #333333.
#topnav { color: #BBBBBB; padding-top: 20px; text-shadow: 0 -1px 1px #222222; } -
-
-
Ok, I have a question on editing this theme as well. The development site is usasfdance.net, if you look at the tabs you will see that they are the dark grey rounded corner style that is consistent with the theme. Due to our background image there is a light grey box showing behind the dark tabs. Is there any way to get rid of that square tab showing behind the rounded tab?
I know HTML inside and out, and CSS at about a level 4 out of 10 (I have not kept up with all the changes through the years), but every attempt I’ve made to edit the style sheet does not give me the results I expect. (not simply not working, but doing things that just doesn’t seem to make sense).
We will make the upgrade to be able to save the CSS edits once I know that this can work. Any tips, code suggestions and help will be very appreciated! Thanks in advance! :)
-
@dancecoach, It appears as if you found the answer to this as I see no grey box behind the tabs.
-
Nope, I still have them on my machine. :( I’m using Windows 7 IE 8. I will go check some different browsers now to see if it is an IE issue.
-
If it is an IE issue, then I don’t know if I will be able to figure it out since I’m on Mac and don’t have IE to check with. If it is an IE issue, I’ll do my best though, but it will likely take some back and forth as I suggest things and then you try them to see if the issue resolves.
-
Thanks! Here’s a link to a screen shot on IE: http://usasfdance.files.wordpress.com/2010/12/screen.jpg
Both Internet Explorer and Chrome show the box like that. Safari does not (even on the pc). I have not tested on firefox because I don’t currently have that installed.
I’m guessing it has to do with the #aaa 1 px shadow listed below . . . but I’ve tried to edit the code in various ways with no luck. I’m using the preview css edit feature since we haven’t upgraded yet . . and I’m finding that it doesn’t always refresh correctly . . . which makes it even harder to figure out what may or may not be working. :(
#tabs a {
float: left;
background: url(images/tab.png) repeat-x;
color: #0470a0;
padding: 4px 12px 6px;
margin-right: 8px;
text-decoration: none;
color: #cfcfcf;
cursor: pointer; /* IE 7 bug-fix */
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
-moz-box-shadow: inset 0 1px 1px #aaa;
-webkit-box-shadow: inset 0 1px 1px #aaa;
box-shadow: inset 0 1px 1px #aaa;
} -
Temporarily remove these three lines from the above and see what happens.
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;Chrome, IE9, Safari, Firefox and Opera should work fine with the shadows and border radius CSS3 attributes, but IE7 and IE8 have absolutely no knowledge of any CSS3 stuff.
-
Oops, sorry, don’t REMOVE them, modify them as shown (might want to copy them out and put them in a plain text file for safe keeping while you try it).
-
Oddly enough, that took the entire tab away. :( Here is the new screen shot: http://usasfdance.files.wordpress.com/2010/12/screen2.jpg
and here is the final code after I made your suggested edit. (If it’s just IE 8 and chrome then I guess it’s not the end of the world if we can’t find a fix, but I’m a perfectionist and I’ve been fighting with this for about a week now before I gave up and asked for help) :)
#tabs a {
float: left;
background: url(images/tab.png) repeat-x;
color: #0470a0;
padding: 4px 12px 6px;
margin-right: 8px;
text-decoration: none;
color: #cfcfcf;
cursor: pointer; /* IE 7 bug-fix */
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
} -
Also please remember that you won’t see any of my edits in your browser because I’m just using the preview mode at this point. We’re going to get the upgrade hopefully today.
-
You know, not having IE to do testing in makes it very difficult. I can’t really think of. In the above code though you have color: defined twice. Try doing a “none” on the border stuff as well and see what happens. I don’t think that is going to fix it, but the issues I think are in the CSS3 declarations.
-
Sorry i went away for so long, got really busy and haven’t had the time to get back to this. We have done the upgrade so my edits I try do at least save now. :)
I noticed the two colors listed as well, but that is how it is written in the theme so I left it alone.
I have a few other things to figure out tonight, but I’ll try to test more with your suggestions as soon as I can. :)
Thanks for all of your help, I’ll keep you posted!
- The topic ‘Editing CSS for Fusion theme’ is closed to new replies.
WordPress.com Forums 
