Archived topic
CSS & Pading and Border radius.
8 replies · Started by smeko on July 26, 2015
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;
}
} 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 :)
So are you basically wanting to remove the spacing between the navigation and your widgets/content?
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 :)
This is the landing page.
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 :)
Thanks Tom. It's working like a charm and the way i like it. This CSS code does it make the page load slower?
The more CSS you have the longer it takes to load, but the difference is so small that humans can't notice - only computers :)