Web Analytics
TUTORIAL - Zambianhit theme users, checkout new Header modification for you today from your favorite Css Stylist

TUTORIAL Zambianhit theme users, checkout new Header modification for you today from your favorite Css Stylist

rani

Member
Trusted Uploader
Contributor
Aug 26, 2021
52
44
18
Let's change the transparent header of our Zambianhits theme color to any color we want, check screenshot for demo.

Just copy and last the following codes on your Theme------> customize --------> Additional Css----- then past the below style CSS inside the txt editor space.

CSS:
#site-name {
    background: #000000 url() repeat-x center;
    line-height: 1.2;
    margin: 0;
}
.topnav a {
    float: left;
    display: block;
    color: #00ff72;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
        background-color: #0a0000;
}
.topnav {
    background-color: #000000;
    overflow: hidden;
    border-bottom: 2px solid lime;
}

Let me explain the above style name and it's code and usage....

#site-name -----> holds the logo section you see by the left, u can change the background color what color you like.

.topnav a ---------> stands for the menu a colors and it's background colors to rhythm with the color of the .topnav and the #site-name style color too, you can choose to make it different too, but I advise you lean color combinations and how to apply them.

Lastly is;

.topnav ------> this is the aspect which hold the whole section of the header path you can change it's background color to your favorite colors too.

Above are all done without having to edit the theme yourself, this is for those that have less ideas of how to edit the whole theme colors.

See screenshot below.

Hope this is helpful to u all.

More Mods coming in....

Request for any CSS modification of themes you downloaded from Genesis only.
 

Attachments

  • Screenshot_20211122-011914_Chrome.jpg
    Screenshot_20211122-011914_Chrome.jpg
    56 KB · Views: 73

Pedro

Forum Admin
Staff member
Trusted Uploader
Contributor
Aug 21, 2021
1,439
2
2,237
113
Genesis Forum
storefront.com.ng
Let's change the transparent header of our Zambianhits theme color to any color we want, check screenshot for demo.

Just copy and last the following codes on your Theme------> customize --------> Additional Css----- then past the below style CSS inside the txt editor space.

CSS:
#site-name {
    background: #000000 url() repeat-x center;
    line-height: 1.2;
    margin: 0;
}
.topnav a {
    float: left;
    display: block;
    color: #00ff72;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
        background-color: #0a0000;
}
.topnav {
    background-color: #000000;
    overflow: hidden;
    border-bottom: 2px solid lime;
}

Let me explain the above style name and it's code and usage....

#site-name -----> holds the logo section you see by the left, u can change the background color what color you like.

.topnav a ---------> stands for the menu a colors and it's background colors to rhythm with the color of the .topnav and the #site-name style color too, you can choose to make it different too, but I advise you lean color combinations and how to apply them.

Lastly is;

.topnav ------> this is the aspect which hold the whole section of the header path you can change it's background color to your favorite colors too.

Above are all done without having to edit the theme yourself, this is for those that have less ideas of how to edit the whole theme colors.

See screenshot below.

Hope this is helpful to u all.

More Mods coming in....

Request for any CSS modification of themes you downloaded from Genesis only.
This is beautiful, brother! Nice!
 
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks