Styling page break tabs using custom css code

Hi

I would like to style my two tab buttons labelled 'Step 1' and 'Step 2' on my form so that they look like ghost buttons.

If u see on my site i am using ghost buttons quite extensively. I have provided an example just above my jotform on my site, showing seven ghost buttons. I would like to replicate this effect on the jotform tabs.

Can i please get help on modifying these two tab buttons so they look like ghost buttons.  Also when one is selected i need it to stand out more than the other button, because atm they look too much alike.

Thanks

Hi slider17,

I understand that you want to style the tabs like these buttons from your website right?

If yes, then you can just add these custom css code. Here's a guide on How to Inject Custom CSS Code.

/* Removing the horizontal line */

.tabs-list {

border-bottom: 0 !important;

}

/* Styling the tabs */

.tabs-list li { 

width: 120px !important;

height: 50px !important;

line-height: 45px !important;

margin-right: 10px !important;

margin-left: auto !important;

padding: 0px 8px !important;

border-style: solid !important;

border-width: 2px !important;

border-color: rgba(0, 0, 0, 0.18) !important;

background-color: transparent !important;

font-family: "Lato", sans-serif !important; 

color: white !important;

font-size: 17px !important;

font-weight: 700 !important;

text-align: center !important;

}

/* Styling the current active tab */

.tabs-list li.current {

background: #0099ff !important;

}

I hope this will resolve your issue. If not, let us know. Thanks!

wow thanks a lot!

this is what i am after.

now i have noticed one anomaly. please refer to screenshot link below.

u can see their are 4 white triangles on either side of each button, how to get rid of them?

http://gyazo.com/48cdb95d233f64a74777c58987c142ed

Also u will see their are gaps on the left hand column. Specifically below the 'Expected Moving date' widget.  How to fix that??

thanks

Hi,

May I know how you add the css codes I provided? Did you add them through the Preferences > Form Styles > Inject Custom CSS?

To remove those triangles, please add these custom css code.

.tabs-list li:before {

border-bottom: 0 !important;

border-left: 0 !important;

}

.tabs-list li:after {

border-bottom: 0 !important;

border-right: 0 !important;

}

On the css code I provided above, please changed the margin-left: auto !important; to margin-left: 15px !important; This is to increase the margin from the left so it will align on the local move widget.

Hope this helps. Thanks!

Hi, 

Just like to clarify that you should changed that value under the .tabs-list li selector

from

.margin-left: auto !important;

to

.margin-left: 15px !important;

Thanks!

yes things are looking much nicer now.

i was using the properties for the specific widget, and adding the custom css through there.

i changed my method based on your suggestion though.

btw, by changing the .margin-left to 15px it does align the tab buttons with the radio buttons on the desktop view but on a mobile (my nexus 4) its now 15px ahead of the radio buttons :)

Hi,

Okay, good to hear that. Maybe we can try using media queries to target that specific selector when user is on mobile device. Can you please try adding this custom css code.

@media only screen and (max-device-width: 480px) {

.tabs-list li {margin-left: 3px !important;}

}

Hope that fixes the issue with the mobile layout. If not, let us know. 

yup that aligns it on my phone.

i will still have to check it out on an iphone though.  any issues i will post back into this thread.

thanks for your help Jan!

hi

Hi silider17,

As we cannot answer multiple question in one thread, I have moved your question to a new thread and you will be answered there:  http://www.jotform.com/answers/450309

Thank you for understanding.