Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Add body class or id to page

mommaroodles

By mommaroodles
in General Support

Recommended Posts

mommaroodles

♥mommaroodles

Posted
Posted

Add this to the body tag in the template_top.php file.  You can either add class or id.  It' useful if for styling individual pages. This will give you the page name without the .php which you can use for the id or class

<body id="<?php echo basename($_SERVER['REQUEST_URI'], '.php');?>">

You can also add it like this

<body id="<?php echo basename($_SERVER['REQUEST_URI'], '.php');?>" class="<?php echo basename($_SERVER['REQUEST_URI'], '.php');?>">

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites
burt

burt

Posted
Posted

Good idea...

 

1.  Looks like this will carry _get parameters into the identifier.

2.  You cannot have a period, ., full stop in a css identifier without causing problems elsewhere (other than at the very start of the identifier obviously).

 

Note:  I have not tested your code but I think this:

<body id="<?php echo basename($PHP_SELF, '.php');?>">

would work more cleanly.

Link to comment
Share on other sites
mommaroodles

♥mommaroodles

Posted
  • Author
Posted

there is no period in the css - you removing the .php from the file name using php which results in no period in the css at all - but yes your solution is cleaner and better to use - with mine -- I checked it poses a bit of a problem is you have html urls

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites
tgely

tgely

Posted
Posted

Tip: http://addons.oscommerce.com/info/8309

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites
mommaroodles

♥mommaroodles

Posted
  • Author
Posted

very interesting this too - mathiasbynens.be/demo/crazy-class - so one can actually use periods and a whole lot of other characters in classes and id's and it will pass html5 validation

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites
mommaroodles

♥mommaroodles

Posted
  • Author
Posted

How do you propose to place:

.♥

into a stylesheet ?

 

 

Read mathiasbynens.be/notes/html5-id-class

<p class="#">Foo.
<p class="##">Bar.
<p class="♥">Baz.
<p class="©">Inga.
<p class="{}">Lorem.
<p class="“‘’”">Ipsum.
<p class="⌘⌥">Dolor.
<p class="{}">Sit.
<p class="[attr=value]">Amet.

<p id="#">Foo.
<p id="##">Bar.
<p id="♥">Baz.
<p id="©">Inga.
<p id="{}">Lorem.
<p id="“‘’”">Ipsum.
<p id="⌘⌥">Dolor.
<p id="{}">Sit.
<p id="[attr=value]">Amet.
<p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!

This is not something I would use obviously - but I'm merely illustrating that it can be done and will actually validate correctly as html5 aswell as html 4.01

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites
mommaroodles

♥mommaroodles

Posted
  • Author
Posted

Read mathiasbynens.be/notes/html5-id-class

<p class="#">Foo.
<p class="##">Bar.
<p class="♥">Baz.
<p class="©">Inga.
<p class="{}">Lorem.
<p class="“‘’”">Ipsum.
<p class="⌘⌥">Dolor.
<p class="{}">Sit.
<p class="[attr=value]">Amet.

<p id="#">Foo.
<p id="##">Bar.
<p id="♥">Baz.
<p id="©">Inga.
<p id="{}">Lorem.
<p id="“‘’”">Ipsum.
<p id="⌘⌥">Dolor.
<p id="{}">Sit.
<p id="[attr=value]">Amet.
<p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!

This is not something I would use obviously - but I'm merely illustrating that it can be done and will actually validate correctly as html5 aswell as html 4.01

 

 

and here is the stylesheet as used in the demo

 html { font: 1.2em/1.6 Arial; }
   code { font-family: Consolas; }
   li code { background: rgba(255, 255, 255, .5); padding: .3em; }
   li { background: orange; }
   #♥ { background: lime; }
   #© { background: lime; }
   #“‘’” { background: lime; }
   #☺☃ { background: lime; }
   #⌘⌥ { background: lime; }
   #♪♩♫♬ { background: lime; }
   # { background: lime; }
   #\? { background: lime; }
   #\@ { background: lime; }
   #\. { background: lime; }
   #\3A \) { background: lime; }
   #\3A \`\( { background: lime; }
   #\31 23 { background: lime; }
   #\31 a2b3c { background: lime; }
   #\<p\> { background: lime; }
   #\<\>\<\<\<\>\>\<\> { background: lime; }
   #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. { background: lime; }
   #\# { background: lime; }
   #\#\# { background: lime; }
   #\#\.\#\.\# { background: lime; }
   #\_ { background: lime; }
   #\{\} { background: lime; }
   #\.fake\-class { background: lime; }
   #foo\.bar { background: lime; }
   #\3A hover { background: lime; }
   #\3A hover\3A focus\3A active { background: lime; }
   #\[attr\=value\] { background: lime; }
   #f\/o\/o { background: lime; }
   #f\\o\\o { background: lime; }
   #f\*o\*o { background: lime; }
   #f\!o\!o { background: lime; }
   #f\'o\'o { background: lime; }
   #f\~o\~o { background: lime; }
   #f\+o\+o { background: lime; }

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites
mommaroodles

♥mommaroodles

Posted
  • Author
Posted

 

and here is the stylesheet as used in the demo

 html { font: 1.2em/1.6 Arial; }
   code { font-family: Consolas; }
   li code { background: rgba(255, 255, 255, .5); padding: .3em; }
   li { background: orange; }
   #♥ { background: lime; }
   #© { background: lime; }
   #“‘’” { background: lime; }
   #☺☃ { background: lime; }
   #⌘⌥ { background: lime; }
   #♪♩♫♬ { background: lime; }
   # { background: lime; }
   #\? { background: lime; }
   #\@ { background: lime; }
   #\. { background: lime; }
   #\3A \) { background: lime; }
   #\3A \`\( { background: lime; }
   #\31 23 { background: lime; }
   #\31 a2b3c { background: lime; }
   #\<p\> { background: lime; }
   #\<\>\<\<\<\>\>\<\> { background: lime; }
   #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. { background: lime; }
   #\# { background: lime; }
   #\#\# { background: lime; }
   #\#\.\#\.\# { background: lime; }
   #\_ { background: lime; }
   #\{\} { background: lime; }
   #\.fake\-class { background: lime; }
   #foo\.bar { background: lime; }
   #\3A hover { background: lime; }
   #\3A hover\3A focus\3A active { background: lime; }
   #\[attr\=value\] { background: lime; }
   #f\/o\/o { background: lime; }
   #f\\o\\o { background: lime; }
   #f\*o\*o { background: lime; }
   #f\!o\!o { background: lime; }
   #f\'o\'o { background: lime; }
   #f\~o\~o { background: lime; }
   #f\+o\+o { background: lime; }

classes

 html { font: 1.2em/1.6 Arial; }
   code { font-family: Consolas; }
   li code { background: rgba(255, 255, 255, .5); padding: .3em; }
   li { background: orange; }
   .♥ { background: lime; }
   .© { background: lime; }
   .“‘’” { background: lime; }
   .☺☃ { background: lime; }
   .⌘⌥ { background: lime; }
   .♪♩♫♬ { background: lime; }
   . { background: lime; }
   .\? { background: lime; }
   .\@ { background: lime; }
   .\. { background: lime; }
   .\3A \) { background: lime; }
   .\3A \`\( { background: lime; }
   .\31 23 { background: lime; }
   .\31 a2b3c { background: lime; }
   .\<p\> { background: lime; }
   .\<\>\<\<\<\>\>\<\> { background: lime; }
   .\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. { background: lime; }
   .\# { background: lime; }
   .\#\# { background: lime; }
   .\#\.\#\.\# { background: lime; }
   .\_ { background: lime; }
   .\{\} { background: lime; }
   .\#fake\-id { background: lime; }
   .foo\.bar { background: lime; }
   .\3A hover { background: lime; }
   .\3A hover\3A focus\3A active { background: lime; }
   .\[attr\=value\] { background: lime; }
   .f\/o\/o { background: lime; }
   .f\\o\\o { background: lime; }
   .f\*o\*o { background: lime; }
   .f\!o\!o { background: lime; }
   .f\'o\'o { background: lime; }
   .f\~o\~o { background: lime; }
   .f\+o\+o { background: lime; }

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites
burt

burt

Posted
Posted

Ok, it doesn't matter. I'm not conveying what I'm saying very well.

 

He does not use a stylesheet in that example. He places the css direct in the HTML page.

It's flawed from start to finish and should not be used.

Link to comment
Share on other sites
mommaroodles

♥mommaroodles

Posted
  • Author
Posted

whether you put the stylesheet on the page or in an external file is really not the issue - it is quite valid and correct and there is no hard and fast rule that stipulates that a stylesheet MUST be placed in an external file.  While the document still validates correctly - I dont think you can say that it is flawed.

 

If it was flawed it wouldnt validate correctly!

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites

Archived

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

Go to topic listing
×
×
  • Create New...