What's new

Welcome to StoreFront Forums

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

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

rani

New member
Trusted Uploader
Joined
Aug 26, 2021
Messages
21
Reaction score
24
Points
3
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: 15

Pedro

Forum Admin
Staff member
Trusted Uploader
Joined
Aug 21, 2021
Messages
1,227
Reaction score
932
Points
113
Location
Genesis Forum
Website
genesis.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!
 
shape1
shape2
shape3
shape4
shape7
shape8
Top
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