Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Excerpts, Read more, Pagination (http://forum.bytesforall.com/forumdisplay.php?f=20)
-   -   [SOLVED] How to change color of the "Read More" link (http://forum.bytesforall.com/showthread.php?t=17710)

adrian29630 May 31, 2012 09:37 PM

[SOLVED] How to change color of the "Read More" link
 
Hi

I have set up the "Read More" function as set out in the configure excerpts section but would like to change the color of the words Read more. I have tried this <a href="%permalink% "><p><style="color: red">Read more</a></p> as this worked to change color elsewhere but it doesn't here. I also tried adding a ; after red but that made no difference either.

This link is inside a Category Posts widget. I also tried a css insert "a.more-link { color: red; !important } which I found in Wordpress help but that doesn't work either.

Site is http://repdomproperties.com/visitjd/
Wordpress 3.3.2
Atahualpa 3.7.6

Thanks

lmilesw May 31, 2012 10:32 PM

The style statement is in the wrong place
HTML Code:

<a href="%permalink%"><p style="color: red">Read more</a></p>

adrian29630 Jun 1, 2012 10:52 AM

Thank you for the reply. I see I included a > after the P in the example I sent but had tried it without that previously but it stll did not work. It had worked in this format in this situation (<a href="http://repdomproperties.com/visitjd/event-calendar"> <strong> <center><p style="color:red">Add Your Event Here</strong></center></p></a>) so I assumed it should work here also.

Perhaps you could let me know where the right place is?

Thanks

A P.S. It does work and changes the color to red in IE but not in Firefox or Chrome or Safari? Any suggestions?

lmilesw Jun 1, 2012 11:51 AM

As I think about it I think a better solution would be to replace what you have with the following.
HTML Code:

<div class="redlink"><a href="%permalink%">Read more</a></div>
Then put the following in the CSS Inserts box
HTML Code:

.redlink a {
color: red;
}

And if you wanted to have a hover style for the link use something like the following tweaking as desired.
HTML Code:

.redlink a:hover {
text-decoration: underline;
}


adrian29630 Jun 1, 2012 12:28 PM

Regrettably that didn't work. It stripped the color from IE as well and removed the linking - I guess because of it being in a <div> It's very odd the original works in IE and not other browsers. Usually it's the other way round which is why I use Firefox for web design work.

Any other suggestions would be very welcome

Thanks

lmilesw Jun 1, 2012 07:34 PM

I just tested that exact code and it worked fine for me. Where are you putting the code.

adrian29630 Jun 2, 2012 11:36 AM

The <div> code in the Configure Excerpts in "Custom Read more" and the CSS in the CSS inserts box. I copied and pasted to ensure I didn't make an error in coping your code. Strangely I have just retried it again and although it still doesn't change the color, and removes it in IE the link does now work on all browsers, which it didn't the first time I tried it! I am wondering if there is something in the widget that is over-riding the code?

juggledad Jun 2, 2012 11:42 AM

The HTML in your widget is improper. There is a <p...> without a closing </p>(this probably causes teh IE issue)
and why are you doing instream styling instead of using CSS?
In addition change the CSS to
HTML Code:

div.redlink a {
color: red !important;
}

what did you use to create the sidebar widget

adrian29630 Jun 2, 2012 12:17 PM

In effect it is every page because the widget is on every page. It is a Category Posts widget and I have also just realized that when it pulls the Category Title it strips out the color of that as well. Not that that in itself is an issue but it makes me wonder if it is something in the code for the widget itself which is over-riding the code to change the color of the Read more link. Although why the normal code <p style="color: red"> works in IE9 but not in any other browser is a bit of a mystery. Site is http://repdomproperties.com/visitjd/

Thanks for all your time and efforts with this by the way

juggledad Jun 2, 2012 12:26 PM

exactly what widget is is? can you point to the url where you got the widget? and what version are you using?

adrian29630 Jun 2, 2012 12:58 PM

The widget is called Category Posts Widget v 3.3 available via Wordpress Plugins. However your revised CSS above works perfectly in all browsers I am so very happy to say. You guys are awesome!!!

Not sure what you meant about "instream styling instead of CSS" but perhaps you thought the widget was something I created?

Thanks again


All times are GMT -6. The time now is 08:45 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.