Need help? Check out our Support site, then


Ocean Mist theme customization with border/drop shadow?

  1. I have a question about customizing Ocean Mist to handle images the way MistyLook theme does so. As the author has created Ocean Mist for photograhers, adding a border and drop shadow identical to MistyLook enhances the theme's attractiveness. For that reason alone, I use MistyLook on one blog http://shimworld.wordpress.com/ and Ocean Mist in another http://janshimphotography.wordpress.com/

  2. I'm lost here. What's the question? Are you trying to add in the drop shadow or...?

  3. Yes that's my question. I wonder if it's possible through CSS to add the Border + Drop Shadow into Ocean Mist like how MistyLook does it. Apologies if I wasn't clear earlier.

  4. I've done that. Here's the CSS that I used.
    img {<br /> border:1px transparent;<br /> border-left:1px solid #efefef;<br /> border-top:1px solid #efefef;<br /> background:url('http://i36.photobucket.com/albums/e41/jo117/sideback.png') no-repeat right bottom;<br /> padding:4px 14px 14px 4px;<br /> }
    Was that the sort of thing you want to do?

  5. Hi there,

    yes that's what I am trying to accomplish but is it possible to have the borders and drop shadows identical to how MistyLook implements it? I'm completely hopeless when it comes to scripts. There seems to be a slight difference between the two here.

  6. @ shimworld - Here is the Misty code. As you see, the drop shadow is a graphic, one of many graphic elements in Misty that disappeared and had to be redone when I made the first change.

    @joandcindy - Your drop shadow is what I've been trying to create. May I save yours and use it?

    .entry img {
    background:url('img/shadow.gif') no-repeat right bottom;
    border:none;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding:4px 10px 10px 4px;
    }

  7. Simply pasting that into Ocean Mist doesn't work. The author, Sadish, had given me a copy of the entire MistyLook 3.1 CSS style sheet but they're meaningless to me. I think if there is a way to host the graphic elements separately on my server for example, it might work, should it be necessary.

  8. that code by itself won't work since the image path is relative. you'll need:

    .entry img {
    background:url('http://s.wordpress.com/wp-content/themes/pub/mistylook/img/shadow.gif') no-repeat right bottom;
    border:none;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding:4px 10px 10px 4px;
    }
  9. sunburntkamel - mwah! I thought there was no way to access that gif after I tinkered with my style sheet. Thank you!

  10. Ask and you shall receive - sunburntkamel has made me a believer! Many thanks for your help.

  11. One other thing, is it possible to change the font and font size of the Weblog Title and Tagline? SEARCH produced replies to similar issues but mine is more cosmetic and not overlapping like some reported with long titles.

  12. yep, you can apply any font you want to

    #header h1 { font-family: }
    #header h2 { font-family: }
  13. Thank you so much, sunburntkamel.

Topic Closed

This topic has been closed to new replies.

About this Topic