Reduce Margin & Add Background Image on Blog Articles

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

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?

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?

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.

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?

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 🙂

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

3. Also the image is making text hard to read, can you apply some semi-transparent color?

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

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

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

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

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

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 🙂

18 minutes ago, gogreenmsu said:

You've been invited 🙂

Yeah I made changes, please check

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!