[rekluseParticipant]

Hello!

I am having some difficulty getting my Ethos sidebar looking right.

Here’s a link:
http://www.everyoneisright.com/the-darth-vader-move/

I am looking at the author box at the top of the sidebar.

Here is what I am wondering:

1) I cannot seem to get the text to wrap around the bio image. I’ve tried a few different author box plugins (I need to use something compatible with Co-Authors Plus) and none of them seem to wrap as they should. Is there something in the theme that is prohibiting this?

2) I also notice that the social media icons are being obscured by the bio picture. I am guessing this is likely an issue with the plugin itself and beyond the scope of your support, but thought I would check =)

3) How can I eliminate the gap between the title (Featuring) and the header (“Ken Wilber”) so it looks like the other widgets in the sidebar?

4) Is there any way I can use CSS to target the header of this particular widget (“Ken Wilber”) and reduce the font size of this header?

Thank you!

[LelyModerator]

Hi There,

1.) Please add the following CSS in Appearance > Customize > Custom > CSS:

@media (min-width: 980px){
.author-profile img {
    float: left;
}
.author-profile div#author-description {
    display: inline-block;
    width: 50%;
    float: right;
}
.author-profile .author-link{
   clear: both;
}
}

2.)

.author-profile div#social-icons {
    height: 34px !important;
}

3.)

.author-profile div#author-profile > h2 {
    margin-top: 0;
    font-size: 20px; /*FOR #4*/
}

Hope this helps.

[rekluseParticipant]

You guys are awesome, and give awesome support.

That said, none of this seemed to work.

I can just turn off those social media icons, thas not a very big deal. And while it would be nice to be able to do a text-wrap, getting the header (“Ken Wilber”) closer to the title (“Featured”) is still pretty high on my list =)

Let me know if there is anything else I should try!

[ZeshanMember]

Hi there @rekluse,

Sorry to hear that above provided codes are not working!

Please remove the provided CSS and add this instead to make all the changes:

#author-spotlight h2 {
  margin-top: 0;
  font-size: 25px;
}

#author-spotlight img.avatar {
  float: left;
  margin-right: 10px;
  margin-bottom: 0;
  margin-top: 8px;
}

#author-spotlight #social-icons {
  height: auto !important;
}

This code should work and give a result like this: http://prntscr.com/aisr3c. Note that these changes are in a widget added by a 3rd party plugin. While we are happy to provide quite tweaks here or there, further customization from here would be outside the scope of support as we don’t provide support for 3rd party plugins or scripts.

Thank you for understanding.

[rekluseParticipant]

That did it! Thank you.

[LelyModerator]

You’re welcome!

Always,
X

[Author]

Posts