custom.css

hi

I am trying to make a custom.css for my templates so I can remember where I made the changes but I can't get the template to pick up the new css code unless I put it into one of the other pre-made css files like common.css or general.css. I am using !important but its still not picking it up. what am I doing wrong? because right now my common.css files is sooooooooooooo long it takes me ages to get to the bottom of it and it makes coding difficult. 

You have to load it to the template(s).  You can add your custom.css to the script (forget the name at the moment) that loads in the css files or you can just add it to the _header.html file in the template(s).

By the way, the order that  style sheets are added to a page is important

Really?  Maybe you need to upgrade your editor.

I copied the _header.html from base so I could try to incorporate my custom.css but the _header.html from base template is actually blank. so what exactly do I put in the header.html to make it recognise my custom.css file? 

If I am reading this correctly, you are "tacking" on a CSS file to override CSS code that is being loaded first?

If so, remember that will impact your site speed as the browser has to re calculate the layout as you override it.

I have spent COUNTLESS hours refining my CSS files to reduce the size.  I used VERY little !IMPORTANT commands (only in the responsive bits).

Since I have an old iPhone it gives me a good perspective of how long the site takes to load.

When I 1st started the site was painful on my phone, now, it's pretty spiffy on the old phone and friends new phones it loads great!

Just a bit of advice.

One site that I really like to help reduce the size of the CSS files is... 

http://csscompressor.com/

ok but I still need to know how to incorporate my custom.css file into my template so I can compress it when I am finished

Dear, you really need to learn more about web development, the whole thing, HTML documents, css, javascript, php, everything.  I suggest you sign up for a class at a college and learn, or at least start reading more on the internet about this.  To learn how to add the stylesheet, all you had to do was search the net to find out how.

link rel="stylesheet" href="plugins/fancybox/jquery.fancybox.css" type="text/css" /

 Note: the insert code button is not working; TinyMCE is still removing code.  Put a less than and greater than symbol around the code above.

In this case I added the Dolphin code to add in the url root of your site so it will automatically pick that up for any Dolphin site you might create.

The thing is I want to make the template pick up the .css code and not my actual site. so i don't want it in the root of my site. the project is to make an independent template without altering the css in base or any other module or part of the website. If I gav this template to a friend say they would have to go around altering the root of their website and its not what I am trying to achieve .

and that code just broke everything when I put it into the header if thats where I was supposed to put it

Damn Boonex kept removing the damn code so I ended up pasting the wrong thing in.

AlexT claimed we had a code insert button but TinyMCE still fucks it up.  Makes it damn hard to try to help people by sharing code.

However, this is basic HTML 101 so I shouldn't have to be telling you how to do it.

This includes the Dolphin code to automatically add the site URL so this can be used on any Dolphin site.

LOL, looks like I captured the cursor in the screenshot I took but I think you can figure out that the pipe is not suppose to be there in the name.

I get that, I already had the code worked out. the problem seems to be when I try to put it into the header it breaks the site.

When I open the _header.html file from base the file in my editor on my site it's blank. however when I download the file and look at it in web browser I see this...

__page_description__ __page_keywords__ __dol_images__ __dol_lang__ __dol_options__ __extra_js__ __flush_header__ class="bx-def-font">

this code is completely stripped out on my browser so when i try to put in

link rel="stylesheet" href="<bx_url_root/>shoomboom.com/templates/css/custom.css" type="text/css"/>

the orginal bit i just posted isn't there. when I try to copy and paste the bit thats missing it just disappears again so i am just left with an empty html file that breaks the site. 

oh well i give up trying for now its giving me a headache. I'll concentrate on the other headache of

1. background-color: rgb(250, 255, 189);
2. background-image: none;
3. color: rgb(0, 0, 0);

I am not trying to be mean, I seriously think if you are going to continue to try and build a site that you need to take some classes in web development; there are plenty of such on the internet for free.

Most likely you are not using a text editor to make changes to code.  Download PSPad (windows only) or Notepad++ or something similar to make your code edits.  If you are trying to do this in a control panel, make sure you are editing in ascii mode only with UTF-8 encoding.  I advise against using some of the control panel file editors; I have seen issues with the file manager in cPanel.  Make a secure ftp connection to your site, download the file, edit locally, then upload back to your site using binary transfer; and make a backup on the server as well as locally.

You can also try loading it in the /inc/params.inc.php.  However, the order of loading external sytlesheets matter; you want your sheet to be loaded after any of the default styles. 

If you want this stylesheet to be part of a custom template, then you need to load it through the template.

It just occurred to me where the problem probably lies and I apologise.  I think you are looking at the template files *.html as html documents.  They are not really html documents; they are template files that goes through the template engine's template parser.  You can add html code, like adding a stylesheet but the template parser examines what is in the document, determining what is a key and what is not.  For example, in my example of adding a stylesheet, I included bx_url_root and the template parser reads that and replaces it with the site's address before sending the document out.

I used note pad for the editing and it worked, my editor on-line editor was indeed stripping out the code, I have no idea why but it is what it is. 

I made my first reactive template (*is all proud*). Thanks for your help GG now I can do this I don't need a class. Learning the coding ad-hock was difficult but informative.

 Almost 6 years later, this is still relevant. So anyone stumbling across this as I did, it's still the place to add your css. And as she goes on to mention, order is important. Last in, Last out.

Thanks GG. You're still helping people with these older posts! :)