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 post
  • Replies 17
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 i

Posted Images

  • 2 weeks later...

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?

Link to post
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;
}

 

Link to post
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

Link to post

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 post

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 post

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 post

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

 

Link to post

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
Link to post

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 post
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...