Styles for toolbar buttons

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
karencann
Propeller Head
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am

Styles for toolbar buttons

Post by karencann »

Hello!

For my HTML5 side nav target, I want to create "Previous" and "Next" buttons that use both Font Awesome icons and text (something like this: <- Previous). They need to work like the topic toolbar proxy previous and next buttons, with navigation based on the TOC (not like the browser Back and Next navigation).

I've looked through the Topic Toolbar skin editor, but I can't find any settings for adding text to the buttons, other than in the tooltips.

Does anyone know if it's possible to use the CSS styles to add text to the buttons, or how else to style these? Or, does anyone know the JS required to re-create the functionality of these buttons?

Thanks!
Karen
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Styles for toolbar buttons

Post by doc_guy »

We have previous and next buttons at the bottom of our topics. They look like this:

Image

We use a topic tool bar proxy at the bottom of the master page, with these settings:
Image

Then, in that specific skin file, we have set the background image for the button to have the text we want:

Image

Then I added the following CSS to my style sheet to target the specific previous and next button that are part of the skin, and make them float to the left and right of the page:

Code: Select all

div#bottomnav ._Skins_TopicToolbar_Bottom_PrevNext button.next-topic-button
{
	height: 50px;
	float: right;
}

div#bottomnav ._Skins_TopicToolbar_Bottom_PrevNext button.previous-topic-button
{
	height: 50px;
	float: left;
}

div#bottomnav ._Skins_TopicToolbar_Bottom_PrevNext
{
	margin-top: 50px;
	clear: both;
}

div#bottomnav .button-group-container-left
{
	float: none;
}

So, that is how we solved the problem. You basically need a separate skin so you can give the previous and next buttons at the bottom a different style than the ones at the top of the topic (we use two different topic toolbars), and then you give the buttons background images that have the content you want, and then you style them in the CSS to position them where you want.

Hope this helps.
Paul Pehrson
My Blog

Image
karencann
Propeller Head
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am

Re: Styles for toolbar buttons

Post by karencann »

Thank you Paul! I've done the same as a workaround, but I am hoping to find a way to use actual text rather than text within an image, if possible.
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Styles for toolbar buttons

Post by doc_guy »

I think your next best bet is to do a jquery script on load. The following jquery targets the "next" button that is a descendant of a div with an ID of bottomnav:

$("#bottomnav .next-topic-button").html('Next Topic');

So my code is like this:

Code: Select all

<div id="bottomnav">
     <div class="buttons popup-container clearfix topicToolbarProxy _Skins_TopicToolbar_Bottom_PrevNext mc-component nocontent" style="mc-topic-toolbar-items: PreviousTopic Separator NextTopic;">
          <div class="button-group-container-left">
               <button class="button needs-pie previous-topic-button" title="Navigate previous">
                    <img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="previous topic">
               </button>
               <button class="button needs-pie next-topic-button" title="Navigate next">
                    <img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="next topic">
               </button>
          </div>
     </div>
</div>
After I run my jquery script, the HTML looks like this:

Code: Select all

<div id="bottomnav">
     <div class="buttons popup-container clearfix topicToolbarProxy _Skins_TopicToolbar_Bottom_PrevNext mc-component nocontent" style="mc-topic-toolbar-items: PreviousTopic Separator NextTopic;">
          <div class="button-group-container-left">
               <button class="button needs-pie previous-topic-button" title="Navigate previous">
                    <img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="previous topic">
               </button>
               <button class="button needs-pie next-topic-button" title="Navigate next">
                    Next Topic
               </button>
          </div>
     </div>
</div>
So you would want to write one for your previous button and one for your next button, and if you have more than one of them on the page, you need to make sure you target them in the correct DIV.
Paul Pehrson
My Blog

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Styles for toolbar buttons

Post by NorthEast »

You could also use CSS to achieve the same thing; e.g.

Code: Select all

button.previous-topic-button::after
{
	content: "Previous topic";
}

button.next-topic-button::after
{
	content: "Next topic";
}

button.previous-topic-button,
button.next-topic-button
{
	width: auto !important;
	padding-right: 4px !important;
}
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Styles for toolbar buttons

Post by doc_guy »

Well, that is certainly simpler. Thanks, Dave!
Paul Pehrson
My Blog

Image
karencann
Propeller Head
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am

Re: Styles for toolbar buttons

Post by karencann »

Thank you both! I'll give it a try and let you know how it goes.
karencann
Propeller Head
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am

Re: Styles for toolbar buttons

Post by karencann »

Thank you both, Dave, your CSS worked brilliantly! And, I was even able to define the hover colour:

button.next-topic-button:hover::after
{
color: #00C3DC;
}

button.previous-topic-button:hover::after
{
color: #00C3DC;
}
mperaro
Propeller Head
Posts: 28
Joined: Thu Jan 28, 2016 8:18 am

Re: Styles for toolbar buttons

Post by mperaro »

I added the info Dave provided and it works great, I get the buttons, but I also see the previous and back arrows underneath it. How do I make those go away? I just want Previous Topic, Next Topic and the print icon to display.

Thanks,

Mary
Post Reply