Designing With Custom CSS
This folder contains two CSS files and a folder. It is important to follow the folder structure and naming convention strictly.
We need to add the style.css and responsive.css files in the CSS folder. The style.css file contains CSS rules that will be used to style the template design, while the responsive.css file contains CSS rules for the responsive design purpose.
The colours folder contains five CSS files. These CSS files are used for changing the theme colour of our template. For example, if our template has five theme colour variations – red, green, blue, black, and yellow, with red being the default template colour, the CSS file names should be as follows: default-FF0000.css, green-02B729.css, blue-0093C1.css, black-000000.css, and yellow-FFC35C.css. These CSS files overwrite CSS rules to change the template theme colour.
The file naming convention follows this pattern: {colorName}-{hexColorCode}.css
If the color is the default theme color, the color name should be: {default}-{hexColorCode}.css
Here’s an example of using custom CSS to modify the appearance of a webpage:To fix the design issues of a broken login form, you can add the following CSS rules to your style.css file:
/*login page*/
.login-form input[type="text"] {
color: #333;
height: 42px;
background: #fff;
}
.page-login .login-form {
border: 1px solid #e5e5e5;
padding: 50px 70px;
max-width: 650px;
width: auto;
}
.login-form .title {
font-size: 25px;
font-weight: 500;
padding-bottom: 20px;
}
.login-form .form-row {
margin: 0 0 30px;
}
.login-form .form-row:last-child {
margin-bottom: 10px;
}
.login-form .form-row label {
font-size: 15px;
font-weight: 500;
padding-bottom: 7px;
}
.login-form .form-row input[type="text"],
.login-form .form-row input[type="password"] {
height: 45px;
width: 100%;
}
.login-form .submit-row {
float: none;
}
.login-form .submit-row button {
font-family: "Poppins",sans-serif;
font-size: 18px;
font-weight: 500;
width: 100%;
}
.login-form .form-row.remember {
color: #333;
float: right;
font-weight: 500;
text-align: right;
}
.login-form .lost-password a {
color: #f1bb01;
font-weight: 500;
}
.login-form .lost-password a:hover {
color: #333;
}
.login-form .form-row .no-account-label,
.login-form .form-row .account-register {
color: #333;
font-weight: 500;
}
.login-form .account-register a {
color: #f1bb01;
}
.login-form .form-row .account-register a:hover {
color: #333;
}
.login-form .errorlist.after {
padding-top: 5px;
}