Conditional CSS to display title on Blog only

636 Views Asked by At

I'm trying to hide the page title on ALL pages, except the Blog Roll.

If I make the following changes to the style.css, it will hide the title on all pages, including the blog roll:

h1 {
    Display:none;
    font-size: 48px;
    margin: 33px 0;
}

and

.entry-title {
     Display:none;
     font-weight: normal;
     margin: 0 0 5px;
}

According to http://codex.wordpress.org/Conditional_Tags#Testing_for_sub-Pages, in order to single out the Blog Roll, I need to use the following condition:

if ( is_front_page() && is_home() ) {
  // Default homepage
} elseif ( is_front_page() ) {
  // static homepage
} elseif ( is_home() ) {
  // blog page
} else {
  //everyting else
}

So, I apply these conditions, to my code, where the changes successfully worked initially, however it simply does not work. The titles change size and shape, but are still visiable on ALL pages.

Revised code:

h1 {
    if ( is_front_page() && is_home() ) {
        Display:none;
        font-size: 48px;
        margin: 33px 0;
    } elseif ( is_front_page() ) {
        Display:none;
        font-size: 48px;
        margin: 33px 0;
    } elseif ( is_home() ) {
        font-size: 48px;
        margin: 33px 0;
    } else {
        Display:none;
        font-size: 48px;
        margin: 33px 0;
    }
}

And ..

.entry-title {
    if ( is_front_page() && is_home() ) {
        Display:none;
        font-weight: normal;
        margin: 0 0 5px;
    } elseif ( is_front_page() ) {
        Display:none;
        font-weight: normal;
        margin: 0 0 5px;
    } elseif ( is_home() ) {
        font-weight: normal;
        margin: 0 0 5px;
    } else {
        Display:none;
        font-weight: normal;
        margin: 0 0 5px;
    }
}

Can I not use Display:none; in a conditional statement or something?

1

There are 1 best solutions below

4
On BEST ANSWER

from what i understand, you need to remove title only from blog page. the easiest way to do this with css is

.blog .entry-title{display:none}

where .blog is the class name of your blog page body. (you can get the body class name by inspecting elements.)