Replace current css within a css file in php?

Question

I have a custom.css with these rules:

div#widget {background:red !important;}
div#widget2 {background:#f0f0f0;}
div#widget2:hover {background: rgb(10,20,30);}

These rules could be anywhere in the custom.css file:

Example:

div#widget {background:red !important;}
.mainwrapper {background:blue;}
div#widget2 {background:#f0f0f0;}     
p {font-size:12px;}
div#widget2:hover {background: rgb(10,20,30);}

Now my thought is to add another css-file to overrule existing custom.css rules like this:

div#widget {background:yellow !important;}
div#widget2 {background:#000000 !important;}
div#widget2:hover {background: #ffffff !important;}

Instead of adding a new custom css file with !important-rules I'm thinking... Is there a way to replace current custom.css rules with the new background-colors? Is this possible to achieve (in a secure way) in php?

(Now I'm creating a new css like this)

$fp = fopen( "newcustom.css", 'w');
fwrite($fp, $important_css);
fclose($fp);

UPDATE Clarification. I have a system where users can creates widgets. Widget code is created so the user could easily copy and paste it into his/her website. A reference to custom css is created for the user.

Now I'm updating the system... If I have to add new css file then the user would have to have to copy and paste a new widgetcode for the new css to work. If I could replace current custom.css then it would work "right away".

When you wants to to over-write CSS Rules at some particular situation? or just don't wanna use the previous CSS? — hmd
– hmd, Commented Apr 14, 2016 at 6:21
What is the context of this? Why do you need to override CSS? — Aziz
– Aziz, Commented Apr 14, 2016 at 6:25
Look, you just don't want to use the previous written Rules? if yes, comment that part. And if you want to do this in some particular situation, add some Class name for the situation and write a new rule for that particular Class — hmd
– hmd, Commented Apr 14, 2016 at 6:27

Community · Accepted Answer · 2017-05-23 12:31:17Z

3

Overriding matters the ordering of your stylesheets included. So include your new css file later after the custom.css:

<link rel="stylesheet" type="text/css" href="custom.css" />
<link rel="stylesheet" type="text/css" href="new_file.css" />

So, now the last rule override the first one:

div#widget {background:red;}
div#widget {background:blue;} /* this will work */

Whatsoever, the css rules defined later for the same would work.

If you don't want to change your ordering for css rules, you may define some class name per specific page and then work with that:

div#widget.page3_widget {background:blue;} /* this will work */
div#widget {background:red;}

Furthermore, you may see my another answer to know how css specificity work. Knowing css specificity rules, you may play well with your css.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 14, 2016 at 6:20

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

bestprogrammerintheworld Over a year ago

Yes, I'm doing exactly that at the moment. But I'm asking if there would be away of replace current custom.css instead.

ferdynator Over a year ago

I would even go as far as to remove the unnecessary rules from the first file and include the one you need in either page

bestprogrammerintheworld Over a year ago

@ferdynator - what do you mean?

ferdynator Over a year ago

Have 3 files. first for all css but your widget rules. one for widget default styles and one for the new widget styles. Include the main css file plus the widget style you want

bestprogrammerintheworld Over a year ago

@ferdynator - as I said I'm doing exactly that - but that's not my question. The best solution in my case would be if I could replace current custom.css, and not another css.

|

Arshid KV · Accepted Answer · 2016-04-14 06:21:56Z

0

You can easily add new css to your html by using jQuery.

Like (#div_id').css('{ }');

answered Apr 14, 2016 at 6:21

Arshid KV

10k3 gold badges37 silver badges37 bronze badges

2 Comments

bestprogrammerintheworld Over a year ago

jQuery is not an option in my case. The css must be created serverside.

ferdynator Over a year ago

@BhojendraNepal because always jQuery ;)

hmd · Accepted Answer · 2016-04-14 06:24:34Z

0

Why don't you simply add a Class Name for the particular HTML ELEMENT? And by doing this. Write/overwrite the current CSS RULES like:

div.newWidget {background:red !important;}

answered Apr 14, 2016 at 6:24

hmd

9702 gold badges9 silver badges13 bronze badges

Collectives™ on Stack Overflow

Replace current css within a css file in php?

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related