Styling fields with CSS

15 years 8 months ago #67711 by rowby
Styling fields with CSS was created by rowby
I need to style some of my fields. Bigger font, centering, etc.

Here is an example of the HTML:

<td id="cbfv_60" class="fieldCell">Rowby</td>

However it seems to be inheriting its font size from the body font.

How do I dig into the code (or whatever) to adjust the font size.

Is the font size styled in for the fields or for the tabs.

I guess there's some documentation that goes into this? Or forum faq's??

Thanks

Rowby

Please Log in to join the conversation.

15 years 8 months ago #67735 by rowby
Replied by rowby on topic Re:Styling fields with CSS
From my testing....

It appears that some fields can be formatted via CSS and some fields cannot be formatted via css.

Or at least that is what I am finding out via testing in the CB back end.

Mainly trying to get some fields to have different size fonts and colors. And in some cases to add some padding and margins.

My testing tells me:

1) It has nothing to do with tab position.

2) It has nothing to do with the title of the tab.

3) It apparently has nothing to do if it is a user created field or tab.

3) It appears to have nothing to do with if the field is a part of the cb core (plug-in)

Could there be something in the configuration panel that says which fields can be formatted?

I'm sure someone will jump in and tell me the answer. And I have a feeling it is someting very simple!

:evil:

Post edited by: rowby, at: 2008/07/08 13:28

Please Log in to join the conversation.

15 years 8 months ago #67975 by beat
Replied by beat on topic Re:Styling fields with CSS
getfirebug.com

then click the small bug, enable it, click the small "inspect" button, and click where you are trying to guess were the style comes from :)

bottom right, you will see CSS filename and line, and hovering file, you will see the path :)

Beat - Community Builder Team Member

Before posting on forums: Read FAQ thoroughly -- Help us spend more time coding by helping others in this forum, many thanks :)
CB links: Our membership - CBSubs - Templates - Hosting - Forge - Send me a Private Message (PM) only for private/confidential info

Please Log in to join the conversation.

15 years 8 months ago #68010 by radio
Replied by radio on topic Re:Styling fields with CSS
Some things within CB can be really tricky to style via css even with firebug. I had problems with the class sectiontableentry especially because this is used in many joomla components as well as CB and the styles are normally specified in the main joomla template. Changing this often affected the whole site not just the cb profile so in then end i found it simpler to just edit the core CB files and change sectiontableentry to something else and just use that in my CB template CSS.

Interested in improving Joomla as a social networking platform? If yes join joomlaplazza.com

Please Log in to join the conversation.

15 years 8 months ago #68056 by beat
Replied by beat on topic Re:Styling fields with CSS
radio wrote:

Some things within CB can be really tricky to style via css even with firebug. I had problems with the class sectiontableentry especially because this is used in many joomla components as well as CB and the styles are normally specified in the main joomla template. Changing this often affected the whole site not just the cb profile so in then end i found it simpler to just edit the core CB files and change sectiontableentry to something else and just use that in my CB template CSS.


CB 1.2 RC 2 has in addition of sectiontableentry and other joomla-standard classes a cbsomething class :) :

e.g.:

[code:1]<table class="cbFieldsContentTab cbFields">
<tr class="sectiontableentry1">
<tr class="sectiontableentry2">
<tr class="sectiontableentry1">
<tr class="sectiontableentry2">
...
[/code:1]
You can in CSS use cascading, to not influence joomla, like this:

instead of:

[code:1].sectiontableentry1 { .... }
[/code:1]
use:

[code:1].cbFields .sectiontableentry1 { .... }
[/code:1]
for fields everywhere, and for profile only, use:

[code:1].cbFieldsContentTab .sectiontableentry1 { .... }
[/code:1]
Do not use:

[code:1]table.cbFieldsContentTab tr.sectiontableentry1 { .... }
[/code:1]
as in one of next CB versions, tables will disappear from profiles :)

Beat - Community Builder Team Member

Before posting on forums: Read FAQ thoroughly -- Help us spend more time coding by helping others in this forum, many thanks :)
CB links: Our membership - CBSubs - Templates - Hosting - Forge - Send me a Private Message (PM) only for private/confidential info

Please Log in to join the conversation.

15 years 8 months ago #68173 by radio
Replied by radio on topic Re:Styling fields with CSS
I cant seem to get rid of the grey background color in the cb status list field cell.

I have this css which gets rid of the title cell but not the field cell in the status list:

[code:1].cbFields .sectiontableentry1, .sectiontableentry2 {

font-size:11px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#4D4D4D;

background:none;

padding:1px;


}[/code:1]

Any idea how to fix this? I notice there is a significant change in the code from 1.1 where it displays the status list.

Interested in improving Joomla as a social networking platform? If yes join joomlaplazza.com

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.697 seconds

Facebook Twitter LinkedIn