≡ Menu

Custom CSS for the Mystile Theme


CSS Snippets to Customize the Mystile theme

Before we dive into this tutorial on customizing Mystile via CSS we need to give a huge THANK YOU shout out to one of our amazing forum members.  He has contributed so much and has helped many people solve their WordPress WooCommerce issues.  He goes by the username, “Savidge4” and has provided the custom CSS that you’ll find below and in the Upload WP Community Forums.  In this tutorial we’ll focus on modifying Mystile background colors, centering sidebar widget titles, modifying the Shop page and more all via custom CSS.

CSS to Modify Mystile theme Background Colors

The six CSS snippets below are all part of changing the background colors of the Mystile theme.  In this example, the goal is for the main content section to be white and the theme background color to be black.  We’ll start by changing Mystile’s primary content section background to white.  You’ll want to copy and paste this CSS into the following place in the WordPress admin…

Mystile > Theme Options > General Settings > Display Options > paste in “Custom CSS” text box

1.  Change the primary content section background color to white with the CSS below…

#wrapper {
background: #ffffff !important;

Simply change #ffffff to any color you’d like.  If you have Photoshop then use the color picker tool.  If you don’t have it, then Google “color picker” and you’ll find a couple free ones that work just as well.

2.  Use the code below to change the background color of the far right and left-hand-sides of Mystile

body {
background: #000000 !important;

3.  Modify the footer background color minus the footer widgets section with the CSS below…

#footer {
background: #000000;
padding: 20px;

4.  Now we’ll change the background color of the footer widgets section with the following CSS…

.footer-wrap {
background: #000000; !important

5.  At this point, the top of the Mystile theme is the last modification we need to make to achieve an all black background boarder.  So use the CSS below to change the background color of the top of the theme

#top {
background: #000000 !important;

6.  The final snippet of custom CSS in this portion of the tutorial changes the top navigation hover color.  In this demonstration, we’ll go ahead and change the hover color to white…

#top ul.nav > li a:hover {
background: #ffffff;

Below is what our Mystile demo site looked like before making the customizations

Before background color customizations.

This is what the demo site looks like after making the background color modifications

After Mystile background color changes

Watch our video below to see how easy it is to modify the Mystile theme background colors via CSS

CSS to Center Mystile Sidebar Widget Titles and Increase Widget Text Size

If you’re looking for more control over how the sidebar widgets display then the custom CSS below if for you.  This code makes it easy to center sidebar widget titles, change title colors and increase widget text size.

1.  Use the custom CSS below to center Mystile widget titles and change the color of the text

.widget h3 {
color: #00000;
text-align: center;

2.  The code below increases the size of the widgets text

.widget {
margin-bottom: .75em;
color: #ffffff;
font-size: 14px;
text-align: left;

Please note:  You can also center the widget text by changing “text-align: left;” to “text-align: center;”

Below is a screen capture of centered widget titles on our demo site…

Mystile Centered Widget Titles

Take a few minutes to watch our tutorial video on customizing sidebar widget titles for the Mystile theme

Random CSS to Further Customize the Mystile theme

Looking for more ways to customize the Mystile theme?  Here you go…

1. Prevent the “Shop” title from showing

.page-title {
display: none !important;

2.  Remove the default sorting drop-down from the WooCommerce Shop page…

.orderby {

3.  Reduce spacing between bread crumbs to move page further above the fold…

#breadcrumbs {
margin: 0px;
padding: 0px;

4.  Create a box shadow inset for posts and product pages

.post, .type-page {
padding-bottom: 10px;
padding-left: 33px;
padding-right: 33px;
padding-top: 8px;
text-align: left;
background-color: #ffffff;
box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.5);
width: 667px;

5.  The CSS below adds a shadow inset to your product thumbnail images

.attachment-shop_catalog {
box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.5) !important;
border: 0 !important;

Set aside 3:28 to watch our tutorial video below on customizing the WooCommerce Shop page via CSS

To get more custom CSS for the Mystile theme and other popular WooCommerce themes go to the Upload WP Community Forums.  It’s free to join and you’re sure to find tips that will help enhance your WordPress site.  Also, remember to checkout Savidge4’s amazing contributions.

View all contributions by

Comments on this entry are closed.

  • Teddy Triton March 17, 2014, 7:21 pm

    If you use the Mystile theme and want to share CSS for customizing it, please post it in the following thread in the Upload WP Community Forums… http://uploadwp.com/community/index.php?threads/css-to-customize-the-mystile-theme.128/

  • mel April 15, 2014, 3:05 pm

    Hi there, thanks so much for your videos theyre great. im still a novice and wondered if you could help with a problem. My product descriptions wont display on my single product pages, something they did initially. I think they disappeared after an update of some kind. I have fished around for days now to get help, and the latest advice is to back up, then delete mystile folder and reinstall, dut to old files sitting in there. Im not comfortable doing this, is there any advice you could give me at all to get this problem sorted?
    Many thanks

    • Teddy Triton April 15, 2014, 4:43 pm

      Hi mel,

      Do you know if the issue happened after you updated WordPress, WooCommmerce or both? To get premium support, please go to our forums and become a member… http://uploadwp.com/community/index.php

      It's easy to join and we have a bunch of WP WooCommerce experts that will help guide you through this issue. Thanks and I'll see you in the forums.

  • Chris April 18, 2014, 5:59 am


    Love your videos, they made the process of setting up my mystile ecommerce site a lot easier and quicker than if i had tried to figure this out myself. the site is

    I was looking to change the color of the text of the widgets in my footer only. I can change widget titles in the typography section of the mystile theme options but that means all the widget titles change. I only want the widget titles in the footer to change to white!

    Cheers in advance

  • Clement May 8, 2014, 2:04 am

    Great job with your tutorials!!!
    I'm on mystile theme and I have two questions:
    1. Is it possible to change the search bar on the top-nav (not remove, but install a new one)?
    2. Is it possible to move the primary menu below the logo (keep the logo on the left) and just above the banner, and make the primary menu fitting the width of the banner ?
    Thanks a lot for your help in advance!

    • Teddy Triton May 8, 2014, 7:30 am

      Hi Clement,

      Both of those Mystile theme customizations are most likely possible. For specific instruction on how to do it, please go to the Upload WP Community Forums… http://uploadwp.com/community/index.php?forums/customizing-woocommerce.8/

      Please feel free to join the forums and start a new thread. Our forum members are well versed with WooCommerce and the Mystile theme. See you in the forums.

  • Denzer June 14, 2014, 3:05 pm

    Hi Teddy!

    First of all, thank you so much for your wonderful videos, I am a beginner and really your videos helped me a lot, I was searching over here and there for different themes and then finally searched Mystile theme and after that I dig your website, specially your videos, just AWESOME 🙂 .. I created my website from the knowledge I learned from your website and videos, thanks again.

    I have just few questions, and I am very hopeful that you will have the solution of it. Basically, I was thinking that is there a way to create a same product page for different categories, like whenever I add new product it shows on my Home page, but I want to show it on other page.

    For Example: I have posted a product related to game, and I have created a Games Page, but the issue is that whenever I add new product it automatically shows on home page, and I want to add it to my games page, never seen any option like that, and may be there should be any option but I am not aware of it. I want to create different pages with different categories, such as Games, Software's, T-Shirts and want that each product I add should be listed in their proper category pages, please kindly advise, I shall be very thankful to you.

    Another question is, can we change the product labels in Mystile theme, such as from Featured Product to Featured Offers, and Recent Products to Recent Offers, please advise.

    Waiting anxiously for your reply 🙂

    Thanks in Advance.

    • Teddy Triton June 18, 2014, 8:35 am

      Hi Denzer,

      Thanks for the complements and I'm happy to hear that our WordPress tutorials have been helpful. I'd be more than happy to help but the best place to do that is in our forums. Specifically, the Upload WP Community Forums here… http://uploadwp.com/community/index.php?forums/woocommerce-themes.7/

      We have many active forum members that are more than willing to point you in the right direction. See ya in the forums.


  • Mark Christopher Benjamin June 18, 2014, 5:52 am

    Dear Sir,

    Your CSS snippets were very helpful. Do you have a snippet to customize the menu in mystile theme.

    maybe create a rectangle box and change the color.

    Thank you.

    Best regards


  • Yvonne July 9, 2014, 10:32 pm

    I'm trying to remove the outer layer in the product box. I would like a plain white box without the additional lines.

  • jason July 13, 2014, 1:51 am

    can you add an image in the background that has a nice color margine?
    I am new to wordpress and wanting to make a store with this but am lost as to how to do this type of stuff.
    I am used to zencart which has nice feature and things you can do but wordpress opens a while new world.

  • REGGSenterprises July 18, 2014, 5:48 am

    I tried to remove SHOP title and it is not working.

    I also tried to add the shadow around thumbnails and also to change the size of the widget headers and they both worked on my homepage but not on the shop page.

    Any idea why this would happen?

  • Rodrigo July 21, 2014, 1:42 pm

    Hi all,

    First of all, thanks to this website tutorials I have been able to adapt Mystile in order to achieve my needs!

    The only problem I am facing is not related to CSS itself I think… the below code is being loaded and is slowing down my site to load:

    <img src="; style="border:0; display:none;" pagespeed_url_hash="1353794789"/>

    Already tried to look for pieces of the string digging the codes but no success.

    Any of you have faced this before? I would like to remove it completely. Btw I am not using any piwiki plugin (at least not explicity! :))

    Thank you,

    • Teddy Triton July 22, 2014, 4:38 pm

      Thanks for the positive feedback on our WordPress tutorials Rodrigo! My suggestion is to join the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      We have many active forum members and I'm sure they will be able to solve the issue for you fast.

  • Weber July 24, 2014, 1:54 pm

    Hi! I saw your tutorial showing how to display 5 products in a row for the Mystile Theme.

    Could you teach me how to set 5 categories in a row for the Superstore theme? Although, I would like to keep the number of products in 4 per row.

    Regards from Brazil,


  • Patricia Marrone-Alvarez July 31, 2014, 8:12 am

    Hi Adam,
    Thanks to your videos and forum help I have successfully customized many aspects of my first WP Mystile theme website! I am having a few glitches though that I need help with as I am getting ready to "launch" my site at a VIP presentation.

    1. Top navigation bar: Change font color to #181818 – this worked before by using the following code in the custom css box, but suddenly it doesn't anymore

    #top ul.nav > li a {
    color: #181818;

    2. Top navigation bar: I would like the buttons to change color to #ff4800 when hovering (like Primary Menu)
    3. I have an unwanted character “)” next to Checkout on Top Nav bar
    4. I'd like to add a cart icon next to "items" on the top nav bar
    I thank you in advance for any help you can offer.

    • Teddy Triton August 3, 2014, 5:26 pm

      Hi Patricia,

      I'm happy to hear that our tutorials have been helpful. The best way to get help answers all 4 of your questions is to join the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      It's free and easy to join and we've shifted all of our WordPress WooCommerce there. We have many active members that will point you in the right direction. See ya in the forums.

  • lakhan August 14, 2014, 7:23 am

    very helpfull code sir

    • Teddy Triton August 14, 2014, 4:17 pm

      Thanks for the complements lakhan!

  • naomi August 17, 2014, 2:46 pm

    What is the css for adjusting the size of the product images on the cart page? Thank you!

  • naomi August 18, 2014, 3:15 pm

    does the css work always on the mystile child theme? I'm having trouble with my css, nothing seems to be making any changes.

    • Teddy Triton August 19, 2014, 9:03 pm

      Hi Naomi – yes, the custom CSS should work with the Mystile child theme. My recommendation is to join the Upload WP Forums and post your question there. We have a bunch of WooCommerce WordPress pros that will help guide you.

  • Chris August 19, 2014, 7:00 pm

    Thank you for the great tutorials. I have one small challenge with custom css for the nav buttons… I'm trying to change the color from white to match the grey in the Mystile theme using a custom css but the color won't change at ozztosh.com

    I've tried a couple in the Mystile > Settings > Custom CSS

    #header #navigation ul.nav > li a {
    border: 1px solid #c0c0c0 !important;
    background: #c0c0c0 !important;

    #header #navigation {
    border: 1px solid #c0c0c0;
    background: #c0c0c0;

    • Teddy Triton August 19, 2014, 8:51 pm

      Hi Chris,

      To get the CSS to change the Navigation buttons simply go to our forums… http://uploadwp.com/community/index.php

      It's Free and easy to join and you'll get the custom CSS you need within hours of joining. See ya there.


  • Ricky September 4, 2014, 3:58 pm

    Hi Adam,
    Can you please advise how I can change the body text colour also the colour of the price.

  • Cathy September 18, 2014, 1:52 pm

    Now i have a big trouble that i used mystyle theme and woocommerce plugin, and the product variation dropdown tables overlap on shop page when viewing it on a small screen like cell phone. Do you have any idea to solve this problem? Thank you a lot.

  • Cathy September 18, 2014, 1:53 pm

    Now i have a big trouble. i used mystyle theme and woocommerce plugin, but the product variation dropdown tables overlap on shop page when viewing it on a small screen like cell phone. Do you have any idea to solve this problem? Thank you a lot.

    • Teddy Triton September 22, 2014, 11:40 am

      Hi Cathy,

      We’d love to help you solve this issue in the Upload WP Forums… http://uploadwp.com/community/index.php

      We have many active WordPress / WooCommerce / Mystile theme experts that will be happy to solve the issue for you. Hope to see you there.

  • Upendra Awsthi October 22, 2014, 1:26 am

    I have a website i want one button on every product page and on clicking that button i want to open a image in a light box Please help me in doing this .
    Actually i need to open a shoe size chart on every product page

  • Susan Rodgers October 30, 2014, 7:09 am

    Hi Teddy –

    I just used your css snippets and they made a huge improvement to my website store appearance. I didn’t even know it was possible to customize the Mystile theme, and your instructions made it easy to do. Thanks from all of us!

    Susan Rodgers, Terrace Park Historical Society

  • Elyhu November 10, 2014, 8:53 am

    Hy Teddy, i used the code bellow but not taking effect. My widget text it white. Can you throw an eye on my website?

    .widget {
    margin-bottom: .75em;
    color: #000000;
    font-size: 14px;
    text-align: left;

  • Farah December 11, 2014, 5:44 am

    Hi Teddy Triton,
    Learned a lot from your post. Thanks.
    I have question. How to add image behind the banner?
    like in thins website.


  • haqim December 26, 2014, 7:15 am

    hi Teddy,
    i have follow most of your tutorials and videos for setting up my first website mybizinspiration.com and i’m really happy with the current result. but one problem only when i view it on my mobile phone its no longer responsive anymore. Is there anything that we can do to make it works as well on the handphone screen? Thanks

  • haqim December 26, 2014, 11:09 am

    Hi Teddy,
    This forum discussion was unbelievable amazing. I’m following your tutorials and have subscribe to this site. All working fine on my site except that top menu hover color part. I have paste your CSS but its not working on my site. i want change the hover color to orange. but it still on white color. thanks

    #top ul.nav > li a:hover {
    background: #ff4800;

  • Sarah December 28, 2014, 8:18 am

    Hi, Adam, I am at a below-beginner level at creating a web site and doing any sort of coding. Would you mind answering these questions? (my web site theme is Mystile)
    1) I don’t see the “Astore_page.php” file under Appearance >> Editor. Evidently, I then need to add it “via FTP”. I understand what an FTP is, but where is my FTP and how do I get the Astore php to my Mystile Editor?

    2) My Home page banner image is very large. It looks like I need to edit a code or two to shrink it, right? Where is the code I need to edit and do you know by chance what the code would be?

    Thanks for the help, Adam! And, Happy 2015!
    – Sarah

  • haqim December 28, 2014, 1:22 pm

    Hi Teddy,
    I really found that this forum is wonderful as there are plenty of expert people here. I’ve been following some of the CSS from your recommendation and really happy with the result. It just that I’m having 1 little issue only with the top menu navigation hover color. I want it to be on color code #ff4800, but it still appear as white color. These are the CSS that I’ve been using, can you have a look on it.

    @media only screen and (min-width: 768px) {
    .homepage-banner:after {
    background: none;

    .page-title {
    display: none !important;

    #footer {
    background: #1e1e1e;
    padding: 20px;

    .footer-wrap {
    background: #1e1e1e; !important

    #top {
    background: #1e1e1e !important;

    #top ul.nav > li a:hover {
    background: #ff4800;

  • Pankaj December 30, 2014, 1:53 pm

    i tried all your CSS codes given on changing header, body and footer etc. color changing, all worked except the one i wanted i.e. footer with widget area.
    No color is changing even after applying your given codes.

    I am totally down now, i searched whole day for some code that will change color of widget area but nothing helped,
    Plz help me

    I shall be very thankful to you for this kind act.

    Warm Regards
    Pankaj Dhillon

  • Lucy Froehlich January 27, 2015, 2:54 pm

    Hi, I’m using the Mystile theme and would like to have a slider instead of the static banner. Is this possible? If so can you point me to some documentation?

    Thanks, Lucy

  • F. Markey March 19, 2015, 1:07 pm

    Nice article.. Thanks for shares 🙂 Regards Francesca

  • carlos April 8, 2015, 10:14 am

    Can I Save the custom css changes and simply past them back into the custom css box after i update my theme? would i still need to make a child theme?

  • Mohamad April 11, 2015, 11:14 am

    I am using Mystile theme (not child), i need to know how can i move the logo to the middle of the screen, and below it the main navigation menu also centered,
    Below is an example of how i want my page to be like
    If you need more info let me know

    aaa bbb ccc ddd eee fff ggg

  • Sarah May 14, 2015, 9:18 pm

    I followed your awesome tutorial on changing up the background in Mystile and I had 2 questions.

    At the bottom of my page, above the footer, there is a random gray bar. How do I get rid of that?
    Is there a way to change the color of the header section of the homepage – the part where I currently have the logo? I would like to make it white…

  • Michaelzfy May 17, 2015, 12:56 am

    Hello, Teddy,

    How are you?
    I am a newer. Now I am using Mystile theme. And I want to remove product-tag and product category tag from URL. So I installed wp-no-tag-base and wp-no-category-base, but it doesn’t work for Mystile theme.
    Do you have any idea or CSS code?

    Thank you very much!

  • CssDude August 21, 2015, 9:17 pm

    I’m having an issue with my logo not being responsive.
    I have a little ‘custom CSS’ but not sure if that’s what’s causing a conflict or if the logo is just not responsive initially.

    I’ve tried a bunch of things I use when building from scratch (non-WP) but none of it worked.
    I tried attacking hgroup, logo, and header to no avail.
    Any pointers will help stop pulling my hair out would be much appreciated. Thanks.
    here’s my custom css that I have so far:

    /* Enter Your Custom CSS Here */

    body.page article header h1 {
    display: none;

    footer {

    background: #E0E0E0;
    padding: 20px;


    .footer-wrap {
    background: #E0E0E0;

    header {

    margin: 0px auto 0px auto;
    padding: 0px auto 0px auto;
    border-bottom: 4px double transparent !important;


    header #navigation, #header hgroup {

    margin: 0px auto 0px auto;
    padding: 0px auto 0px auto;


    header #main-nav {

    display: table !important;
    margin: 0 auto !important

    header #navigation {

    float: none !important;
    clear: both;

    header .nav-toggle {

    top: 8em !important;

    logo {

    width: 100%;
    max-width: 100%;}

    • CssDude August 22, 2015, 12:12 am

      Ok, I actually figured it out. I can’t always preview mobile changes by making my browser smaller. I have to actually look at it on a phone or small device to see the effects of the responsiveness. 🙂

  • CssDude August 22, 2015, 12:15 am

    Ok, new question 🙂
    The Mystile responsive menu icon (nav-toggle) is too boring/overused and not intuitive to older customers. Is there an easy way to change this to the word ‘MENU’?

  • Laurie September 29, 2015, 6:43 am

    I would like to replace the Buy Now button which is under the product description. I have an Amazon Affiliate website and wanted to use the Buy Now at Amazon button instead. How do I upload a gif or jpg of a button instead. I am using the Mystile Wordpress theme.
    I appreciate your help. Thanks.