change my Post Title and hover text default colors
-
I would like to change my Post Title and hover text default colors, from blue and gold.
Please view wipoutreach.wordpress.comThe blog I need help with is: (visible only to logged in users)
-
The Superhero style sheet is found here > https://wpcom-themes.svn.automattic.com/superhero/style.css
For your browser’s developer tools see here > http://en.support.wordpress.com/custom-design/editing-css/#css-help
Where is the theme CSS and how do I edit it? http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/
-
Thanks timethief, that info is great, I tried it, but to no avail. I am not CSS savvy and will needto study CSS coding. If you don’t mind please give me the CSS code entry I need ti input the changes.
Also,I tried to right align a list-item my homepage navigation menu trying this code, }
#masthead hgroup {
float: left;
width: 20%;}
but, I don’t think it’s the right one. Can you help me with that code tooPlease view wipoutreach.wordpress.com
Thanks
-
To change the hover color you should just need this:
a:hover {color: #feb718;}
And for the Post Title, this should work:
.entry-title {color: #feb718:}
‘feb718’ is the hex code for a gold color I threw in there. -
-
As for right-aligning the list items in the main menu:
#menu-main li ul li {text-align: right;}
should do it. I’m not able to test that for you right now, but give it a shot. -
I’m greatful for the three codes I need; but none of the changes take. Feel free to post them in and se what happens for you or maybe I’m missing a step. Like I said, I’m just not CSS savvy. HELP PLEASE.
a:hover {color: #feb718;}
.entry-title {color: #feb718:}
#menu-main li ul li {text-align: right;} -
This might fix the first two:
a:hover {color: gold !important;}
.entry-title a {color: gold;}
I changed the color to ‘gold’ for simplicity. -
-
OMG, I’m so close, but no not yet.
a:hover {color: gold !important;}_ does change the Post Title but renders a warning for the use of important.
.entry-title a {color: gold;}_only affects my Slider Captions rather than the Post Title. I need the Post Title to be more readable.
.sub-menu li {text-align: right;}_ does not make any changes to the navigation menu at all.
I originally tried the code below and got almost perfect results, except the home page does not line up (may be the Nav banner height does not permit.)
.main-navigation {
display: block;
float: right;
width: 25%;} -
Instead of this:
.main-navigation { display: block; float: right; width: 25%; }Try this:
.main-navigation li { display: block; }To give the header a little more space after that, try adding this:
#masthead { max-height: 180px; } -
but renders a warning for the use of important.
That’s fine if it works and does what you want. It’s best not to use “!important” if you can avoid it, and using it too much can get pretty confusing/messy, but if you just use it where it’s needed, that’s okay.
-
-
Ok I know this should be simple, but I have had no luck with changing my Post TITLE and hover text with the codes I’ve used.
.entry-title a {color: gold;} _does not work on Post title
-
Concerning my Post Title default Colors_I am having difficulty clarifying which CSS code refers to Homepage Post Titles (previews). I think they may fall under sticky Post text, but after entering the code changes, I am seeing 4 colors in all. The original default text and hover, plus my edited Title and hover text colors.
How do I clean this up or find the correct code?
Please see Homepage and hover over Post Titles, only 4 are sticky(s) Post.
http://wipoutreach.wordpress.com/ -
I am having difficulty clarifying which CSS code refers to Homepage Post Titles (previews)
It helps very much to refer to a specific example.
Looking at http://wipoutreach.wordpress.com/ the first title I see there says, “INVEST IN YOURSELF.” Because that title is a sticky post, it has a CSS selector that is stronger so that’s why another, more general CSS example may not have worked for you there.
To figure out which selector to use, you can right-click on the element on the page where you want to change it and select the “Inspect Element” option. That should pull up a panel where you can see the HTML for what you clicked on as well as all of the CSS that applies to it. So, let’s look at the titles on the http://wipoutreach.wordpress.com/ homepage. I right clicked on one of the titles, and this is the HTML that appears for it:
<h1 class="entry-title"><a href="http://wipoutreach.wordpress.com/2013/04/01/invest-in-yourself/" rel="bookmark">INVEST IN YOURSELF</a></h1>Normally, that means you could use “.entry-title a” to target that title. But if you look at the CSS on the right, you’ll see that because these specific posts are sticky posts, they have different style rules. Here is the CSS that I see in the web inspector if I click on the “a” element:
.sticky .entry-title a { color: #c93; }So, what you can do is copy that rule and change the color code to adjust the color for sticky post titles on your homepage.
You should check out this tutorial about selectors!
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors -
Yes I found text and sticky codes in my theme CSS and changed the default color to #c93.
The problem becomes obvious on http://wipoutreach.wordpress.com/page/2/ (LOL4J post), the Post Title reflects 4 colors when scanning you mouse over the page. The default text and hover appear as well as my custom color edits. In other words, instaed of replacing or overiding the default colors, it added to them.
I would like to disable the default blue and red colors, and keep the gold title and white hover.
-
Oh by the way I am bookmarking your recommendations for CSS tips to study, but it might take me some time to catch on.
Thanks for the links.
-
Looks like you have added a few different rules for the same thing (and a couple really strange :hover rules too!). You really should read a CSS tutorial on selectors sooner rather than later because I think it will actually help you save time. :)
Here’s one that explains it in Star Wars terms (which is kind of totally awesome).
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlSo, let’s look at the “LOL 4U” title on http://wipoutreach.wordpress.com/page/2/
I found a few rules related to that content in your custom CSS. Here is one of them:
.hentry:hover .entry-title a:hover { color: #fff }That rule means that if you hover over the post (.hentry) and also hover over a link that’s a title (the http://wipoutreach.wordpress.com/page/2/ page is an example where that happens), then the font color will turn white. One of the “:hover”s isn’t needed. What were you trying to do with that rule?
Here’s another one:
.hentry:hover .entry-title { color: #fff }That rule will change the title to white as soon as you hover over the body of the post. Did you mean to do that?
I think what has happened here is that you asked about title color in a few different places, maybe got some conflicting advice, tried all the things, it wasn’t clear at the beginning you wanted to include sticky post colors, then you started adding a bunch of CSS and it’s gotten a bit mixed up.
Perhaps you should step back a little and write out your end goal again now that you know a bit more (i.e. the sticky post issue)? You should also remove all of the past title color related CSS you’ve added if you think it might be conflicting with the new CSS rules you want to try (which it seems like it is in this case).
- The topic ‘change my Post Title and hover text default colors’ is closed to new replies.
WordPress.com Forums 