[Jim King]

Hi

I’ve just spent a bit of time going through the style.css and adding a small shadow to the following areas: Main menu, Slider, column images, extra text boxes, content and widgets.

I used “box-shadow: 0px 5px 5px black;” which seemed just enough to lift the areas.

After doing this I thought it could be useful to have this, perhaps, as an option within Graphics Settings for each of the elements above? Maybe with possibility of being able to set the shadowing parameters? I’m guessing at the fact that users would only wish to apply one set of shadow parameters to each box for uniformity.

Something like…

Vertical shadow [select]px
Horizontal shadow [select]px
Blur shadow [select]px
Shadow colour [select]

Apply to:

Main menu [select]
Presentation page Slider [select]
Presentation page Columns [select]
Extra texts [select]
Contents [select]
Widgets [select]

I’m not sure how easy it would be to build something like this into the theme, or how much it is likely to be wanted, but I feel it has given an already great theme an extra dimension. I’d send you an example link but currently I am only working on this on local host.

I hope this makes sense and helps

Cheers

Jim…

[Jim King]

ps I also added the shadow to the Social Display (which I have set on the right)

a couple of screenshots examples below:

Front:
https://docs.google.com/file/d/0ByA89tW4X1n1Vl9lSWhjV0E2bk0/edit?usp=sharing
Content:
https://docs.google.com/file/d/0ByA89tW4X1n1MktLMkdMemNlNk0/edit?usp=sharing

Cheers

Jim..

[Zed]

The look of the theme is a design and personal choice. You’re free to do any changes via custom CSS (or a child theme).
You’ll lose changes you do to the theme files the next time you update it.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Jim King]

Hi Zed

Yep that’s fine I have made the necessary changes and put them into the custom CSS area. Was purely a suggestion for a potential future release, if it wasn’t too difficult to build in, as others may have found it of use to have in standard settings.

Thanks

Jim..

[Robert]

Hi Jim

The effect looks really nice. Could you let me know the code to paste into the custom CSS area?

I am very new to this and tried pasting in the code with and without {} , so I am defiantly missing something here.

Thanks very much

Robert

[Robert]

….that’s definitely …

[Jim]

Hi Robert

I think the code below reflects most of the things I changed, with box shadowing and text.
Perhaps try copy and pasting into your custom CSS area and see if it works for you! 🙂 You’ll probably need to do a few tweaks.

You may only want selective bits, but if you are stuck then let me know.

I hope it helps

Jim…

#frontpage blockquote {
box-shadow: 0px 3px 5px black;

}
#access ul li a, #access ul li a span {
border-radius: 5px 5px 5px 5px;
font-family: Open Sans;
}

#access a span {
border-radius: 5px;
box-shadow: 0px 3px 5px black;
}

.widget-container {
box-shadow: 0px 3px 5px black;
}

#header-container >div#sheader {
box-shadow: 0px 5px 5px black;
}

#srights, #slefts {
box-shadow: 0px 3px 5px black;
}

div.post, div.page, .yoyo > li {
box-shadow: 0px 3px 5px black;
}

.nivo-caption {
text-shadow: 0px 2px 4px black;
}

.nivoSlider {
border-radius: 5px;
box-shadow: 0px 5px 5px black;
}
.nivoSlider img {
border-radius: 1px;
}
.nivo-main-image {
border-radius: 5px;
}

#front-columns {
border-radius: 5px;
}

.column-image {
border-radius: 5px;
box-shadow: 0px 3px 5px black;
}

#comments {
box-shadow: 0px 5px 5px black;
border:1px solid transparent;

}

#front-text2 h1 {
text-shadow: 0px 3px 3px black;
}

.entry-content blockquote {
box-shadow: 0px 2px 5px black;
}

[Robert]

Hi Jim

Thanks very much. That worked perfectly, although I changed the shadow effect on the nivo text back to normal as personally, I preferred that.

I was so inspired by your help that I put a box shadow around the posts on my blog, not that I have any proper posts yet. I think that’s a nice effect, like post it notes peeling away from the screen, a sort of post-skeuomorphic revivalism.

Even so, I’d like to round off the corners of the boxes to get a less angular look, even if this fantastic theme is about angular.

Regards

Robert

[Jim]

Hi Robert

If you aren’t using it already, then I’d recommend using Firefox with Firebug installed. There are a few tutorial Youtube videos out there that explain easily how to use the tool.

Good luck

Jim…

[Author]

Posts