Jump to content

Customizing Author Photo in 7.1?

Recommended Posts

Hello, I would like to enlarge the size of the author photo on my 7.1 site and move it to the left of the bio, instead of above it. I'd also love the option to have it be square instead of circle. I've tried a few things but haven't cracked it. Has anyone done this successfully?

Here's the site if it's helpful (still in development):

https://triceratops-maroon-kxrm.squarespace.com/
pw: nailed

Thank you!

1625275110_ScreenShot2020-08-19at10_34_01PM.png.2db6d645b887c78bd1e8c46d65ca7719.png

Link to comment

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.blog-item-wrapper .author-avatar {
    border-radius: unset;
    width: 100%;
    height: auto;
}
.blog-item-wrapper .author-avatar img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.blog-item-wrapper .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
}
.blog-item-author-profile-wrapper>a {
    margin-right: 20px;
    width: 30%;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...

Hello! I'm trying to make my author profile images larger. The placement and circle shape are fine. But can you help me with the code to enlarge it?

I'm currently using this code below to make the Author name/bio more centered on the page. It also seems to have taken away the author profile image all together. But, I'm assuming once I can inject the code for it, it'll come back. 

.blog-item-author-profile-wrapper * {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 200px !important;
    margin-right: 200px !important;
}
span.author-name {
    font-weight: bold !important;
}

Link to comment
On 3/23/2021 at 3:42 PM, catemiz said:

Hello! I'm trying to make my author profile images larger. The placement and circle shape are fine. But can you help me with the code to enlarge it?

I'm currently using this code below to make the Author name/bio more centered on the page. It also seems to have taken away the author profile image all together. But, I'm assuming once I can inject the code for it, it'll come back. 

.blog-item-author-profile-wrapper * {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 200px !important;
    margin-right: 200px !important;
}
span.author-name {
    font-weight: bold !important;
}

Hi. Do you still need help? Can you share link to a blog post?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 3/25/2021 at 3:42 AM, tuanphan said:

Hi. Do you still need help? Can you share link to a blog post?

Yes I do!! Sorry I missed this. The website isn't live yet unfortunately. But, here's a screen shot. The photo doesn't show up as you can see, but I did get the text to align. Thanks for your help in advance!

Screen Shot 2021-04-02 at 3.07.24 PM.png

Link to comment
On 4/2/2021 at 8:08 PM, catemiz said:

Yes I do!! Sorry I missed this. The website isn't live yet unfortunately. But, here's a screen shot. The photo doesn't show up as you can see, but I did get the text to align. Thanks for your help in advance!

Screen Shot 2021-04-02 at 3.07.24 PM.png

If your site is trial.private, you can setup password & share url

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
On 8/20/2020 at 2:53 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.blog-item-wrapper .author-avatar {
    border-radius: unset;
    width: 100%;
    height: auto;
}
.blog-item-wrapper .author-avatar img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.blog-item-wrapper .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
}
.blog-item-author-profile-wrapper>a {
    margin-right: 20px;
    width: 30%;
}
}

 

Hi, I'm using this code to do the trick requested by the OP. 

The only problem is that the Author Name is moved along with the photo to the left-hand side of the Author Bio. I would like to have only the photo on the left, name and Bio on the right scaled same size as the photo. 

In this example I have edited the Bio to include the Author name. That's why it shows double. Gives an idea of the end result. This solution works if a CSS code to remove the Author Name exists. 

The blog is not yet live so I've added a screenshot below. 

Also, is it possible to reduce the white space between the photo and the Name/Bio? It has grown because I have manually scaled back the photo size from 100% --> 75% in width in the code above to make it appear the same size as the Name + Bio combination. Not sure if there is a smarter way to do this? 

image.png.55edcc9c7272fb0d99e680f17d6c17c5.png

 

Link to comment
On 2/1/2022 at 7:08 PM, Korpua said:

Hi, I'm using this code to do the trick requested by the OP. 

The only problem is that the Author Name is moved along with the photo to the left-hand side of the Author Bio. I would like to have only the photo on the left, name and Bio on the right scaled same size as the photo. 

In this example I have edited the Bio to include the Author name. That's why it shows double. Gives an idea of the end result. This solution works if a CSS code to remove the Author Name exists. 

The blog is not yet live so I've added a screenshot below. 

Also, is it possible to reduce the white space between the photo and the Name/Bio? It has grown because I have manually scaled back the photo size from 100% --> 75% in width in the code above to make it appear the same size as the Name + Bio combination. Not sure if there is a smarter way to do this? 

image.png.55edcc9c7272fb0d99e680f17d6c17c5.png

 

Possible to remove author name. If you share link to a post, we can give code easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...

Hello I am using the code above, but not getting the results in space, I need the pic rounded at left with the title author and bio aligned to the righ, I attach an image how my author name looks like, and I will need it as @Korpua post it.

Can you help me @tuanphan¿?

Also, it is possible when you click in the author, go to the author page but have there too her/his bio?

Thanks

 

https://rudarevista.squarespace.com

pass: ruda2022

 

Captura de Pantalla 2022-10-14 a la(s) 18.01.51.png

Link to comment
On 10/15/2022 at 6:04 AM, mazmac said:

Hello I am using the code above, but not getting the results in space, I need the pic rounded at left with the title author and bio aligned to the righ, I attach an image how my author name looks like, and I will need it as @Korpua post it.

Can you help me @tuanphan¿?

Also, it is possible when you click in the author, go to the author page but have there too her/his bio?

Thanks

 

https://rudarevista.squarespace.com

pass: ruda2022

 

Captura de Pantalla 2022-10-14 a la(s) 18.01.51.png

Can you share link to a blog post? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/17/2022 at 3:37 AM, tuanphan said:

Can you share link to a blog post? We can check easier

Hello yes,

Are those

https://rudagt.squarespace.com/temas/ja38572zm01tr649ah5x3hpv700i4d

https://rudagt.squarespace.com/temas/mxima-y-pedrina-sanando-las-heridas-del-conflicto-armado

At the bottom the author profile, would like to have the pic left with the author name and bio at the right.

As @Korpua layout.

Thanks.

 

Link to comment
On 10/20/2022 at 7:36 AM, mazmac said:

Hello yes,

Are those

https://rudagt.squarespace.com/temas/ja38572zm01tr649ah5x3hpv700i4d

https://rudagt.squarespace.com/temas/mxima-y-pedrina-sanando-las-heridas-del-conflicto-armado

At the bottom the author profile, would like to have the pic left with the author name and bio at the right.

As @Korpua layout.

Thanks.

 

Do you use Personal or Business Plan? If Business, we will need to use some script code to move name position

image.thumb.png.f9ff536d553ef87c546e3094094fb03f.png

image.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/23/2022 at 8:57 AM, mazmac said:

Hello @tuanphan

Thanks, yes it is business plan. We can add any cumstom code

Add to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('span.author-name').insertBefore('.author-bio>p');
	});
</script>
<style>
  .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
.author-bio {
    margin-left: 20px !important;
}
.blog-item-wrapper .author-bio p:last-child {
    margin-top: 0px;
}
span.author-name {
    margin-top: 0 !important;
  }</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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.