Jump to content
Go to solution Solved by tuanphan,

Recommended Posts

Posted

Site URL: https://theindieauthorcollective.com/blog/blog-post-title-one-x7pad

Hi all! I'm creating a new site with a blog that will have frequent guest posts, so I'm turning on the Author Profile option for the first time and am having trouble styling it with CSS—it's pretty basic and ugly by default. I've tried targeting it in Design→ Custom CSS with the .blog-item-author-profile-wrapper tag I found by Inspecting, but no CSS I apply after it makes any changes. I'd like to put a border around it and change the background color so it looks like a custom block rather than just blending in with the rest of the post text.

I also want to make the text left-aligned and I would love to move the profile photo to the left of the text, but the latter might be asking too much.

I had thought about faking the author bios with a summary block, but I need to be able to add links to guest posters' social media accounts and websites and haven't found a way to do that in summary blocks.

Access code is "forumhelp" for the website link. Thanks for taking a look!

Posted
On 5/13/2022 at 4:18 AM, tuanphan said:

Use this CSS

div.blog-item-author-profile-wrapper {
    background-color: white;
    padding-bottom: 10px;
}
div.blog-item-author-profile-wrapper .author-avatar {
    border: 5px solid red;
}

 

Awesome, thanks! Do you know what I would need to target to adjust the text (font, etc.)? Adding CSS tweaks to the profile wrapper doesn't seem to affect the text.

Posted
12 hours ago, JenTerpstra said:

Awesome, thanks! Do you know what I would need to target to adjust the text (font, etc.)? Adding CSS tweaks to the profile wrapper doesn't seem to affect the text.

Use this

/* author name */
span.author-name {
    font-size: 30px !important;
}
/* bio */
.author-bio * {
    font-size: 20px;
}
/* Url */
a.author-website {
    font-size: 10px !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!)

Posted
16 hours ago, tuanphan said:
/* author name */
span.author-name {
    font-size: 30px !important;
}
/* bio */
.author-bio * {
    font-size: 20px;
}
/* Url */
a.author-website {
    font-size: 10px !important;
}

Perfect! Is it possible to move the author website under the author name?

Screen Shot 2022-05-15 at 7.50.41 PM.png

  • 4 months later...
Posted
7 hours ago, mazmac said:

Hello

There isa way, that the backgroun color, white, black, etc. in the author bio, be the width of the screen? I mean auto responsive size

thanks

Can you share link to author profile on your site? We can adjust code easier

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!)

Posted
17 hours ago, mazmac said:

Hello.
Sure thanks!

is rudarevista.squarespace.com

pass: ruda2022

I put an example of how it looks here: https://rudarevista.squarespace.com/temas/ministerio-publico-contina-la-bsqueda-de-cristina-siekavizza?p

I need the background color of the author profile go wide as the screen, side to side, the info of the author is like I need it.

You mean make it fullwidth, like red box?

image.thumb.png.fe60f065a5f3d851fbf425022b43d97a.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!)

Posted
20 hours ago, mazmac said:

Yes exactly, like the purple color, just fill the widht of the screen, no height at all, just the purple color behind the author.

 

This is possible, however we will need to move author box under comment or under Pagination

 

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!)

  • 1 month later...
  • 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.