Jump to content

How to make the site read my .css first?


Recommended Posts

I have make a css, I make a lot of changes on the global.css. Now I have two css. Some of the codes are the same on the two css, but just the color is different. How can I make the site read my css first? And only take the codes I have changes instead the global.css?

Is there a way to do it or I have to combine two css together?

Share this post


Link to post
Share on other sites

I think you will need to import your CSS last, so that it overrides any other imported CSS files. You could also try adding !important after your styles to prevent them being overridden.

Share this post


Link to post
Share on other sites
I think you will need to import your CSS last, so that it overrides any other imported CSS files. You could also try adding !important after your styles to prevent them being overridden.


Thank you for your help. How can I import mine list? Do I need to go to each tpl and put import mine.css?

Share this post


Link to post
Share on other sites
I have make a css, I make a lot of changes on the global.css. Now I have two css. Some of the codes are the same on the two css, but just the color is different. How can I make the site read my css first? And only take the codes I have changes instead the global.css?

Is there a way to do it or I have to combine two css together?


Not sure if you're comfortable to hack into header.php but this is how I do it.
For your case I would add another line after line 9.

Line 9 (before addition)
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';



After change (see the extra line?)

$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
$css_files[_THEME_CSS_DIR_.'my_modified_file.css'] = 'all';



Use your filename in place of 'my_modified_file.css'
Placing your modified css file in the second line will override the first css file.

I would then upload a copy of my css file separate to the original file under themes/theme_name/css.
No need to combine the two css files together!

Hope this helps.
If someone else has a better idea please let me know.

Share this post


Link to post
Share on other sites

This is another way of doing it.

Put your "my.css and the global.css in the same folder,

In the global.css, at the beginning (first line), add the following codes

import 'my.css';

/* MY CSS */
........


Therefore, the my.css has priority over the global.css! You don't need to combine two css together.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More