Chateau CSS Elements
-
I’ve been using custom CSS to change the colour and size of various headings throughout my blog – nothing major, just making things a few things show up big and orange!
(It looks better than it sounds).
Anyway, there are three more things I would like to change, but I don’t know the names of the elements that I need to specify my non-standard font-size and color, and occasionally font-family etc. attributes.
(I’m new to CSS, so my terminology is probably wrong…)
Anyway. Does anyone familiar with the Chateau theme know which element controls the following (and indeed if it’s possible to alter these things at all?):
* 1. On all blog entries: the color of the big post date stamp in the upper top left hand corner?
For example: the “10 Saturday 2009” on this page – I’ve got as far as changing the typeface, but no color attribute makes any difference:
* 2. On all entries and pages: the “headers” for each comment ‘below the fold’ at the bottom of the page.
For example, I’d like to make the text “Robb Klein said” next to the visitor’s Gravatar display in, you guessed it, orange:
3. Finally, in archives: the date below every post title, which is currently showing up in a gray, serif font:
http://motownjunkies.co.uk/category/artists/herman-griffin/
(I want to make it sans serif and, yes, orange – but don’t know what to mess around with…)
All assistance gratefully received!
Nixon
-
I used Google search. Does this help?
https://en.forums.wordpress.com/topic/how-to-change-font-and-size-of-postpage-titles-in-chateau?replies=7#post-872133 -
Not really. It might assist with question 3 if someone could tell me which of the many selectors (see, I’m learning!) listed in that post controls the specific aspect of the theme I’m talking about (I can’t just paste the entire list as I’ve already modified a few of the others and don’t want to override my changes), but it doesn’t answer questions 1 and 2.
Thanks though!
-
Assuming you want the same orange for all of them:
.hentry .post-date *, .comment-author span, .comment-author span a, .comment-author em, #more-posts-inner span { color: #DB6600; }If you’re using Firefox, you’ll help yourself a lot if you install and learn to use the Firebug add-on.
-
Thanks justpi, it’s very much appreciated.
Very illuminating too – apart from fixing my exact problem, it’s given me more of a clue how things work generally. (I didn’t realise how the syntax worked in terms of identifying each individual “span” I needed – I knew literally nothing about CSS before coming here; I learned HTML 4 in college fifteen years ago and that’s where my development stopped).
Thanks for the pointers (and the code)!
-
Hello,
thanks to this (and some more) discussion here I was already able to answer some of my questions – just like the date stamp.
But there are still two things – both correlate with the menu.
1) & most important:
If I click on a secondary menu, the color of the primary menu item changes to the original dark red that comes with the theme
(see here: http://soitwasweekend.wordpress.com/color-inspiration/ – the “Projects & …” on top is red now…)2) I would like to get rid of the lines on top of bottom of the menu items. Is there a way?
Any help is appreciated, thanks!
-
Oh, one more thing I’d like to change:
Theres always a little cross at any widget-headline. Can I remove that or at least change to something else?
Thanks!
-
@nixonradio: You’re welcome!
For no.1 (replace 123456 with the hex for the color you prefer):
#menu .current-menu-parent > a { color: #123456; }For no.2:
#menu .current-menu-parent > a, #menu .current_page_ancestor > a, #menu .current-menu-item > a { border: none; }Actually the “little cross” isn’t a cross, it’s a clover (the clubs card sign). Anyway, to remove it:
.sidebar-widget h1.widget-title:before { display: none; }And as I said to nixonradio, make friends with Firebug!
-
-
Brilliant!
So… really sorry to be a pain, and tack yet another question on here… I’m trying to work this out via Firebug (which is super helpful, thanks), but coming up short.
Is there a similar way to remove the tilde (~) that automatically inserts itself before the main header description of the site (in main-title between site-title and site-description – on my site, it’s the bit in orange that says “because it’s what’s in the grooves that counts”)
I’ve tried:
#main-title #site-description:before {
display: none;
}…but that doesn’t seem to do anything, nor does specifying “h2:before”… I suspect I’m being fairly stupid.
-
Ah, you too wanted to get rid of the clover!
If you examine the CSS of the widget titles you’ll see that the original code includes this:
.sidebar-widget h1.widget-title:before { content: "♣"; display: inline; margin: 0 3px; }But if you examine the CSS of the tagline you’ll see that there’s no such thing for the tilde: the tilde isn’t added via the “before” trick, so you can’t remove it the way I showed for the clover. The tilde comes from the underlying files of the theme, so you cannot target it. What you can do is hide the actual tagline and add a substitute:
#main-title #site-title:after { color: #DB6600; content: "your tagline text here"; font-size: 70%; margin-left: 0.9em; } #main-title #site-description { display: none; } -
-
I just found this while trying to figure out how to hide the tags in Chateau. Does anyone know?
-
@zharptitsa, would you mind making a separate help request in the future if your question is unrelated to the original question in the thread?
Because of the way the HTML for post meta is structured in the Chateau theme, there isn’t a really great way to hide the tags. You can hide the tag links separately, but it leaves the separators. Here is an example:
.post-info p:first-child > a { display: none; }Or you can remove the entire post meta line:
.post-info p:first-child { display: none; }
- The topic ‘Chateau CSS Elements’ is closed to new replies.
WordPress.com Forums 