apiods

Thanks for this – I’ve made some progress on a test site:

https://calnet.staging.wpengine.com/squelch-test/

Just battling with the tab text at the moment ! Current CSS looks like this, not sure I need it all, but will start removing stuff when it’s looking okay:

.squelch-taas-override.squelch-taas-tab-group.ui-widget-content {
    /* Styles relating to the container of the tab group */
	border: 1px solid #a6c9e2;
	background: #fcfdfd;
	color: #222;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav {
    /* Styles relating to the tab bar */
	margin: 0;
	padding: .2em .2em 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li {
    /* Styles relating to individual tab buttons in the tab bar */
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom: 0;
	padding: 0;
	white-space: nowrap;
}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    /* Styles relating to the button of the currently open tab */
	margin-bottom: -1px;
	padding-bottom: 1px;
	border: 1px solid #79b7e7;
	background: #f5f8f9;
	font-weight: bold;
}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-active a,
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-active a:link,
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-active a:visited {
    /* Styles relating to the text of the active button */
	border: 1px solid #c5dbec;
	background: #dfeffc;
	font-weight: bold;
	color: #e17009;
	cursor: text;
}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-default a,
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-default a:link,
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-state-default a:visited {
    /* Styles relating to the text of the other (inactive) buttons */
	border: 1px solid #c5dbec;
	background: #dfeffc;
	font-weight: bold;
	color: #2e6e9e;
	cursor: text;
}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-panel {
    /* Styles relating to the panel of the tabs (ie where the tab content is) */
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}

.ui-widget-header {
	border: 1px solid #4297d7;
	background: #5c9ccc;
	color: #fff;
	font-weight: bold;
}

.ui-helper-clearfix {
	zoom: 1;
}

.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 5;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
	content: "";
	display: table;
}

.ui-helper-clearfix:after {
	clear: both;
}

Hi Matt,

Could you give me a pointer to get me going on the styling for tabs please ?!

Any CSS examples around which I can then tweak – i was hoping to grab something from the squelch-tabs-and-accordions.css file, but this doesn’t appear to contains anything for tabs ???

Thanks,
Kier.

Thanks – I’ll give the styling a go.