Witch file i need to use to edit the CSS

When I want to edit the CSS (template override), witch file i need to use?

Thanks,
Maurice

as with every other templates there is various css files... most is changed in the template.css - but let me know what you want to change, and maybe i can help

Thanks, yeah i know.

But the point of an override is that when there is an update you dont loose all your changes!

For now I created an extra style... there a 3... i made number 4. By changing the templateDetails.xml and created an extra CSS file style4.css .

Works perfect!

When there will be an update (believe me, there will...) my own editting wont change.

Greeting,
Maurice

nice ... i thought about do that also... good idea

would you mind share the files ?

Hi

Hehe. I'm already preparing a template with such empty css file for overwritting

kool teitbite... would be nice indeed.

Its very simple.

1.) create a stylesheet.... with the name/title:
style4.css

2.) put this stylesheet in the css folder with the other css files (gk_mystore/css)

3.) edit the document:
templateDetails.xml (you can find this in the root folder of the template). Put after <option value="3">Green</option> a fourth option... for exmaple <option value="4">ownstyle</option>. Save the document and replace it in the root of the template folder.

4.) Go to the backend of the website and set the parameter (Template color) of the template style (first one) to the style you just created.

5.) Make youre css edits and your done!

Good luck.

Cheers,
Maurice

Hi

Well, here a way:

Create your own file style and located on css template directory.

For example: ../templates/gk_mystore/css/mystyle.css

Them open this file:

../templates/gk_mystore/layouts/blocks/head.php

and find this line:

Code: Select all

<link rel="stylesheet" href="<?php echo $this->templateurl(); ?>/css/vm/browse_notables.css" type="text/css" />


replace it with:

Code: Select all

<link rel="stylesheet" href="<?php echo $this->templateurl(); ?>/css/vm/browse_notables.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->templateurl(); ?>/css/mystyle.css" type="text/css" />


Now you can add your own style and you will need to add !important rule on classes or comments classes on other css files.

Cheers

Could you please just add just a very brief explanation (no big training lesson...) regarding the above comment form Paulo "...add !important rule on classes or comments classes on other css files...".

I am still getting up to speed with css and a short explanation would help me A LOT to then go and google further how to best modify/override css style sheets.

If you have some recommendable website links to check out for that, sure that would also help if you want to share them, otherwise I guess I will find myself

Just for information: I am working on the elveSocial template. Not much I want to change initially, mainly changing boarders/paddings of the front page content elements to begin with, but I guess it wold be a good idea not to to this in the original CSS but in own "mystyle.css" as discussed in this post.

Thanks for the brief explanation!

Tom

Hi

I think all You need is to install Firebug (plugin for Firefox). With this You can easily search for the right file in css and see the changes live on site.

Thanks. Sure, I know how to get the information in FF and I will identify and be able to edit the related CSS/HTML, but that was NOT my question. Instead of editing the template's CSS I assume it is better to setup a separate "myStyle.css", which was this thread discussing and in which Paulo was commenting "...add !important rule on classes or comments classes on other css files..."." I was asking for a short explanation what he meant. Maybe I don't get the English.

In concrete:

I assume he just means that in the "myStyle.css" to be created an "!important" shall be added to each parameter to force an overwrite of the template's default parameter value.

Correct, or is there something else in what he said which I do not understand?

Thanks

Tom

Hi

"!important" parameter is used when You want this specyfic attribute to overwrite some previous one.

It's not neccessary when You have Your own file loaded as last and there were no !important rule before (in one of the previous files) for this element.

With !important You can also overwrite the styles placed in code for style="" elements