Support #9144
closedCSS question
0%
Description
Hi Boone,
I have a CSS question for you. I'm trying to change the size of the site title on this blog -- cuny.is/approachingdh . When highlight the blog title, I see it has a css style attached to tempo-site-title
The theme has a Customize CSS module in the Customize menu; when I enter the following, though, the size of the site title does not change at all.
.tempo-site-title {font-size: 4em;}
Sorry to ask this, but I've been dealing with this issue on a few themes and I would love any advice you might have.
Updated by Boone Gorges almost 7 years ago
- Status changed from Assigned to Reporter Feedback
The theme's CSS targets the header with a very specific selector, which you'll need to match in order for your style to take precedence:
header.tempo-header div.tempo-topper div.tempo-site-identity a.tempo-site-title {
font-size: 4em;
}
You'll see that this specific change looks quite bad, but you should be able to figure out something that looks decent with some futzing.
Updated by Matt Gold almost 7 years ago
Thanks so much, Boone. Since I had a similar issue with another site (where I could not change the size of a logo in the header), can you please give me some insight into your process for figuring this out? Many thanks in advance for your tutelage.
Updated by Boone Gorges almost 7 years ago
1. Right-click the element
2. Click 'Inspect Element' or 'Inspect' in the contextual menu
3. You should be looking at the 'Elements' tab, with 'Styles' selected in the right-hand panel. If not, select these.
4. Style declarations are ordered so that the more specific ones are at the top. Find the first reference to the property you want to override (font-size, in this case) and look at the selector used. You need to be at least this specific in your own style to override this. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Updated by Boone Gorges almost 7 years ago
- Status changed from Reporter Feedback to Resolved