Using text instead of images for Previous/Next buttons

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
mtg
Propeller Head
Posts: 12
Joined: Tue Jun 26, 2018 3:56 am

Using text instead of images for Previous/Next buttons

Post by mtg »

Hello everyone,

I have switched to side navigation and added the 'Previous topic' and 'Next topic' buttons on the bottom of my master page. For this, I used the toolbar proxies, on for the previous topic button on the left and one for the next topic button on the right.

So far everything works fine, but I would like to use text instead of an image for the buttons/icons, e.g., so that the buttons contain the texts 'Previous Topic' and 'Next Topic'. How or where can I add the text for the button? In the toolbar skin I can set the background image to none but I don't get how to add a text instead. Maybe there is a super simple solution and I don't get it??
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: Using text instead of images for Previous/Next buttons

Post by DaveMags »

So, I did this all quickly and have only played around in the SideNav layout a bit, but this might get you started. This is just for the next topic button, but you should be able to apply the same ideas for the previous topic button.

So I added a toolbar proxy, as you did, set it to include the next topic button, and put it at the bottom of the masterpage used for topics. I then added a toolbar skin and set the proxy to use that skin. With that all setup, in the toolbar skin, do as you did and turn everything off for the button. Remove the background image, set the colors and gradients all to transparent, remove the borders, etc.

Then, open your main stylesheet in the text editor and add the following:

Code: Select all

.next-topic-button::before
{
content: "Next Topic";
}
That tells the site to look for the class "next-topic-button" - which is the class Flare assigns to that next topic button - and tells it to insert "Next Topic" into the page right before it finds that element. When I did this, I got a "button" with just that text.
Next Topic as Text.png
Now it still acts kind of like a button - for example, I can't highlight the individual letters. But you get just text. Maybe with some more CSS tweaks you can refine it further. Not sure if this is the best option or 100% workable, but maybe that's a start? Let me know if you try this - I'm curious how it goes.

Or, and this isn't really what you want, and you probably already thought of this, but you could make an image that is just the text "Next topic" and use that. It's not an elegant solution, but it's easy :).
You do not have the required permissions to view the files attached to this post.
Post Reply