Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add more buttons to landing page template


Akshat01
Go to solution Solved by sandboxorphan,

Question

I am using the 'Reveal' cover page for my website. It supports to Call-to-action button. I want to add one more so that there are a total of 3 buttons.

I know I can add more than 2 option by adding them as links but that is not what I want.

Can I insert the third button using JS?

Edited by Akshat01
Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 1

I couldn't figure out how to add more buttons to the Reveal Coverpage, but if you need more than two links to different pages use this code and modify the details to what you need.

Go to Actions > choose Navigation > add your three or five links you need > then go to Configure the Cover Page (the gear) > choose advanced > add this code:


<style>
    li{
           border-radius: 15px;
           background: white;
           padding: 15px; 
           width: 250px;
           height: 25px;
       }
       a{    
           position: relative;
           left: auto;
           bottom:50%;
         }
</style>

This will make your links look like buttons. This mangles the list and a tags for the page and makes them look like rounded corner buttons with centered text. You might nee to tweak it for your needed words.

Hope this helps.

Edited by sandboxorphan

I design stuff

Link to post
  • 1

Sandboxorphan, thanks for the code! This helped me get started. I'm not familiar with code, so I am wondering how one would change this code so that the buttons are only outlined in white instead of being solid. Also the buttons lineup in the center of the page. What would I need to change to make them run horizontally like they normally do before the code modified them?

Thanks again. Noah

Link to post
  • 0
Guest

Hi - Thank you for the post! I am wondering if you could help with a text centering issue. I am trying to get the text to center inside of the 'button boxes' (photo attached) but can't seem to get it to work. Can you help?

The Current Code:


 <style>
     li{
            border-radius: 10px;
            border-style: solid; 
            border-color: #ffffff;
            background: transparent;
            padding: 10px; 
            width: 100px;
            height: 10px;
        }
        a{    
            position: center;
            left: auto;
            bottom:50%;
          }
</style>




screen-shot-2016-02-15-at-104035-am.png.88b091dcb788513c5c69d15ec4e62f90.png

Link to post
  • 0

To help with code specific to your site and limited to affecting only the links you want to affect, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to post
  • 0

@ChristianJ40 I found that I was having a similar problem and I found an easy fix was adjusting the font size along with the box size. This didnt allow me to accurately shift the words by pixel increments within the boxes but it satisfied what I was trying to achieve. Also has been working across platform

Link to post
  • 0

@ChristianJ40 I found that I was having a similar problem and I found an easy fix was adjusting the font size along with the box size. This didnt allow me to accurately shift the words by pixel increments within the boxes but it satisfied what I was trying to achieve. Also has been working across platform

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...