[Resolved] targeting pages without affecting the front-page and blog-page

[Mathias]

Hello,

I want to create the same effect for the pages which I have created for posts:

blog-post: http://dev-1.upconversion.de/test-2

pages: http://dev-1.upconversion.de/fue-hair-restoration

.page #content {
   padding: 7%;
    margin-top: -50px;
    border-radius: 5px 5px 0 0;
    background:white;
    }

It works well, but now also the front-page and blog-page are affect – which should not be affected, see here:
http://dev-1.upconversion.de/
http://dev-1.upconversion.de/blog

Also I would like to have the same box-shadow effect with the ::before element for pages as in posts:
blog-post: http://dev-1.upconversion.de/test-2

David gave me this code, which I also want to make work for pages (but I didnt know which element to target).

.full-width-content.separate-containers.single .page-hero + #page .inside-article {
    position: relative;
}

.full-width-content.separate-containers.single .page-hero + #page .inside-article:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    box-shadow: 0 -5rem 10rem rgba(42,49,57,.05);
    z-index:-1;
}

Lastly the hover-effect and border of the masonry-layout of the blog-homepage should not apply to pages.

See here:
http://dev-1.upconversion.de/blog

Effect also here:
http://dev-1.upconversion.de/fue-hair-restoration (which should not be the case)

Thank you very much.

Have a great day.

[Tom]

Hi there,

For the first issue, try this instead:

.page:not(.home):not(.blog) #content {
    padding: 7%;
    margin-top: -50px;
    border-radius: 5px 5px 0 0;
    background:white;
}

For the second question, try this:

.full-width-content.separate-containers.single .page-hero + #page .inside-article,
.full-width-content.separate-containers.page:not(.home):not(.blog) .page-hero + #page .inside-article {
    position: relative;
}

.full-width-content.separate-containers.single .page-hero + #page .inside-article:before,
.full-width-content.separate-containers.page:not(.home):not(.blog) .page-hero + #page .inside-article:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    box-shadow: 0 -5rem 10rem rgba(42,49,57,.05);
    z-index:-1;
}

The third question – your selector is:

.contained-content.separate-containers .inside-article, 
.contained-content.one-container .site-content {

}

Try this:

.contained-content.separate-containers .masonry-container .inside-article {

}

[Mathias]

Thank you so much Tom,

much appreciated.

First question: OK

Second question: your given snippet did not workd

But this did work:

.page:not(.home):not(.blog) #content {
	position:relative;
}
    
.page:not(.home):not(.blog) #content:before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    box-shadow: 0 -5rem 10rem rgba(42,49,57,.05);
    z-index:-1;
}

Third question: OK

thanks again

[Tom]

Glad you got it all working 🙂

[Author]

Posts