You are viewing limited content. For full access, please sign in.

Question

Question

Forms - altering how the tabs look.

asked on September 20, 2017 Show version history

This is my first attempt at a form with tabs.  I don't like the look of the tabs, the blank and white just looks out of place stuck on top my nicely designed form.  How can I change the look of these tabs?

The following CSS code:

#q112 .cf-section-header {color: white; background-color: green;}

changes the section headers.  How could I alter this to change the colors in the tabs?  I couldn't seem to find a way to target the tabs themselves.

I was expecting the tabs to look more like this (see following) and/or matching my own form color coding better. 

0 0

Answer

SELECTED ANSWER
replied on September 20, 2017

As Andrew has stated in the theme setting u can modify some basic settings but if you want full control of what your tabs look like you will need to play with the CSS.

Here is an example of something i've been playing with for one of my forms.

.cf-pagination-tabs {
  
  
}

.cf-pagination-tabs li {
	position: relative;
	z-index: 1;
	white-space: nowrap;
  	background:none !important;
  	border:none !important;
}

.cf-pagination-tabs li {
	position: relative;
	display: inline-block;
	padding: 1.5em 1.5em 1em;
	text-decoration: none;
	margin: 0 -7px;
} 

.cf-pagination-tabs li::before {
	content: '';
	position: absolute;
	top: 0; 
    right: 0;
    bottom: .5em;
    left: 0;
	z-index: -1;
  	border: 1px solid #000;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background: #ddd;
	box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
	transform: perspective(5px) rotateX(2deg);
	transform-origin: bottom;
}


.cf-pagination-tabs li::before {
	transform-origin: bottom;
}


.cf-pagination-tabs li.active {
	z-index: 2;
}

.cf-pagination-tabs li.active::before {
	margin-bottom: -1px;
	border-top-width: 1px;
}

.cf-pagination-tabs li.active::before {
	background: #eee;
}
.cf-pagination-tabs li a{
   min-width: 90px;
  text-align:center;
  display:inline-block;
}

 

1 0
replied on September 21, 2017

Thanks, Aaron!  I'll have to give some of that a try.

0 0
replied on September 21, 2017

Hey, Aaron, that worked slick!  I changed a bit of it and got it to work nicely!

0 0

Replies

replied on September 20, 2017

You can modify colors/fonts etc from the forms designer under the Themes -> Pagination on the Customize side.

Andrew

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.