Customize the CSS of a certain page

  • Unknown's avatar
    giuliopizzuto · Member ·

    Hi,

    I’d love to customize the CSS of a certain page of my site – not the entire website.

    Here the example, consider this page: https://e2forum.it/partecipa-a-e2-forum-elevatorescalator/
    Imagine I want to structure it like a CPC landing page, so the navigation bar and the footer shouldn’t show.

    I know how to hide it completely from the website via:

    #site-navigation {
    display: none;
}

    But how can make this work only for that page? Help-desk mentioned the following solution but it’s not working for me:

    #site-navigation.page-id-640 {
    display: none;
}

    Any ideas? Thanks for your attention.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, firstly, you are not allowed to hide or edit the WordPress.com and theme footer credits per our Terms of Service (#1 Attribution). See the Frequently Asked Questions on the Custom Design support page for more information.

    You are allowed to restyle the footer credits to better fit with your design as long as they remain readable, and you are also allowed to add text to the footer, such as a copyright statement. If you need help restyling, or adding to, the existing footer credits, let me know and I would be happy to help with that.

    Please remove this declaration
    display: none;
    from this rule in your custom CSS
    #colophon .footer-bottom
    Many thanks in advance for that.

    There are some very useful, specific CSS classes set in the opening body HTML tag on each page that we can use to target either a certain page type, such as static pages, and if you need to target just a specific page, there is a unique page id CSS class for each page. In the case of the page you reference, this would be the unique CSS class in the opening body tag.
    page-id-640
    Since it is a CSS class, in the CSS we would precede that with a period ( . ) and then add the other CSS class for the div/element we wish to change, like this. 

    .page-id-640 #masthead .main-header-links {
    display: none;
}
  • Unknown's avatar
    giuliopizzuto · Member ·

    Hi, thanks a lot for your reply. Your solution works perfectly.

    Concerning the footer credits: I talked to WP customer care and they told me there’s no need to remove it at the moment. Should things change, it’s no problem to remove the display none property.

  • Unknown's avatar
    thesacredpath · Member ·

    @giuliopizzuto, I’m aware of that discussion for business plan users, so at this time there is no need to remove that CSS hiding the footer credits.

  • The topic ‘Customize the CSS of a certain page’ is closed to new replies.