Add custom css to pages and single posts

Can you please post a link to your site (preferably to a page using your custom template) so we can see how your CSS is being applied?

Unfortunately I can’t post a link because my site isn’t live, but here’s a link to some screen shots I took of the page:

https://drive.google.com/folderview?id=0B9rCxpD0n_yMflk3RDFkenBIM2V2bWszZWpQN0ZhN216XzcxVnFOMm02UFJNZGtPNGhoOFU&usp=sharing

It is basically showing the content as taking up the full width of the page, whereas I want it to be as one single column that is 650px wide and floating in the middle of the page (centered under the site title)

You can try adding this rule to your child theme’s style.css file:

.single-post #content,
.singular-page #content {
   width: 650px;
   float: none;
   margin: 0 auto;
}

I tried adding that code but nothing changed :/ It is still displaying with a width of 980px (I figured this out by using the ‘inspect element’ tool in google chrome). Any other suggestions?

OK, since you’re somewhat familiar with Chrome’s DevTools, look for the line in the left pane of DevTools that begins with <main and highlight it (i.e., click on that line). Hopefully it has an ID of content? If not, what classes or ID does that line contain?

In the right pane will be the CSS rules which affect that element. There should be one that sets the width property. On my plain install of the Omega theme, it’s this rule:

.content {
   float: left;
   width: 600px;
}

Do you see a similar rule which sets the width of that element?

Yes, I found the <main tag and it does have an ID of content:

<main class=”content” id=”content” role=”main” itemprop=”mainContentOfPage” itemscope=”itemscope” itemtype=”https://schema.org/Blog”&gt;

Also my css rule looks like yours:
media=”all”
.content {
float: left;
width: 650px;
}

I should mention, I realized that there was another item in the single.php code that I had changed from the original (previously), so I reverted that back. I’ve gone back and forth changing/trying so many things that I wanted to start afresh with your advice. So here is what my single.php doc looks like:

<?php
/**
* The Template for displaying all single posts.
*
* @package Omega
*/

get_header(); ?>

<main class=”<?php echo omega_apply_atomic( ‘main_class’, ‘content’ );?>” <?php omega_attr( ‘content’ ); ?>>

<?php
do_action( ‘omega_before_content’ );
do_action( ‘omega_content’ );
remove_action( ‘omega_after_main’, ‘omega_primary_sidebar’ );
?>

</main><!– .content –>

<?php get_footer(); ?>

The only item that is different from Omega’s page.php template is the line ‘remove_action’ which removed the sidebar. I also added the .single code which you mentioned above to my css and now my single posts are displaying at 650px, but still hanging to the left as if the sidebar is there but invisible.

Sorry, I had a slight syntax error in my CSS rule. Instead of .single-post, it should be .singular-post:

.singular-post #content,
.singular-page #content {
   width: 650px;
   float: none;
   margin: 0 auto;
}

Omg! It worked!! I am beyond grateful to you! I’ve been trying to accomplish this simple thing for 2 days now and wanting to rip my hair out.

Can you help me to do the same to my pages? I’ve already created a custom full width page template and applied it to my pages and need to apply the same css styling. Here is my full-width page template that I created:

<?php
/**
* Template Name: Full Width
*
* @package Omega
*/

get_header(); ?>

<main class=”<?php echo omega_apply_atomic( ‘main_class’, ‘content’ );?>” <?php omega_attr( ‘content’ ); ?>>

<?php
do_action( ‘omega_before_content’ );
do_action( ‘omega_content’ );
remove_action( ‘omega_after_main’, ‘omega_primary_sidebar’ );
?>

</main><!– .content –>

<?php get_footer(); ?>

It is exactly the same as the single.php file, so I’m guessing that I would need to add css for this as well?

The CSS that I gave you should have worked for pages as well. That’s what the .singular-page #content selector is for. Is it not working?

I cleared my cache and you’re right, they are displaying as they should now ??

I’m having one last issue though. I have a couple pages that I still have set to the default template, meaning I would like those pages to appear as the home page does, with the content on the left, 650px wide, and the sidebar on the right, at 285px wide. I only want the pages that are set to the template ‘Full Width Page’ to appear as above (centered, 650px wide, no sidebar).

For the pages that are still set to the ‘Default template’, the content is getting centered at 650px wide and the sidebar is getting pushed down to below the content. Here’s a link to a screenshot:
https://drive.google.com/open?id=0B9rCxpD0n_yMS241ZzhIQjl6Q0U&authuser=0

The homepage screenshot is how I want the content to appear on pages that are still set to ‘Default template’

Sorry, here is the correct link that should show you both screenshots:

https://drive.google.com/open?id=0B9rCxpD0n_yMflk3RDFkenBIM2V2bWszZWpQN0ZhN216XzcxVnFOMm02UFJNZGtPNGhoOFU&authuser=0

OK, so what we will do is add a special class that is unique to your template. It can be any name, something unique to your site would be good. Then, in each of your templates, change this line:

<main class="<?php echo omega_apply_atomic( 'main_class', 'content' );?>" <?php omega_attr( 'content' ); ?>>

to this:

<main class="no-sidebar <?php echo omega_apply_atomic( 'main_class', 'content' );?>" <?php omega_attr( 'content' ); ?>>

So the only difference is that I added no-sidebar right after the opening double quote.

Now, tweak the CSS rule so it looks like this:

#content.no-sidebar {
   width: 650px;
   float: none;
   margin: 0 auto;
}

Note that we only need one selector, now, for both single posts and pages, because we only need to rely on the .no-sidebar class to target our CSS because it will be unique to your template. Also note that in the template code, you need a space after no-sidebar, but in the CSS, there should be no space between #content and .no-sidebar.

You are a gem! It worked and I’m incredibly grateful to you! Thank you so kindly for your help and patience ??