Question Community Builder CSS *World Of Difference*

Odly enough I have been working with Community Builder since its first stages really and now and only now have I realized this but thought I would share with everyone.

You can style each Tab individually! <<< Yes, I am serious and its friggin easy!

Open your CB template of choice here: /components/com_comprofiler/plugin/templates/default

Now, visit your Admin Panel for CB Tabs!

Find the tab you want to style and look at its "Tabid" and remember or write down this number. *NOT THE TAB ORDER NUMBER*

Now, in the template.css file which is in the folder mentioned above you will want to add the following: *ANYWHERE* (Would advise adding it at the very bottom)

(47) << This is the "Tabid" mentioned previously, so simply replace it with your "Tabid", save the file and reupload it. Assuming you have actually add some CSS.

When you have finished styling all your Tabs you can further condensce the CSS easily by combining the Tabs that have similar styling or exact styling.

Example of combining (3) tabs with the same styling:

As you can see above I have simply add the added Tabs seperated by comma's. What this does and will do is improve your Page load times by reducing the amount of information your browser has to process.

Afterall, Noone likes long load times.

Example can be seen here: www.industrialjobs.org
Example Login Page: www.industrialjobs.org/index.php?option=com_mtree&Itemid=55

Username: hjames83
Password: tester

Thanks,
James

Your solution for rounded corners does not work for IE6

I don't think it was meant for IE6.

Hi James, many thanks to you. I have started playing with cb templates after reading your this post.

Just one query: How do i change the css of TITLE of tab ?

I am trying to get good look for Ajax field 'what are you doing plugin', but whatever i do, it seems that css is lifted from my website template css file not cb file css. I have selected 'div with title' option in the tab management for wru plugin.

and placed following code in cb template css:

#cb_tabid_xx (xx=my tabid)
div.mystatus status {
background:transparent url(../images/mystatus.gif) no-repeat scroll left top;
color:#FFFFFF;
display:block;
float:left;
font-weight:700;
height:28px;
line-height:28px;
margin:1px 0 0 10px;
text-align:center;
text-transform:uppercase;
width:90px;
}

Thank you in advance.

Wow, I completely missed your post.. you want to change the title of the tabs!

Now let me ask this, are they actually in Tab format or are they in Div With Title format? Can you send me a weblink and I will look at it on your site. Please provide test account login so I don't have to register..

Thanks,
James

@ Grumble

Please join the rest of us IE haters!

No, I know what you mean though and it might not work in IE6 but anyone using such an old web standard should just be shot. I stress to all of my family, friends, associates.. etc that the best web browser is a compliant one and in my opinion that would be FireFox, Google Chrome, Safari

James

Hi James,

I purposely avoided to bump this post as you were sick. I am glad to see you back in the action.

I have been trying to customize the my template after your hint in first post. So far i got success in changing css of some tabs. I am editing on my clone site at localhost computer so i wont be able to provide the access to it.

But i will try to provide as much detail in following paragraph.
1. I have selected DIV WITH TITLE
2. And pasted following css code to change css of tabid_21

So far i got success to change the color to red.

3. Now i want to give different color for the heading and content. for eg.
CITY: London
COUNTRY: UK
WEBSITE: JB.com

for CITY, COUNTRY AND WEBSITE = red color
while for
London, UK and JB.com = blue color

so how do i change color for heading and their content

I have tried like:
but couldnt get the result. Can you please tell me how to do it?

Thank you

I asure you I am not avoiding your question!

E-mail me your website, username and login.

James

James,

Some people do not have a choice in the browser that they use at work. I am unfortunately stuck using IE6. Should I be shot because someone in the corporate IT department doesn't want to upgrade to a more current version, or a better browser? :ohmy:

I use other browsers at home, it's just when I'm stuck at work digging for answers to questions that I have to use this annoying antique...

Take Care,

Dustin

sunnyjey wrote:

I have tried like:

Code:

} #cb_tabid_21,.sectiontableheader { float:right; color:red; } } #cb_tabid_21,.sectiontableentry1 { color:blue; }

You have two brackets after color:red; that will not work.

Perhaps in addition:

If you write #ch_tabid_21, .sectiontableheader
you point to #ch_tabid_21 and to .sectiontableheader

if you want to point only to the .sectiontableheader in #ch_tabid_21
you have to write:
#ch_tabid_21 .sectiontableheader

Perhaps you knew this yet, I don't know your CSS skills