CSS issues with tabs plugin

  • Resolved ibogo

    (@ibogo)


    9 years, 10 months ago

    We have 2 issues:

    1. We have tried everything and cannot find a solution to remove the outline/border that appears on selected/active/focused tabs with this plugin.

    Here is an example: EXAMPLE

    When you select a tab it gets a light-blue border which we don’t know how to remove.

    Here is the custom CSS:

    .tabs-shortcode.ui-tabs .ui-tabs-nav, .tabs-shortcode.ui-tabs .ui-tabs-nav a:hover { background:;color:#000000!important; }

.tabs-shortcode.ui-tabs a { color:#000000; }

.tabs-shortcode.ui-tabs a:hover { color:#3498db; }

.tabs-shortcode.ui-tabs {
	padding:.2em;
	zoom:1;
	clear:both;
        z-index:0;
	background:#ffffff;
        color:#000000;
	padding:0;
	margin:0;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li { background:#3498db !important;color:#000000!important; }

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected, .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-focus {
	background:#7ec247 !important;border:1px solid transparent;outline:none!important;border:none!important;
	color:#000000!important; }

    The bottom part deals with the tabs. As you see, we’ve set outline:none;border:none; yet it remains.

    2. When scrolling, the tabs overlap the sticky header. This looks very poor.

Viewing 5 replies - 1 through 5 (of 5 total)

  • 1. You have this:

    .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected, .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-focus {
	background:#7ec247 !important;border:1px solid transparent;outline:none!important;border:none!important;
	color:#000000!important; }

    make it become this:

    .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-focus a{
	background:#7ec247 !important;border:none!important;outline:none!important;
	color:#000000!important; }

    2. the elements of that shortcode have the same z-index of the header so use:
    .sticky-enabled .tc-header { z-index: 101;} or increase it in the header section of Appearance -> Customize.

    Hope this helps.

    Thread Starter ibogo

    (@ibogo)

    1. 90% solved

    Now the border only appears when clicking without release (move mouse).

    Any idea?

    2. Thank you ??

    Hello,
    try adding also this to the rule above:

    .tabs-shortcode.ui-tabs .ui-state-focus a {
    outline: none !important;
}

    Thread Starter ibogo

    (@ibogo)

    Perfect!

    ??

    Glad you solved ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS issues with tabs plugin’ is closed to new replies.