CSS for Hatch Heading Colours
-
Hi there – since recently upgrading to Hatch and importing in my custom css from my old theme, the “Menu” heading on my front page and the two headings I am using on my The Recipe File page have turned an unreadable, washed out yellow. Can anyone help me code for a better colour please? I use grey as my main font colours so wouldn’t mind it being that or something else to compliment the rest of my blog. It’s almost impossible to see it!
The blog I need help with is: (visible only to logged in users)
-
Hello,
In your CSS editor, look for this:
h1 { color: #ffc; }Change it to:
h1 { color: #888; } -
Hi daphne – unfortunately that didn’t make any difference. The headings were still yellow on both my mobile and laptop. Thanks for helping though!
-
Daphne’s reply is correct. If it didn’t work, then you mistyped something or viewed a cached page of your blog.
But what do you mean by “importing in my custom css from my old theme”? Apparently you copypasted your previous customizations into the CSS editor after you switched to the new theme. You need to delete everything and start customizing the new theme. Each theme has a different structure and different selectors, so most CSS is theme specific: many of the changes designed for one theme will have no effect or will produce erratic results when used on a different theme.
-
Ok @justpi – I hadn’t appreciated that, I was under the impression I could take my code with me between themes. Ironically apart from this yellow header font thing it is actually working how I would like it to.
That being said, I would really like to know how I find out what code to use in Hatch now as I plan on keeping this theme for the foreseeable future. I have no training in this sort of thing and would love to learn it as whilst interacting in the forums is a good thing, I don’t want to have to ask every last time I want to change some small part of my blog. Learned colleagues such as you two must be hanging your heads in despair at folk like me! Is there somewhere I can read up on this or does WordPress have info on how to code for each theme if they are, as you say, theme-specific codes?
Thank you both so much.
-
You’re welcome.
Learned colleagues such as you two must be hanging your heads in despair at folk like me!
Not at all, because nobody is born “learned”. I think you should read the intro to this article of mine:
http://wpbtips.wordpress.com/2012/02/05/introduction-to-html-for-wordpress-com-users/apart from this yellow header font thing it is actually working how I would like it to.
That’s because a) the codes that work (mainly link colors) apply to many elements b) some of the codes that don’t work fortunately don’t work.
This works (for h1 headings in the content of pages and posts only):h1 { color: #FFFFCC; }These work partially:
.entry-title a:focus, .entry-title a:active, .entry-title a:hover { color: #EF3BDE; } a, .entry-title, .entry-title a, .page-link a:link, .page-link a:visited, #footer #colophon a { color: #EF77E1; } a:focus, a:active, a:hover, .entry-title a:focus, .entry-title a:active, .entry-title a:hover, .page-link a:active, .page-link a:hover, #footer #colophon a:hover { color: #EF3BDE; }The rest don’t work at all.
If you plan on keeping Hatch, you should really delete everything (after you save it in a text file for reference) and start over.
I would really like to know how I find out what code to use in Hatch
First step is to be able to find the selectors for the elements you wish to target. To do this, you need to learn to use the Inspect Element option of your browser or a developer extension such as Firebug in Firefox. This will also show you the original properties and values that are used for each element.
-
In addition to what justpi said, the Inspect Element can be found when you right click.
If you’re using Safari, you will have to turn that option on.
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/ -
You two are fantastic! It was painfully slow but I’ve worked through your tutorials making notes as I go @justpi (from your blog as linked above) and I’ve managed to enable the Inspect Element as you said @daphnec2002. Flippin’ heck, I’ll be teaching my computer studies graduate hubby a thing or two about CSS soon lol ;)
It’s taken hours to get my head around it and it’s late and there’s work in the morning but I’ll be back tomorrow and will actually put what I’ve learnt so far to the test to see if I can make some customisations. Now I understand some of the lingo and know where to look to find what I need, I think I will be alright.
One last question – do I need to keep the original theme CSS or should I uncheck that box then add my own code, say to change the colour of headers as you roll over them to pink? Thanks guys x
-
You need to keep the original CSS, and add your changes in the CSS editor. The option “Don’t use the theme’s original CSS” is for real experts who want to wipe out all the styling of the theme and start from scratch. If you check that option, your blog will look like this (and you’ll have to style everything):
http://sandbox162demo.wordpress.com/
- The topic ‘CSS for Hatch Heading Colours’ is closed to new replies.
WordPress.com Forums 