Docs

[5wan]

Hi,

URL: wwww.duncanswan.me

I’m attempting to duplicate the box-shadow effect below the sliders on my HOME & BOOKs page (eg. http://www.duncanswan.me/home/), but on pages that don’t contain sliders.
eg. My Contact page (http://www.duncanswan.me/contact/)

I’d like the shadow to appear at the top of these Slider-less pages (such that it appears beneath the page title).

Is this possible?

Thanks

Duncan

[5wan]

This reply has been marked as private.

[5wan]

Currently using the below CSS to modify the slider shadow.

.x-slider-container {
box-shadow: 0 0em 15em 0 #000000;
-moz-box-shadow: 0 2em 11.5em 0 #ff0000;
-webkit-box-shadow: 0 2em 11.5em 0 #ff0000;
}

How do I apply the same effect to the top of the none slider pages?

Thanks

[Friech]

Hi There,

Thanks for writing in! Regretfully, there is no element above the header/title that we can apply the box-shadow into.

We could utilise the gradient background instead to achieve the same effect on your secondary pages.

e.g.

.page-id-7013 .entry-header {
background: rgba(74,4,4,1);
background: -moz-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(74,4,4,1)), color-stop(0%, rgba(240,47,23,1)), color-stop(100%, rgba(0,0,0,0.28)));
background: -webkit-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: -o-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: -ms-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: linear-gradient(to bottom, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0404', endColorstr='#000000', GradientType=0 );
max-width: none;
}

You can generate your gradient background color here.

Replace only this part Of the given code with your own generated gradient color.

background: rgba(74,4,4,1);
background: -moz-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(74,4,4,1)), color-stop(0%, rgba(240,47,23,1)), color-stop(100%, rgba(0,0,0,0.28)));
background: -webkit-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: -o-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: -ms-linear-gradient(top, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
background: linear-gradient(to bottom, rgba(74,4,4,1) 0%, rgba(240,47,23,1) 0%, rgba(0,0,0,0.28) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0404', endColorstr='#000000', GradientType=0 );

Hope it helps, Cheers!

[5wan]

thanks for that, I’ll have a play around with it and get back to you.

Secondary question, is it possible to apply a box-shadow to all edges of portfolio page items?
ie. the Gallery / page thumbnails
on:
http://www.duncanswan.me/the-art/

Such that the item looks raised?

[5wan]

In an expansion to the above question, is there also a way to trigger it on mouseover / hover?

[Lely]

Hi There,

Please use the following CSS:

.page-id-6810 .has-post-thumbnail .entry-featured:hover {
    -webkit-box-shadow: 0 0em 15em 0 #000000;
    box-shadow: 0 0 1em 0 #ff0000;
    -moz-box-shadow: 0 0 1em 0 #ff0000;
    -webkit-box-shadow: 0 0 1em 0 #ff0000;
    overflow: visible !important;
}
.page-template-template-layout-portfolio a.entry-thumb {
     margin-top: 5px;
}

Hope this helps.

[5wan]

Thanks for that, slight problem.

I cant get the page gradient to work for page ID 6810.
http://www.duncanswan.me/the-art/

css

.page-id-6810 .entry-header {
background: rgba(255,0,0,1);
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff0000′, endColorstr=’#000000′, GradientType=0 );
max-width: none;
}

[Paul R]

Hi,

You can try this code instead.

.page-id-6810   .x-header-landmark.x-container.max.width {
    background: rgba(255,0,0,1);
    background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(100%, rgba(0,0,0,0.03)));
    background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: -o-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    background: linear-gradient(to bottom, rgba(255,0,0,1) 0%, rgba(0,0,0,0.03) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#000000', GradientType=0 );
    max-width: none;
    height: 100px;
    width:100%;
    margin:0 auto;
    padding-top:10px;
}

Hope that helps.

[5wan]

Perfect, thank you

[Christopher]

You’re welcome.

[Author]

Posts