Change CSS for Single Page

guys I still have not found a solution but found a semi-solution, I will explain.

First I opened style.css file using notepad ++ and entered this at the end of the line

.entry-content-modified{overflow:visible;padding:0 0px;border-top:3px double #e5e5e5}

next I opened the page file which is a php file located in the theme folder

I located the code for entry-content and pasted some code that looks like this right before the entry-content line, I bolded the additional code I entered as oppose to what was already there just so you can see. Note that “AZ Music” is the name of the single page I wanted to modify.

<?php if ( is_page(‘AZ Music’) ) { ?>
<div class=”entry-content-modified”
<?php } ?>
<div class=”entry-content”>
<?php the_content(); ?>

so this eliminates the padding, but doesnt apply the entry-content table css. If there is something better you guys can think of I am all ears. This is sort of working for what I need but I hope you guys can think of something better.

your theme outputs this body class:

.singular-page-991

maybe try to base your custom css on that css class.

(using Firebug could have shown you this css class easily)

this below does not make any sense, i.e. returns invalid, broken html code:

<?php if ( is_page('AZ Music') ) { ?>
<div class="entry-content-modified"
<?php } ?>
<div class="entry-content">
<?php the_content(); ?>

try to change that to:

<div class="entry-content <?php if ( is_page('AZ Music') ) { echo ' entry-content-modified'; } ?>">
<?php the_content(); ?>

I will try using firebug from now on. The code that you outlined didnt refer to the “entry-content-modified” that I created? I will try what you said, I am fairly new to this as well ?? but it is fun for sure.

also just to clarify, this is what the code looked like before I modified

<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', hybrid_get_textdomain() ), 'after' => '</p>' ) ); ?>
</div><!-- .entry-content -->

this is what it looked like after I modified, note the changes in bold

<strong><?php if ( is_page('AZ Music') ) { ?>
<div class="entry-content-modified"
<?php } ?></strong>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', hybrid_get_textdomain() ), 'after' => '</p>' ) ); ?>
</div><!-- .entry-content -->

Now i definetly don’t know what I am doing but I can tell you that this removed the padding, I created the entry-content-modified CSS in the style.css file. The only issue is I have inserted an excel table in the page and by doing this it removed all table properties. No borders to the table or anything else which I wanted to keep. All I wanted was to get rid of the padding. I will play around a bit more with what you said and maybe I can stumble upon something else. I will start using firebug and make a css based on the .singular-page-991
like you said. Thanks for the help.

[Moderator Note: Please post code or markup snippets between backticks or use the code button.]

You have a messed up div tag in that section now:
<div class="entry-content-modified" <div=""> so you need to fix something in the php that you modified.

You might also need to change the style for the table because of the new class.

Actually can’t see a table at all right now, but I expect your are messing with it.

Make sure that you are validating the page — which may also be helpful in finding problems as you are modifying code (php or css).

okay, not sure what you mean by validating the page. Yeah its funny because I created a css called “entry-content-modified table” and applied the same rules as the orginal “entry-content table” but nothing happened. I was having a few issues uploading my database to the host but will do so when I get home and show you guys what the page looks like now, without padding but also without table properties lol.

CSS can be tricky because specificity can override something that you are trying to make “active” or a small error in coding can mess up a lot of seemingly unrelated code.

See Validating for info on the other — it’s a really useful tool and considered important by most web designers/developers. But because of the evolving nature of standards and browsers, it’s not always simple to sort out which “errors” matter and which might not. But for sure, you do want to make sure that you don’t have real coding errors that are causing problems.

oh great thanks. You know as frustrating as it is I still feel I am learning alot which is great :). Okay will read about validation like you advised.

also just to clarify, this is what the code looked like before I modified

exactly; to clarify – about my reply https://www.ads-software.com/support/topic/change-css-for-single-page?replies=23#post-2786955

when I post two blocks of code with the words ‘change to…’ or ‘replace with …’ then this refers exactly to change the code that is in the first posted block with the code in the second block – simply all of it, not partially, or otherwise.

oh hey sorry about that, i just missed the scroll :).

I will try this later tonight.

hey so I tried it and yes .singular-page-991 worked perfectly. I am guessing firebug saw it, all I saw was entry-content using google inspection. Didn’t try the PHP code but I can see how that will come in handy in the future. Thanks for your help that was great!! :).

I don’t have a link to your page for me to give you the code but I would strongly recommend that you use inline styles for that particular page. It is easy and works all the time.

You don’t want to mess around with the core code.

Hope this gives you the idea to explore further.

Use this and exactly in this format: Also confirm if you have included your style sheet correctly, as I can only see inline style.

#post-991 .entry-content-modified
{
padding-left:0px !important;
padding-right:0px !important;
}

Hey guys, what alchymyth wrote actually worked for my theme specifically. I used .singular-page and I am able to play around with any css for a single page at a time,

but alchymyth I have one final question how did you kno0w that this is what I had to use, you wrote

(using Firebug could have shown you this css class easily)

I am using firebug now but its almost the same as google inspection tool, even with firebug I don’t see how you managed to solve this?

I have one more question if anyone can help, singular-page-991 works for this page now what if I want say page 991-992-993 to have the same attributes. Do I have to re type this entuire thing each time? Is there something like multiple-page991-992-993 that I can use instead?

I basically one want to apply these attributes on pages that contain a table, is there a way to do that? Please if someone could tell me. alchymyth where are you? ??

This solution is for pages and not posts!

Create a page template, open page.php and save this as table.php

Add the template code first after the <?php tag, like this

<?php
/*
Template Name: Tables
*/

Pages > Pages > Edit or Quick Edit and apply this new template page to the pages with the tables.

WordPress will generate a body class:

page-template-table-php

Now you will have a class just for the templated pages!

HTH

David