The main stylesheet file is located in (Geniux/assets/css/style.css).
<!-- style CSS ============================================ --> <link rel="stylesheet" href="assets/css/style.css">
For a fast customization use the indexed table of contents at the top of the style sheet to easily reach the desired portions of code settings.
The @import rule allows you to import a style sheet into another style sheet.
The Geniux style.css use this method to import Vendor style sheets.
/* -------------------------------------------------------- */ /* 00. Css Import /* -------------------------------------------------------- */ /* ---- 00.1 Vendor Plugins Css ---- */ @import 'vendor/bootstrap.css'; @import 'vendor/spinkit.css'; @import 'vendor/bootsnav.css'; @import 'vendor/animate.css'; @import 'vendor/plugins.css'; @import '../fonts/font-awesome/css/font-awesome.min.css'; @import '../fonts/et-linefont/css/style.css'; /* ---- 00.2 Elements Css ---- */ @import 'elements.css'; /* ---- 00.3 Blocks Shortcodes Css ---- */ @import 'shortcodes-demo.css';
The elements.css style sheet is a file not to be modified that contains common settings and properties abbreviations that are easy to use for a fast customization.
Padding example: the css property p-t-50 corresponds to padding-top: 50px
Margin example: the css property m-t-30 corresponds to margin-top: 30px
Font size example: the css property f-s-30 corresponds to font-size: 30px
You can see all the css abbreviations from line 137 in elements.css
Use them directly in your html tags, without the need to add additional lines of code in your style sheet.
/* --- Margin & Padding Options --- */ .m-15 { margin: 15px; } .p-full-60 { padding: 60px; } /* --- margin-top --- */ .no-margin { margin: 0!important;} .m-t-0 { margin-top: 0!important;} .m-t-5 {margin-top: 5px!important;} .m-t-10 {margin-top: 10px!important;} .m-t-15 {margin-top: 15px!important;} .m-t-20 {margin-top: 20px!important;} .m-t-25 {margin-top: 25px!important;} .m-t-30 {margin-top: 30px!important;} .m-t-35 {margin-top: 35px!important;} .m-t-40 {margin-top: 40px!important;} .m-t-45 {margin-top: 45px!important;} .m-t-50 {margin-top: 50px!important;} .m-t-55 {margin-top: 55px!important;} .m-t-60 {margin-top: 60px!important;} .m-t-65 {margin-top: 65px!important;} .m-t-70 {margin-top: 70px!important;} .m-t-75 {margin-top: 75px!important;} .m-t-80 {margin-top: 80px!important;} .m-t-90 {margin-top: 90px!important;} .m-t-100 {margin-top: 100px!important;} .m-t-110 {margin-top: 110px;} .m-t-120 {margin-top: 120px;} .m-t-130 {margin-top: 130px;} .m-t-140 {margin-top: 140px;} .m-t-150 {margin-top: 150px;} .m-t-200 {margin-top: 200px!important;} /* --- margin-bottom --- */ .m-b-0 {margin-bottom: 0!important;} .m-b-5 {margin-bottom: 5px!important;} .m-b-10 {margin-bottom: 10px!important;} .m-b-15 {margin-bottom: 15px!important;} .m-b-20 {margin-bottom: 20px!important;} .m-b-25 {margin-bottom: 25px!important;} .m-b-30 {margin-bottom: 30px!important;} .m-b-35 {margin-bottom: 35px!important;} .m-b-40 {margin-bottom: 40px!important;} .m-b-45 {margin-bottom: 45px!important;} .m-b-50 {margin-bottom: 50px!important;} .m-b-55 {margin-bottom: 55px!important;} .m-b-60 {margin-bottom: 60px!important;} .m-b-65 {margin-bottom: 65px!important;} .m-b-70 {margin-bottom: 70px!important;} .m-b-75 {margin-bottom: 75px!important;} .m-b-80 {margin-bottom: 80px!important;} .m-b-90 {margin-bottom: 90px!important;} .m-b-100 {margin-bottom: 100px!important;} /* --- margin-left --- */ .m-l-0 {margin-left: 0!important;} .m-l-5 {margin-left: 5px!important;} .m-l-10 {margin-left: 10px!important;} .m-l-15 {margin-left: 15px!important;} .m-l-20 {margin-left: 20px!important;} .m-l-25 {margin-left: 25px!important;} .m-l-30 {margin-left: 30px!important;} .m-l-45 {margin-left: 45px;} /* --- margin-right --- */ .m-r-0 {margin-right: 0!important;} .m-r-5 {margin-right: 5px!important;} .m-r-10 {margin-right: 10px!important;} .m-r-15 {margin-right: 15px!important;} .m-r-20 {margin-right: 20px!important;} .m-r-25 {margin-right: 25px!important;} .m-r-30 {margin-right: 30px!important;} .m-r-40 {margin-right: 40px!important;} .m-r-50 {margin-right: 50px!important;} /* --- negative margin --- */ .m-t--50 { margin-top: -50px; } .m-t--70 { margin-top: -70px; } /* --- font-size --- */ .f-s-8 {font-size: 8px!important; line-height: 10px;} .f-s-9 {font-size: 9px!important; line-height: 13px;} .f-s-10 {font-size: 10px!important; line-height: 16px;} .f-s-11 {font-size: 11px!important; line-height: 17px;} .f-s-12 {font-size: 12px!important; line-height: 18px;} .f-s-13 {font-size: 13px!important; line-height: 19px;} .f-s-14 {font-size: 14px!important; line-height: 20px;} .f-s-15 {font-size: 15px!important; line-height: 21px;} .f-s-16 {font-size: 16px!important; line-height: 22px;} .f-s-17 {font-size: 17px!important; line-height: 25px;} .f-s-18 {font-size: 18px!important; line-height: 26px;} .f-s-19 {font-size: 19px!important; line-height: 27px;} .f-s-20 {font-size: 20px!important; line-height: 28px;} .f-s-25 {font-size: 25px!important; line-height: 32px;} .f-s-30 {font-size: 30px!important; line-height: 38px;} .f-s-35 {font-size: 35px!important; line-height: 43px;} .f-s-40 {font-size: 40px!important; line-height: 48px;} .f-s-42 {font-size: 42px!important; line-height: 50px;} .f-s-45 {font-size: 45px!important; line-height: 53px;} .f-s-50 {font-size: 50px!important; line-height: 58px;} .f-s-55 {font-size: 55px!important; line-height: 62px;} .f-s-60 {font-size: 60px!important; line-height: 65px;} .f-s-65 {font-size: 65px!important; line-height: 70px;} .f-s-70 {font-size: 70px!important; line-height: 75px;} .f-s-80 {font-size: 80px!important; line-height: 85px;} .f-s-90 {font-size: 90px!important; line-height: 95px;} .f-s-100 {font-size: 100px!important; line-height: 100px;} .f-s-150 {font-size: 150px!important; line-height: 130px;} /* --- font-weight --- */ .f-w-100 {font-weight: 100;} .f-w-300 {font-weight: 300!important;} .f-w-400 {font-weight: 400!important;} .f-w-500 {font-weight: 500!important;} .f-w-600 {font-weight: 600!important;} .f-w-700 {font-weight: 700!important;} .f-w-800 {font-weight: 800!important;} .f-w-900 {font-weight: 900!important;} /* --- padding --- */ .no-padding { padding: 0!important;} .p-10 {padding: 10px 0!important;} .p-15 {padding: 15px 0!important;} .p-20 {padding: 20px 0!important;} .p-25 {padding: 25px 0!important;} .p-30 {padding: 30px 0!important;} .p-40 {padding: 40px 0!important;} .p-50 {padding: 50px 0!important;} .p-60 {padding: 60px 0!important;} .p-70 {padding: 70px 0!important;} .p-80 {padding: 80px 0!important;} .p-90 {padding: 90px 0!important;} .p-100 {padding: 100px 0!important;} .p-110 {padding: 110px 0!important;} .p-120 {padding: 120px 0!important;} .p-130 {padding: 130px 0!important;} .p-140 {padding: 140px 0!important;} .p-150 {padding: 150px 0!important;} /* --- padding top --- */ .p-t-0 { padding-top: 0!important;} .p-t-10 { padding-top: 10px!important;} .p-t-15 { padding-top: 15px!important;} .p-t-20 { padding-top: 20px!important;} .p-t-25 { padding-top: 25px!important;} .p-t-30 { padding-top: 30px!important;} .p-t-40 { padding-top: 40px;} .p-t-50 { padding-top: 50px!important;} .p-t-55 { padding-top: 55px!important;} .p-t-60 { padding-top: 60px!important;} .p-t-70 { padding-top: 70px!important;} .p-t-80 { padding-top: 80px!important;} .p-t-85 { padding-top: 85px!important;} .p-t-90 { padding-top: 90px!important;} .p-t-100 { padding-top: 100px!important;} .p-t-110 { padding-top: 110px!important;} .p-t-120 { padding-top: 120px!important;} .p-t-130 { padding-top: 130px!important;} .p-t-140 { padding-top: 140px!important;} .p-t-150 { padding-top: 150px!important;} /* --- padding right --- */ .p-r-0 { padding-right: 0!important;} .p-r-5 { padding-right: 5px!important;} .p-r-10 { padding-right: 10px!important;} .p-r-20 { padding-right: 20px!important;} .p-r-30 { padding-right: 30px!important;} .p-r-40 { padding-right: 40px!important;} .p-r-50 { padding-right: 50px!important;} /* --- padding bottom --- */ .p-b-0 { padding-bottom: 0!important;} .p-b-10 { padding-bottom: 10px!important;} .p-b-20 { padding-bottom: 20px!important;} .p-b-25 { padding-bottom: 25px!important;} .p-b-30 { padding-bottom: 30px!important;} .p-b-35 { padding-bottom: 35px!important;} .p-b-40 { padding-bottom: 40px!important;} .p-b-50 { padding-bottom: 50px!important;} .p-b-55 { padding-bottom: 55px!important;} .p-b-60 { padding-bottom: 60px!important;} .p-b-70 { padding-bottom: 70px!important;} .p-b-80 { padding-bottom: 80px!important;} .p-b-90 { padding-bottom: 90px!important;} .p-b-100 { padding-bottom: 100px!important;} .p-b-110 { padding-bottom: 110px!important;} .p-b-120 { padding-bottom: 120px!important;} .p-b-130 { padding-bottom: 130px!important;} .p-b-140 { padding-bottom: 140px!important;} .p-b-145 { padding-bottom: 145px!important;} .p-b-150 { padding-bottom: 150px!important;} .p-l-0 { padding-left: 0!important;} .p-l-10 { padding-left: 10px!important;} .p-l-20 { padding-left: 20px!important;} .p-l-30 { padding-left: 30px!important;} .p-l-40 { padding-left: 40px!important;} .p-l-50 { padding-left: 50px!important;} /* --- float --- */ .float-l { float: left;} .float-r { float: right;} /* --- borders --- */ .no-border { border: none!important;} .border-top-1 { border-bottom: 1px solid rgb(239, 239, 239);} .border-btm-1 { border-bottom: 1px solid rgb(239, 239, 239);} /* --- overflow --- */ .no-overflow { overflow: hidden!important; } /* --- float reset --- */ .no-float { float: none!important; } /* --- display none --- */ .no-display { display: none; }
This style sheet file is used only for demo purposes and used for styling the elements/shortcodes demo pages.