WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Hide Article Container on Homepage (7 posts)

  1. matt84532
    Member
    Posted 8 months ago #

    I'm trying to hide the article container on my homepage here:

    http://www.wabi.dreamhosters.com/

    As you can see, when the article is left blank, it creates a white line where the container would be. This is because I have the body set to green and the container set to white, which I want site-wide but not on the homepage.

    The easiest thing to do would be to make the background of the homepage container green, but I'm not sure of the precise syntax to do so.

    The relevant CSS already in use is:

    .container[role="main"] {
    background-color: white;
    }

    and it seems to me that it needs to become something like

    page-2 or post-2 or page-id-2 or home container {
    background-color: green;
    ]

    But again, I don't know the syntax to create that command and change the container on this page only to green.

    Any ideas from someone with more knowledge of CSS than I have?

  2. matt84532
    Member
    Posted 8 months ago #

    bump. Any advice?

  3. rdellconsulting
    Member
    Posted 8 months ago #

    Try:

    .article-container {
      background-color: #99CC33;
    }
  4. matt84532
    Member
    Posted 8 months ago #

    @rdell I think that would change the article container sitewide, and I only want it on page 2.

    This works as a hack:

    #page-2 {width: 110%; margin-left: -20px; background-color: #99CC33;}

    But it's bad CSS (width 110%) and it creates a horizontal scroll bar.

  5. matt84532
    Member
    Posted 8 months ago #

    It seems to me that something like

    home.container[role="main"] {
    background-color: #99CC33;
    }

    should work but doesn't. What would be the proper syntax for home container?

  6. rdellconsulting
    Member
    Posted 8 months ago #

    @nikeo provided a number of classes:

    .home = Front Page
    .blog = Posts Page
    .page = Other Pages
    .page-id-n = Selected Page

    So your solution should be:

    .home .article-container {
      background-color: #99CC33;
    }
    or
    .page-id-2 .article-container {
      background-color: #99CC33;
    }
  7. matt84532
    Member
    Posted 8 months ago #

    @rdell Thanks so much! That works beautifully.

Reply

You must log in to post.

About this Theme

About this Topic