Permanently changed stylesheet

Question

I am trying to develop an interface for the admin of a site to be able to change the stylesheet of the site by clicking a button or link.

I know that you can change the stylesheet by applying the change to a cookie but that is per computer. I need to be able to change the stylesheet permanently so it changes for all users and the only person that can change it is the admin. Is there a way to do this? I have no code yet.

You mean like storing the stylesheet to use in a database and then using the database value where you link the stylesheet? — RMcLeod, May 03 '13 at 16:23
Store what stylesheet to use in database, read from database to get stylesheet choice. Admin can change db value. — Brock Hensley, May 03 '13 at 16:23
@dirt would I then use something like jquery to apply the change or can I use php? — Zach Starnes, May 03 '13 at 16:24
Just use php to put the stylesheet to use in the href attribute of the link element — RMcLeod, May 03 '13 at 16:25
So you (the admin) want to be able to change the style-sheet at will, while your audience just watches what the page will render? — klewis, May 03 '13 at 16:25
Why in the database? Just have it in the file root and replace it when the administrator uploads a new one. — Dave Chen, May 03 '13 at 16:26

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

If you're happy to use a database you could simply have a table such as settings, in which you'd store the URL of the stylesheet, then on your page use something in the form:

<link rel="stylesheet" type="text/css" href="<?= $stylesheet ?>">

Where $stylesheet is the result of a query to the database.

For the table you'd have a column called key and one called value, and the stylesheet row would have the values stylesheet_url and http://example.com/style.css respectively.

Alternatively you could allow admins to directly edit the CSS file and use PHP to save the changes to the file, this wouldn't require a database and could potentially improve performance. A quick search reveals just how easy this would be.

edited May 23 '17 at 10:25

Community

1
1

answered May 03 '13 at 16:25

Tom Walters

15,366
7
57
74

so I would store the actual CSS sheets in the file structure of the temple as normal the only purpose the php serves is selecting – Zach Starnes May 03 '13 at 16:29
For the DB structure you'd store the files and alter the URL served. For the direct-editing, you'd need only have the 1 CSS file. – Tom Walters May 03 '13 at 16:31
okay would I have to have a column that says something like `chosen` and set that to 1 on whichever one is selected? or is there a better way? It would be nice if you would not mind giving me some php code :) – Zach Starnes May 03 '13 at 16:35
I've added an example of how to structure the settings table, for info on database manipulation with PHP I'd suggest [PDO](http://php.net/manual/en/book.pdo.php). – Tom Walters May 03 '13 at 16:38
so what would the php look like? would i use a foreach? – Zach Starnes May 03 '13 at 16:38
_Which_ PHP code? For inputting to the DB or retrieving? If you're unsure of either you'll have to use that link. – Tom Walters May 03 '13 at 16:40
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29384/discussion-between-zachstarnes-and-tom-walters) – Zach Starnes May 03 '13 at 16:40
@zachstarnes, the PHP coding may be more involved that you think, which is why a front-end approach may be more efficient for you in this specific situation. – klewis May 03 '13 at 16:53

score 0 · Answer 2 · answered May 03 '13 at 16:23

0

Storing it on a database via BLOB is possible
This is a pretty decent reference http://www.it-iss.com/mysql/mysql-inserting-and-reading-blobs-in-php/

answered May 03 '13 at 16:23

Willy Pt

1,795
12
20

No need to store the entire stylesheet, just the name of it – RMcLeod May 03 '13 at 16:24
Note: This would be used for storing the entire stylesheet contents in the database as compared to just a filename to reference – Brock Hensley May 03 '13 at 16:24
You would end up having many file stored on the host if you do so. – Willy Pt May 03 '13 at 16:25

score 0 · Answer 3 · answered May 03 '13 at 16:27

Already have your style sheets on your page, and correctly design the architecture of your selectors (i.e. your ID's and Classes) in proper groups, per page type.

Now this makes it easy for you to focus on JavaScript (optional), if you want to use for example, a drop-down box to reload a certain section of your DOM to change ID's and Class's, all without refreshing your page.

Also no need for PHP, let the PHP handle the back-end data, while this process controls the styling.

score 0 · Answer 4 · answered May 03 '13 at 16:59

The following is a PHP generated stylesheet that uses a template for a chat room. I'm just posting it as an example which you might be able to adapt to your own purposes. Notice the header that specifies the content type:

header('Content-type: text/css');

//I forgot what v stands for, but it's an array of user defined styles.
$v['uid'] = 'u'.$id;
$v['msg_bg'] = 'FFFFFF';//background color of message window
$v['user_c'] = '0114A0';//color of user's name
$v['action_c'] = '990000';//color of enter/exit messages
$v['other_c'] = '270049';//color of the names of others
$v['text_c'] = '000000';//general text color
$v['font_s'] = '16';
$v[''] = '';
$v[''] = '';

$css = <<<EOTAAA
#userwindow{
    margin:  0 0 20px 20px;
}

#messagewindow, #userwindow{
    background-color: #%msg_bg%;
    font-size: %font_s%px;
    font-family: Tahoma, cx-bair, Arial, sans-serif;
}

#messagewindow p {
    color: #%text_c%;
    font-family: Tahoma, cx-bair, Arial, sans-serif;
}

#messagewindow p b, #userwindow p{
    color: #%other_c%;
}

#messagewindow p.self b, p#%uid%{
    color: #%user_c%;
}

#messagewindow p span{
    color: #%action_c%;
    text-transform: uppercase;
    font-size: 12px;
}

EOTAAA;

//custom font filenames
$cx[] = "bair";
$cx[] = "century_gb";
$cx[] = "oakwood";
$cx[] = "plantc";
$cx[] = "salzburg-bold";
$cx[] = "sanskrit";
$cx[] = "timess";

$font_css = '';

$font_template = <<<EOTAAB

@font-face {
    font-family: cx-%fontname%;
    src: url("%url%fonts/%fontname%.eot");
}

@font-face {
    font-family: cx-%fontname%;
    src: url("%url%fonts/%fontname%.ttf");
}

EOTAAB;

foreach ($cx as $key => $value){
    $font_css .= str_replace(array('%fontname%', '%url%'), array($value, base_url()), $font_template);
}

foreach ($v as $key => $value){
    $search[] = '%'.$key.'%';
    $replace[] = $value;
}

echo str_replace($search, $replace, $css).$font_css;

Permanently changed stylesheet

4 Answers4