WordPress.org

Forums

Adelle
Styling the date. (14 posts)

  1. Brittany R Williams
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 :)

  12. livelaughplay
    Member
    Posted 1 year ago #

    I realize this is an old post but I was unable to find an answer in the existing posts and I noticed that new posts aren't being answered that much. I'm hoping you'll get a notification and be able to help me out!

    I'm trying to change the color of the circle to #f6a636. I have changed it in the main style.css file for now but I was unable to get it changed in my child theme's style.css. Other changes I've made there show up so I'm not doing something correctly. This is what I have currently that isn't working:

    /* .article */
    .article .post-date {float: left; margin-right: 10px; background: #f6a636; color: #ddd; width: 45px; padding: 18px; line-height: 1em; font-size: 1.2em; text-align: center; text-transform: uppercase;}

    I basically copied the main theme's css for this and changed the background color. Any ideas on why it won't change?

    If I figure it out I'll post again, but I'll be leaving the main css's edits so it'll look like I've fixed it but I know once the theme gets updated that change will disappear. So as of right now, still looking for an answer. Thanks a bunch!

  13. livelaughplay
    Member
    Posted 1 year ago #

    And my site is at http://www.livelaughandplay.com.

  14. Hey there livelaughplay,

    How are you doing today?

    I've checked your site and I couldn't see circles there, I've tested this on my sandbox site and the code you have should work since this one worked for me:

    .article .post-date {
      background: #f6a636;
    }

    So I'm assuming that you have some other code that is overriding that one, possibly just the issue with specificity so you might want to try adding the following instead:

    .article .post-header .post-date {
      background: #f6a636;
    }

    If you're using child theme please make sure you're adding this at the bottom of your child theme style.css. Alternatively you can try using the following plugin http://wordpress.org/plugins/simple-custom-css

    Once the plugin is installed and activated you can add code to Appearance -> Custom CSS.

    Hope this helps :)

    Cheers,
    Bojan

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.