Project

General

Profile

Actions

Support #9144

closed

CSS question

Added by Matt Gold about 6 years ago. Updated about 6 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
WordPress Themes
Target version:
Start date:
2018-01-30
Due date:
% Done:

0%

Estimated time:
Deployment actions:

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.

Actions #1

Updated by Boone Gorges about 6 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.

Actions #2

Updated by Matt Gold about 6 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.

Actions #3

Updated by Boone Gorges about 6 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

Actions #4

Updated by Matt Gold about 6 years ago

Huge thanks, Boone!!

Actions #5

Updated by Boone Gorges about 6 years ago

  • Status changed from Reporter Feedback to Resolved
Actions

Also available in: Atom PDF