Motif theme – How to change a category page?

• 

  orangemediatique · Member · Nov 20, 2014 at 4:17 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I would like to make some changes on this page of my blog:
  http://orangemediatique.fr/category/blog/

  As it is a category page, it seems that I can’t edit it in the dashboard. So I can’t find its page number to make some changes in the CSS!

  I would like to change the font size and color of the header and of the content. Moreover, I would like to remove the title of the category (“blog”) and the widgets (search, archive…) on the right column.

  Somebody knows how to do that?

  Thanks a lot!

  Marine

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Nov 20, 2014 at 7:07 pm

  • Copy link

  You can target this page with .archive.category-blog. Here is some example code for you to try out. I’ve assume that you wanted to stretch the main content area across to take up the space left over from removing the side bar:

  .archive.category-blog .page-title,
  .archive.category-blog #secondary {
    display:none;
  }
  
  .archive.category-blog #content {
    padding:0 24px;
  }
  
  .archive.category-blog #primary {
    width:100%;
    margin:24px 0 0 0;
  }
  
  .archive.category-blog .entry-title a {
    color:red;
    font-size:1.5em;
  }

• 

  orangemediatique · Member · Nov 21, 2014 at 11:01 am

  • Copy link

  Great!!! It’s perfect! Thanks a lot.

  I thought that the changes I’ve made on this category page would also apply to the blog posts page. I was wrong.

  Therefore, I’ve got a new question. How to change the blog posts page so that all blog posts look the same?

  I would like to change the font size and color of the title and of the content. Moreover, I would like to remove the widgets (search, archive…) on the right column.

  Do I have to change the CSS post by post?

• 

  hallluke · Member · Nov 21, 2014 at 11:18 am

  • Copy link

  You can target your blog page(s) by swapping .archive.category-blog for .blog. You specifically asked for how to change one category page so that’s what you got! If you want to style all category pages then you can use .archive.category instead.

  If you want to get more creative then you can always use the browser inspector to see what classes are used on different pages of your site.

• 

  orangemediatique · Member · Nov 21, 2014 at 3:20 pm

  • Copy link

  Thanks hallluke!

  The inspector is a very useful tool.

  I tried to use .blog to change this page:
  http://orangemediatique.fr/2014/10/31/mais-enfin-cest-quoi-une-strategie-editoriale/

  With this kind of CSS for instance:

  .blog  #secondary {
    display:none;
  }

  (and I also tried .archive.blog and .category-blog and .post…). It’s not working! Do you know what am I doing wrong?

  Sorry to bother you again, I am a beginner!

• 

  hallluke · Member · Nov 21, 2014 at 3:35 pm

  • Copy link

  That’s a single post not an automatically generated page (like the blog or archive pages). For unique pages or posts you should inspect the HTML and look at the classes assigned to the body element. You should be able to see a unique identifier, for this page it is postid-437.

  Then you can use it like so:

  .postid-437 #secondary {
  display:none;
  }

  However this code will only hide the sidebar section on that specific post, all the other posts will show the sidebar as normal. Is that what you were trying to achieve?

• 

  orangemediatique · Member · Nov 21, 2014 at 3:51 pm

  • Copy link

  Thanks again for your answer!
  I would like to make these changes for all the posts, not just this one. Is it possible?

• 

  hallluke · Member · Nov 21, 2014 at 4:13 pm

  • Copy link

  You can specify all the individual post pages with .single instead.

• 

  orangemediatique · Member · Nov 21, 2014 at 4:46 pm

  • Copy link

  That’s exactly what I was looking for!
  A billion thanks