Customize the author box

Support
#1

I have an author box I out in every article at the end but it’s very basic
is there a guide on how to customize it?

All I need is just to be able to :

  1. Make the borders more pronounced and change the color
  2. make the "about the author more visible by trying different colors
  3. Change the background color if possible
  4. Not sure if this is of your competence, but on my profile, I added also Instagram and Pinterest and I want them to show, but it’s only showing FB and Twitter.
  5. change the size of the photo if possible? making it bigger and aligned to the whole text block.

Here is how it looks like now:

#2

Hey Clelia,

Nice to hear from you.

As you alluded to in your questions, you’re looking for customisation support, which is outside of theme support. The various customisations can be achieved using CSS but you’ll need to learn some of the basics to do this. Essentially, you need to identify and override the CSS selectors that are part of the theme to change their styling. A good place to start with this is to use the Google Chrome browser and right click the area you want to target, then click Inspect from the context menu that appears. Then you’ll see the code for that section, like this:

If you look at the CSS code on the right, you’ll see that by targeting the class .x-author-box you can control the border and background color. So for example, you could write some code like this:

.x-author-box { border: 2px solid #000 }

This would change the box to look like this:

You can apply this same process to any area you want to customise. Your custom CSS code can be added to the Global CSS within the Theme Options as this will make the changes site-wide.

W3 Schools is a good place to learn the basics of CSS.

Hopefully this will get you started.

#3

Thanks a lot it helped so much! I was finally able to change the CSS and put them in the global CSS so it’s for the whole theme.

here is the result (I know it’s nothing for you guys but for me, I know zero about CSS it’s like I landed on the moon :joy: )

The only things I can’t seem to change are the photo size and adding the social media (as per my final points.)

Any suggestions on how that might be done? The photo is a gravatar one so it doesn’t let me change anything in the inspection tab, for the social media I’m not 100% sure.

Thanks again for your help!

#4

Hey Clelia Mattana,

If you want to increase the size of the image, right click on the image and then select “Inspect” again. In the right side of Chrome Dev tool, you will see the custom css that set the width of the image.

You can copy this code and make use it as your custom code the like:

.x-author-box .avatar {
    width: 120px;
}

.x-author-box .x-author-info {
    margin-left: 140px;
}

The second css block is needed add more space between the image and the author title and description.

Hope this helps.

#5

Thanks it worked perfectly!

#6

You’re welcome, Clelia.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.