can i replace my wordpress like button with another image?
-
hi, i don’t know if this is something that would be changed in the CSS or elsewhere, but does anyone know how to replace the little ‘star’ icon to the left of ‘Be the first to like this post.’ ?
i already have an image i want to use, but i can’t find anywhere to put it.. help??
thx in advance
The blog I need help with is: (visible only to logged in users)
-
-
I’ve also been struggling with varying widths on the third submenu of my navigation bar. The problem is on different sized monitors the third menu over or under-hangs in comparison to its parent. I’ve not really done CSS before properly, but I though I’d experiment with different ways of getting around it and try to find a solution. I thought I had it cracked last night, but it seems to be under-hanging again.
Is there anything I could use in the code for the menu that would tell it to always stay the same width as its parent regardless of the width of the monitor?
-
To replace the star with another image you can add the following code. Make sure you’ve uploaded the new image to your media gallery and keep it fairly small:
#wpl-button a {background:url("IMG-URL") 7px center no-repeat!important;}To fix your menu problem when resizing browser text try the line below:
#access ul ul.sub-menu {top:2.923em;} -
Fantastic! I’ve given that menu code a go, and it seems to be fine on this screen – I’ll see how it displays on the widescreen when I go home at lunch – touch wood, it’ll be fine.
That button code is spot on, definitely a step in the right direction – although the image seems to be a tad offset. I’ve tried altering the alignment and image size, but seemingly to no avail. Is there a way I can remove the text “Like” from beneath the button, as my png icon already says “Like”, so the two overlap (see below).
[IMG]http://i51.tinypic.com/5kj3id.jpg[/IMG]
-
-
-
ok – by changing your code to -3px center no-repeat!important; position:left;
i was able to sort out the alignment, although there still seems to be a strip along the left of the button. is there a way i can increase the overall size (or proportion?) of the button to match my image? (60 x 23)ok, scratch that – i seem to have it in hand. however, i forgot that once the button has been clicked, the icon is meant to change… is there another line i can add that relates to the button icon, once it has been clicked..?
-
#wpl-button.liked {
background:url(‘http://greenleafrecords.com/images/like_button_2.png’) 0 3px center no-repeat!important;
position:left;
}am i on the right lines?
okay, this seems to have added the second image, but – the original WP logo and formatting is still there, as well as the text
-
right.. think i may have sorted it with the following code:
div#likes { margin-top: 15px; } .like-button { border: 1px solid #eee; padding: 2px 6px; font-size: 13px; font-family: arial, tahoma, sans-serif; } #wpl-likebox { clear: left; font-size: 11px; font-family: arial, tahoma, verdana, sans-serif !important; min-height: 30px; margin: 10px 0 !important; padding: 5px 0 10px 0 !important; } #wpl-button { float: left; margin-right: 7px; border: 1px solid #7D7D7D; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #wpl-button a { color: #000000 !important; line-height: 130% !important; text-decoration: none !important; outline: none; float: left; padding: 3px 6px 2px 24px !important; font-size: 11px !important; background: url('http://i52.tinypic.com/23h1tlx.png') 6px 49.8% no-repeat; } #wpl-button.liked { background: #F0F0F0; border: 1px solid #7D7D7D; } #wpl-button.liked a { color: #000000 !important; } #wpl-likebox #wpl-count { min-height: 25px; line-height: 130% !important; float: left; padding-top: 4px; } #wpl-likebox #wpl-avatars { clear: left; max-height: 98px; overflow: hidden; margin-top: 15px; line-height: 130% !important; } #wpl-likebox #wpl-avatars img { border: none !important; } -
-
-
- The topic ‘can i replace my wordpress like button with another image?’ is closed to new replies.
WordPress.com Forums 