Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #595513

    Hi,

    I’ve created some diagonal sections with css and it worked on the first section “services” (via applying a section ID) but I now tried to apply it to a second section called “about”. For some reason it applies the css to the first section “services” and not to the “about” section and I am not quite getting as to why.

    The CSS I used is:

    #services::before {
    background: #fff none repeat scroll 0 0;
    content: “”;
    display:block;
    height: 200px;
    position:absolute;
    bottom:-150px;
    transform: skewY(3.2deg);
    width: 100%;
    }

    #about::before {
    background: #f9f9f9 none repeat scroll 0 0;
    content: “”;
    display:block;
    height: 200px;
    position:absolute;
    top:-150px;
    transform: skewY(3.2deg);
    width: 100%;
    }

    #about::after {
    background: #f9f9f9 none repeat scroll 0 0;
    content: “”;
    display:block;
    height: 200px;
    position:absolute;
    bottom:-150px;
    transform: skewY(-3.2deg);
    width: 100%;
    }

    and here a link to the page:

    Thanks so much & kindest Regards, Corina

    #596084

    Ok I figured it out… the solution below, just in case it’s for use to anyone: #intro, #services are section IDs.

    #intro::before {
    background: #ffffff none repeat scroll 0 0;
    content: “”;
    display: block;
    height: 100px;
    position: absolute;
    bottom:-80px;
    transform: skewY(1.5deg);
    width: 100%;
    }

    div#intro {
    position:relative;
    overflow:hidden;
    }

    #services::before {
    background: #f9f9f9 none repeat scroll 0 0;
    content: “”;
    display: block;
    height: 100px;
    position: absolute;
    bottom:-80px;
    transform: skewY(-1.5deg);
    width: 100%;
    }

    div#services {
    position:relative;
    overflow:hidden;
    }

    #596111

    Hi!

    Glad it’s sorted for you now :)

    Please feel free to get in touch with us if you have any questions. We have put together some info about enfold theme please feel free to check it out here – http://kriesi.at/documentation/enfold/

    Cheers!
    Vinay Kashyap

    #600593

    Hmmm, i have done same …. but it doesnt works.
    It would be great if someone finds a working solution …

    #600596

    Hi docperi

    I got it to work with the css below. If you want to have a look it’s http://pre.colorit.ch. You have to enable custom IDs in Enfold though. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Hope it helps. Corina

    ===========================

    #intro::before {
    background: #fff none repeat scroll 0 0;
    content: “”;
    display: block;
    height: 100px;
    position: absolute;
    bottom:-80px;
    transform: skewY(1.5deg);
    width: 100%;
    z-index:100;
    }

    div#intro {
    position:relative;
    overflow:hidden;
    }

    #about::before {
    background: #dc1e38 none repeat scroll 0 0;
    content: “”;
    display: block;
    height: 100px;
    position: absolute;
    bottom:-80px;
    transform: skewY(-1.5deg);
    width: 100%;
    opacity: 0.8;
    }

    div#about {
    position:relative;
    overflow:hidden;
    }

    #network::before {
    background: #fff none repeat scroll 0 0;
    content: “”;
    display: block;
    height: 100px;
    position: absolute;
    bottom:-80px;
    transform: skewY(-1.5deg);
    width: 100%;
    z-index:50;
    }

    div#network {
    position:relative;
    overflow:hidden;
    }

    #references::before {
    background: #dc1e38 none repeat scroll 0 0;
    opacity:0.8;
    content: “”;
    display: block;
    height: 100px;
    position: absolute;
    bottom:-80px;
    transform: skewY(1.5deg);
    width: 100%;
    z-index:10;
    }

    div#references {
    position:relative;
    overflow:hidden;
    }

    #600609

    Hey!

    @docperi let us know if the above tip worked for you or you have any questions.

    @cd2s thanks for sharing the tip :) lovely site!

    Cheers!
    Vinay Kashyap

    #600611

    Hi Vinnie

    I am so grateful for all the support I receive from you guys. So if there is some small contribution I can make I am glad to do so.

    Thanks also re comment to the site… it is still in development and there are a lot of placeholder images/films there… :) but it’s also your theme that totally rocks … gives so much flexibility to create.

    Have a lovely weekend.
    all the best,
    Corina

    #600707

    It works!
    Thx to all :-)

    #601069

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

    #687963

    Hi, this theme is incredible!
    For me, it does not work… ok for custom IDs in Enfold though.
    Can you help me ???

    #688039

    Hi,

    If you are using any caching plugin disable it until the css changes are done.

    Then apply the css correctly with the same ID’s and it should work for you.

    If you still have any issues please get back to us with the ID names and a link to the page where we can see the element in question.

    Best regards,
    Vinay

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.