Changing Margot Site styles - header, social links, blog/summary block

Site URL: https://heatherbolen.com/

Hello,

I'm trying to move this site (https://heatherbolen.com/) to a Margot template and there are customisations the client is looking for that don't seem to be available by default. Wondering if anyone can help?

1. The Margot header is transparent but she wants it to have a background colour. Can we do this with CSS?

2. The social links in the header take up too much space so we'd like to turn them off but it's not an option in the Site Styles. Can we do this with CSS?

3. Can we create a tile with a background colour within the summary block or blog layout? (More like the grid layout here: https://www.floretflowers.com/blog/)

Thanks for any input you might have! :)

Can you setup a Margot demo template & share url? We can help easier

1. I think this is possible.

2. Possible

3. Possible

Hi @tuanphan! Thanks for your reply - I'm not sure how to set up a demo template. I have it selected and am previewing it on the site until we publish but not sure how to share it with others?

You can duplicate the site, set template on the duplicated site & share its url. We can check easier

@tuanphan I've published the Margot template to the live site now if that helps 🙂 https://heatherbolen.com/ Thank you for any suggestions you might have!

23 hours ago, kablally said:

@tuanphan I've published the Margot template to the live site now if that helps 🙂 https://heatherbolen.com/ Thank you for any suggestions you might have!

Add to Design > Custom CSS

/* header color */
header.Header {
    background-color: red;
}
.Header-social {
    visibility: hidden;
}
.summary-item {
    background: #eee;
    padding: 5px;
}

@tuanphan THANK YOU!! That's been really helpful, I really appreciate it 🙂

On 6/10/2021 at 12:18 PM, kablally said:

@tuanphan THANK YOU!! That's been really helpful, I really appreciate it 🙂

Do you want to fix these?

Site URL – https://heatherbolen.com/

1. (Mobile-Homepage) reduce white space on top/bottom slideshow?

2. (Mobile-Footer) reduce white space under social icons?

Thanks @tuanphan those white spaces would be great to reduce if you know how 🙂

Do you know how to reduce the logo size on the homepage so they don't display as large? I tried to edit the padding but it pushed them onto 2 lines instead of shrinking the images. If these need to be reduced offline and uploaded smaller, let me know but I wondered if it would just stretch them to fit?

Thank you!

And - please feel free to quote for this work as you've been answering a lot of questions....

My client is looking to change the fonts on the summary block items but in version 7.0 these don't seem to be editable and they just take the Body styles for the site but she wants to edit them so they don't match the body text of site. Please let me know if we can do this and how we might be able to 🙂

Again, happy for you to quote and pay you for the help!

 

Do you know how to make the header show the top-level navigation as right-aligned but still keep the site title on the left?

On the homepage, there's a summary block where the items aren't aligned because the post titles are different lengths - is there a way to make them all the same height regardless of length of title? Thank you 🙂

Q1.2. Add to Design > Custom CSS

/* homepage slideshow padding */
@media screen and (max-width:640px) {
body.homepage .Main-content {
    padding-top: 0;
    padding-bottom: 0;
}
div#block-yui_3_17_2_1_1619567022609_91852 {
    display: none;
}
div#block-yui_3_17_2_1_1608009522135_21615 {
    display: none;
}
/* white space under social */
div#block-cbf211e254a0b8da074c {
    display: none;
}
}

Q3. Logo size

Add to Design > Custom CSS > then save & reload the site

/* Home logo size */
@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1619567022609_23143 .margin-wrapper a {
    padding-bottom: 20% !important;
}
}

Next questions. Add to Design > Custom CSS

/* Summary date category color */
.summary-metadata-container * {
    color: black;
    opacity: 1 !important;
}
/* read more */
a.summary-read-more-link {
    color: #7c694b !important;
    opacity: 1 !important;
    font-family: 'PT Sans' !important;
    text-transform: uppercase;
}
/* Equal home summary */
@media screen and (min-width:641px) {
body.homepage .summary-title {
    min-height: 50px;
}
body.homepage .summary-excerpt {
    min-height: 40px;
}
}
/* Align right navigation */
[data-nc-container="bottom-right"] {
    display: none !important;
}
[data-nc-container="bottom-left"] {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
}

Oh my goodness @tuanphan!! You are so helpful and talented, thanks again and again 🙂

With the last changes I saved to CSS, I've lost the background colour that I had on the summary items:

.summary-item {
    background: #F6F6F6;
    padding: 3px;
}

I tried to add "important" like some of the other summary item changes but it didn't bring it back. Please let me know how to add this back 🙂

On 6/14/2021 at 11:44 AM, kablally said:

Oh my goodness @tuanphan!! You are so helpful and talented, thanks again and again 🙂

With the last changes I saved to CSS, I've lost the background colour that I had on the summary items:

.summary-item {
    background: #F6F6F6;
    padding: 3px;
}

I tried to add "important" like some of the other summary item changes but it didn't bring it back. Please let me know how to add this back 🙂

 

It looks like you solved?

12 hours ago, tuanphan said:

It looks like you solved?

Yes they are back, thanks again so much!

Hi @tuanphan! Hope you are well 🙂

On the homepage summary items where we made them a standard size so they align, how do we do this on the Portfolio page? https://heatherbolen.com/portfolio

I guess we have to change "body.homepage" to the portfolio page?

/* Equal home summary */
@media screen and (min-width:641px) {
body.homepage .summary-title {
    min-height: 50px;
}
body.homepage .summary-excerpt {
    min-height: 40px;
}
}

And on the homepage, the blog items align really well but the media items don't seem to be making a minimum size so the box doesn't align at the bottom? Is there a way to push those ones to a minimum height too?

Thanks again!

Q1. Change body.homepage to

Quote

body#collection-5fb56aaa65ddb93ec2464f84

Q2. It is white space within image, you can check here.

https://images.squarespace-cdn.com/content/v1/5faab61dc94542301e012e45/1623641777520-4AXGIJS2GVQYOIYZAB1J/ke17ZwdGBToddI8pDm48kD2JKQVVoSKf-DmU10QZaTJZw-zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVExbWStAs1DGU8YJAknD7zUaUP-5fMr3eRkLcekB3pcbRur-lC0WofN0YB1wFg-ZW0/image-asset.png?format=300w

Hi @tuanphan, really appreciate your patience! Back on https://heatherbolen.com/

Q1: With the Portfolio page summary blocks, I've tried this in the css:

/* Equal portfolio summary */
@media screen and (min-width:641px) {
body#collection-5fb56aaa65ddb93ec2464f84 .summary-title {
    min-height: 50px;
}
body#collection-5fb56aaa65ddb93ec2464f84 .summary-excerpt {
    min-height: 40px;
}
}

However, the boxes are still different heights:

Are we able to make it like the homepage summary block which you gave this code for:

/* Equal home summary */
@media screen and (min-width:641px) {
body.homepage .summary-title {
    min-height: 50px;
}
body.homepage .summary-excerpt {
    min-height: 40px;
}
}

Q2: And also on the homepage, there's a different summary block that's also not aligning, is it possible to make it so the grey box sits at a minimum height in the summary block which is a separate block below:

Q3: Is it possible to have a "Read More" link on the second row of items? They aren't blog posts but are a gallery item.

Thank you!!

Just had a week off on my village. Do you still need help on this?

On 6/28/2021 at 10:47 AM, tuanphan said:

Just had a week off on my village. Do you still need help on this?

Hope you had a lovely break @tuanphan!

Yes please, help with Q1-3 from that post would be very helpful 🙂

Q1. Portfolio page. I see same height here. See video: https://www.loom.com/share/b587b6d6aedc49fb80bf1fd38fc11c72

Q2. Don't remove any code. Add this to Design > Custom CSS

/* Homepage summary */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1618979207953_8007 .summary-title {
    min-height: 100px;
}
}

Q3. Where is read more?