Hi kierp,
I’m not seeing any CSS styles being loaded. I’m guessing when you integrated the accordions you turned off the jQuery UI theme (to give you a blank slate to work from) which means there are no styles applied to the tabs. You will need to either turn on a jQuery UI theme in the settings (which may break your accordions) or style the tabs manually.
Thanks,
Matt
Thread Starter
apiods
(@kierp)
Thanks – I’ll give the styling a go.
Thread Starter
apiods
(@kierp)
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.
Hi Kier,
The CSS file contains CSS for the horizontal accordions, and some tweaks/fixes to improve the functionality of the jQuery UI CSS files. It doesn’t contain the styles for anything styled by jQuery UI, that’s what the jQuery UI themes are for. There are a LOT of styles that go into, for example, making tabs, far more than I could post here. Your best bet is to download a jQuery UI theme (or take a look at the themes shipped with Squelch TAAS). You can find them in <plugins dir>/squelch-tabs-and-accordions-shortcodes/css/jquery-ui Pick a theme, go into its directory, and then take a look at the jquery-ui-1.9.2.custom.css file.
Thread Starter
apiods
(@kierp)
Thanks for this – I’ve made some progress on a test site:
http://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;
}
