Avatar Help

  • Hi – I’m having trouble adding an image into the circle. Is there a short code way to do this?

    I was told to do the following but dont’ know css at all and am nervous I will mess up my whole site. Please help!

    For the code I would need for the gravitar – do I enter that in under editor? There are three avatar sections and I don’t know which one to edit.

    .site-intro .avatar {
    width: 128px;
    height: auto;

    .site-intro .avatar {
    margin: 0 auto;

    .site-intro .avatar:hover {
    position: relative;

    Is this what I change it to?

    .site-intro .avatar {
    background:url(“URL GOES HERE”)
    }`
    width: 128px;
    height: auto;

    Also – do I make the image round or does it automatically just stay that way?

    FYI – The child theme is WAAAY over my head. I get the concept, but need someone to sit down and explain that kind of stuff to me. :/

    many many thanks https://www.kristysimchick.com

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

  • Hi again Kristy!!

    The image will become a circle itself. If you are afraid of messing up the code you can always comment out the old code while you are playing with it by putting this /**/ around the code like this.

    /*.class{
   style:stuff;
}

.class{
   style:stuff;
}

.class{
   style:stuff;
}*/

    This way you would be hardpressed to do any permanent damage. If you are still nervous you could copy all of the text in the file and save it in a local notepad file, so if you mess it up you can just copy the code that worked back.

    I’d offer to change it for you, but I don’t think I have any credibility in your eyes to prove I wouldn’t do something bad haha.

    .site-intro .avatar {
    background: url("https://upload.wikimedia.org/wikipedia/commons/7/70/Osteospermum_Flower_Power_Spider_Purple_2134px.jpg") repeat scroll center center / cover rgba(0, 0, 0, 0);
}

    Here is a link to the image so you can see its not round and it also doesn’t matter what size it is. And heres a link to a print screen of your site with the css I put in. Ask me more questions. I am full of answers!! Also…I accidentally replied to your other post just now so you should still reply here. ??

    – Wolfy and Brain (─??─)

    Thread Starter kristylsim

    (@kristylsim)

    OK – I got my picture in yay! but the circle became left aligned when I did. How can I change back to center?

    This is the code I have

    }
    .site-title a {
    text-decoration: none;
    }
    .site-intro .avatar {background:url(“https://www.kristysimchick.com/wp-content/uploads/2014/02/gravatar.jpg”)
    }
    margin: 0 auto;
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    transition: all ease 0.4s;
    }

    Hmm I try taking off the margin 0.

    Also it seems like you put the margin styling in wrong. You didnt put a selector infront of it or the first bracket. I don’t know if that was just a copy paste error.

    If its still being funky after taking off the margin, this will work.

    .site-intro .avatar{
    margin-left:auto;
    margin-right:auto;
}

    This will make sure the image is centered.

    Thread Starter kristylsim

    (@kristylsim)

    Thank you so so much for all of your help! I triple checked everything and didn’t touch the margin styling.

    This is now it is entered in now and it’s still to the left. :/ Is there something I’m missing? I don’t know what a selector is.

    }
    .site-title a {
    text-decoration: none;
    }
    .site-intro .avatar {background:url(“https://www.kristysimchick.com/wp-content/uploads/2014/02/gravatar.jpg”)
    }`
    margin-left:auto;
    margin-right:auto;
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Avatar Help’ is closed to new replies.