Jump to content

I want to move the blog title below the first image

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
40 minutes ago, Claire_auck said:

Is it possible to move the blog page title below the first image? Every page will have an image at the top so I need it to be site wide.

Hi Claire

The easiest way to achieve this (and the least likely to go wrong) is to use a line of Custom CSS to hide the Blog Item Title (or the Blog Item Top Wrapper - includes the title and the metadata) and then you can add the title manually in the Text Block below the image. 

For example, to hide the title you could add:

.blog-item-wrapper .blog-item-title {
  display: none!important;
}

Alternatively, assuming the site is not on a Personal Plan, some JavaScript could be written to move the Blog Item Title (or the Blog Item Top Wrapper) below the first Blog Image Block (assuming one is found). 

For reference, this is the Blog Item Title:

image.thumb.png.c9c076a2f678f76f9cfbed47861f27d8.png

and this is the Blog Item Top Wrapper:

image.thumb.png.fcc24c877c51352d4a3e4f3390e4b84a.png

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
16 hours ago, paul2009 said:

Hi Claire

The easiest way to achieve this (and the least likely to go wrong) is to use a line of Custom CSS to hide the Blog Item Title (or the Blog Item Top Wrapper - includes the title and the metadata) and then you can add the title manually in the Text Block below the image. 

For example, to hide the title you could add:

.blog-item-wrapper .blog-item-title {
  display: none!important;
}

Alternatively, assuming the site is not on a Personal Plan, some JavaScript could be written to move the Blog Item Title (or the Blog Item Top Wrapper) below the first Blog Image Block (assuming one is found). 

For reference, this is the Blog Item Title:

image.thumb.png.c9c076a2f678f76f9cfbed47861f27d8.png

and this is the Blog Item Top Wrapper:

image.thumb.png.fcc24c877c51352d4a3e4f3390e4b84a.png

 

Amazing, thanks so much Paul. I have done that in the past (for a 7.0 site) and did consider it for this project but I wondered if there had been any updates. I suppose I'll just need to remove the code when I create a new blog, otherwise you can't access the title?  I'll see how it works and consider JavaScript if it gets frustrating.

Hope you are well!

Claire.

 

 

Link to comment
On 11/21/2022 at 8:54 AM, Claire_auck said:

 

Amazing, thanks so much Paul. I have done that in the past (for a 7.0 site) and did consider it for this project but I wondered if there had been any updates. I suppose I'll just need to remove the code when I create a new blog, otherwise you can't access the title?  I'll see how it works and consider JavaScript if it gets frustrating.

Hope you are well!

Claire.

 

 

I think you can add some class like this to disable code in edit mode, then you can edit it.

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
  display: none!important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 11/23/2022 at 1:52 AM, tuanphan said:

I think you can add some class like this to disable code in edit mode, then you can edit it.

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
  display: none!important;
}

 

@tuanphan thank you for this code! It has really helped me!

Is it possible that you could look and see if writing javascript would work? I'm wanting to put the blog title below the video on my page. Here's the page I'm referring to www.igotofaith.com/sermons 

I want the blog title below the video along with the metadata under the blog title. Right now I just have the blog title hidden and I'm manually adding in the blog title and meta information. I'd like to not have to manually add this information in each week. 

Thank you so much!

Austin Burleson

Link to comment
On 12/21/2022 at 1:32 AM, austinalltheway21 said:

@tuanphan thank you for this code! It has really helped me!

Is it possible that you could look and see if writing javascript would work? I'm wanting to put the blog title below the video on my page. Here's the page I'm referring to www.igotofaith.com/sermons 

I want the blog title below the video along with the metadata under the blog title. Right now I just have the blog title hidden and I'm manually adding in the blog title and meta information. I'd like to not have to manually add this information in each week. 

Thank you so much!

Austin Burleson

First, remove this code

body:not(.sqs-edit-mode) .blog-item-wrapper .blog-item-title {
    display: none;
}

and this

.blog-item-wrapper .blog-item-author-date-wrapper {
    display: none;
}

.blog-item-wrapper .blog-meta-item--date {
    display: none;
}
.blog-item-wrapper .blog-meta-item--author {
    display: none;
}

Next, add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.blog-item-top-wrapper').insertAfter('.blog-item-content.e-content .video-block');
});
</script>
<style>
  .video-block+.blog-item-top-wrapper * {
    text-align: left;
}
</style>

image.thumb.png.9ae0d49553c7598d9b1412ff7492ff6e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.