Jump to content

Reduce Margin & Add Background Image on Blog Articles

Recommended Posts

Site URL: https://www.takebackyourcareerpodcast.com/episodes-collection/005

Hello,

I am trying to figure out how to reduce the amount of free space or margin above and below the content on every blog article on my site. There is no option to change the height of the section so I am assuming there's a way to do this with customer CSS. Additionally, I am looking to see how I can add an image to the background of the article instead of being all white.

https://www.takebackyourcareerpodcast.com/episodes-collection/005

password: boots135

Thank you

Link to comment
  • Guest changed the title to Reduce Margin & Add Background Image on Blog Articles
  • Replies 13
  • Views 627
  • Created
  • Last Reply

Add this to Settings->Design->Custom Css

.blog-item-wrapper article.entry {
	padding-top: 5vh;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
47 minutes ago, bangank36 said:

Add this to Settings->Design->Custom Css


.blog-item-wrapper article.entry {
	padding-top: 5vh;
}

 

That worked perfectly; thank you so much! Any input or help on how to also add a background image to the page?

Link to comment

Since it not supported to add background in blog like normal section, do you mind using custom code to turn an image into background? 

I notice you did not use thumbnail image for the blog right? If yes, could you add a normal image on top of the blog?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
14 minutes ago, bangank36 said:

Since it not supported to add background in blog like normal section, do you mind using custom code to turn an image into background? 

I notice you did not use thumbnail image for the blog right? If yes, could you add a normal image on top of the blog?

Hi Bangank!

I would be open to using custom CSS to make the background an image, sure. I did not want to add an image above the blog post but rather have an image be the background of the page itself, if possible with custom CSS.

 

Link to comment

yeah after you add image I will send code to make it become background, but at least 1 image must be on the blog so you can manage/replace it per blog right?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
4 minutes ago, bangank36 said:

yeah after you add image I will send code to make it become background, but at least 1 image must be on the blog so you can manage/replace it per blog right?

Ah, I see! I added an image 🙂

Link to comment

I would like to note 2 things:

1. You may want to use different image for blog, so I would like to suggest using the same naming convention for image such: Blog_Header_005.png , Blog_Header_007... with Blog_Header is the prefix, replace with the word "Header" in the script

<script>
YUI().use(
    'node', 'event',
    function (Y) {
      /* Replace the term "Header" with your prefix */
      var blogImg = Y.one(".blog-item-inner-wrapper img[src*=Header]");
      if (blogImg) {
        blogImg.ancestor(".sqs-block-image").hide();
        var src = blogImg.getAttribute("data-src");
        blogImg.ancestor("article").setStyles({
            'background': 'url(' +src + ') no-repeat',
            'background-size': 'cover'
          });
      }
    }
);
</script>

2. Place this snippet in Settings->Advanced->Code Injection-> Paste in Footer

image.thumb.png.8ff9b2338fa93591fe64c19cbd81abbf.png3. Also the image is making text hard to read, can you apply some semi-transparent color?

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
1 hour ago, bangank36 said:

I would like to note 2 things:

1. You may want to use different image for blog, so I would like to suggest using the same naming convention for image such: Blog_Header_005.png , Blog_Header_007... with Blog_Header is the prefix, replace with the word "Header" in the script


<script>
YUI().use(
    'node', 'event',
    function (Y) {
      /* Replace the term "Header" with your prefix */
      var blogImg = Y.one(".blog-item-inner-wrapper img[src*=Header]");
      if (blogImg) {
        blogImg.ancestor(".sqs-block-image").hide();
        var src = blogImg.getAttribute("data-src");
        blogImg.ancestor("article").setStyles({
            'background': 'url(' +src + ') no-repeat',
            'background-size': 'cover'
          });
      }
    }
);
</script>

2. Place this snippet in Settings->Advanced->Code Injection-> Paste in Footer

image.thumb.png.8ff9b2338fa93591fe64c19cbd81abbf.png3. Also the image is making text hard to read, can you apply some semi-transparent color?

 

This looks great, thank you! I am noting your comments and suggestions and will give this a try and let you know how it goes. Thank you very much!

Link to comment
5 hours ago, bangank36 said:

I would like to note 2 things:

1. You may want to use different image for blog, so I would like to suggest using the same naming convention for image such: Blog_Header_005.png , Blog_Header_007... with Blog_Header is the prefix, replace with the word "Header" in the script


<script>
YUI().use(
    'node', 'event',
    function (Y) {
      /* Replace the term "Header" with your prefix */
      var blogImg = Y.one(".blog-item-inner-wrapper img[src*=Header]");
      if (blogImg) {
        blogImg.ancestor(".sqs-block-image").hide();
        var src = blogImg.getAttribute("data-src");
        blogImg.ancestor("article").setStyles({
            'background': 'url(' +src + ') no-repeat',
            'background-size': 'cover'
          });
      }
    }
);
</script>

2. Place this snippet in Settings->Advanced->Code Injection-> Paste in Footer

image.thumb.png.8ff9b2338fa93591fe64c19cbd81abbf.png3. Also the image is making text hard to read, can you apply some semi-transparent color?

 

Hi Bangank,

I tried the script you provided but it continues to remain the same as before. Am I not adjusting something in the script properly?

Thank you for your help.

Screen Shot 2020-10-30 at 6.23.21 PM.png

Screen Shot 2020-10-30 at 6.24.26 PM.png

Link to comment

Hi gogreenmsu

I can't see the code in the live site? but it still working in my user script, so would want to invite me as collaborator to have a look? bangank36@gmail.com

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
23 minutes ago, bangank36 said:

Hi gogreenmsu

I can't see the code in the live site? but it still working in my user script, so would want to invite me as collaborator to have a look? bangank36@gmail.com

You've been invited 🙂

Link to comment
18 minutes ago, gogreenmsu said:

You've been invited 🙂

Yeah I made changes, please check

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
4 minutes ago, bangank36 said:

Yeah I made changes, please check

That is it! Thank you very much! I will check out the code so that make sure I better understand what you did. Thank you very much again!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.