Maxwell By ThemeZee: Change styles of Header, Footer, Menus, contents, sidebar and more

Maxwell By ThemeZee help support customization documentation
Maxwell is a modern Blog Theme for Creatives and Entrepreneurs. With its beautiful typography and thoughtful white space, Maxwell truly helps you to stand out with your content. If you are using wordpress.com premium and business plan you can use it for free.
Here I am sharing you some css customization which can help to style your theme as your own.

You can ask question regarding any issue you are facing.

Or can take my personal help.

Question 1: To change the Read More button (of Featured Posts and blog posts in homepage) background color and hover background color of Continue Reading

.more-link {
background: darkred;
}

.more-link:hover {
background: green !important;
color: white !important;
}

Question 2 : To change the Featured Posts titles font color, font size and font family of Maxwell theme

.featured-posts .featured-post .type-post .entry-title, .featured-posts .featured-post .type-post .entry-title a {
font-size: 23px !important;
color: darkred !important;
font-family: cursive !important;
}

Question 3: If you don’t want to show featured post date of Maxwell theme

.featured-post .entry-meta {
display: none !important;
}
Maxwell By ThemeZee featured section modification

Question 4: If you want to change top site title’s font color, font family and font size

div#logo, div#logo a {
color: darkred;
font-size: 58px;
font-family: cursive;
}

Question 5: If you want to change site description’s font color, font size and font family in Maxwell theme

p.site-description {
color: darkred;
font-size: 23px;
font-family: cursive;
}

or
if you don’t want to show the site description

p.site-description {
display:none;
}

Question 6 : If you want to show the site title and site description in center position one below another

div#logo {
display: block;
width: 100%;
text-align: center;
}
p.site-description {
display: block;
text-align: center;
}
Maxwell By ThemeZee site title and site description styling and modification

Question 7: If you want to use a logo instead of site title
Answer : Go to dashboard, then Appearance > Customization >Site Identity
from there you can add logo instead of showing site title

Question 8 : To change the hover font color of menu in Maxwell theme
.main-navigation-menu a:hover {
color: red !important;
}

** To change the font size, color and font family of menu and submenu
.main-navigation-menu a, .main-navigation-menu .sub-menu a {
font-size: 16px;
font-family: cursive;
}

** To change the sub menus background color
.main-navigation-menu ul {
background: darkred !important;
}

Maxwell By ThemeZee jetpack top social menu hover color

Question 9 : To change the top social menus of jetpack ( twitter, facebook, google plus, youtube ) hover color to their original one

*** twitter icons hover color

.jetpack-social-navigation-genericons a[href*=”twitter.com”]:hover:before {
color: skyblue !important;
}

*** facebook icons hover color
.jetpack-social-navigation .menu li a[href*=”facebook.com”]:hover:before {
color: blue !important;
}

*** google plus icons hover color

.jetpack-social-navigation-genericons a[href*=”plus.google.com”]:hover:before {
color: red !important;
}

*** youtube icons hover color

.jetpack-social-navigation-genericons a[href*=”youtube.com”]:hover:before {
color: red !important;
}

Question 10: To change widget section’s link color, link font size and widget contents font size

.widget-area {
font-size: 16px !important;
}
.widget-area a {
color: blue !important;
font-size: 16px !important;
}

Maxwell By ThemeZee sidebar and footer widget title links and content style change

Question 11: To change widget title ( both footer and sidebar widget section) font color, font size, font family, center title and using background color behind title

h3.widget-title {
color: white;
font-size: 23px !important;
font-family: cursive;
background: darkred;
text-align: center;
}

Question 12: If you don’t want to show sidebar in single post page
.single-post section#secondary {
display: none !important;
}

*** also, if you want to show the contents in the middle (without sidebar) and also increase the width of content section

section#primary {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
width: 87% !important;
}

*** Also if you want to show the single post title centered

.single-post h1.entry-title {
text-align: center;
}

*** Also to show the post author and avatar centered below the post title

.single-post .posted-by {
text-align: center;
}
.single-post .posted-by .avatar {
float: none !important;
}

*** to show the single post date centered

.single-post .entry-meta {
text-align: center;
}
Maxwell By ThemeZee remove sidebar and making contents title and date centered

Question 13: If you don’t want to show comments section in pages

body.page div#comments {
display: none !important;
}
no comments on pages wordpress

Question 14: To change the gap between paragraph, to change font size, font color and font family in posts and pages content section in Maxwell theme

.entry-content, .entry-content p {
color: black;
font-size: 18px;
margin-bottom: 10px !important;
margin-top: 10px !important;
font-family: cursive;
}
content section or text style modification

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

OR

Pay me some, I will help you for CSS Issue Personally CLICK HERE….

2 Responses to Maxwell By ThemeZee: Change styles of Header, Footer, Menus, contents, sidebar and more

  1. windowtorrd says:

    I am using the bakersville 2 theme on a wordpress blog. We have been able to adjust most of what we need but have one issue that I wondered if you could help us with. The title of the blog ends up lower than we want in the header. Is there a way to move that up some in the title area. blog is: http://windowintorrd.apps-1and1.com/

    Thanks!
    sandy.l.monroe@rrd.com

    Like

    • Hi
      ok, try this code and let me know if it helps

      @media (min-width: 980px){

      .header {

      padding: 48px 0px !important;
      }

      .site-title {
      float: left !important;
      margin-top: 16px !important;
      text-align: center !important;
      width: 86% !important;
      padding-left: 98px !important;
      }
      }

      Om

      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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: