I Need Some CSS Help...

I need a CSS guru to lend me a hand.

I have a blog that I've just recently started up. I am using a slightly modified version of the Lifestyle theme from Revolution 2. A sample of the theme can be found here. The CSS file can be found here.

I like the color palette of the theme. However, I would like the color of the links in the posts to be the normal #0000FF. I've tried creating a separate class for this and inserting it in various areas of the template. However, so far I haven't had any luck.

Can someone take a peek at the source of that template and tell me how I would do this?

Thanks!

 

In your stylesheet "style.css" change the following to (line 42)"

/************************************************
*	Hyperlinks									*
************************************************/

a, a:visited {
[B]	color: #0000ff;[/B]
	text-decoration: none;
	}

Code (markup):

That will change the links to the blue color.

 

I understand how to change the link color of all links. However, what I am needed is to only change the color of the links within the individual posts themselves. All sidebar, comment and footer links should stay the color that they currently are.

 

I just changed one of the links in the blog as follows:
On the end of the style sheet I added the following code;

 .inbloglinks {
	color: #0000FF;}

Code (markup):

By the hyperlink I added

<a class="inbloglinks" href="http://www.revolutiontwo.com/demo/lifestyle/category/beauty" 
                                rel="category tag" title="View all posts in Beauty">Beauty</a>,

Code (markup):

And it show only this link blue.

Hope this is what you are looking for.

 

you need to put this in your css file because the class you are designating ".inbloglinks", needs to also be designated as a link--you have simply designated a color for plain text with no link.


.inbloglinks, .inbloglinks a {
color: #0000FF;}

--try that

 

I gave that a shot and no luck. It seems that the color given in the hyperlinks section is overriding the new class I've entered.

In the CSS file I have

/************************************************
*	Content 					     		    * 
************************************************/

#content {
	width: 940px;
	margin: 0px auto 0px;
	padding: 10px 0px 0px 0px;
	line-height: 18px;
	}

.inbloglinks, .inbloglinks a {
        color: #0000FF;
        }

Code (markup):

In the index.php I have

                    <div id="post">
                                <div id="inbloglinks">
			<?php the_content(__('Read more'));?><div style="clear:both;"></div>
			        </div>
                                </div>

Code (markup):

Am I missing something?

 

.class{}
#uniqueid{}

<div id="uniqueid">Use this only once</div>
<div class="class">Use this multiple times</div>
<div class="class">Use this multiple times</div>


Don't confuse classses and id's.

 

Also to get the links changed it is best to change the class of the link you want to change. This works best.

However the area you want the style to apply to is called "postarea"

So adding this to the stylesheet should solve it for you, if you dont want to put a class to the individual links:

.postarea  a,.postarea  a:vistited {
	color: #0000FF;
	
}

Code (markup):

 

Still no dice.

Removed .inbloglinks class in the CSS file and the call in the index.php

Added

.postarea {
	background: #FFFFFF url(images/homepagetop.gif) top no-repeat;
	float: left;
	width: 590px;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	border: 1px solid #DDDDDD;
	}

.postarea  a, .postarea  a:vistited {
	color: #0000FF;
	}

Code (markup):

It seems like this section at the top of the CSS file is overriding everything else.

/************************************************
*	Hyperlinks									*
************************************************/

a, a:visited {
	color: #7A3254;
	text-decoration: none;
	}
	
a:hover {
	color: #495D5C;
	text-decoration: underline;
	}

Code (markup):

 

I have copied the code into my developer and it works in IE, however I just checked it seems not to work in Firefox let me have a look at it. I presume you are using Firefox as browser.

 

Do the following:
in the hyperlink section of your css stylesheet add

p a,p a:visited{
	
	color:#0000ff;
}

Code (markup):

This shows by me the blue color for the posts in FF and IE and leaves all the site links in the original color.

Let me know if this worked for you.

 

Bingo! That did it.

I assume that this will change the link color of anything encased in <p> tags?

If so, the only issue I have is that the author, tags and comment link at the top of the post are encased in <p> tags as are the comments at the end of the post. If possible I'd rather leave these the default link color and only have the links within the post itself #0000FF.

If this isn't possible without rewriting large pieces of code, then no worries. I'm very grateful for your help so far.

+Rep!

 

If that is the case just add a class to those links like

.speciallink a, .speciallink a:visited
{
color:#495D5C;
}

Code (markup):

<a class="speciallink" href="#">author</a>

HTML:

That should keep the right color.

 

I took your suggestion and changed it slightly.

I needed the tags, author, date and comments to be the default color. To do this, I created a special class for each section.

.date a, .date a:visited {
        color: #7A3254;
	text-decoration: none;
	}

.postmeta a, .postmeta a:visited {
        color: #7A3254;
	text-decoration: none;
	}

.comments a, .comments a:visited {
        color: #7A3254;
	text-decoration: none;
	}

Code (markup):

Works perfectly. The page is exactly how I wanted it.

Thanks again for your help.

 

Your welcome I am glad that you got it finally all worked out.