Fabrice

[Solved 4r] Center tab-buttons

9 posts in this topic

Hi.

There isn't best solution for your requirement.

I have a solution but it only good if you don't add more tabs or you need to change a little when you add or remove tabs.

Please open file /mod_bt_tabs/tmpl/themes/default/css/default.css

Find this rule

.tab-buttons ul{
list-style: none;
background: url("../images/bg_button_tabs.png") repeat-x;
height: auto;
width:100%;
float:left;
height: 42px;
padding:0!important;
margin: 0 !important;
}

change padding: 0 !important to padding: 0 180px

And add this rule to last of the file


@media (max-width:720px){
.tab-buttons ul{
padding: 0 !important;
}
}

Share this post


Link to post
Share on other sites

Hi Reg

Please try this solution.

In file

Find this rule

.tab-buttons ul li {
border-right: 1px solid #D1D1D1;
color: #7A7A7A;
cursor: pointer;
float: left;
font-family: tahoma,arial,time new roman;
font-size: 12px;
font-weight: bold;
height: 22px;
padding: 10px 20px;
text-align: center !important;
text-transform: uppercase;
}

remove float: left; and add display: inline-block;

With this

.tab-buttons ul{
list-style: none;
background: url("../images/bg_button_tabs.png") repeat-x;
height: auto;
width:100%;
float:left;
height: 42px;
padding:0!important;
margin: 0 !important;
}

Add text-align: center;

Add this optional rule to end of file


.tab-buttons ul li:first-child {
border-left: 1px solid #D1D1D1;
}

But i think that this solution only can be applied to module with a small number of tabs

I hope it will help you

Share this post


Link to post
Share on other sites

ok cool..thanks! that sort of works.. but not really on mobile tho as it's too wide .. and also you can't seem to scroll down in the tab pane..any thoughts? also .. the anchor links on the left .. I was hoping that they would work no matter what tab you are in of the anchors are same.. but no ..

Share this post


Link to post
Share on other sites