Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Help please with Styling Avatar


  #1  
Old Nov 22, 2010, 03:24 AM
Stevieboy
 
11 posts · Oct 2010
England
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

Last edited by juggledad; Nov 22, 2010 at 03:34 AM. Reason: moved thread
  #2  
Old Nov 22, 2010, 03:37 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is wrong with them?
how are you trying to style them?

p.s. please turn off compression during debugging
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 22, 2010, 05:22 AM
Stevieboy
 
11 posts · Oct 2010
England
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.
  #4  
Old Nov 22, 2010, 05:50 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try this, add the following to CSS Inserts - you will want to play with the numbers
HTML Code:
.post-byline {
padding-top: 30px;
}
.post-byline img {
position:relative;
top:-15px;
padding-right: 30px !important;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Nov 22, 2010, 06:28 AM
Stevieboy
 
11 posts · Oct 2010
England
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!
  #6  
Old Nov 22, 2010, 06:36 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Nov 22, 2010, 07:37 AM
Stevieboy
 
11 posts · Oct 2010
England
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!
  #8  
Old Nov 22, 2010, 07:47 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
ohhh you missed an important part at w3schools :
Quote:
When using the border property, the order of the values are:

border-width
border-style
border-color
It does not matter if one of the values above are missing (although, border-style is required), as long as the rest are in the specified order.
you have border: 2px black solid; and it should be border: 2px solid black;
it's the nits that get you.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Nov 22, 2010, 03:23 PM
Stevieboy
 
11 posts · Oct 2010
England
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
  #10  
Old Nov 22, 2010, 03:29 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I believe that is for comment avatars

it looks nice, like they are a framed picture.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I put a picture Avatar on my comments? lmt Comments, trackbacks & pings 1 Mar 3, 2010 03:00 PM
[SOLVED] Avatar to the side of Comment kalookalei Comments, trackbacks & pings 5 Jan 29, 2010 11:47 PM
How to remove border around avatar? A333 Sidebars & Widgets 4 Dec 3, 2009 09:06 AM
How to change the default Avatar whatsmytruth Comments, trackbacks & pings 5 May 14, 2009 07:39 PM
Avatar in Post using Avatar Plug-in DMO Atahualpa 3 Wordpress theme 1 Mar 23, 2009 09:43 PM


All times are GMT -6. The time now is 12:28 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.