PDA

View Full Version : Page specific conditional css?



aliceinwonderla
Aug 10th, 2009, 06:15 AM
I'm just starting to understand and appreciate PHP and some of the great things it can do, like setting conditions for certain page elements to load.

I wonder if this is possible within CSS?

I know there is browser specific conditional CSS, but what about webpage specific conditional CSS?

To be more precise, I have my style sheet telling .post to be a certain width, position, etc.


.post {
display:block;
left:0px;
overflow:hidden;
position:relative;
width:750px;

What I'd like is that for one specific page on the website, .post should have a different width and position.


.post {
display:block;
left:-190px;
overflow:hidden;
position:relative;
width:950px;

Because it is code generated from PHP, I can't just set a different class/name to .post on this page. I need something that says "what page is this? if it's the HOME PAGE, it should load THIS CSS for .post. for all other pages, load THAT CSS for .post".

Is this at all possible or am I dreaming?

_Aerospace_Eng_
Aug 10th, 2009, 06:48 AM
Well how exactly is it generated with php? You could read the filename with php. If you are using a query string that tells what php should do then you can read that. We need to know more about how you are generating your files.

aliceinwonderla
Aug 10th, 2009, 10:22 AM
Hi Aerospace - yes how ridiculous I completely forgot to mention I'm using wordpress, so this is a page.php file which is used by every "page" on my wordpress site.

http://www.drinkmealice.com.au/blog/

is the URL and the gap down the side is for a dynamic sidebar. I don't want a sidebar on the intro page, though - which is why I was hoping I could configure the css to load the content on the intro page to fill the entire width of the container.

_Aerospace_Eng_
Aug 10th, 2009, 11:29 AM
I'm guessing you are using some rewrite rules in htaccess. What do your urls look like before you rewrite them?

If you aren't using htaccess you could try this. Put this somewhere in the main template

<?php
$str = substr($_SERVER['REQUEST_URI'],1); // we get the url and remove the first /
$patharr = split('/',$str); // now we split it up using / as our delimiter
// now in the body we use a ternary operator to echo out id="full" only if the size of our array is less than 3. If its 3 or greater then we aren't on the intro page.
?>
<body <?php echo (sizeof($patharr) < 3) ? 'id="full"' : ''; ?>>
I've used the body element as an example, just put the php inside where you body element is located. Now in your CSS add this

#full .post {
display:block;
left:-190px;
overflow:hidden;
position:relative;
width:950px;
}
BTW this is probably more of a php question.

aliceinwonderla
Aug 10th, 2009, 12:27 PM
Wow Aerospace that worked!! Thank you so much, I'm blown away.

The only thing is, it's now set a lot of other elements out of alignment and I have no idea why. For example, the navlist has been pushed up about 10px, and if you click "about us" or "shop online" the list elements in the sidebar are all squashed.

What could cause that? It doesn't seem logical.

_Aerospace_Eng_
Aug 10th, 2009, 12:30 PM
You have some errors. You have this

<div id="content" style"float:left; width:780px;">

there is no way your post stuff can fit in a div that is 780px wide. You are missing an equal sign there too. You did exactly what I told you not to do. The code my post was an example. You weren't literally supposed to leave the body tag there. You were supposed to apply the php to your own body element. That is why everything looks "smushed".

aliceinwonderla
Aug 10th, 2009, 01:02 PM
You have some errors. You have this

<div id="content" style"float:left; width:780px;">

there is no way your post stuff can fit in a div that is 780px wide. You are missing an equal sign there too. You did exactly what I told you not to do. The code my post was an example. You weren't literally supposed to leave the body tag there. You were supposed to apply the php to your own body element. That is why everything looks "smushed".

Oh sorry, I misread the body element note. I see the error in that div code, and I've removed the style altogether, I must have accidentally left that in there before I edited the stylesheet to specify that width.

Anyway maybe I'm a bit more of a n00b than I let on but since this is Wordpress I actually have no idea where to find the original body tag... all my template files are in PHP. I moved the body tag you told me not to use further into the page.php file and now it all works.

I feel stupid for leaving it there but since it works I'm just gonna run with it... unless there is something really explicitly wrong with leaving it there?

Thanks for the help even if I'm doing it wrong, I really appreciate it!

_Aerospace_Eng_
Aug 10th, 2009, 10:16 PM
You aren't supposed to have two body elements. Login to your wordpress admin panel. Then go to the themes manager. Here you find all of the files that you can edit. I think you want to edit the header file. That might be where the body tag you need to edit will be.

aliceinwonderla
Aug 13th, 2009, 09:15 AM
Thanks so much I found it! I'll address future problems in the PHP forum :) Thanks!!

aliceinwonderla
Aug 17th, 2009, 03:03 AM
Sorry to bump this up again... I just realised that when I added it to the real body tag, the code id's ALL my pages as "full" rather than just that one I wanted to be id'd as "full".

Any thoughts?

_Aerospace_Eng_
Aug 17th, 2009, 03:10 AM
Any page within the blog directory will have id="full"

The other folders about, shop, etc will don't and will not have it. You don't add id="full" to the body tag. The PHP will add it for you if it needs to. Your site doesn't reflect any changes you've done other than have 2 body tags.

aliceinwonderla
Aug 17th, 2009, 03:56 AM
Ah yes sorry - when I realised the problem I changed it back to two body tags to show a friend. I have changed it back to the correct body tag.

http://www.drinkmealice.com.au/blog/about/

As you can see this page now overlaps the menu.

I assume I have done something wrong still - I am so sorry, I must be very exasperating!!

_Aerospace_Eng_
Aug 17th, 2009, 08:24 AM
You still have another body tag here in there further down. Post the exact code you are using.

aliceinwonderla
Aug 17th, 2009, 08:50 AM
Oh bugger! OK I have removed that second <body> tag now - I didnt realise I'd left it there.

I am using the code you gave me
<body <?php echo (sizeof($patharr) < 3) ? 'id="full"' : ''; ?>> now in the header.php file and there should be no other <body> tags anywhere else.

I have a feeling I'm not supposed to be using that code exactly as you gave it to me... but I'm not sure what I should be changing?

Oh goodness I feel so stupid >_<

_Aerospace_Eng_
Aug 17th, 2009, 09:38 AM
You are using it correctly. Now try changing this

<?php echo (sizeof($patharr) < 3) ? 'id="full"' : ''; ?>
to this

<?php echo (sizeof($patharr) <= 2) ? 'id="full"' : ''; ?>

aliceinwonderla
Aug 17th, 2009, 03:45 PM
Nope :(
I also tried changing it to 1 instead of 2, no luck.
It is currently set to 2.

What else could we try?

_Aerospace_Eng_
Aug 17th, 2009, 05:47 PM
Change this

<body <?php echo (sizeof($patharr) < 3) ? 'id="full"' : ''; ?>>
to this

<body <?php echo (sizeof($patharr) < 3) ? 'id="full"' : ''; ?>>
<?php echo '<pre>';
print_r($patharr);
echo '</pre>';
?>
Let me know when you've done so. Its going to print out some stuff so don't be alarmed.

aliceinwonderla
Aug 17th, 2009, 06:21 PM
Done :)
Nothing happened, though (printing). It didn't fix the problem, although I'm assuming it wasn't meant to?

_Aerospace_Eng_
Aug 17th, 2009, 08:27 PM
No it wasn't meant to fix the problem but it does tell me why its doing it to all of the pages. Where is this code now?

<?php
$str = substr($_SERVER['REQUEST_URI'],1); // we get the url and remove the first /
$patharr = split('/',$str); // now we split it up using / as our delimiter
// now in the body we use a ternary operator to echo out id="full" only if the size of our array is less than 3. If its 3 or greater then we aren't on the intro page.
?>
It should be towards the top of your index.php page.

aliceinwonderla
Aug 18th, 2009, 02:41 AM
It was at the top of page.php so I moved it to index.php.

What next?

_Aerospace_Eng_
Aug 18th, 2009, 07:13 AM
You never told me how your pages were setup. Are you using any htaccess files? Please post those. Also post your code for index.php

What I'm asking what are you doing to make each page seem to have its own directory?

aliceinwonderla
Aug 18th, 2009, 07:24 AM
Oh goodness... I have no idea. I've never used any .htaccess files myself. I just go in the WP backend and choose "new page". WP turns them into "directories" rather than files.

Would it be easier if I gave you a username and password to my backend and you could log in and see? I'll need your e-mail address.

_Aerospace_Eng_
Aug 18th, 2009, 07:25 AM
Thats totally up to you.

aliceinwonderla
Aug 18th, 2009, 08:15 AM
I think it might be easiest. What's your e-mail address? I'll need it to create your account.

_Aerospace_Eng_
Aug 18th, 2009, 09:21 AM
There you go. The variable $patharr was never being set properly though there was no reason why it shouldn't have been set. I moved the first code I gave you near the body tag. Now it seems to work just fine.

aliceinwonderla
Aug 18th, 2009, 10:11 AM
Thank you so much!
Really, you've been absolutely RIDICULOUSLY helpful.