Hide Article Container on Homepage

  • matt84532

    (@matt84532)


    10 years, 6 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?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter matt84532

    (@matt84532)

    10 years, 6 months ago

    bump. Any advice?

    rdellconsulting

    (@rdellconsulting)

    10 years, 6 months ago

    Try:

    .article-container {
  background-color: #99CC33;
}

    Thread Starter matt84532

    (@matt84532)

    10 years, 6 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.

    Thread Starter matt84532

    (@matt84532)

    10 years, 6 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?

    rdellconsulting

    (@rdellconsulting)

    10 years, 6 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;
}

    Thread Starter matt84532

    (@matt84532)

    10 years, 6 months ago

    @rdell Thanks so much! That works beautifully.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Hide Article Container on Homepage’ is closed to new replies.