Help please with Styling Avatar
 

Hi Folks,

I would like to ask for some assistance with styling the avatar on the following website that I have put together on as a volunteer basis for a Charity,

http://www.merchistounhall.co.uk

I've spent about 20 hours on trying to resolve this issue, and I am just totally at a dead end.

The Avatar is embedded via the ATO options pages not via coding in the default template.

Please let me know about any questions to help diagnose the problem.

Many thanks for any assistance,
Steve

what is wrong with them?
how are you trying to style them?

p.s. please turn off compression during debugging

Hi Juggledad,

Sorry I have turned off compression and flushed the cache, this is my first Wordpress site, I don't know too much about HTML, and even less about CSS, so please bear with me :)

I am trying to add some spacing so that the avatar is not flush against the border, and there is a gap between the avatar and the post's text.

At the moment it's looking rather cramped.

I have the default value in ATO Avatar style:

margin: 0 8px 1px 0; padding: 3px; border: solid 1px #ddd; background-color: #f3f3f3; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;

and I have this in BYLINE: Homepage

<?php $avtr = get_avatar(%author-id%,$size='40'); echo $avtr; ?> By %author-posts-link% on %date('l dS F Y')%

Please can you advise? Many thanks.

try this, add the following to CSS Inserts - you will want to play with the numbers

Wow :)

Thank you Sir ... it looks much less shonky now!

Could I be really cheeky and ask what I need to do to, or where I can find out how to add a border or rebated box to the avatar?

Steve!

just add the CSS rule for border to the '.post-byline img' - I could tell you how to do it, but instead will send you to the reference I use all the time: http://w3schools.com/css - this is great reference and you can even play with examples to see how they work. Give it a try and tell me if you figure it out.

Hi JuggleDad,

I must be missing something as I've spent the last 30 minutes trying to add the border, I expected that his would work but it doesn't seem to.

.post-byline img {
border: 2px black solid;
position:relative;
top:-15px;
padding-right: 15px !important;
}

Should I look again at the instructions or is there another piece to the puzzle?

(I can get a border on , .post-byline but not on .post-byline img)

Thanks again!

ohhh you missed an important part at w3schools :
you have border: 2px black solid; and it should be border: 2px solid black;
it's the nits that get you.

Hi Juggledad,

Here is my current code,

.post-byline {
padding-top: 15px;
}
.post-byline img {
padding: 10px 10px 10px 10px !important;
border: solid 4px #eee !important;
margin: 0px 10px 0px 0px !important;
}

I have the look kinda what I want it to look like ... and that is the main thing! CSS isn't as scary as I thought.

I did expect that ATO 'Avatar Style' would do this but I am at a loss to see what exactly it does.

Thanks again!
Steve

I believe that is for comment avatars

it looks nice, like they are a framed picture.