WordPress.org

Forums

Highwind
Avatar Help (8 posts)

  1. kristylsim
    Member
    Posted 1 year ago #

    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 http://www.kristysimchick.com

  2. Wolfs bRain
    Member
    Posted 1 year ago #

    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.

  3. Wolfs bRain
    Member
    Posted 1 year ago #

    .site-intro .avatar {
        background: url("http://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. :D

    - Wolfy and Brain (─‿‿─)

  4. kristylsim
    Member
    Posted 1 year ago #

    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("http://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;
    }

  5. Wolfs bRain
    Member
    Posted 1 year ago #

    Hmm I try taking off the margin 0.

  6. Wolfs bRain
    Member
    Posted 1 year ago #

    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.

  7. Wolfs bRain
    Member
    Posted 1 year ago #

    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.

  8. kristylsim
    Member
    Posted 1 year ago #

    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("http://www.kristysimchick.com/wp-content/uploads/2014/02/gravatar.jpg")
    }`
    margin-left:auto;
    margin-right:auto;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.