Forums

newbie on creating and using custom css file with theme

Permalink
I purchased a theme but it doesn't include all the styling I want. So I thought I'd create a simple css file and link it to the pages where it's needed.

I'm new to this so I'm sure I'm missing something obvious here.

When I edit a webpage in the theme, there's a section called "Add To Header". I assume whatever I type in here will be between the <head>...</head> tags. So I place here:

<style type="text/css">
.customIndent { margin-left: 30px; }
</style>

and then when I use <p class="customIndent">...</p> I can see the indent works fine.

Now I want to place this css inside an external file and link it to this header section, and I can't get it working.

I create the following file:

~public_html/css/customStyles.css

and inside this file I type:

.customIndent { margin-left: 30px; }

Then I removed the <style> code I added above in the "Add To Header" section, and replaced it with:

<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('css/customStyles.css')?>";</style>

Well, this didn't work. So then I replaced the above text with:

<link rel="stylesheet" type="text/css" href="css/customStyles.css" media="screen, projection">

and this didn't work either.

I suspect the path isn't correct. Note that the theme is buried deep in some directory, but my css file is in ~public_html/css/customStyles.css. I tried getStyleSheet('https://www.mydomain.com/css/customStyles.css') as well as href="https://www.mydomain.com/css/customStyles.css", but neither worked. How to make sure I've got the path specified correctly?

I also tried placing the customStyles.css file inside the root css directory (e.g. ~public_html/conc/css/) thinking maybe it would auto-load, but this didn't work either.

What's the recommended method to include custom css file in a project?

Any help much appreciated.

UPDATE:

I found this link:

http://www.concrete5.org/community/forums/customizing_c5/new-css-fi...

and used the last solution to add a css file reference ad hoc to individual pages, which worked. For reference:

1. On any page, open the Properties dialog and select the Custom Attributes tab

2. Under the Page Header section, select Header Extra Content

3. In the Header Extra Content box, add a css link reference; e.g.:

<link rel="stylesheet" media="screen" type="text/css" href="/css/customStyles.css" />
 
INTcommunications replied on at Permalink Reply
INTcommunications
Adding css to certain pages is not necessary as the first page load will cache your style changes anyway. Personall, I just throw in a css page in most of my products and direct it to whatever I am styling with as much detail as possiblle - which will override any css stlye with the same name.

Just make a bland css page ( i.e. myStyle.css ) and throw it in a directory of where e er your styles are in the theme you are using ( i.e. styles/myStyle.css or css/myStyle.css

then reference it in the header.php of your theme. Usually found in the elements folder in your theme.

i.e. <!-- Main stylesheet -->
<link rel="stylesheet" href="<?php echo $this->getThemePath() . '/style/myStyle.css';?>">

It is really easy to give your style sheet the direct reference with .less ( If you are not less - you should google it - it makes this kind of thing really easy to code )

Anyway - what I mean by direct reference is-

Css in most cases runs the code that is closest to the actual element.
So if you threw in a style right in the element it self it would be the dominant one - i.e. <p style="background-color:#000;"> this is text </p>
The p tag above would have a black background even if in your style sheet it said P{background-color:#FFF;}- in this case all p tags would have a black background except the one that has it coded right in.

Most the time you would reference things directly by basically telling CSS exactly which element to style

ie:(IN YOUR STYLE SHEET )

#header .RedTxt p (color:#FF0000; font-weight:bold;)

On your page
<div id="header" class="RedTxt"> <p> Some Text</p> </div>

Some Text would be: red and bold

If you want to overide a css rule that has already been run - use the !important; rule. the !important; tells your browser that it is really important to override any other reference to whatever you are changing - so
p {
color: red !important;
}
#myColor {
color: green;
}

<p id="myColor">Will be RED.</p>

Hope this helps.

Jim
jwapp replied on at Permalink Reply
Thanks for the info. Regarding,

>Just make a bland css page ( i.e. myStyle.css ) and throw it in a directory of
>where e er your styles are in the theme you are using ( i.e. styles/myStyle.css
>or css/myStyle.css, then reference it in the header.php of your theme.
>Usually found in the elements folder in your theme.

would updating the theme result in replacing the folder where my custom css file sits, as well as overwriting whatever file I link to it? If so, would I need to repeat this procedure each time I update the theme?
INTcommunications replied on at Permalink Reply 1 Attachment
INTcommunications
Of course you are right about that - updating a theme would probably overwrite the css that is in the theme folder. I was thinking that if you were building a theme to resale or package up you would have to have the css in the theme folder or no one else would ever see it. Overrides are part of concrete though. That's why there are all those empty folders in the root.

Don't know what theme you are working with, but if you follow the same folder structure from the root you can drop your new css file in an override folder.
So if you wanted to override the greek_yogurt css - you would go to your root and make a greek_yogurt folder inside your themes folder (see attachment)and then change what ever you like. You may have to use the !important; after changes in case the class or id is somewhere else.

Hope this helps
Jim



This how to explains it-
http://www.concrete5.org/documentation/how-tos/designers/modify-a-p...

A lot of people copy the whole theme and drop it in the themes folder on the root.
Jim