Styling the Author Profile

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!

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.

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;
}

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?

6 hours ago, JenTerpstra said:

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

Use this code

/* website under author name */
.author-bio {
    order: 3;
}

15 hours ago, tuanphan said:

Use this code

/* website under author name */
.author-bio {
    order: 3;
}

 

Worked like a charm!

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

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

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.

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?

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

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

I want to achieve this with my author block, I'm on version 7.1. Is it possible to style with CSS? Another option is just to create an image block and add to all pages, but styling would be more efficient. This is the live page if it's helpful. 

Hey,  @KatieSdrthis may help you https://forum.squarespace.com/topic/168460-customizing-author-photo-in-71/#comment-585166