-
Posts
-
Hello,
I want to add a previous(/next) button to some specific pages of my site.
I added following code in the visual composer using the Code Block. But instead of the button I want to use one of the Enfold-icons. How can I change the styling of the button to one of these icons?<button onclick="goBack()">Go Back</button> <script> function goBack() { window.history.back(); } </script>Kind regards,
CharlotteHi Boulanger!
Use this instead.
<div class="avia-button-wrap avia-button-left avia-builder-el-32 el_after_av_heading el_before_av_button "><a href="#" class="avia-button avia-icon_select-yes-left-icon avia-color-theme-color avia-size-large avia-position-left "><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">Theme Color</span></a></div>And add the onclick to the link there.
Best regards,
ElliottHi Elliott,
Thanks for your quick reply. I’m not really sure how to do this.
1) I don’t want a button but I want to use one of the icons: ue87e
2) How exactly do I add the onclick to the link?
3) When I shift between ‘Visuel’ and ‘Text’ in the Composer the code gets all messed up.
Thanks for helping me out here.Kind regards,
CharlotteHi,
Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.
Best regards,
RikardHey!
can you provide us a precise link where we can see the button in question please? because we need to inspect the elements.
Best regards,
AndyHi Andy,
My previous reply didn’t come through. So one more time:See link below for the buttons
first button: GoBack link works perfectly but button is ugly
second button: Code you provided but I’m not sure how to add the GoBack link and how to change the button into an icon
third button: The icon I’d like to useThanks for helping me out.
Regards,
CharlotteHey!
hm not sure. Your first button works perfectly for you? it does not do anything when I click on it, so not sure what you mean. So do you want to implement your third icon to second button maybe? please be precise.
Go to fontello.com and choose any icon you want to use. Afterwards click on “Customize Codes” and copy the rectangle to paste it inside your existing code (of your second code block button).
Regards,
AndyOk, to be more precise:
1) The link of the first button goes back to the previous page you visited. If you opened the page in a new tab/page obviously there is no page to go back to.
2) I don’t want a button layout. I only want an icon with the link that takes the visitor to the previous page, whatever that page was.Regards,
CharlotteHi!
for first button you are using you can define a unique css class by using this code instead:
<button class="button-back" onclick="goBack()">Go Back</button> <script> function goBack() { window.history.back(); } </script>Note class=”button-back”.
Now you can call this new css class via Quick CSS field to style it:
.button-back { }Have a look at this link for different possibilities on how to style your button:
http://www.tyssendesign.com.au/articles/css/styling-form-buttons/Regards,
Andy
- You must be logged in to reply to this topic.