Styles for toolbar buttons

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Styles for toolbar buttons

Postby karencann on Thu May 23, 2019 1:48 am

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
karencann
Propeller Head
 
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am

Re: Styles for toolbar buttons

Postby doc_guy on Fri May 24, 2019 11:41 am

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.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1947
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Styles for toolbar buttons

Postby karencann on Tue May 28, 2019 1:58 am

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.
karencann
Propeller Head
 
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am

Re: Styles for toolbar buttons

Postby doc_guy on Wed May 29, 2019 7:23 pm

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.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1947
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Styles for toolbar buttons

Postby Dave Lee on Thu May 30, 2019 12:03 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Styles for toolbar buttons

Postby doc_guy on Thu May 30, 2019 11:26 am

Well, that is certainly simpler. Thanks, Dave!
User avatar
doc_guy
Propellus Maximus
 
Posts: 1947
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Styles for toolbar buttons

Postby karencann on Fri May 31, 2019 1:16 am

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

Postby karencann on Tue Jun 04, 2019 6:17 am

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;
}
karencann
Propeller Head
 
Posts: 10
Joined: Mon Jan 14, 2019 9:52 am


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 4 guests