Adding CSS into page content in Edit Page?

  • Resolved DebT

    (@debbiet)


    15 years, 4 months 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: https://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>

Viewing 10 replies - 1 through 10 (of 10 total)

  • 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.

    Thread Starter DebT

    (@debbiet)

    Thanks I’ll try to figure that out.

    Thread Starter DebT

    (@debbiet)

    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” />;
    }
    ?>

    https://corporategiftconcierge.com/

    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" />
    Thread Starter DebT

    (@debbiet)

    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” />

    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" />

    Thread Starter DebT

    (@debbiet)

    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:
    https://corporategiftconcierge.com/work-samplestestimonials/
    This is what I want: https://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.

    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.

    Thread Starter DebT

    (@debbiet)

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

    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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding CSS into page content in Edit Page?’ is closed to new replies.