Using CSS in PHP or PHP in CSS

  • HassanR

    (@hassanr)


    11 years, 5 months 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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months 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.

    Rev. Voodoo

    (@rvoodoo)

    11 years, 5 months 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;
}

    Thread Starter HassanR

    (@hassanr)

    11 years, 5 months 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

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

    cenay

    (@cenay)

    11 years, 5 months 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.

    Thread Starter HassanR

    (@hassanr)

    11 years, 5 months 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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Using CSS in PHP or PHP in CSS’ is closed to new replies.