Kentico Tabs Layout Web Part Customisation

Gideon Gontor asked on March 29, 2019 10:59

I need to change the look and feel of the tabs layout widget but I have no idea of the classes to modify.

css kentico tabs layout

Correct Answer

Roman Hutnyk answered on March 29, 2019 13:48

Gideon,

You might use Chrome inspector to see the HTML and CSS of the widget. Here what I'm getting:

<div class="ajax__tab_xp ajax__tab_container ajax__tab_default" id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs" style="visibility: visible;">
    <div id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_header" class="ajax__tab_header">
        <span id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_tab1_tab" class="ajax__tab_active"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_tab1" href="#" style="text-decoration:none;"><span>Tab 1</span></a></span></span></span><span id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_tab2_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_tab2" href="#" style="text-decoration:none;"><span>Tab 2</span></a></span></span></span>
    </div><div id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_body" class="ajax__tab_body ajax__scroll_auto" style="height:100%;display:block;">
        <div id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_tab1" class="ajax__tab_panel" style="visibility: visible;">
            Hi Gideon!




        </div><div id="p_lt_ctl09_pageplaceholder_p_lt_ctl00_TabsLayout_tabs_tab2" class="ajax__tab_panel" style="display:none;visibility:hidden;">

        </div>
    </div>
</div>

So you should get something similar if you're using Kentico tab layout web part or a widget based on it.

I'd recommend you to wrap it with a div with particular id or css class and use it as a "prefix" for any classes and/or elements of the actual tab layout markup.

1 votesVote for this answer Unmark Correct answer

Recent Answers

Gideon Gontor answered on March 29, 2019 14:00

Roman Hutnyk

I thought they were autogenerated wasn't sure if they are the real class I am to use. Got it as I wanted now after wrapping it with a class.

Thanks

0 votesVote for this answer Mark as a Correct answer

jason jorgenson answered on January 8, 2020 20:33

Did you get this to work? my display only displayes the text verison and i cannot figure out how to customize it.

0 votesVote for this answer Mark as a Correct answer