Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Go to solution Solved by tuanphan,

Recommended Posts

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! :)

Link to comment
  • 2 weeks later...
  • Solution
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

heatherbolen.com-01-min.png

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

heatherbolen.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?image.thumb.png.ef46f01faf5b18060c120ba4149916ff.png

 

Thank you!

Link to comment

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!
image.png.e348f1390244954d80d4c942b550ddf7.png
 

Link to comment

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 🙂

image.thumb.png.48d13b2d6000de29849dc78b644469c8.png

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Edited by tuanphan
typo

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 🙂

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

image.thumb.png.9f3043f6a2ec134f139d098093193493.png

Thanks again!

Link to comment

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:

image.thumb.png.3502ca25d4f7dbd4824073d556121add.png

 

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

image.thumb.png.c84f02390a2042a28975f76cd59180ba.png

 

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:

image.thumb.png.cff33b86d8ed8cabeb45ef5c7a6442bb.png

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!!

Link to comment

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...