Ocean Mist theme customization with border/drop shadow?

shimworld · Member · May 20, 2007 at 3:32 pm
Copy link

Add topic to favorites
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/
drmike · Member · May 20, 2007 at 5:50 pm
Copy link
I’m lost here. What’s the question? Are you trying to add in the drop shadow or…?
shimworld · Member · May 21, 2007 at 5:03 am
Copy link
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.
joandcindy · Member · May 21, 2007 at 9:07 am
Copy link
I’ve done that. Here’s the CSS that I used.
img { border:1px transparent; border-left:1px solid #efefef; border-top:1px solid #efefef; background:url('http://i36.photobucket.com/albums/e41/jo117/sideback.png') no-repeat right bottom; padding:4px 14px 14px 4px; }
Was that the sort of thing you want to do?
shimworld · Member · May 21, 2007 at 10:53 am
Copy link
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.
ellaella · Member · May 21, 2007 at 11:30 am
Copy link
@ 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;
}
shimworld · Member · May 21, 2007 at 11:38 am
Copy link
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.

sunburntkamel · Member · May 21, 2007 at 2:17 pm

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

.entry img {
background:url('https://s-ssl.wordpress.com/wp-content/themes/pub/mistylook/img/shadow.gif?m=1172446079i') no-repeat right bottom;
border:none;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
padding:4px 10px 10px 4px;
}

ellaella · Member · May 21, 2007 at 2:26 pm
Copy link
sunburntkamel – mwah! I thought there was no way to access that gif after I tinkered with my style sheet. Thank you!
shimworld · Member · May 21, 2007 at 11:10 pm
Copy link
Ask and you shall receive – sunburntkamel has made me a believer! Many thanks for your help.
shimworld · Member · May 22, 2007 at 2:49 am
Copy link
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.
sunburntkamel · Member · May 22, 2007 at 12:51 pm
Copy link
yep, you can apply any font you want to
```
#header h1 { font-family: }
#header h2 { font-family: }
```
shimworld · Member · May 23, 2007 at 2:54 am
Copy link
Thank you so much, sunburntkamel.

The topic ‘Ocean Mist theme customization with border/drop shadow?’ is closed to new replies.

WordPress.com forums

Ocean Mist theme customization with border/drop shadow?