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
Styles for toolbar buttons
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Styles for toolbar buttons
We have previous and next buttons at the bottom of our topics. They look like this:
We use a topic tool bar proxy at the bottom of the master page, with these settings:
Then, in that specific skin file, we have set the background image for the button to have the text we want:
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:
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.
We use a topic tool bar proxy at the bottom of the master page, with these settings:
Then, in that specific skin file, we have set the background image for the button to have the text we want:
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;
}
Hope this helps.
Re: Styles for toolbar buttons
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.
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Styles for toolbar buttons
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:
After I run my jquery script, the HTML looks like this:
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.
$("#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>
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>
Re: Styles for toolbar buttons
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;
}
Re: Styles for toolbar buttons
Thank you both! I'll give it a try and let you know how it goes.
Re: Styles for toolbar buttons
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;
}
button.next-topic-button:hover::after
{
color: #00C3DC;
}
button.previous-topic-button:hover::after
{
color: #00C3DC;
}
Re: Styles for toolbar buttons
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
Thanks,
Mary