[SOLVED] profile page tab width

bigdaddy130
OFFLINE
Posts: 3
Thanks: 0
Karma: 0

13 years 8 months ago - 13 years 8 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:

Last edit: 13 years 8 months ago by bigdaddy130.

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48622
Thanks: 8302
Karma: 1446

13 years 8 months ago - 13 years 8 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

Code:

.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

Code:

.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.

Last edit: 13 years 8 months ago by krileon.

The following user(s) said Thank You: bigdaddy130

Please Log in or Create an account to join the conversation.

bigdaddy130
OFFLINE
Posts: 3
Thanks: 0
Karma: 0

13 years 8 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 or Create an account to join the conversation.

Moderators: beat, nant, krileon