WordPress.org

Ready to get started?Download WordPress

Forums

Using CSS in PHP or PHP in CSS (7 posts)

  1. HassanR
    Member
    Posted 1 year ago #

    Hi,
    This is my website. I am using the theme Confidence (stylesheet.css) with the latest version of WordPress.

    If you visit a post page, for example this one, you can see the white container on which the post content is being shown and the sidebars on that page.
    I wanted to remove the sidebar on the Contact Us page and make it full-width. I did it by adding the following .php file to my theme's folder (custom page template):

    <?php
    /*
    Template Name: No Sidebar/Sales Page
    */
    //Display the header
    get_header();
    //Display the page content/body
    if ( have_posts() ) while ( have_posts() )
    {
    the_post();
    the_content();
    }
    //Display the footer
    get_footer();
    ?>

    The .php file worked perfectly. Now you can see that the sidebar has been removed from the Contact Us page, however, I want the white background container on the Contact Us page to be showed as it was on the post page.

    I know I have to use CSS to do this, please tell me which code does my theme use on the page.php template file to show the white container and how can I use CSS with PHP to show the white container on the Contact Us page.

    As I am a newbie in CSS, PHP, and HTML, please tell me all the steps in detail on how to do this.

    Thanks in advance,
    Hassan Rashid.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Use a browser inspect tool, like Google Chrome's built-in Inspector, to find classes quickly within your HTML. Alternatively you can just right click on the webpage and select, 'View source'.

    You should be looking for the classes within the <body> element, to see whether there are any unique to that page, then use that to target only that page in CSS.

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    you would need to add in the selectors from your main templates which reference the css

    <div id ="something">
      // code
    </div>

    and

    <div class="something_else">
      //code
    </div>

    Those selectors respectively would lead to stuff in your stylesheet that would look like:

    #something {
         css: rules;
    }

    and

    .something_else {
         more: css;
    }
  4. HassanR
    Member
    Posted 1 year ago #

    Andrew that was quick! Thanks. But as I said that I'm a newbie in css and php, please tell me all the steps in detail. Thanks. But I'll try your advice. Maybe then we can proceed.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Copy and paste here the <body>, of your contact page.

  6. Cenay
    Member
    Posted 1 year ago #

    Actually, I looked at the source for the contact page, your full width template is missing a container for you to style. The base container, (<div class="container">) can't be styled because then your background on all other pages would be white on white.

    So, you need to alter the template file for the full page template, to insert a new div with a class you CAN edit to set the background color.

    So, under the <div class="container"> and before "the content" you should add at least one more element. Something like <div class="full-width"> and provide styling rules to set the background.

    In the style.css file, add a new rule like the one shown below:
    .full-width {background:none repeat scroll 0 0 #FFFFFF;}

    Hope this helps.

  7. HassanR
    Member
    Posted 1 year ago #

    Cenay thanks for your help.

    First of all: I now noticed that it's not simply just a white background, but perhaps a background with curved edges, margins and a shadow. Please give me the CSS code with these styles included.

    Now, if I add the

    .full-width {background:none repeat scroll 0 0 #FFFFFF;}

    OR the new CSS code that you give me

    in the style.css file, how do I add the CSS div in the full width php file? There's no <div class="container"> code in the full width php file after which I would add another element.

    However, I did find the <div class="container"> element in the Chrome inspector. But how do I save the CSS changes in my website?

    I'm really confused. I don't know where to and how to start. PLEASE give me the solution to my problem in steps like 1..2..3.. as I would really really really appreciate it. I know I sound like a total dumb stupid person, but it would really help me.

    If you need any more information, please ask.

    Thanks,
    Hassan Rashid

Topic Closed

This topic has been closed to new replies.

About this Topic