[Resolved] CSS & Pading and Border radius.

Home Forums Support CSS & Pading and Border radius.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #123857
    smeko

    Hej Tom!

    I have some questions about my theme with css. Im showing my CSS with some pictures.
    Landing Page
    Navigation Menu

    I have disabled the padding between navigation menu and content and it does work with border radius on the meny and content. The problem is that i want border radius on the other side’s and it doesnt work. Im trying with some pageid’s and its messing up the code. Is there any other way, that is smarter?

    / Regards, Smeko

    /* Meny rundade hörn */
          .home .main-navigation {
          -webkit-border-top-left-radius: 15px;
          -webkit-border-top-right-radius: 15px;
          -moz-border-radius-topleft: 15px;
          -moz-border-radius-topright: 15px;
           border-top-left-radius: 15px;
           border-top-right-radius: 15px;
    }
    /* alla andra meny sidor */
           .page-id-18 .page-id-12 .page-id-14 .page-id-16 .page-id-41 .main-navigation {
          -webkit-border-radius: 15px;
    	  -moz-border-radius: 15px;
           border-radius: 15px;
    }
    /* Widgets rundade hörn */
    .widget {
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
           border-radius: 15px;
    }
    /* Content rundade hörn */
    .page-id-8 .inside-article {
          -webkit-border-bottom-right-radius: 15px;
    	  -webkit-border-bottom-left-radius: 15px;
          -moz-border-radius-bottomright: 15px;
          -moz-border-radius-bottomleft: 15px;
          border-bottom-right-radius: 15px;
          border-bottom-left-radius: 15px;
    }
    /* Alla andra sidor */
    .inside-article {
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
    }
    /* Footer rundade hörn */
    .site-info {
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
         border-radius: 15px;
    }
    /* Höjden på titel och text */
    .widget-title {
          margin-bottom: 15px;
    }
    /* Rundade kanter för slidern */
    .nivoSlider {
        -webkit-border-bottom-right-radius: 15px;
        -webkit-border-bottom-left-radius: 15px;
        -moz-border-radius-bottomright: 15px;
        -moz-border-radius-bottomleft: 15px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    /* Reducerar tomma delar mellan slidern och "Välkommen till SHFD" */
    .metaslider {
          margin-bottom: 20px;
    }
    /* Gör Slidern på mobilen full bred och höjd */
    @media (max-width:767px) {
          .nivoSlider {
         width: auto !important;
         height: auto !important;
          }
    } 

    Regard's, Smeko

    #123951
    Tom
    Lead Developer
    Lead Developer

    Have you thought about setting the content layout to “One container” in “Customize > Layout”?

    The spacing causing the issue is there because it’s currently set to separate containers.

    Let me know 🙂

    #124015
    smeko

    Hello TOM.

    I Have tried and the widget boxex are like the hole page, i want boxes.

    Picture

    Regard's, Smeko

    #124058
    Tom
    Lead Developer
    Lead Developer

    So are you basically wanting to remove the spacing between the navigation and your widgets/content?

    #124152
    Smeko

    I want the landing page with the slider with no spacing and border radius, like the picture. Then the other pages should have the spacing and border radius on the main navigation. Maybe i cant explain, i hope you understand Tom 🙂





    #124153
    Smeko

    This is the landing page.

    #124210
    Tom
    Lead Developer
    Lead Developer

    Ah, so really, the only thing you have to do is fully round the main navigation on all pages except the homepage.

    .main-navigation {
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
           border-radius: 15px;
    }

    Other than that, everything seems to be rounded.

    Then your .home .main-navigation needs to be this:

    .home .main-navigation {
          -webkit-border-top-left-radius: 15px;
          -webkit-border-top-right-radius: 15px;
          -webkit-border-bottom-left-radius: 0px;
          -webkit-border-bottom-right-radius: 0px;
          -moz-border-radius-topleft: 15px;
          -moz-border-radius-topright: 15px;
          -moz-border-radius-bottomleft: 0px;
          -moz-border-radius-bottomright: 0px;
           border-top-left-radius: 15px;
           border-top-right-radius: 15px;
           border-bottom-left-radius: 0px;
           border-bottom-right-radius: 0px;
    }

    Hopefully that does the trick 🙂

    #124272
    smeko

    Thanks Tom. It’s working like a charm and the way i like it. This CSS code does it make the page load slower?

    Regard's, Smeko

    #124318
    Tom
    Lead Developer
    Lead Developer

    The more CSS you have the longer it takes to load, but the difference is so small that humans can’t notice – only computers 🙂

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