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

Home Forums Support targeting pages without affecting the front-page and blog-page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1309034
    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.

    #1309148
    Tom
    Lead Developer
    Lead Developer

    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 {
    
    }
    #1310384
    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

    #1310400
    Tom
    Lead Developer
    Lead Developer

    Glad you got it all working 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.