WordPress › Support » 1, search font and 2, no underlining in tags, categories

ta100
Member
Posted 2 weeks ago #

This is a two part post. I've spent time researching this first and am completely frustrated, so here they are if anyone has a clue. My website is: rippedmuscledudes.com/rmd The WP theme is "Black Splat WR." Please note that there is no adult material presently on the site for the purpose of this enquiry, but entry is only for adults.

1. The font to type a search (in nav bar) needs to be changed from dark to light. In case it matters, the following is what is in my searchform.php:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="searchbox"/>
<input type="submit" id="searchbutton" value="" />
</div>
</form>

2. I want the list of categories and tags after my post underlined ONLY WHEN HOVERED. Presently they are underlined always.

To make a long story short, this WP theme came with a couple of defaults at the top of the stylesheet that seemed(?) to control most links anywhere in the blog. I want to control the qualities (font, color, text decoration, etc.) of the following separately: links in the post, links at the end of post (categories, tags, comments), and other sections in the blog. Someone tried to help me with this, so beware when looking at my stylesheet.

t31os_
Member
Posted 2 weeks ago #

Fix search..

#searchbox {
	color:#fff!important;
}

Post links, and links below the post..

.post .postContent a {
	// PUT CSS HERE
}
.post .postContent a:hover {
	// PUT CSS HERE
}
.post .categories a {
	// PUT CSS HERE
}
.post .categories a:hover {
	// PUT CSS HERE
}

Info/examples on CSS: http://www.w3schools.com/css/

ta100
Member
Posted 2 weeks ago #

Thanks, t310s, the searchbox code works like a charm!

Also thanks for the w3schools links. I certainly checked it out, has tons of good info! However, I was confused how to ferret out info on w3 about the following problem.

I added the code that you kindly supplied. If I did not delete any of my old code, just added the new, the underlined problem remained. When I kept your new code and deleted the old code below, finally the problem left. (I got what I wanted: links in the post were underlined and the others such as categories, tags and comments were not unless hovered.) But a bigger problem showed up as explained below this code.

#content p a {
color: #ce1c1c;
font-weight: bold;
text-decoration: underline;
} /*links in text of post*/

#content p a:hover {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
} /*links in text of post*/

.postContent a {
color: #ce1c1c;
font-weight: bold;
text-decoration: none;
} /*links in postContent*/

.postContent a:hover {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
} /*links in postContent*/

The problem is that when I click most of the links on the blog (categories, tags, comments, archives, etc.), the links in the pages they go to are the default-like blue and purple colors (previously all red). Whatever color I decide, they can't stay that blue and purple against the black background. So what is the answer to this? I left the css without this code above so you could check the site out.

Thanks for you time.
ta100
Member
Posted 2 weeks ago #

The blue/purple color link thing happens also when I click in the nav bar and go to the pages: about, etc. Also archives, etc.
RVoodoo
Member
Posted 2 weeks ago #

you have to style all aspects of a link to avoid that I believe. link, active, hover, visited,

so for instance #content p a, #content p a:active, #content p a:hover, #content p a:visited
ta100
Member
Posted 2 weeks ago #

OK, RVoodoo. Thanks. I will try that. Will get back later (tonight Eastern Standard Time) and let you know the results.

t31os_
Member
Posted 2 weeks ago #

http://www.w3schools.com/CSS/css_pseudo_classes.asp

Use something like..

#content p a,
#content p a:link,
#content p a:visited,
#content p a:active { //CSS }
#content p a:hover { //CSS }

.postContent a,
.postContent a:link,
.postContent a:visited,
.postContent a:active { //CSS }
.postContent a:hover { //CSS }

ta100
Member
Posted 2 weeks ago #

Did I do this right? The site still looks exactly the same. The code below has been substituted for the code I put in earlier today that you described (t31os_, in your first reply). Again, if you have FF Firebug or something you can check out the site and my css (rippedmuscledudes.com/rmd). Or I can post the entire "content" section of the css here, if you wish. Thanks.

#content p a,
#content p a:link,
#content p a:visited,
#content p a:active { color: #ce1c1c; font-weight: bold; text-decoration: underline; }
#content p a:hover { color: #ffffff; font-weight: bold; text-decoration: underline; }

.postContent a,
.postContent a:link,
.postContent a:visited,
.postContent a:active { color: #ce1c1c; font-weight: bold; text-decoration: none; }
.postContent a:hover { color: #ffffff; font-weight: bold; text-decoration: underline; }
ta100
Member
Posted 2 weeks ago #

OK....the above is not exactly correct. The site looks now as it was originally.

The above code is exactly what I put into the css. It had the same result, leaving the purple/blue links what I said. I am sure I updated the css file after putting in the new code, but maybe I didn't. Then I looked at the "anchor pseudo classes" example on the w3shools link. I noticed no space after the color in the brackets, so I deleted the spaces before the last brackets above. This made the site go back to having all underlines, where I was to start.

So I put back the code exactly as it is above. No change. Then I made no spaces after each attribute such as the following example. { color:#ce1c1c; font-weight:bold; text-decoration:underline; }

Nothing I tried is working. I don't know if I did what you said correctly. So the site is back to how it was originally, with the postContent being underlined even when the cursor isn't hovering.
ta100
Member
Posted 2 weeks ago #
RVoodoo
Member
Posted 2 weeks ago #

I just noticed there is no link to your site....could help better maybe with a link so we can look at your css
t31os_
Member
Posted 2 weeks ago #
There would be an underline, look at the code (this is the style that's applying - you can see this clearly in firebug).
```
#content p a,
#content p a:link,
#content p a:visited,
#content p a:active { color:#ce1c1c; font-weight:bold; text-decoration:underline; }
```
Set text decoration to..
```
text-decoration:none;
```
As far as i can see, the CSS is applying as it should.. (red when on link, white when hover). You just need to update the mentioned bit above..

@ RVoodoo - It's in the opening post.
RVoodoo
Member
Posted 2 weeks ago #

ooops! It's early...I just noticed the link, I remember this thread now! I can't go to that link from work (I know there is no content, but I'm not risking it)
ta100
Member
Posted 2 weeks ago #

For convenience:
site URL: http://rippedmuscledudes.com/rmd
You probably know this, a link that shows my full css should be located under a tab in your browser (for Mac, "view" then "page source") when you are at the site's homepage.

Actually I do not use FF Firebug, compatibility issue with plugin and other things.

I DO want the the links in the posts always underlined, even when not hovered. It's the links after the post (categories, tags, comments) that I want underlined ONLY when hovered. So I set it as you see in my css and shown below:

.postContent a:active { color:#ce1c1c; font-weight:bold; text-decoration:none; }
.postContent a:hover { color:#ffffff; font-weight:bold; text-decoration:underline; }

So at this point the problem remains that the links after the post (presumably called "postContent") is always underlined, when it should only be underlined when hovered.

I had dreams last night about this, lol. Ugh. Thanks for helping me on this.
ta100
Member
Posted 2 weeks ago #

I understand, RVoodoo, and appreciate your time. If you can take a look when you get home from work, that'd be cool. :) Thanks.
ta100
Member
Posted 2 weeks ago #

BTW, I did try putting the following, but it took away the underline I want in the links in the post, as discussed above.

#content p a:active { color:#ce1c1c; font-weight:bold; text-decoration:none; }
t31os_
Member
Posted 2 weeks ago #
You're not targeting those links with the CSS, see my earlier reply.
RE: This code..
```
.post .categories a {
	// PUT CSS HERE
}
.post .categories a:hover {
	// PUT CSS HERE
}
```
Should target the links in the lower end of the post, categories, tags, etc...

See if adding the above (with your CSS in obviously) helps.
ta100
Member
Posted 2 weeks ago #

No, it didn't.

So I put in all the codes I was given in this thread, so people can see them. What's right or wrong...am now clueless.

alchymyth
Member
Posted 2 weeks ago #

I tried in firefox, and adding '!important' to the styles seems to force the changes you want to achieve: (I added them at the end of style.css)

.categories a:link, .categories a:active, .categories a:visited {text-decoration:none!important;}
.categories a:hover {text-decoration:underline!important;}

.tags a:link, .tags a:active, .tags a:visited {text-decoration:none!important;}
.tags a:hover {text-decoration:underline!important;}

good luck ;-)

ta100
Member
Posted 2 weeks ago #

Thanks, alchymyth. I did get it to work, too, with your directions. However, it was only on the homepage, and not consistent when clicking on archives and other links on the site. While this is farther than I got in this so far, I decided to abandon this and keep all the links underlined throughout the blog for consistency. I do appreciate your time and assistance!

Reply

You must log in to post.

WordPress.org

Forums

1, search font and 2, no underlining in tags, categories (20 posts)

Reply

About this Topic

Tags

Code is Poetry