[SOLVED] profile page tab width

12 years 11 months ago - 12 years 11 months ago #159237 by bigdaddy130
[SOLVED] profile page tab width was created by bigdaddy130
I'm trying to make the tabs in the profile page larger to accommodate longer titles and also make the text a little bigger. What CSS file and class should I look for to edit the size? Looking at the CSS code in Safari developer tools does not get me very far in figuring this out. See screen shot for what I'm referring to. I've used three templates from Joomla, YooTheme and RocketTheme and all have the same issue, so I'm assuming it's in the CB layout somewhere.

Joomla 1.6.1
Safari 5.0.4 and Firefox 3.6
CB 1.4
Attachments:

Please Log in to join the conversation.

12 years 11 months ago - 12 years 11 months ago #159328 by krileon
Replied by krileon on topic Re: profile page tab width
CB templates that have images for Tab backgrounds have a set width. This can be fixed using the default CB template or a CB template that does not have images for backgrounds. Based on the image you're using Luna template. Please see the below CSS responsible for tabs.

Selected Tab
IN: components/com_comprofiler/plugin/templates/luna/template.css
ON: Line 213
.dynamic-tab-pane-control .tab-row .tab.selected, .dynamic-tab-pane-control .tab-row .tab.selected:hover {
    background: url("tab.active.png") no-repeat scroll 0 0 transparent;
    border-bottom-width: 0;
    font: 11px Tahoma,sans-serif;
    height: 18px;
    margin: 1px -3px -1px 0;
    padding: 2px 0 0;
    top: -2px;
    width: 74px;
    z-index: 3;
}

Non-selected Tab
IN: components/com_comprofiler/plugin/templates/luna/template.css
ON: Line 185
.dynamic-tab-pane-control .tab-row .tab {
    background: url("tab.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: default;
    display: inline;
    float: left;
    font: 11px Tahoma,sans-serif;
    height: 16px;
    margin: 1px -1px 1px 2px;
    overflow: hidden;
    padding: 2px 0 0;
    position: relative;
    text-align: center;
    top: 0;
    white-space: nowrap;
    width: 70px;
    z-index: 1;
}


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
The following user(s) said Thank You: bigdaddy130

Please Log in to join the conversation.

12 years 11 months ago #159949 by bigdaddy130
Replied by bigdaddy130 on topic Re: profile page tab width
Thanks, this was exactly what I was looking for. There was also one other section of code for the hover state. I edited that one also and everything fits and looks great. I changed the margin slightly to center the text vertically in the tab, as it was not in the default mode.

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.266 seconds

Facebook Twitter LinkedIn