Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #20318

    Hi,

    we’re using the great theme ‘flagship’,

    and we need to have an image instead the text inside the ‘tabbed content’ header.

    is there a way to do this?

    #107184

    Hi graubenjamin,

    If you mean inside a shortcode tab container, no there isn’t a way using the shortcode.

    Regards,

    Devin

    #107185

    .. thanks for your response,

    i mean inside : <div class=”tab active_tab”>some headline text for the tab</div> ( <div class=”tab”>inactive tab</div> )

    Maybe I can add there some id or class for styling with css?

    #107186

    Hi,

    You can use css to insert background image. First on the editor try to insert the tabbed content shortcode on a div with a unique class. Something like this

    <div class="new_tab">
    [tab_container initial_open="1"]

    [tab title="Title 1 "]Title 1 content goes here.[/tab]

    [tab title="Title 2"]Title 2 content goes here.[/tab]

    [/tab_container]
    </div>

    Then on your custom.css you can add this

    .new_tab .tab:first-child {
    background: blue;
    }

    I’m sure you can insert a background image there.

    Regards,

    Ismael

    #107187

    it works fine, thank you very much!

    i used now the following css for the three tabs I have:

    .new_tab .tab:first-child {

    background-color: blue;

    }

    .new_tab .tab:nth-of-type(2) {

    background: red;

    }

    .new_tab .tab:nth-of-type(3) {

    background: yellow;

    }

    …only in IE 8 the second and third tab are broken.

    is there some trick for that?

    #107188

    Hi!

    Unfortunately IE7/8 does not support :nth-of-type because it’s css3 code. However maybe this article. http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/ will help you.

    Best regards,

    Peter

    #107189

    … excellent, works perfect now:

    .new_tab .tab:first-child + .tab {

    background: red;

    }

    .new_tab .tab:first-child + .tab + .tab {

    background: yellow;

    }

    thanks again!

    #107190

    Hi graubenjamin,

    Glad that this is resolved. :)

    Cheers,

    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘how to add an image into the 'tabbed content' header area instead of the text/’ is closed to new replies.