Tab design - rounded corners

12 years 5 months ago #182256 by Evopro
Tab design - rounded corners was created by Evopro
Hi

I want to have rounded corners on all tabs in the user area. This is how it looks now:



I think it is horrible. But when I go to "Update your profile" it suddenly looks great:



How can I make all tabs look like they do when I go to the edit area?

Best Regards
Johan Niklasson
Attachments:

Please Log in to join the conversation.

12 years 5 months ago #182261 by nant
Replied by nant on topic Re: Tab design - rounded corners
Try switching CB templates from CB Configuration User Profile tab.

Please Log in to join the conversation.

12 years 5 months ago - 12 years 5 months ago #182265 by Evopro
Replied by Evopro on topic Re: Tab design - rounded corners
Hi Nant

I am using "default" everywhere on this installation to get to know CB while building a rather extensive site for a Swiss company.

We spoke on the phone once, I will soon need to talk more with you.

The difference in how the tabs are shown confuses me. I have all settings on default and still it differs so much. I do use Tachyon Rockettheme template which use a "3rd party styling" css fie. This seems to step in and be used when on the Edit Profile page but not on the normal profile page.

I wish I could have it work on all CB pages but I don´t know how to make that work.

UPDATE: I fixed this by editing the template.css file. I just needed to add code for rounded corners in the "For dynamic tabs on user profile and edit user" section in that file.

This is the code I used:

/* For dynamic tabs on user profile and edit user: */

.dynamic-tab-pane-control h2.tab {border-color: #CDCDCD;color: #CDCDCD;border-top-left-radius: 4px;border-top-right-radius: 4px;-moz-border-radius-topright: 4px;-moz-border-radius-topleft: 4px;}
.dynamic-tab-pane-control h2.tab a {border-color: #CDCDCD;color: #444;border-top-left-radius: 4px;border-top-right-radius: 4px;-moz-border-radius-topright: 4px;-moz-border-radius-topleft: 4px;}
.dynamic-tab-pane-control h2.tab a:hover {
background: transparent;
}
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 100%;
margin: 0px;
}
.dynamic-tab-pane-control .tab-row .tab {
font-family: Menu,Arial,Verdana,sans-serif;
cursor: pointer;
display: inline;
margin: 1px -1px 1px 4px;
float: left;
padding: 2px 3px 3px 3px;
background: #E4E4E4;
border: 1px solid #CDCDCD;
border-width: 0px;
z-index: 1;
white-space: nowrap;
position: relative;
top: 0px;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
background: #FFF;
border: 1px solid #CDCDCD;
border-bottom: 0px;
z-index: 3;
padding: 2px 6px 4px 6px;
margin: 1px -3px -1px 0px;
top: -2px;
}
.dynamic-tab-pane-control .tab-row .tab a {
font: 13px Menu,Arial,Verdana,sans-serif;
padding: 0px 5px 0px 5px;
color: #000;
text-decoration: none;
cursor: pointer;
outline: 0;
}
.dynamic-tab-pane-control .tab-row .tab.hover {
background: #F2F2F2;
}
.dynamic-tab-pane-control .tab-page {
clear: both;
border: 1px solid #CDCDCD;
background: #FFF;
z-index: 2;
position: relative;
top: -2px;
color: #000;
font-family: Message-Box,sans-serif;
width: 100%;
border-top-left-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;
}
.dynamic-tab-pane-control .tab-row {
z-index: 1;
white-space: nowrap;
}
.dynamic-tab-pane-control .tab-page .tab-content {
margin: 20px;
width: auto;
}

Now they look like this:





Best Regards
Johan Niklasson
Attachments:
The following user(s) said Thank You: nant

Please Log in to join the conversation.

12 years 5 months ago #182298 by nant

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.240 seconds

Facebook Twitter LinkedIn