WordPress.org

Forums

Adelle
Styling the date. (11 posts)

  1. Brittany R Williams
    Member
    Posted 8 months ago #

    Does anyone know how to style the date on this theme? I want to replace the black circle with a custom image. Thank you for the help!

  2. Hey again Brittany,

    This is styled with CSS, you can do this:

    .article .post-date {
    	background: url('http://domain.com/image.jpg') no-repeat fixed center;
    }
    .article .post-date a {color:#000;}

    Replace the URL (http://domain.com/image.jpg) with your own image URL. The second part there with the colour is the change the text colour because I think you might use something other than black for the background. If not then you probably don't need that.

    If you do use the font colour then you can find a list of hex codes (colour numbers) here:

    http://www.color-hex.com/

    Hope this helps. :)

  3. Brittany R Williams
    Member
    Posted 8 months ago #

    Hey!

    For some reason the black circle disappeared but my image isn't showing up. Maybe I have it sized wrong or something? Thanks again!

  4. Hey there,

    The black circle will go, you're replacing it with an image.

    Can you provide the full image link, and a link to your site please.

    I'll take a look at what's happening there :)

    Take care.

  5. Brittany R Williams
    Member
    Posted 8 months ago #

  6. I'm thinking that PhotoBucket don't allow hotlinking so I did a quick Google and found:

    http://webmasters.stackexchange.com/questions/24142/image-hotlinking-providers

    A comment there states they don't.

    Could you not download it again and upload to your own host, that should negate the issue :)

    Give that a try and let me know how you go.

    Take care.

  7. Just to add that you'll want rid of the original radius also, so altogether for example:

    .article .post-date {
    background: url('http://i44.photobucket.com/albums/f48/brittsbook/date_zps353b78ac.png') no-repeat center;
        background-size:55px;
    
    }
    
    .radius-100 {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    Hope this helps. :)

  8. Brittany R Williams
    Member
    Posted 8 months ago #

    I tried that and it was working but then when I edited the color it disappeared. I can't get it to work again.

    Thank you for the help!

  9. Hey there,

    Did you copy the last CSS I posted?

    It was slightly different and if I use that CSS I get this:

    http://monosnap.com/image/09AwsFusd9Wxm8Dnukm0vfvEqCtaP3

    Just wanted to check :)

  10. Brittany R Williams
    Member
    Posted 8 months ago #

    Oops. I didn't see the last CSS that you posted. Now it's working. Thank you so much!

  11. You're most welcome :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.