Forums

[resolved] Change CSS for Single Page (37 posts)

  1. maxpayne13
    Member
    Posted 1 year ago #

    Hey everyone, please I am in desperate need of some help. So I would like to remove the padding inside the entry-content but only for one page.

    I am using google chrome and this is the exact line of code I need to change

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

    all I want to do is change the 20px to zero for 1 page only.

    I added this to CSS file but no luck

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

    Please can anyone help?

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    http://www.w3schools.com/css/

    try to add a space before the .entry-content class selector as this is not in the same container as the body class:

    .page-id-991 .entry-content{overflow:visible;padding:0 0px;border-top:3px double #e5e5e5}
  3. maxpayne13
    Member
    Posted 1 year ago #

    hey thanks for your prompt reply, unfortunately that did not work. I will explain a bit further in more detail since I have your attention :). When I open the CSS file using notepad ++ I located this line

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

    now I did not add the page number to this line or change the padding because I still want this rule to apply to all other pages, so what I did was scroll to the very end of the file (to the right in notepad++) and added this line

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

    I applied the space like you mentioned but still page 991 remained the same as others, the padding is still there. Not sure what to do, hopefully this makes sense.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If the page ID is an ID (not a class) the correct CSS is #page-id not .page-id.

  5. maxpayne13
    Member
    Posted 1 year ago #

    hey WPyogi,

    I actually already tried this as well

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

    again I added this to the very end of the line and did not edit the current rule

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

  6. maxpayne13
    Member
    Posted 1 year ago #

    you are right its not a class, I haven't tried with a space though. Will try it soon.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you using Firebug to identify what CSS code is ACTUALLY affecting the section you are trying to change? That's the best way to do CSS modifications.

  8. maxpayne13
    Member
    Posted 1 year ago #

    hey, I am using google chrome inspection tool not firebug but trust me its def the right CSS rule. I know because after I located it I went into the CSS.style file opened, found the rule and edited the 20px to 0px and it worked but it applied it to every page. I only wanted for it to apply to a single page.

    also I'm fairly new to WP :)

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    So did you get it to work?

  10. maxpayne13
    Member
    Posted 1 year ago #

    I will know in about 3 hours, I will try to ad this specifically

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

    but not optimistic because i think I tried it before lol

  11. maxpayne13
    Member
    Posted 1 year ago #

    no it did not work, this is how it looks in the file when I added it.

    #sidebar-video .byline{margin:0 0 20px 0;padding:0;font-size:10px;line-height:20px;color:#777}#page-id-991 .entry-content{overflow:visible;padding:0 0px;border-top:3px double #e5e5e5}

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Unless you include a link to your site, it's really hard to give any real help on this.

  13. maxpayne13
    Member
    Posted 1 year ago #

    sure here is the specific page too

    http://216.172.171.18/~carranza/test3/?page_id=991

    I basically placed an excel table inside the post and when I change the padding it fills in the entire space. Let em know what you think, I can send you the CSS.ctyle file too if you think that will help. Thankyou :)

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm not clear on what you want changed -- what is inside the table or around it? If it's the contents inside the table cells, you have to specify the <td> cells in the CSS.

  15. maxpayne13
    Member
    Posted 1 year ago #

    I just want to eliminate the space between the edge of the excel table and the edge of the post container. Not sure if that is the correct term. If you are using google chrome and right click in between the space you can see that the CSS is the entry-content. You can play around with the CSS using chrome as well so i changed the padding to 0 instead of 20px and it gets rid of that space. Thing is you actually have to change it in the CSS file for it to apply because chrome doesn't edit the CSS for you. So when I access the CSS.style file and find entry-content, the specific one I want and change it, it works fine but it applies it to every page not just the one I sent you the link for. How do I make it so I can get rid of that padding only for that specific page.

  16. maxpayne13
    Member
    Posted 1 year ago #

    i still have not found a solution to this, is it possible that this theme is somehow protected in some way (I am using the news theme)or maybe there is another css preventing me from making this change?

  17. maxpayne13
    Member
    Posted 1 year ago #

    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.

  18. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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(); ?>
  19. maxpayne13
    Member
    Posted 1 year ago #

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

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  21. maxpayne13
    Member
    Posted 1 year ago #

    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.

  22. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  23. maxpayne13
    Member
    Posted 1 year ago #

    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.

  24. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

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

    exactly; to clarify - about my reply http://wordpress.org/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.

  25. maxpayne13
    Member
    Posted 1 year ago #

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

    I will try this later tonight.

  26. maxpayne13
    Member
    Posted 1 year ago #

    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!! :).

  27. Good Guy
    Member
    Posted 1 year ago #

    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.

  28. gizmofreak
    Member
    Posted 1 year ago #

    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;
    }

  29. maxpayne13
    Member
    Posted 1 year ago #

    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?

  30. maxpayne13
    Member
    Posted 1 year ago #

    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? :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.