Show After Header content on landing page only


(Clark Varner) #1

Hey everybody, I have some after header content I only want to show on the landing page.

Right now I can create content that is specific to all the other subpages using the body class like this:

.showthisdiv {display:block;}
body.subpageclass1 .showthisdiv {display:none;}

This won’t work for the landing page however because the landing page body class name is blank like this:

<body class=""> ...

Does anyone know a way around this? I have been searching for the last day or so, but cannot find it.

Edit
The format mentioned works as seen on this fiddle:
https://jsfiddle.net/endormoon812/dxo5710z/7/


(Penar Musaraj) #2

Try using body[class=""] as your selector. It should select only the pages where body has an empty class.


(Clark Varner) #3

Thank’s for the response! Getting closer, however, I just tried it and it didn’t work. Can you show me how it would look in the context of my sample CSS?


(Clark Varner) #4

On the plus side though, this is how you can create header content specific to a page.


(Simon Cossar) #5

I’m not finding the body class on the homepage to be blank. The classes that are present depend on whether or not there is a logged in user, but either the class navigation-categories or the class navigation-topics should be present.

If your homepage is displaying categories, you may be able to target that page with .navigation-categories. If your homepage is displaying the latest topics, targeting it with CSS may be difficult, because navigation-topics will appear on the latest, top, and unread pages.


(Clark Varner) #6

I found an article that contained a good solution.

Instead of referring to the " " body class I could easily reference all other body classes instead.

Thanks for the help. I really should write a guide for this and put it in the themes section.