WordPress.org

Ready to get started?Download WordPress

Forums

Squelch Tabs and Accordions Shortcodes
Tabs not working (6 posts)

  1. kierp
    Member
    Posted 7 months ago #

    Hi Matt,

    Keep up the great work :-) I've got a problem with tabs not working on a site. Accordions work fine, but I recently tested out tabs, and failed miserably - the tab titles just display as a list, with the content below changing when a list item is clicked.

    Here's a test page: http://wp.me/P33rrT-Ex

    I haven't tried to apply style yet, is that the cause ?

    Thanks,
    Kier.

    http://wordpress.org/plugins/squelch-tabs-and-accordions-shortcodes/

  2. Matt Lowe
    Member
    Plugin Author

    Posted 7 months ago #

    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

  3. kierp
    Member
    Posted 7 months ago #

    Thanks - I'll give the styling a go.

  4. kierp
    Member
    Posted 7 months ago #

    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.

  5. Matt Lowe
    Member
    Plugin Author

    Posted 7 months ago #

    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.

  6. kierp
    Member
    Posted 7 months ago #

    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;
    }

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.