WordPress Premium Theme The Zuki by Elmastudio. Modify Header, Footer, Slider ,Widgets font, color, border styles and more using css

Before I shared CSS modifications of Theme Revelar by Automattic. Today I am sharing many important style or css modifications of The Zuki Theme by Elmastudio.It is a premium theme and you need to purchase it before using it. So if you are willing to purchase the theme and to modify it use the CSS code i have shared here.

Theme Zuki Header Modification

1. If you want to change Zuki theme’s site title font color, font family and font size use this code.

#site-header h1 {
font-size: 28px !important;
font-family: arial !important;
color: black !important;
}

2. If you don’t want to show site description beside the Site title in the Zuki theme use this code

#site-header h2.site-description {
display: none !important;
}

3. If you want to change the Site description’s font color, font family and font size of The Zuki theme use this code.
#site-header h2.site-description {
font-size: 28px !important;
font-family: arial !important;
color: black !important;
}

4. If you want to modify the font, color and size of Header Top (right) menus in Zuki theme.

#header-top-nav a {
font-size: 12px !important;
color: blue;
font-family: times new roman !important;
}

5. If you want to change main menu font color, font size and font family of the Zuki theme use this code.

#site-nav ul li a {
font-family: times new roman;
color: darkred !important;
font-size: 24px !important;
}

5(a). If you want to change style of Sub menu use this code

#site-nav ul ul.sub-menu li a {
font-family: arial !important;
color: darkblue !important;
font-size: 18px !important;
}

5(b). If you want to change the Sub menu’s Hover

#site-nav ul ul.sub-menu li a:hover {
background: red !important;
}

6. If you want to reduce gap/space just above and bottom of the main menu

#site-nav {
padding-top: 12px !important;
padding-bottom: 12px !important;
}

7. If you want to change the style of Category/Archive page’s post title

.entry-title, .entry-title a {
font-family: times new roman !important;
color: darkred !important;
font-size: 28px !important;
}

8. If you want to change Category/archive page post author’s name font color, size and font family

.entry-author, .entry-author a {
font-family: times new roman !important;
color: darkred !important;
font-size: 16px !important;
}

9. In your category archive page if you don’t want to show the post author and Post date / category name use this code

.archive .entry-author, .archive footer.cf {
display: none !important;
}

10. If you want to change archive/category post font color, font size and font family in Premium Theme The Zuki by Elmastudio
.archive .entry-summary p {
font-family: arial !important;
line-height: 22px !important;
color: grey;
font-size: 17px !important;
}

theme-Zuki-theme-category-post

11. In individual Post if you want to remove/hide category name, Author or date in Premium Theme The Zuki by Elmastudio

.single-post .entry-cats {
display: none !important;
}
.single-post .entry-author {
display: none !important;
}

.single-post .entry-date {
display: none !important;
}

12. In individual Post if you want to change font style of category name, Author or date in Premium Theme The Zuki by Elmastudio

.single-post .entry-cats {
font-family: arial !important;
color: grey;
font-size: 17px !important;
}
.single-post .entry-author {
font-family: arial !important;
color: grey;
font-size: 17px !important;

}

.single-post .entry-date {
font-family: arial !important;
color: grey;
font-size: 17px !important;
}

13. If you want to change Individual or single blog post title’s style use this code

.entry-header h1.entry-title {
padding: 15px 0 20px;
font-family: arial;
color: darkred;
font-size: 30px !important;
}

Theme Zuki  css style modification

14. If you want to change Footer widget section title’s font color and styles in the Zuki theme.
*** this is applicable only for the footer widget section
#footerwidgets-wrap h3.widget-title {
font-family: times new roman;
font-size: 17px !important;
color: darkred !important;
}
*** Also if you want to put some border below the footer widget title and to reduce gap below the title use this code.

#footerwidgets-wrap h3.widget-title {
border-bottom: 1px solid darkred;
padding-bottom: 5px !important;
margin-bottom: 13px !important;
}

15. If you want to change footer widget section links font color, size, font family etc use this code

#footerwidgets-wrap li a {
color: blue !important;
font-size: 15px !important;
font-family: arial !important;
}

**** If you want to change the footer widget section links hover color use this code.
#footerwidgets-wrap li a:hover {
color: darkred !important;

}
Premium Theme Zuki footer modification

16. Premium theme zuki has a Quote widget to show Famous person’s Quote ..and it use HTML’s blockquote tag. So to change the font family, color and style of Quote in Zuki theme use this code.

.front-fullwidth .widget_zuki_quote blockquote.quote-text, .front-content .widget_zuki_quote blockquote.quote-text {
font-size: 52px;
font-size: 23px !important;
font-family: arial !important;
color: darkred !important;
}

Premium theme Zuki Quote modification

17. If you want to change Default sidebar widget title’s font color, size and font family of Theme Zuki

.default-sidebar h3 {
font-family: times new roman;
font-size: 17px !important;
color: darkred !important;
}

*** Like the footer widget title if u want to add a border below the sidebar widget title use this

.default-sidebar h3 {
border-bottom: 1px solid darkred;
padding-bottom: 5px !important;
margin-bottom: 14px !important;

}

18. If you want to change sidebar widget section link color, font family etc in Zuki theme
.default-sidebar li a {
color: darkred;
font-family: arial;
font-size: 16px !important;
}

*** Also if you want to change the default sidebar widget’s link hover color
.default-sidebar li a:hover {
color: darkblue;
}

19. In default sidebar widget if you want to change the Textwidget’s font color size and family

.default-sidebar .textwidget {
font-size: 14px;
color: black !important;
font-family: times new roman !important;
}
Theme Zuki Default Sidebar Modification

20. Under each single post if you want to change the Next and Previous post tile’s font styles use this code.

#nav-single a {
color: darkred !important;
font-size: 24px !important;
font-family: times new roman !important;
}
Theme Zuki Modification

21. In single post page, if you want to give the Author Bio a different look

.authorbox.cf * {
color: white !important;
}
.authorbox.cf {
background: #222;
padding: 12px;
}

Theme Zuki Author Bio


If you have any issue feel free to ask me question here in comments section

OR


Want me to help you personally for CSS Issue?CLICK HERE….

6 Responses to WordPress Premium Theme The Zuki by Elmastudio. Modify Header, Footer, Slider ,Widgets font, color, border styles and more using css

  1. Jenna Silver says:

    Hi, I have the Zuki theme and I want to know how to change the appearance of my post. To give a better explanation; when you go to categories and see your posts, they are all big pictures with text (this is normal with the zuki theme. example: http://themes.elmastudio.de/zuki/category/food/ The category is food and those are all the post that show up. But I want my post to look like this: http://www.welikebali.com/travel/ I think this site also uses the Zuki theme but I can’t figure out how they make their post come in columns next and under each other? Can you help me with this? thanks so much!

    Like

  2. Hi there, I wanna change my primary menu to look more like the header top menu (but with the subcategories and as my only menu on the site).
    I see I can use your descriptions 5. and 6. to do some of that.
    Now I have two questions: a) can I also move the menu more to the right than have it all over the page and
    b) how do I get into the CSS for that?
    Many thanks!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: