how to make topic prefixes into buttons

[IggyP]

um take it away wayne?



this i saw on your site is very nice, i wonder will anyone mind to share some code on how to create? i think many people would like this,
thanks
Iggy

[IggyP]

ok, so im just realizing 2 things....

these use purely html code for 1, so many many many options....

and 2, it accepts gifs! (that new arrow is an animated icon)



let that be some awesomeness upon you, some good potential right there

[IggyP]

i notice this code works too is sort of an interesting one fwiw

[B]<marquee [/B][COLOR=#000000][FONT=verdana][SIZE=12px]bgcolor="[/SIZE][/FONT][/COLOR][URL="http://www.web-source.net/216_color_chart.htm"]#cccccc[/URL][COLOR=#000000][FONT=verdana][SIZE=12px]" loop="-1" scrollamount="2" width="100%">Example Marquee[/SIZE][/FONT][/COLOR][B]</marquee>[/B]

loop is set to infinate, it can be alter to indicate # of times to loop if you prefer

[Replicant]

double post

[Replicant]

CSS buttons are very easy ti implement. I use them on my site to indicate new posts. It's easier to touch he buttons in responsive mode. I also use buttons for sub-forum icons in responsive mode.

[Wayne Luke]

Sorry for not seeing this sooner.

For that example I simply used this code:

<button style="color:green">Testing</button>

It is placed in the HTML option of the prefix. You can get fancier with CSS and use backgrounds, gradients, etc...

[glennrocksvb]

Sorry for not seeing this sooner.

For that example I simply used this code:

<button style="color:green">Testing</button>

It is placed in the HTML option of the prefix. You can get fancier with CSS and use backgrounds, gradients, etc...

This will result in invalid HTML as the prefix is wrapped in <a> tag.

<a href="http://xxxxxxxxxxxxx/search?searchJSON=%7B%22prefix%22%3A%5B%22green%22%5D%7D">
    <button style="color:green">Green</button>
</a>

It may or may not work on some browsers.

I suggest just using <span> tag and style that to look like a button like this:

<span style="color:green; border: 1px solid green; display:inline-block; padding: 1px 3px; background: silver;">Green</span>

Or better, just use a class and style it in css_additional.

<span class="prefix-button">Green</span>

.prefix-button {
    color:green;
    border: 1px solid green;
    display:inline-block;
    padding: 1px 3px;
    background: silver;
}

[Wayne Luke]

This will result in invalid HTML as the prefix is wrapped in <a> tag.

Yep, not really personally worried about it. I use the site as a test bed and nothing serious. He asked how it was done on that site. If it were done for real, I would most likely use CSS and a specific class.