Customizing categories and blog pages

H Movin,

thank you for the support received thus far. I still have a couple of questions on how to customize the blog template. Here is what I would like to achieve:

  1. Change the margins on posts and categories pages.

I am able to adjust the margins, but it always applies to all pages. How can I change padding and boarding for posts and category pages only?

  1. Display title of the post/category name as a page title.

Since I use sidebar, the title of posts is shifted to the left. I would like it to appear both above the post text and sidebar. It would be perfect if I can use the same styling as for header in other pages. Is that possible?
I would like to achieve the same for category pages, i.e. display category name as a page title, also above the content and sidebar.

  1. Round border for submit button on post page.
    Submit button

Here is the code I am using:

#page input[type="submit"] {
    background: #257c9e;
    border: none;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    transition-duration: 0.6s;
 
}

#page input[type="submit"]:hover {
  background: #52cbdd;
  border: none;
}

I have tried replacing “border: none” with “border: 2px solid #257c9e; border-radius: 10px;”, but nothing changed.

Is there anything you could suggest?

Hi @surikatka,

I hope you are well today and thank you for your questions.

1. Change the margins on posts and categories pages. I am able to adjust the margins, but it always applies to all pages. How can I change padding and boarding for posts and category pages only?

Do you mean on all posts archive and category archive pages where the multiple posts are listed?

Regarding your other questions to help us keep support thread separates could you please create new threads for your other questions here https://colorlibsupport.com/c/shapely/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Kind Regards,
Movin

Hi Movin,

I would like to change margins on both pages including single posts and on the archives/categories listings. At the same moment, I would like to keep margins on homepage and any other pages unchanged. Is that possible?

Regards,

Magdalena

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


body.single-post #page .container,
body.archive #page .container,
body.blog #page .container {
    width: 1270px;
    max-width: 100%;
}

To change the margins please change the width 1270px in the above code.

Works perfectly! Thank you.

You are most welcome here :slight_smile: