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, Apr 14 '16 at 06:21
What is the context of this? Why do you need to override CSS? — Aziz, Apr 14 '16 at 06: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, Apr 14 '16 at 06:27

score 3 · Answer 1 · edited May 23 '17 at 12:31

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 '17 at 12:31

Community

1
1

answered Apr 14 '16 at 06:20

Bhojendra Rauniyar

83,432
35
168
231

Yes, I'm doing exactly that at the moment. But I'm asking if there would be away of replace current custom.css instead. – bestprogrammerintheworld Apr 14 '16 at 06:22
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 – ferdynator Apr 14 '16 at 06:23
@ferdynator - what do you mean? – bestprogrammerintheworld Apr 14 '16 at 06:25
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 – ferdynator Apr 14 '16 at 06:26
@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. – bestprogrammerintheworld Apr 14 '16 at 06:28
I've updated my question. Maybe it makes things clearer -why I want to do this... – bestprogrammerintheworld Apr 14 '16 at 06:34
I think you wanted to remove the previous css being loaded? Then remove it before you insert new stylesheet. – Bhojendra Rauniyar Apr 14 '16 at 06:35
" Is there a way to replace current custom.css rules " ? :-) – bestprogrammerintheworld Apr 14 '16 at 06:36
No. You need to replace the whole file. – Bhojendra Rauniyar Apr 14 '16 at 06:37
Yes I understand I would have replace the file, but is there way to replace the new custom css rules within the new file created? – bestprogrammerintheworld Apr 14 '16 at 06:38

score 0 · Answer 2 · answered Apr 14 '16 at 06:21

0

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

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

answered Apr 14 '16 at 06:21

Arshid KV

9,631
3
35
36

jQuery is not an option in my case. The css must be created serverside. – bestprogrammerintheworld Apr 14 '16 at 06:22
@BhojendraNepal because always jQuery ;) – ferdynator Apr 14 '16 at 06:23

score 0 · Answer 3 · answered Apr 14 '16 at 06:24

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 '16 at 06:24

hmd

960
2
9
13

Replace current css within a css file in php?

3 Answers3