Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

overruling stylesheet definitions


roseoliveira1

Recommended Posts

I want to have a different background color for some of the pages of my website. The way I undestand things, I have two options:

(1) use the standard-stylesheet "stylesheet.css" for all my pages and create a different stylesheet for the few pages I want with a different layout. If I call this stylesheet "additional_stylesheet.css", i would have to link to this sheet from the head-section of the respective php-files. considering that my only layout change is a different background-color, I believe that creating an additional stylesheet looks like heavy stuff for a simple problem

(2) the other possibility would be changing the background colour in the <head>-section of the php-file; this background setting should overrule the stylesheet-settings - correct? the problem is - it doesn't work :'( . Can anybody have a look at my code and tell me what I did wrong? Here is the code i put into the .php-file in the catalog/ -directory:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
//added: new background colour
<style type="text/css">
body {background-color: red}
</style>
//EOadded: new background colour
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

 

This was my first own php-coding, it is really simple - but i can't manage do get it running :angry:

 

Thanks for your help,

Rose

Link to comment
Share on other sites

Hi rose,

 

the idea is good (I think), and should work. But one thing is sure: it's not PHP-coding, just plain HTML (the php is between <?php ?> tags), and "// bla bla bla" isn't a valid HTML comment, so you better remove the comments you've added.

 

try something like this:

<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body {background-color: red;} 
-->
</style>
</head>

 

and you also can check the body tag itself, and remove any setting it has, these might intefere with your CSS.

 

edit: if you can post an url it could be easyer to find the problem

Link to comment
Share on other sites

Hi rose,

 

the idea is good (I think), and should work. But one thing is sure: it's not PHP-coding, just plain HTML (the php is between <?php ?> tags), and "// bla bla bla" isn't a valid HTML comment, so you better remove the comments you've added.

 

try something like this:

<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body {background-color: red;} 
-->
</style>
</head>

 

and you also can check the body tag itself, and remove any setting it has, these might intefere with your CSS.

 

edit: if you can post an url it could be easyer to find the problem

 

Hi Paul,

thanks for your comments. Unluckily, the colour change still doesn't work. I just took one of the .php files in the /catalog/-folder and added the command for changing the background colour to the <head>-section - no other changes to the file have been made. Here is the way the code in the <head>-section looks now, after incorporating your comments:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<style type="text/css">
<!-- 
body {background-color: red;} 
-->
</style>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

 

Is maybe my assumption wrong that style definitions inside the php file overrule the stylesheet-definitions? Or is there still something wrong with the code?

 

I cannot post a URL, as I am currently moving my store to a new server (which also causes me quite a bit of a headache).

 

Rose

Link to comment
Share on other sites

Invert the position of the link to stylesheet and what you are adding:

 

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

<style type="text/css">

<!--

body {background-color: red;}

-->

</style>

Link to comment
Share on other sites

Vivianne is right (i didn't notice you were loading the stylesheet.css file after the in document styles).

 

And in document styles do not override external styles, if styles are at the same priority level the last applied style overrules the ones loaded before. But if you assign a more specific style, or even one with the "!important" tag, styles loaded after that will not overrule this.

 

So you could also add "!important" after your newly added style. Not that I recommend it, I would just search the conflicting style and edit or delete it.

Link to comment
Share on other sites

Thanks to the two of you for your help. but it still doesn't work :'( i just cannot figure out what i might be doing wrong; and after all, it shouldn't be that difficult to change the background-colour of a page!

I changed the code according to Vivianne's suggestions, now what I have is

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style type="text/css">
<!-- 
body {background-color:red;} 
-->
</style>
</head>

 

I checked the <body>-section of the file, but as far as I can see there is no other command which would re-set the new colour definitions.

Also, even if I add the !important-tag

body {background-color:red !important;}

,

the background colour does not change.

 

Any ideas????

 

Rose

Link to comment
Share on other sites

Any ideas????

It is starting to get weird :blink:

 

But while writing this I think of it that it's probably just that the layout tables (or div's) are hiding the body background.

 

you can try:

body, table, td, div {
background: red !important;
}

(no need to use background-color, just background wil do)

 

And if that doesn't make any difference, it's time to make sure you are editting the right file :D

 

B.t.w. for testing and while writing code it also can be handy to use inline styles like:

<table style="background: red;">

of course it's wise to move the styles to the stylesheet (or to the top of the file) when you're ready

Link to comment
Share on other sites

Hi Paul,

It is starting to get weird  :blink:

 

It certainly is! Your idea that maybe other elements might be hiding my background seemed a hint in the right direction, so i tested your code

body, table, td, div {
background: red !important;
}

, but it didn't help. Now, I kept on testing different alternatives in order to understand where the problem might be. So this is what happened in the tests:

 

(1) Instead of changing the background colour, I tried to change the format of other elements such as the colour of the text,

body {color:ff0000;}

but with no effect.

Also, he would ignore the command to underline the text

body {text-decoration: underline;}

 

(2) Adding !important does not change anything

 

(3) Just to make sure that nothing is seriously screwed up with my whole system, I changed the background-colour in the stylesheet to red - it works perfectly

 

(4) Then I wanted to see what would happen if instead of changing the format it the <head>-section of the .php-file, I would just import a second stylesheet. This should work, as the second sheet should overrule the definitions in the first stylesheet importet. My <head>-section then looked like this:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="stylesheetred.css">
</head>

 

"stylesheetred.css" is identical to stylesheet.css, just with a different setting for the background-colour. Again, no effect.

 

(5) Then I thought I would not import styesheet.css at all, but only stylesheetred.css:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheetred.css">
</head>

 

But he just keeps the stylesheet-defintions of stylesheet.css! although I don't even link to stylesheet.css, but he just d?esn't give a damn.

 

And if I now delete the file stylesheetred.css, i don't even get an error-message (shouldn't he give me an error, saying that he cannot find stylesheetred.css?)

 

 

This is driving me nuts. I have spent two days trying to change the background colour!!!

 

I even considered your suggestion

 

And if that doesn't make any difference, it's time to make sure you are editting the right file :D

 

I know you meant this half as a joke, but of course, shit like that sometimes happens. but there is no way that I am confusing a file.

 

Do you have any more ideas what the problem might be? By the way, I cannot post a URL as I am currently moving my store to a new server. Another thing which is driving me completely crazy at the moment and causing quite a headache...

 

Thanks a lot for the time you spent on my problem already,

Greetings

Rose

Link to comment
Share on other sites

Hello you people out there,

I justs tested if I could change the background colour of the index.php (all the time I had tried to change the background colour of a page I had created). I used the code of Vivianne and directly after the line

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

 

in the <head> section of the index.php I inserted the code

 

<style type="text/css">
<!-- 
body {background-color: red;} 
-->
</style>

 

, but the background colour of the index page does not change. Could anybody out there please test if you can change the background colour of your index.php by using the code above? After all, maybe it's just my browser screwing everything up. I seriously don't know any more what else might be wrong.

 

Please, just do this test and tell me if it worked. That's one minute of work for you, and it could help me to solve my problem.

 

Thanks!!!!

Rose

Link to comment
Share on other sites

I just tried this on one of my test sites, and it works perfectly. See here. I also tried it on the product info page, with the same result. The head section of my index.php looks like this:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>"> 
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style type="text/css">
<!--
body {background-color: red;}
-->
</style>
</head>

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

I just tried this on one of my test sites, and it works perfectly. See here. I also tried it on the product info page, with the same result.

Regards

Jim

Hi Jim,

thanks for your feedback. Yes, I can see the colourchange on your testsite, so it's not my browser. and my heading-section is identical to yours. I'm really lost now.

 

Does anybody know if my problems migh be caused by the sts_template I installed? Jim, do you use the sts_template?

 

Regards,

Rose

Link to comment
Share on other sites

No, my test site does not use a templating system. I suspect that your template is applying a style or HTML background that is overriding what you have put in the file. I just took a quick look at the STS files, and the default sts_template.html has this in the head:

<html>
<head>
<!--$headcontent-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

If the template that you are using has a stylesheet link like this one, that's your problem.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

No, my test site does not use a templating system. I suspect that your template is applying a style or HTML background that is overriding what you have put in the file. I just took a quick look at the STS files, and the default sts_template.html has this in the head:

<html>
<head>
<!--$headcontent-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

If the template that you are using has a stylesheet link like this one, that's your problem.

 

Regards

Jim

 

Yes, I am using the sts_template contribution, with exactly the code you quoted above. The strange thing is that I even added the !important-tag when trying to set the colour to red - shouldn't this overrule the definitions of the sts_template?

 

Do you have any idea what I could do about the code in the template? can i somehow "switch it off" for defined pages?

 

By the way: I also tried to change the background colour by creating a second sts_template specifically for the page i wanted to have in red, and with frontpage changed the colour. didn't work either.

 

Is there anything you can suggest me to do?

 

Thanks again for your help,

regards,

Rose

Link to comment
Share on other sites

I'm not that familiar with the STS code, but it looks like the stylesheet in the template file comes after all of the others, so it will override them. You could try removing the stylesheet link from the template file and see what happens.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

sts_template.html calls stylesheet also. If it calls it last, then that is the style that would be used. It is possible that you didn't get an error when you deleted the file because your browser was using a cached version. Just a guess. I haven't done any testing.

 

Jason

Link to comment
Share on other sites

I think your STS template is loading other code than you're editting, the STS uses the head and body tag from its template, and it looks you are editting the catalog root files.

After you've editted your CSS/HTML code, do you see the changes you made when looking at your HTML source? (using the browsers "view source")

Link to comment
Share on other sites

Thanks to all of you who have posted their thoughts and ideas, without your help I would not have managed to get this done. YES, I FINALLY MANAGED TO CHANGE THE COLOUR :D :D :D :D :D

 

As you guys correctly assumed, the problem was me using the STS_template. So I created a second sts_templade for the page I wanted in red (while i left the original template the way it was as default for all other pages of my site).

In the new sts_template I added the colour-definition for the background directly below the link to the stylesheet. The code in my new template now looks like this:

 

<html>
<head>
<!--$headcontent-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style type="text/css">
<!--
body {background-color: red;}
-->
</style>
</head>

 

Again, my sincere thanks to everybody who supported me,

regards,

Rose

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...