can't customize theme header CSS

flipside1969 · Member · Dec 28, 2013 at 7:03 pm
Copy link

Add topic to favorites
Hi. I need to modify the CSS for the header’s site-title in my wordpress.com hosted site. I have downloaded the theme’s stylesheet from the theme’s home page to use as starting point but the code I enter doesn’t seem to work in the customize area. Some modifications work but most don’t do anything.

I have the premium upgrade so I can make modifications but can’t modify the header’s CSS. Suggestions?

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 28, 2013 at 8:15 pm
Copy link
What exactly are you wanting to change in the header area?
flipside1969 · Member · Dec 28, 2013 at 8:20 pm
Copy link
Actually, I would like to add a background image to the header. A logo.
flipside1969 · Member · Dec 28, 2013 at 8:45 pm
Copy link
But there are other modifications I can’t make also. Like just changing the margin-bottom on h1 and h2 elements.

H1 {margin-bottom:-110px;}

This doesn’t do anything.

Thanks for the help.
thesacredpath · Member · Dec 30, 2013 at 12:50 am
Copy link
There are still a lot of questions and variables, so the following is guessing two possible scenarios.

1. If you wish to keep the text site title and add a logo to the left or right of it: The background image can be added to site title area with the following CSS. You would need to create and upload your logo to your media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks in the background declaration. Additional adjustments will almost certainly need to be made to spacing and padding on other elements to make room for the logo, and the header area of Splendio doesn’t have a lot of room. I would suggest a logo image no larger than 140px wide by 140px high.
```
#masthead {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#branding hgroup .site-title {
    width: 450px;
    float: right;
}
```
2. If you wish to replace the site title with an image, then you can use the following which also hides the site title text, but leaves the site description text. The area you have is about 600px wide by 120px high.
```
#branding hgroup {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#branding hgroup .site-title a, #branding hgroup .site-title a:visited, #branding hgroup .site-title a:hover {
    color: rgba(0, 0, 0, 0) !important;
}
```
Which h1 and h2 elements? There may be several places where those elements have different margins and styling. Not all h1 and h2 elements are alike. Also, in the code you referenced, you have a capital “H” and all HTML tags should be lower case.
thesacredpath · Member · Dec 30, 2013 at 12:53 am
Copy link
One other thing I’ll offer in case you are not familiar with it is our support document on How to Find Your Theme’s CSS using the built in web inspector tools in your browser. There are 4 short screencasts to get people started using them to find their CSS and I find them an invaluable tool.

No items found.