Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Reddle - can you change date circle

  1. almostartist
    Member

    Hello, brand new to blogging and kinda also to CSS (learned a little years ago but feels like starting from 0)

    I am planning on upgrading to the CSS option but just looking a little at the stuff and code first to see if I can even take it on or want to try.

    I currently have Reddle installed and like the clean look, may want to change and add a header image and background and perhaps fonts.

    One thing I thought would be neat to change was the area where the date for each post shows up, instead of it in a circle the date would be in a custom icon, is that possible?

    I was glancing at the html and css but I can't figure out what controls that.

    Sorry Im a real newbie, thanks for any direction

    (I may end up starting with one of the more basic themes and try to do the css one tiny step at a time)

    my blog is almostartist.wordpress.com but there is nada there yet

    The blog I need help with is almostartist.wordpress.com.

  2. panaghiotisadam
    Member

    ? There's no circle around the date in Reddle. You're probably thinking of some other theme such as Bueno.

  3. almostartist
    Member

    Hum I double checked, if I got under manage themes it says Reddle and when you go to
    http://almostartist.wordpress.com/

    the Jan 03 is in a black circle

    http://theme.wordpress.com/themes/reddle/

  4. panaghiotisadam
    Member

    Oh I see - sorry, I hadn't noticed the thing because it only shows up in one of the three browsers I'm using.

    To replace the bg with an image, you need to create a 55x55px image, upload it to your blog via Media > Add New and copy the file URL. then you need to add something like this in the CSS editor:

    .image-attachment #content .post-edit-link {
background: url("IMAGE URL HERE") no-repeat top left;
}

    (I'm saying "something like this" as I can't check it in the browser I'm using for editing.)

  5. designsimply
    Staff

    The black circle around the date in Reddle is set with a "footer .permalink" selector, but that same circle actually uses slightly different html if you are logged in so that might make it a little confusing. :)

    This will replace the black background with a custom image:

    footer .date-link a, footer .edit-link a {
  background: url(http://s.wordpress.org/about/images/buttons/smbutton-blue.png) no-repeat;
  width: 58px;
  height: 58px;
}

    Replace http://s.wordpress.org/about/images/buttons/smbutton-blue.png with your own image URL, and adjust the width and height to match your image size.

    Also, if you want to hide the date, you could use text-indent like this:

    footer .date-link a {
  text-indent: -9999px;
}

  6. almostartist
    Member

    Thank you! I'm glad to see it is possible. I am in the process or purchasing the upgrade so I can start to actually try some changes.

    I dont know how you all do it it seems quite a bit overwhelming from where i sit right now but Im going to try little steps

  7. designsimply
    Staff

    We're here to help! So don't let it be overwhelming. :)

    Also, note that you can setup a free WordPress.com blog and test changes any time using the Preview button on the Appearance → Custom Design → CSS page.

  8. almostartist
    Member

    wonderful thanks I got it to work - now to figure if I really like it and to tweek the position of the date and color

    great knowledgeable and friendly forum thanks so much

  9. almostartist
    Member

    thanks again

    almostartist.com

    as seem I was able to inset the image and change the date color but not quite positive how to shift the date to be more centered (or I guess I can resize my image to match the old circle size)?

    footer .permalink, .post-edit-link, .image-attachment #content footer .permalink, .image-attachment #content .post-edit-link {
    background: none repeat scroll 0 0 #000000;
    border-radius: 50% 50% 50% 50%;
    color: #00CED1;
    font-family: Georgia,"Bitstream Charter",serif;
    font-style: italic;
    height: 55px;
    left: -8.674%;
    line-height: 1;
    margin: 0 0 0 -27px;
    position: absolute;
    text-align: center;
    top: -1.2em;
    width: 55px;
    }

    something in there? the margins? sorry this is probably basic

    also though I assume to change the text when it is in edit mode for that same area is under a different part of code?

  10. thesacredpath
    Member

    Add this to your CSS and the date will be centered in the image. You can edit the top margin if you desire.

    .month {
margin-top: 15px;
}

  11. almostartist
    Member

    wow thanks. perfect

    I am not sure I understand - just setting the top margin centered it?

    is that 15px based on another measurement - id like to try to understand the changes so i can learn

  12. thesacredpath
    Member

    The top margin for the text just moved it down is all. I just tried a few different values till I got it to appear centered and 15px. Moving things around in CSS sometimes requires trying different values till you get it where you want it.

  13. almostartist
    Member

    thanks thesacredpath

    i think right now it takes me a while to figure out what element (is that the right work) i need to make edits to

    does that make sense?

    Right now I have been trying to learn by having the site open and using firebug to highlight areas and drill down in the site html to see what the area is and then going to the css and trying something

    sorry my terminology is bad

  14. designsimply
    Staff

    Makes sense. :) Firebug is a great tool! I think you're right on track.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags