Jump to content

Reduce Margin & Add Background Image on Blog Articles

Go to solution Solved by Beyondspace,

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

Edited by gogreenmsu
2 questions instead of 1
Link to comment
  • gogreenmsu changed the title to Reduce Margin & Add Background Image on Blog Articles
  • Solution

Add this to Settings->Design->Custom Css

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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?

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
18 minutes ago, gogreenmsu said:

You've been invited 🙂

Yeah I made changes, please check

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

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.