CSS for Mystile theme

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 {
display:none;
}

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.

63 thoughts on “Custom CSS for the Mystile Theme

  1. 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
    mel

  2. Hi

    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
    http://www.no-limits.co.uk

    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

  3. Hello,
    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!
    Clement

  4. 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.

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

  6. 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.

  7. 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?

  8. 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="http://212.7.217.123/piw/piwik.php?idsite=1&rec=1&quot; 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,
    Rodrigo

  9. 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,

    Weber

  10. 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.
    Pat

    • 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.

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

    • 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.

  12. 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;
    }

  13. 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.

  14. 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.

  15. 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

  16. 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

  17. 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;
    }

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

    Thanks
    Farah

  19. 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

  20. 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;
    }

  21. 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

  22. 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;
    }

  23. 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

  24. 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?

  25. Hello,
    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

    Logo
    aaa bbb ccc ddd eee fff ggg

  26. 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…

  27. 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!
    Michaelzfy

  28. Hi,
    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;
    margin-right:auto
    margin-left:auto
    }

    header .nav-toggle {

    top: 8em !important;
    }

    logo {

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

    • 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. 🙂

  29. 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’?
    Thanks!

  30. 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.

Leave a Comment