asked on

How to overwrite default Joomla CSS for tables

Hi
I need some detailed help to overwrite the default settings for tables in Joomla CSS

I have a concrete example on:
http://new.bogense-heldagsskole.dk/index.php?option=com_content&view=article&id=7&Itemid=10

Towards the top of the article I have 2 colums that I have made with a customized plugin.
As you see it has a border on the left

It takes the settings from

.art-article th, .art-article td
{
border-left: solid 1px #000000;
}

Below that again I have a new table with pictures
They are made in a table as well, and as you see, it applies the boarder on the left from above setting in CSS.

I have read alot about this on the net and forum and it sounds so simple
I have tried to add several things to the CSS file but it does not appear as "style" in my JCE editor so I can not apply it
I think its because i dont understand the different from
#table.test
.table.test
table.test
div.table.test
etc... Its still like a jungle for me :)

So if anyone can help me to what to enter ti CSS file so I can easy apply it in the editor.
Preferable so I can use the drop down "style" in my editor to apply it

Hope someone can help me

Regards

ASKER CERTIFIED SOLUTION

Allan Nisbet

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

nickvillaume

Do you want the border on just the table or do you want the border on each column as it shows now?

morten444

ASKER

Hi
Thanks For your advice
Yes what I want to do is to remove all borders around the table that has all the staff members.

I managed to acheve that now by adding

#leftcolumn {
border-right: 0px;
border-left: 0px;
}

See:
http://new.bogense-heldagsskole.dk/index.php?option=com_content&view=article&id=7&Itemid=10

2 questions
I wanted to get this option "leftcolumn" to appear in the "style" drop down in JCE editor.
but its not there. Do you know what I need to do to get it there?

The site is for someone that dont want to "code" and I have done a site long time ago where that worked. I have just no idea what I am doing different now

nickvillaume

To make it appear in the drop down there, you will need to duplicate the style in the file:

templates/your-templates/css/editor_content.css

Open in new window

morten444

ASKER

Hi
Hm I dont have that file. I am using Artisteer to create the template
I am using JCE editor

I know that it should be possible to add it in CSS file and then it should appear in Style automatically as its looking in the CSS files for styles. is it not?
I know that statement in CSS can be
#font
.font
div.font
etc...

In the test you gave me i used #font

Can I add the same code to CSS just using Class in stead?

How to add Class to CSS
and how activate it in the article

Sorry for lack of knowledge.. I just still need som "ping" experiences in all this consepts in CSS as I am a little lost!!

Thanks for patient

Regards

morten444

ASKER

Hi. Thanks
This fixed the problem. Have not resolved how to get them directly into "styles" in the editor
I think its just to add right type of css to the css file, then it will appear. I have done it one year ago and it was there automatically. Just cant remember how

Cheers