How to customise Post template

Sydney Pro
#1

Hi

Wondering if there’s a way to customise the post template.

Am using it for a blog on my website, but the image & search box is jumping up behind the header affecting the appearance and also usability of the search.

Would also like to remove the calendar that’s shown if possible.

Can find a view here but it’s happening on all my posts: http://lodestardigitalmarketing.co.uk/should-my-small-business-be-on-snapchat/

Thanks for any help in advance!

Thanks,
Joe

#2

Hi Joe,

Try to enable static menu style which can be done by going to Appearance > Customize > Header area > Menu style > Sticky menu from your site dashboard.

That calendar widget can be removed from Dashboard > Widgets. Then find the calendar widget in the “Sidebar” box. Expand to open the calendar options, then delete.

Regards,
Kharis

#3

Hi Kharis

Thanks for your response.I’ve removed the calendar which is great.

Is there any way to shift my post layout down the Post a bit? The search bar and blog image are still showing as behind my menu, despite the menu being set to sticky.

Can find a view here but it’s happening on all my posts: http://lodestardigitalmarketing.co.uk/should-my-small-business-be-on-snapchat/

Thanks,
Joe

#4

Hi Joe,

You’ll need extra CSS code to correct this. Add the below CSS code into Appearance > Customize > Additional CSS.


@media only screen and (min-width:1025px) {
  
  .sydney-hero-area {
    margin-top: 140px;
  }
  
}

Regards,
Kharis

#5

Amazing!

Works perfectly.

Thanks so much!

Joe

#6

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

#7

Dear Kharis

Hi,
I read this article about changing the posts layout and so i have some questions about this:

1- i don’t understand the difference between Sticky and Static menu style. could you please describe me.
2- is there and plugin to change only posts layout (not pages) which is compatible with Sydney?
for example changing header image for each post with it’s featured image and showing the post’s title on the header area for each post.
3- Setting on or off to showing date, author, categories and etc or hide or show of readers reply area.

thank you so much for your help
Kourosh

#8

Hello there,

> 1

If the sticky menu is enabled, in the desktop screen size which is larger than 1024px wide, the menu bar will always be visible and sticks on the top of the web browser window upon scrolling. It’s enabled by default as you can see on our demo.

Static menu means it’ll always be tied on the site header.

> 2

I am not sure if there is a plugin which does so. But, have you tried enabling page builder for post? If you haven’t yet, from Settings > Page Builder, under the General tab, tick Posts post type.

> 3

To hide the post date, author name and categories, you’ll need to add this CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.entry-header .meta-post {
  display: none;  
}

To hide the comment section, add this CSS code:


#respond {
  display: none;
}

Regards,
Kharis

#9

Dear Kharis

It was great. Thank you so much for your advanced help.

Regards,
Kourosh

#10

You’re welcome, Kourosh!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

#11

Dear Kharis

Hello again. I tested many ways to change elements for a dedicated page. for example i created a page with title and slug named “Our Services”. how can i change the menu color ONLY for this page. the reason of this request is the header image is different for each page and so the menu is not seen depend on this image.
My another question is that is there any solution to show the page’s title on the header area?

thanks for your help
kourosh

#12

I try the following CSS cod in Style.css of child-theme but i did not any result:

#where-we-start > #mainnav ul > li > a {
color: #000000;
}

#13

Hello there,

To do specific styling on a certain menu item, you can assign a unique class name from options. In the custom menu administration panel (Appearance > Menus), expand the Screen Options which is located at the top right side of the screen. And then expand the respective menu item, in the “CSS Classes (optional)” input field, enter a class name. For example: our-services

Then use the below custom CSS code to style it.


.mainnav li.our-services > a {
  color: #ff0000 !important;
}

.mainnav li.our-services > a:hover {
  color: #fff000 !important;
}

Regards,
Kharis

#14

Dear Kharis

thank you very much for your reply. In my question “Our Services” is not the name of a menu item. it is the name of a page. My question is how we can change the color of whole menu items for a page that it’s name is “Our Services” and how we can show the page’s title in the header image when the page is viewed?

Thanks again
have a nice day
Kourosh

#15

Hello Kourosh,

Could you please share the link to that page, so I can suggest the solution depending on the actual situation you’re having?

Regards,
Kharis

#16

Dear Kharis

Unfortunately i develop my website on localhost and i do not upload it on host yet.
do you have any suggestion ? i google this and i encountered with some specific CSS
using page’s id.
what is your opinion about it?

thanks a lot
Kourosh

#17

Dear Kharis

Unfortunately i develop my website on localhost and i do not upload it on host yet.
do you have any suggestion ? i google this and i encountered with some specific CSS
using page’s id.
what is your opinion about it?

thanks a lot
Kourosh

#18

Dear Kharis

Hello again and thanks for your help. I found it and write here so it maybe useful for others.

  1. find page id from the source of the page. for this from source view of the browser, we should search for page-id.

  2. for change of color of menu items for only this page in the style.css of the child-theme write the following code:

.page-id-1368 #mainnav ul li a,
#mainnav-mobi ul li a {
color: #ff0000 !important;
}

the .page-id-1368 is the id of our dedicated page.

now the next problem will be that how showing the title of the page on the header image

thank you so much for your efforts
kourosh

#19

Awesome! You did a really good job!

To add a text on a certain page’s header image, please try doing this instructions.

Regards,
Kharis