How to implement tab layout from Kreisi Demo

thanks Mike , Yes I am using the advanced layout builder , yes I am using the tab editor, yes I have chosen “Display Tabs On Left ”
and this is what it looks like live on my site , see below

My question is how do I change the style of the tabs, to match what you guys have on your demo page see below

Excellent thanks Mike ! See screen shot of where I am now below.

I changed the code a little to get rid of the boxes which I don’t need really. I just need to make the background behind the tabs grey
and I also need to make the text size larger and I will be good, see client mock up below to see what I am shooting for.

Thanks Again Mike … Appreciate all your help so much… !
See where I am below after adding the last bit of code. I was able to increase the font size for the tab content and changed the background color of the tabs to grey.
However I still need to make the following changes to get closer to the client mock up above.
*the ability to change the the font size and color of the tab titles
*make the active tab background grey as well
*no white border between tabs
*and yes if possible push the grey area of the tab container all the way to the footer

Hi Mike thanks !!!
With that last bit of code and some more tweaking of the page’s cell padding I am getting closer to the mock up , see pages below in private section.
My question is how to apply that to the other 8 pages of the website. Accounting, Information Technology, Human Resources etc.
Do I simply add the code below 8 more times with a different page ID , I know that will work as I did it for the “Special Projects ” page to test , see below in private section.
Or… is there is a cleaner way of doing it. perhaps adding all the Page id’s to just the one snippet of code ?

Below is what we have so far to make the desired layout/styling of the tab section for the operations page.
====================================================================================
.sidebar_tab_left .tab_content,.sidebar_tab_left .tab_content,.sidebar_tab_left .tab,.tabcontainer .active_tab_content {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2) !important;
left: 0;
padding: 0px 0 0 10px;
border-color: #b2b7bb
!important;
}
.main_color div .sidebar_active_tab, div .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
color: #000000;
background-color: #ffffff
!important;
border-color: #ffffff !important;
}
.tab_titles,.active_tab {
background-color: #b2b7bb
!important;
}
.tab_inner_content p,.tab_inner_content a {
font-size: 14px !important;
}
#top.page-id-2438 .main_color .tabcontainer .tab {
color: #fff !important;
font-size: 16px;
line-height: 20px;
padding-top: 10px;
padding-bottom: 05px;
}
#top.page-id-2438 .main_color .tabcontainer .tab.active_tab {
color: #000 !important;
background-color: #b2b7bb !important;
border-color: #b2b7bb !important;
}
#av-layout-grid-1 > div.flex_cell.no_margin.av_two_third.avia-builder-el-1.el_before_av_cell_one_third.avia-builder-el-first {
padding-bottom: 0px !important;
}
==========================================================================

• This reply was modified 5 years, 8 months ago by webworm72.

thanks Mike ! , We can close this one.