Jump to content

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

Recommended Posts

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

image.thumb.png.0111fdf99e3d27bc1df4263e27564c77.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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,

Screenshot 2021-12-07 at 11.51.27.png

Link to comment
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,

Screenshot 2021-12-07 at 11.51.27.png

#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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Susana_SQSP changed the title to Styling the header on Blog Page - Using custom font and changing header color

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.