<?php Header("Content-type: text/css; charset=utf-8");?> 
@charset "utf-8";
/* CSS Document */
.header {
    background-color: rgba(100,100,250,1.00);
    font-size: 40px;
    text-align: center;
}

body {
    background-color: rgba(170,170,170,1.00);
}
.form {
    float: right;
}


.error {
    text-align: center;
    color: rgba(248,0,4,1.00);
    background-color: rgba(0,0,0,1.00);
    font-size: 20px;
}

.image {
    float: left;
}

.welcome {
    color: rgba(0,0,255,1.00);
    text-align: center;
    font-size: 30px;
}

.system {
    color: rgba(10,10,200,1.00);
}

.navigation {
    background-color: rgba(100,100,250,1.00);
    width: 200px;
    height: 350px;
    font-size: 20px;
    float: left;
}
.left {
    float: left;
}
.right {
    float: right;
}



.navigation a {
    color: rgba(9,15,73,1.00);
}

.navigation ul li {
    list-style-type: none;
    display: block;
    width: 150px;
    height: 50px;
    margin-top: 30px;
    text-align: left;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: break-all;
}

.navigation a:hover  {
    background-color: rgba(66,17,208,1.00);
}
.form {
    float: right;
    margin-right: 500px;
    margin-left: 0px;
}

.green {
    color: rgba(0,150,0,1.00);
    text-align: center;
}
.centreMargin {
    float: right;
    margin-right: 350px;
    background-color: rgba(255,255,255,1.00);
}
.centreMargin2 {
    float: right;
    margin-right: 300px;
}


.navigation .current {
    color: rgba(183,183,253,1.00);
}
.searchBar {
    width: 850px;
}
.center {
    text-align: center;
}
.paparan {
    width: 500px;
    margin-left: 500px;
    font-size: 20px;
    text-align: center;
    height: 600px;
    margin-right: 0px;
    margin-top: 30px;
}

.log {
    color: rgba(43,83,245,1.00);
    width: 250px;
    margin-left: 650px;
}
.good {
    background-color: rgba(62,203,19,1.00);
}
.bad {
    background-color: rgba(214,31,34,1.00);
}
.neutral {
    background-color: rgba(82,106,250,1.00);
}
.setting {
    width: 300px;
    margin-left: 300px;
}

This is my CSS code,but once i add this at the top,the main title/header becomes small and the background colour dissapear.

<?php

//start session
session_start();
//Set user specified settings
$theme = $_SESSION['theme'];

?>

 

I already solved it,it's because the session variable is not set at the beginning,but I still don't get why it doesn't work when the session is not set,it's not even in use inside the CSS code???

Why are you doing it like this?

Put the CSS in a separate file and add this to the header:

<link rel='stylesheet' id='my-theme-css' href='https://mysite.com/styles.css' type='text/css' media='all' />

 

Edited June 29, 20197 yr by fisicx

5 minutes ago, fisicx said:

Put the CSS in a separate file and add this to the header:

<link rel='stylesheet' id='my-theme-css' href='https://mysite.com/styles.css' type='text/css' media='all' />

 

Yup,this is what I'm doing,but instead of using .css extension,I use .php,then I link it to the stylesheet.im following one of the website i found.

7 minutes ago, fisicx said:

Why are you doing it like this?

I want dynamic styling,where the user can do setting and choose their colour,font size,etc.

My question is why is the problem happening???now, everything is fine,I just wanna know.

1 hour ago, Cheah Hsun Teik said:

I want dynamic styling,where the user can do setting and choose their colour,font size,etc.

Is this still for your school project?

How exactly are they setting their styles? Do you have an admin area?

Yup,it's still for my school project,just finished it this morning,only have a few unanswered questions left...

And I'm setting my styles from a setting tab,which can be accessed after you login.

In which case just write the changes to a custom css file then call this file as you would any other stylesheet.

thanks,I'll think about it.Btw,I already solved the problem,I don't need to know how to solve,what I want to know is what causes the problem in the first place??

I've basically done everything...

Edited June 29, 20197 yr by Cheah Hsun Teik

Once again, it’s very difficult to diagnose without seeing the site.

How many "billion times" do I need to say,there is no more problems in the code,in the site,everything is working perfectly,so even if I publish the site,there will be no problem to see,I have fixed everything myself,I just want to know why does my previous problems exist,so that the problem arises again a few days later,few months later,few years later,I will have the knowledge to solve it..

I'm sorry if I sound angry or anything,but it sounds like you don't understand my question..

Just read the first two post of this post and answer that,ignore the rest...

Edited June 30, 20197 yr by Cheah Hsun Teik

If you're using php as a css file then it would be treated as such. I "think" reading though it's because the css might be cached? So you have something like;

<link rel='stylesheet' id='my-theme-css' href='https://mysite.com/styles.css' type='text/css' media='all' />

... and in the file it's actually a php file, maybe using some kind of rewrite. In this file you want to customise the css, so something like;

.header {
background-color: rgba(100,100,250,1.00);
font-size: 40px;
text-align: center;
}

... and you want the visitor to be able to change say the font size to 16px based on the $_SESSION['theme']?

If so you'll probably run into trouble because styles.css is a single file and probably cached. Options I would say could be versioning, e.g.

<link rel='stylesheet' id='my-theme-css' href='https://mysite.com/styles.css?version=38' type='text/css' media='all' />

.. then pick up the version parameter and serve a different version based on their preferences?

<?php
$font_size = "40px";
if($_REQUEST['version']==38) {
	$font_size = "16px";
} ?>
.header {
background-color: rgba(100,100,250,1.00);
font-size: <?php echo $font_size; ?>;
text-align: center;
}

Really depends how you're storing the themes and their rules.

Edited July 1, 20197 yr by BrowserBugs