Like/Edit/Quote/Settings Buttons

[? Placebo]

so I was screwing around on my test site trying to change the default button icons to fa icons, and noticed that for some reason the like icon had faulty alignment compared to all the others

do the buttons conform to whatever image/icon/text is in them? and if so, what can I do to fix that?

ALSO, one more thing- the edit, quote, and like buttons all have specific variables for their role, href, and class, but the "select options" button doesn't seem to. (it's not listed in the loops & variables.) is there a way to work around that so I can change the default gear icon in the same way I did the other three?

I used this to change the others, for reference:

<a class="$[post.quote_button.class]" href="$[post.quote_button.href]" role="$[post.quote_button.role]"><i class="fa fa-quote-left" aria-hidden="true"></i></a>
<a class="$[post.edit_button.class]" href="$[post.edit_button.href]" role="$[post.edit_button.role]"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="$[post.likes.button.class]" href="$[post.likes.button.class]" role="$[post.likes.button.role]"><i class="fa fa-heart" aria-hidden="true"></i></a>

[Tumbleweed]

Aug 23, 2017 13:12:58 GMT -8 ? Placebo said:

so I was screwing around on my test site trying to change the default button icons to fa icons, and noticed that for some reason the like icon had faulty alignment compared to all the others

do the buttons conform to whatever image/icon/text is in them? and if so, what can I do to fix that?

ALSO, one more thing- the edit, quote, and like buttons all have specific variables for their role, href, and class, but the "select options" button doesn't seem to. (it's not listed in the loops & variables.) is there a way to work around that so I can change the default gear icon in the same way I did the other three?

I used this to change the others, for reference:

<a class="$[post.quote_button.class]" href="$[post.quote_button.href]" role="$[post.quote_button.role]"><i class="fa fa-quote-left" aria-hidden="true"></i></a>
<a class="$[post.edit_button.class]" href="$[post.edit_button.href]" role="$[post.edit_button.role]"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="$[post.likes.button.class]" href="$[post.likes.button.class]" role="$[post.likes.button.role]"><i class="fa fa-heart" aria-hidden="true"></i></a>

In answer to your first question, they use padding to kind of get them uniform so you'll have to add something like this to the bottom of your style sheet. 



   .posts .post .content-head .controls>a.likes-button {
   padding: 2px 5px 2px 6px;


Not sure about your second question. Need to look into that if someone else doesn't jump in here that knows the answer off the top of their heads.

[Chris]

This might help: support.proboards.com/thread/480448/post-options-buttons

[? Placebo]

Tumbleweed, that works wonders, thanks so much!

Chris, instead of images I was hoping to replace the original gear with a fa icon, specifically this one. could the code you put together in that thread be changed to suit that?

[Chris]

You could theoretically replace the image url with the private unicode block codepoint for the icon you want and also set the font-family to fontAwesome to get it to show. Something along the lines of

div.button.post-options * {display:none;}
div.button.post-options:before{
content: '\f013';
font-family: fontAwesome;
font-size: 1.5em;
}

or if you wanted to replace only the image and keep the button outline ...

div.button.post-options .status img {display:none;}
div.button.post-options .status:before{
content: '\f013';
font-family: fontAwesome;
font-size: 1.5em;
}

Then to indicate hover, selected and menuopen states you could perhaps change the text color

div.button.post-options .status:hover:before, div.button.post-options.open-menu .status:before, div.button.post-options.state-selected .options:before {
color: #efa05b;
}

I of course use the word "theoretically" because I don't have a link where I could test if it actually works. It is generally a good idea to drop a link to what you are working on if requesting advice. Your forum could have a ZZ Top beard while another forum could be completely bald from head to toe. It helps to know what you are working with and tailor your advice so it works on the intended forum.

[? Placebo]

Chris, thanks so much! the button-included code worked great. the alignment was off at first, but with a little adjustment to Tumbleweed's code it worked out!

thanks a lot to you both for the help!