WordPress.org

1. DebbieT
   Member
   Posted 3 weeks ago #

   I'm working on a WP site for a client and am using the Framework template. I want to have just one column pages for About Us, Contact, Work Examples and two columns for her Blog page. Not being very familiar with WP, I decided to put a little CSS at the top of the pages where I just want one column--see below. The problem is when I switch to the Visual edit view (which is what she'll be using when she makes her own web changes), my styles get turned into comments (<style gets changed to <!-- ). Is there a better way to achieve what I'm trying to do? Here's an example page: http://corporategiftconcierge.com/about/

   <style type="text/css" media="screen">
   #sidebar { width: 0; overflow: hidden; visibility: hidden; display: none; }
   .aside { width: 0px;visibility: hidden; display: none; }
   #content #primary { width: 700px; padding-right: 50px; padding-left: 50px; }
   </style>

2. jeremyclark13
   Moderator
   Posted 3 weeks ago #

   The proper way is to use conditional tags in the actual theme files. Then you can test for specific pages and then give the page the proper CSS.

3. DebbieT
   Member
   Posted 3 weeks ago #

   Thanks I'll try to figure that out.

4. DebbieT
   Member
   Posted 3 weeks ago #

   I've read the Conditional Tags page, but since I don't know php, I really don't know exactly what I have to do. I want to make most of the pages in the site to have one column, and keep the 2 columns for the blog page. I can make a style sheet that removes the 2nd column on certain pages. Do I put the conditional tags in the header.php file? If so, do I just replace this:

   <!-- Stylesheets -->
   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />

   with this? If so, did I miss any codes or details in this? I made a "home" page which is the front page, is it correctly called 'home' in the tag?

   <!-- Stylesheets -->
   <?php

   if ( is_page('home','about','contact-2,'work-samplestestimonials')) {
   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />
   <link rel="stylesheet" href="<?php bloginfo( 'onecol.css' ); ?>" type="text/css" media="screen, projection" />;

   } else {
   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />;
   }
   ?>

   http://corporategiftconcierge.com/

5. jeremyclark13
   Moderator
   Posted 3 weeks ago #

   You've got the basic idea right just some of the code isn't right. This should do the trick though.

   <?php if ( is_page('home','about','contact-2,'work-samplestestimonials')) { ?>
   <link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/onecol.css" type="text/css" media="screen, projection" />;
   <?php } ?>
   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />

6. DebbieT
   Member
   Posted 3 weeks ago #

   Can you double check your code? When I put this in the header.php I get an error message UNEXPECTED T_STRING in line 30, which is where this code was placed. I don't understand all the brackets, semicolons etc. so can't fix it myself. Thanks!

   <?php if ( is_page('home','about','contact-2,'work-samplestestimonials')) { ?>
   <link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/onecol.css" type="text/css" media="screen, projection" />;
   <?php } ?>
   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />

7. jeremyclark13
   Moderator
   Posted 3 weeks ago #

   It looks like a missing quote mark in the original code that I didn't spot. This should work now.
   

   <?php if ( is_page('home','about','contact-2','work-samplestestimonials')) { ?>
   <link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/onecol.css" type="text/css" media="screen, projection" />;
   <?php } ?>
   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />

8. DebbieT
   Member
   Posted 3 weeks ago #

   I feel really dumb. I'm not getting the error message right now, but my pages are not picking up the new styles to remove the right column from the page.
   This is what I'm getting:
   http://corporategiftconcierge.com/work-samplestestimonials/
   This is what I want: http://corporategiftconcierge.com/about/
   I have the styles in with the page text on the about page, that's why its working there.
   This is what I have in onecol.css:
   #sidebar { width: 0; overflow: hidden; visibility: hidden; display: none; }
   .aside { width: 0px;visibility: hidden; display: none; }
   #content-main { width: 800px; }
   I put onecol.css in wp-content/themes/wp-framework/library/media/css. Is that right? All I want the pages to do (except for the blog page) is to pick up onecol.css to override screen.css.

9. jeremyclark13
   Moderator
   Posted 3 weeks ago #

   After going back over the docs again it seems to have it test for multiple pages the code is a bit different.
   

   <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen, projection" />
   <?php if ( is_page(array('home','about','contact-2','work-samplestestimonials'))) { ?>
   <link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/library/media/css/onecol.css" type="text/css" media="screen, projection" />;
   <?php } ?>

   I was also assuming that you put the onecol.css in the main template directory. I've also fixed that in the above code. Hopefully this will work.

10. DebbieT
    Member
    Posted 3 weeks ago #

    Yea, that worked! THANK YOU VERY MUCH! You can mark this thread as "resolved!"

11. jeremyclark13
    Moderator
    Posted 3 weeks ago #

    Just FYI you can mark threads that you've started resolved as well, it is best to mark you own threads because only you know when the problem is resolved.

Reply

You must log in to post.