replacing image

  • wordprest

    (@wordprest)


    16 years, 8 months ago

    Hello,

    Here is the question:

    I have a blog theme in wich beside the post title appears the date as a framed number.
    I would replace that frame with a customized image, but I have no skill in CSS styling, so I would ask you experts how to manage that issue:

    This is the part of the CSS regarding display the date:

    .date-padding {float:left; padding:15px 0 0 17px;}
    .date {background:#280000 url(images/date_bottom.gif) bottom repeat-x;}
    .date-top {background:url(images/date_top.gif) top repeat-x;}
    .date-right {background:url(images/date_right.gif) right repeat-y;}
    .date-left {background:url(images/date_left.gif) left repeat-y;}
    .date-bottom-right {background:url(images/date_bottom_right.gif) bottom right no-repeat;}
    .date-bottom-left {background:url(images/date_bottom_left.gif) bottom left no-repeat;}
    .date-top-right {background:url(images/date_top_right.gif) top right no-repeat; width:100%;}
    .date-top-left {background:url(images/date_top_left.gif) top left no-repeat; padding:7px 17px 6px 16px;}

    .date {text-align:center;}
    .date span {font-size:1.4em; line-height:1em; font-weight:normal; color:#FFFFFF; text-transform:uppercase;}
    .date strong {font-size:2.4em; font-weight:bold; color:#FFFFFF;}

    The current frame is composed by a “sliced” image as you can see;I would replace it with a single image instead. I tried to delete all the lines except /image-top.gif, and inserted my image renaming it of course, but I see it only in part; If I try to delete any other line making the same, the whole post formatting crashes…
    Moreover, I tried to enlarge the image space by modifying the date-padding line values, but seems that nothing happens…

    Please, how should I proceed?

    Thanks a lot for any help

Viewing 1 replies (of 1 total)
  • esmi

    (@esmi)

    16 years, 8 months ago

    Try something like:

    .date {
background:#280000 url(images/frame.gif) top left no-repeat;
height:height_of_image_in_pixels;
width:width_of_image_in_pixels}

    After that it’s down to coming up with the right size image and adjusting the padding around the text.

Viewing 1 replies (of 1 total)

The topic ‘replacing image’ is closed to new replies.