• Hi, I’m adding this code to a footer of a post and want to add more specific location style for the image at the bottom of this CSS–is there anyway I can add style directions to that image so that nothing else will be affected? i’m a beginner, this may be elementary.

    `margin: 0;
    padding: 5px;
    background: #eeeeee;
    color: #666;
    line-height: 18px;
    background: url(old.gif);’

Viewing 8 replies - 1 through 8 (of 8 total)
  • It would greatly help if you could link us to your WP site and show us where you want to make the stylization change. ??

    Thread Starter helenspacegirl

    (@helenspacegirl)

    it’s

    https://www.limegreenscream.com

    please look at the footer of the test post. It has text in it “June 4th etc) that was put there, I believe, by the theme. I’m also trying to add a background image and position it to the right. The theme provides the css I gave in the first post (minus the css for including the background image) in order to style the text (june 4th) etc, and now I’m looking to add some kind of css so that my background image doesn’t cover the text in the footer. The background image in the footer is the purple color with the “test test test” lettering

    div.post-footer {
    background:transparent url(/test.gif) no-repeat left bottom;
    color:#666666;
    height:40px;
    margin:0;
    padding:5px;
    }

    You may need to fine-tune the value for height.

    Thread Starter helenspacegirl

    (@helenspacegirl)

    Esmi, thank you for your reply (and all of the posts that you put up, very helpful)

    if you don’t mind, please have a look at the site now that I put your code in https://www.limegreenscream.com

    did you anticipate that my test background image would appear just below the footer?

    did you anticipate that my test background image would appear just below the footer?

    Yes. Isn’t that what you want? The test image is too large at >300px to be floated to one side without resorting to a fair amount of markup changes and CSS additions. Perhaps if you explained how you intend to use this image etc, I might be able to come up with something a little more useful.

    Thread Starter helenspacegirl

    (@helenspacegirl)

    i like the result, but not what i expected, i was thinking of putting something smaller at the right side of the footer i.e. a little face

    if you don’t mind, I’m trying to do the same on another site (I’m just experimenting with wordpress themes on several sites til i figure things out) and the code you gave me didn’t insert anything, please see https://www.mickeydork.com

    any idea how I’d add an image in the footer there, or just below it?

    I also have an elementary css question coming in next post about https://www.mickeydork.com that i’m sure you could solve in a snap if you would kindly look at it, it has to do with putting stacked images side by side

    any idea how I’d add an image in the footer there, or just below it?

    How about we move that turtle image to one side of the text? The general approach is pretty much the same wherever you use it.

    First of all, we need to know (in advance) the size of the image being used. In this case, it’s 100px by 57px. That means the enclosing block for this image must be at least 57px high and will have to have at least 100px of spare “room” on the left-hand side (plus a bit extra) if it’s to stay clear of the text. Using your current markup, the CSS would be:

    (custom.css (line 33))

    .custom #footer {
    background:transparent url(images/turtle.gif) no-repeat 0 0;
    float:right;
    margin-top:10px; /* pushes the image box away from the post foot) */
    min-height:57px; /* stops the image being truncated in decent browsers */
    height:57px; /* fix for lousy browsers */
    padding-left:110px; /* leaves enough room for the image plus a small margin */
    }

    Does that help?

    Thread Starter helenspacegirl

    (@helenspacegirl)

    that turtle image can actually be removed, i was just testing page backgrounds (i think). I have to figure out where it is again though

    I tried to put that CSS into the custom style sheet (we’re talking about on https://www.mickeydork.com) but nothing showed up at all???

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘anyone know how to position this?’ is closed to new replies.