image links in comment bar?

Feb 18, 2011 16:24

Journal Preview: usagiljtest
Style Name: S2 Minimalism; Aquatic Moon theme
Account Type: Paid

Problem/Question: I'm looking to replace the links in the comment bar with images. I have zero experience with the Minimalism layout so I have no idea where to even begin with this. I'm using a heavily modified version of this layoutI'm comfortable with using theme ( Read more... )

resolved, questions

Leave a comment

Comment Bar Images - Instructions anarano February 18 2011, 23:50:51 UTC
1.
Disable following section in your CSS. You can do this with a "/*" at the beginning and a "*/" at the end of the section.
You could also delete the whole section, but I do not recommend it, you might need it later.

/*

.entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited{
font-size:17px;
font-weight:bold;
color:#ac214b;
text-transform:uppercase;
font-family:arial;
letter-spacing:-1px;
line-height:27px;
}
.entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active{
color:#fff;
}

*/

2.
Add this lines at the end of your CSS:

.comments a {font-size:0 ; padding:10px; background:url(http://l-stat.livejournal.com/img/help.gif) center no-repeat }
.postcomment a {font-size:0 ; padding:10px; background:url(http://l-stat.livejournal.com/img/help.gif) center no-repeat }

.mem_add a {font-size:0 ; padding:10px; background:url(http://l-stat.livejournal.com/img/memadd.gif) center no-repeat }
.tell_friend a {font-size:0 ; padding:10px; background:url(http://l-stat.livejournal.com/img/btn_sharethis.gif) center no-repeat }
a[href*="flag"] {font-size:0 ; padding:10px; background:url(http://l-stat.livejournal.com/img/help.gif) center no-repeat }
a[href*="subscrip"] {font-size:0 ; padding:10px; background:url(http://l-stat.livejournal.com/img/btn_track.gif) center no-repeat }

You can (have to) change the used image adresses with your own. I am not sure though if you really need ".comments a" as it contains the number of the comments. I would suggest, you use the disabled section above and change it like this (in that case without "/*" and "*/"):

.comments a {
font-size:17px;
font-weight:bold;
color:#ac214b;
text-transform:uppercase;
font-family:arial;
letter-spacing:-1px;
line-height:27px;
}
.comments a:hover, .comments a:active {
color:#fff;
}

Good luck!
Ana

Reply

Re: Comment Bar Images - Instructions cresselia February 19 2011, 00:21:08 UTC
Oh, that works wonderfully! Thank you so much. :D

Reply


Leave a comment

Up