Styling the header on Blog Page - Using custom font and changing header color

Site URL: https://www.soulfruit.co.uk/blog

Can anyone help with my blog page?

1. The title of each blog post to be the same font as my custom font - lazy dog.

2. The header of the blog page to be the same colour as the individual product pages (currently it's transparent and you can't see the logo.

Thank you so much,

2 hours ago, nw7063 said:

Site URL: https://www.soulfruit.co.uk/blog

Can anyone help with my blog page?

1. The title of each blog post to be the same font as my custom font - lazy dog.

2. The header of the blog page to be the same colour as the individual product pages (currently it's transparent and you can't see the logo.

Thank you so much,

This is my testing result

Does it make sense?

Try

.blog-basic-grid * {
  font-family: 'lazy dog' !important;
}

#collection-6086c635eada9c528620e180 #siteWrapper #header {
  background: rgba(240,63,96,.5) !important;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you - Please can the menu items and the facebook / instagram etc all be in white too - like the other pages?

Also it still doesn't quite work when you click on the blog article - the header bar disappears and only appears when you scroll down. How can we change so it's like this page: https://www.soulfruit.co.uk/shop-dried-dragon-fruit/p/dragon-fruit-chips-1

Thank you!

On 12/3/2021 at 9:27 PM, nw7063 said:

Thank you - Please can the menu items and the facebook / instagram etc all be in white too - like the other pages?

Also it still doesn't quite work when you click on the blog article - the header bar disappears and only appears when you scroll down. How can we change so it's like this page: https://www.soulfruit.co.uk/shop-dried-dragon-fruit/p/dragon-fruit-chips-1

Thank you!

It looks like you figured it out. Do you still need any help?

Hey! We still need help on the below:

1. to make the menu items on the blog page in white text.

2. for the individual blog pages the header is still transparent - can this be the same colour as the individual product pages / the blog page too?

Thanks so much,

On 12/7/2021 at 6:53 PM, nw7063 said:

Hey! We still need help on the below:

 

1. to make the menu items on the blog page in white text.

2. for the individual blog pages the header is still transparent - can this be the same colour as the individual product pages / the blog page too?

 

Thanks so much,

#1. You mean blog list page? Add this to Design > Custom CSS

/* blog list page */
body[class*="collection-type-blog"].view-list {
header#header a {
    color: white;
}
header#header svg {
    stroke: white;
}
header#header span {
    color: white;
}
}

#2. Add to Design > Custom CSS

/* Individual posts blog header */
/* view-item is individual posts */
/* view-list is blog list */
/* donot use view-item or view-list mean blog list + individual */
body[class*="collection-type-blog"].view-item header#header {
    background-color: #f79eaf !important;
}

Thank you so much for your help - really appreciated!