Archived topic
targeting pages without affecting the front-page and blog-page
3 replies · Started by Mathias on May 31, 2020
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.
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 {
}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
Glad you got it all working :)
