Different css for a page and posts in that page

  • Resolved tcempk

    (@tcempk)


    10 years ago

    Hey,

    still pretty new to wordpress and website building and I have a pretty basic question.

    For example on my page I have 4 menu options. One of those options is for children. I want the page for children to have a slightly different css as well as all of it’s subpages and all articles published in that page too. I tried by changing the css based on ID of the page but that is not working for subpages.

    Any hints? Thanks!

Viewing 14 replies - 1 through 14 (of 14 total)
  • bdbrown

    (@bdbrown)

    Hi tcempk. Try adding this to your css:

    .parent-pageid-999

    where 999 is the id of the “for children” page.

    Thread Starter tcempk

    (@tcempk)

    Ok thanks that did it! Sort of.

    it worked in combination with .page-id-999 but it still didn’t work on articles published on that page. The articles are in category for children so how do I edit css for a category

    bdbrown

    (@bdbrown)

    Can you post a link to your site?

    Thread Starter tcempk

    (@tcempk)

    Sorry I cannot. The only way it’s accessible now it’s trough editing host file. What extra info do you need?

    bdbrown

    (@bdbrown)

    Not sure I understand what you mean by “Sort of.” You applied the same css to the parent page and the subpage, and the articles on the parent page were affected but those on the subpage were not?

    Thread Starter tcempk

    (@tcempk)

    Oh ok, I’ll get into details. Well I applied css to parent page “for children” and it’s subpages “preschool”, “elementery school”, “high school” but at the side I have a alex tabs widget which contains articles that describe books for childeren. So I need those articles, basicly the category “books for children” to have the same css as the pages I described earlier.

    bdbrown

    (@bdbrown)

    The posts in the sidebar widget are constructed differently than the posts on the pages so you’d have to apply different css to get them to look the same as the pages. Without being able to see the web site it becomes much more difficult to figure what has and hasn’t changed. Perhaps you could post up a screenshot of what you currently have and describe what you want to change?

    Thread Starter tcempk

    (@tcempk)

    I haven’t posted in a bit, had some server issues. Anyway.

    On my home page I have a gray topbar/navbar and a picture of the library. Articles posted there are in categories news/books/etc. meant for adults. like here

    Now I have a page “forchildren” (za otroke in mladino – seen on the picture) where I have a blogroll of posts for children which are in categories children’s books/fairy tale hour/etc.

    Now I have changed the (forchildren)page css with .page-id so it looks like this.Orange topbar/navbar and a different pic. Now when I click on the post on that page (that’s in, for example, the category childrens books)to get the full post/article I get the gray scheme. I want it orange like on the “forchildren” page since I went to a post that is in a category for children.

    In short I want all posts in categories meant for adults to have the gray topbar/navbar scheme and all posts in categories meant for children to have the orange navbar/topbar scheme.

    Hope this makes things clear. Thanks for your help so far and in the future.

    You should be able to use the <body> element classes. The class “single” will tell you if you’re on a single post page. Each category name that the post is assigned to is also a class in the <body? element. If the category is multiple words the slug is hyphenated. Punctuation is removed. So, for posts that are in category “children’s books” for example, you should be able to use

    .single.childrens-books
    Thread Starter tcempk

    (@tcempk)

    So if I’m understanding this correctly my css should be

    .single.childrens-books #header {background-image: url()} ?

    Thread Starter tcempk

    (@tcempk)

    the body class has

    <body class="single single-post postid-758 single-format-standard logged-in admin-bar tribe-bar-is-disabled col-3cm full-width topbar-enabled chrome tribe-theme-parent-hueman tribe-theme-child-hueman-child-master page-template-single-php customize-support s1-collapse s2-collapse">

    I don’t see any category class

    Thread Starter tcempk

    (@tcempk)

    eureka! I had to add this to functions.php

    // add category nicenames in body and post class
function category_id_class( $classes ) {
	global $post;
	foreach ( get_the_category( $post->ID ) as $category ) {
		$classes[] = $category->category_nicename;
	}
	return $classes;
}
add_filter( 'post_class', 'category_id_class' );
add_filter( 'body_class', 'category_id_class' );

    Marking as resolved, and thanks for your help. I’ll have to make sure and include you in my thanks in my diploma ??

    You’re welcome. Glad I could help and that you got it working. Thanks for sharing your solution.

    Thread Starter tcempk

    (@tcempk)

    resolved

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Different css for a page and posts in that page’ is closed to new replies.