Justification Problem

Resolved Jixxer
(@jixxer)

8 years, 2 months ago

I love this Plugin Paul. It does exactly what I want it to, thank you.

I am using it as shortcode on one of my pages and I have gotten all the short codes I need from your website.

The only problem is everything appears centered on the page making the text descriptions hard to read. I am probably doing something wrong, and sorry for the pedestrian question, but is there any way to left justify the descriptions to make it easier for people to read?

I have already tried <p style=”text-align: left;”>, but it had no effect.

I am wondering if perhaps it is a setting in the theme CSS that I can’t override from putting code into the page posts.

Cheers..

https://wordpress.org/plugins/author-avatars/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Paul Bearne
(@pbearne)

8 years, 2 months ago

Your will need to add some CSS to adjust the layout

Thread Starter Jixxer
(@jixxer)

8 years, 2 months ago

Thanks. I changed to the following in shortcode.css:

.shortcode-author-avatars div.author-list .user {
display: block;
float: left;
padding: 0.2em;
text-align: left;

But is there a way to separate things and left align the text of the Biographical Info of the author, but keep the avatars themselves justified center?
Plugin Author Paul Bearne
(@pbearne)

8 years, 2 months ago
Yes

each item is in its own div or span so can address each of them in CSS

here an example if you look you can see that you can address ‘biography’

with an selector like this
```
.shortcode-author-avatars div.author-list .user biography{
}
```
```
<div class="user with-name user-1 with-biography bio-length- with-last-post with-email"><a href="http://ms.bearne.ca/blog/author/superadmin/" title="superAdmin (0 posts)">
<span class="avatar" title="superAdmin (0 posts)">
<img src="//www.gravatar.com/avatar/6eca4708c14b4aae041335e251dd3b12?s=171&r=g&d=mm" class="avatar user-1-avatar avatar-171 photo" width="171" height="171" alt="superAdmin" title="superAdmin (0 posts)"></span>
<span class="name"><strong>superAdmin (0)</strong></span></a>
<div class="email"><a href="mailto:pbearne@gmail.com">pbearne@gmail.com</a></div>
<div class="biography"><p>Biographical Info</p></div>
<div class="show_last_post"><a href="http://ms.bearne.ca/blog/win/" rel="bookmark" title="Permanent Link to win">win</a></div>
</div>
```
Hope this helps
Thread Starter Jixxer
(@jixxer)

8 years, 2 months ago

Thanks Paul. I think I grasped the first bit of code you provided, but not the second part.

Meanwhile, I tried what follows below and everything is still centered. What I am trying to do is get the biography left justified, but the avatar and name below the avatar both centered:

.shortcode-author-avatars div.author-list .user avatar{
display: block;
float: left;
padding: 0.2em;
text-align: center;
}

.shortcode-author-avatars div.author-list .user biography{
display: block;
float: left;
padding: 0.2em;
text-align: left;
}

.shortcode-author-avatars div.author-list .user {
display: block;
float: left;
padding: 0.2em;
text-align: center;
}

.shortcode-author-avatars div.aa_pageList{
width:100%;
clear: left;
text-align:left;
}

—

Sorry for my obvious mistakes, but I am still very much a novice at this. Thanks for your patience.

Plugin Author Paul Bearne
(@pbearne)

8 years, 2 months ago

the second bit was an example of the HTML the plugin creates

the CSS looks better

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Justification Problem’ is closed to new replies.

Tags