Jump to content

Archived

This topic is now archived and is closed to further replies.

josh1178

Shortcode for buttons that look like buttons in Rev Slider

Recommended Posts

josh1178

Is there a shortcode to achieve buttons like the ones used in the Rev slider (white square, simple button).

 

I see the documentation has shortcode for other types of buttons. If there isn't a shortcode for this, how would I go about making one that looks and works the same as the Rev slider buttons.

 

Thanks!

Share this post


Link to post
Share on other sites
josh1178

Yep, I got that code already, but I was curious about the style. I tried to just add the class to the shortcode but it doesn't work and I'd rather not have to add a ton of css manually for each instance I want to use a similar button. 

 

I'd like the style to be same as the REV sliders (simple frame and mouse hover fx).  Is there a way to copy the CSS and transition and add that to the shortcode (or make a new shortcode) somehow? If you can let me know where I'd find the complete CSS for the Rev slider buttons and transitions in the core DMS files that would be helpful. I could copy it from there and make my own new shortcodes by following an online tutorial such as this one I guess, no?

Share this post


Link to post
Share on other sites
Danny

Just copy the HTML code for the button and simply change the link, for example:

 

<a href="http://www.pagelines.com/" class="btn btn-large slider-btn btn-ol-white">Visit PageLines.com</a>

 

Could be:

 

<a href="http://www.my-uber-site.com/" class="btn btn-large slider-btn btn-ol-white">Visit My Uber Site !</a>

 

If you want to center the button simply wrap it inside a div and use the center class, for example:

 

<div class="center">
  <a href="http://www.pagelines.com/" class="btn btn-large slider-btn btn-ol-white">Visit PageLines.com</a>
</div>
 
You can also change the btn-ol-white class to any other button class.
 
Here are a few examples of this code in a Masthead section via the Video text area option - https://cloudup.com/cDTOqN1nY40
 
<div class="center">
  <ul class="list-inline">
    <li><a href="#" class="btn btn-large slider-btn btn-primary">Primary Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-info">Info Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-success">Success Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-warning">Warning Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-important">Important Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-inverse">Inverse Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-ol-white">Outline White Button!</a></li>
    <li><a href="#" class="btn btn-large slider-btn btn-ol-black">Outline Black Button!</a></li>
</div>

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Thanks for that! Good enough for now, though I will prob try to make some shortcodes as well for them. Will post here if I find an easy method on how to do that.

Share this post


Link to post
Share on other sites
GetMeWebDesign

josh1178 Unless you think you are specifically going to use all the pagelines shortcodes as intended, it might be quicker to just target the CSs for each type and alter as you wish (as long as you can remember, for instance, that Outline black is now styled differently by you


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Not sure why you would want to use shortcodes, I don't like them, I prefer to use the HTML instead of the shortcode. As you have more control.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Thanks guys. 

 

I want to use shortcodes and keep things as simple looking as possible so that later I can get an intern to help with this kind of stuff and not have to deal with intimidating looking code that's easy to screw up. 

 

I'll prob just alter the css as GetMeWebDesign suggested or just make new custom shortcodes. Or just stick with good old HTML. 

 

Thanks

Share this post


Link to post
Share on other sites
Danny

For me and this is just me personally, shortcodes are more confusing than HTML and if you use the HTML method your intern will learn some basic HTML ;)


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×