Post Options Buttons

[TheNerd]

Forum URL: nerdydigital.boards.net

Hey guys, If you take a look at any of the threads on my site, I changed the buttons for the quote and edit buttons. How do I do that for the like and options buttons? Everything I've tried failed. (Note that It changes when hovered over) I want to do this without changing all the buttons on the site. Thanks.

[Chris]

The like and post options button are dynamically created when the page loads and are given powers the quote/edit knows not. Their construction is, for all intents and purposes, hard-coded except for some small variables such as the gear image which can be changed in theme images if I recall correctly.

If you give a bit more details on what about each you wish to change then a code could perhaps be created to accomplish that

[TheNerd]

Well Chris, I want it similar to the quote and edit icons. ( I already have the images uploaded ) It would be the dark icon when it's not liked and light when it's hovered or liked (the hover isn't absolutely nessesary, but would ne nice). As for the option menu, it would have the same hover thing, and would be light when it's active (the drop down is open).

Doesn't have to be exact, but Something around this would be good.

[Chris]

Since all you want to do is replace with images this may just be accomplished in the realm of CSS only with no accompanying javascript. I was hoping for actual images to use so I knew the dimensions in play here but here is a mockup using two images pulled from the forum that was linked.


a.button.likes-button * {display:none;}
a.button.likes-button {border:0 none; padding:0; background: none;}
a.button.likes-button:before{content: url("http://storage.proboards.com/5361580/i/lpeQUvTZQ6XrmR6u47Hr.png");}
a.button.likes-button:hover:before, a.button.likes-button.liked:before {content: url("http://storage.proboards.com/5361580/i/K3WvFLWMbRYuDNxJTvzL.png");}

div.button.post-options * {display:none;}
div.button.post-options {border:0 none; padding:0; background: none;}
div.button.post-options:before{content: url("http://storage.proboards.com/5361580/i/qiUzcQBJbVhD4vg3h2hI.png");}
div.button.post-options:hover:before, div.button.post-options.open-menu:before, div.button.post-options.state-selected:before {content: url("http://storage.proboards.com/5361580/i/gozByTeUEPtvV6WEwJn6.png");}

 


You should note that the functionality of the options button includes being in a selected state (light color) when the post has been selected for various reasons such as multiple quoting.

[TheNerd]

Brilliant Chris! Looks fantastic! Thanks!