Modifying Levels Ready Theme

[dreese]

I have an existing MMUI store that I am working on updating to CSSUI. I am completely rebuilding and have started with a dev instance with the Level Ready Theme applied. I thought that using a Ready Theme would simplify the rebuild but I'm really struggling with how to change key components of the theme like font sizes, colors etc. I've made changes in the CSS that I thought should have some impact but it doesn't.

I feel that the font for the product title on the product page is way too big. I want to change the color of the add to basket button etc. I also have a really large blank space under the image section/cart section that I can't figure out how to change. I would have not expected this large white space to be part of the ready theme. The same page on my mobile device looks more reasonable in font size and doesn't have this large gap.

I've read all the documentation I could find about ready themes and just am not getting where to modify what. The ready theme documentation does a pretty good job for the main page but no specific details on other pages like category pages, product pages etc. unless I've missed something. Is there something that describes the standard layout or breaks down the various page/column sections? I'm just hoping someone might point me in a direction on any helpful documentation, links videos etc.

Thanks,
Debi

[Matt Zimmermann]

Hi Debi,

Unfortunately, there is not much documentation on the CSS structure or rules for the older ReadyThemes. Most of the items you are looking to modify can be done within the following CSS files located on your server under mm5/themes/levels/css/

• buttons.css - This controls the various button sizes with some custom classes for specific buttons as well.
• colors.css - This defines the various hex codes used for the color classes.
• pages.css - This contains the various classes used on specific pages and for a variety of components.
• structure.css - This controls the mail layout of the site. (Be vary caution if you edit this file.)
• typography.css - This controls a variety of font calls used throughout the site.
• theme.css - This contains specific coding for newer function or components as well as overrides to classes defined in any of the other CSS files.

It is generally recommended that you either edit/update the theme.css file to mold the site like you want it or create your own CSS file to contain your customization and overrides.

[kayakbabe]

I am pretty sure on the levels theme the all.php script is setup .. so that if you add a custom.css into the themes/levels/css folder that the custom.css will be pulled in last if it exists so that it will override everything that comes before it. that is helpful so if there are any updates.. your custom changes will always be applied no matter what.

Kelly

[dreese]

When you refer to the Level Theme as an older theme is there a better one to start with that is better documented? I'm not necessarily locked in to using the Level theme but I do like the fly out mega menu. I understand the concept of modifying the CSS file or creating a new CSS file but how do I figure out which CSS element it even is? I feel like its searching for a needle in a haystack.

A good example is that I have this huge white space under the product header/image details and before the actual product description. How do I figure out what is controlling/causing this? It looks fine on a mobile device.

I built my mmui store completely by myself and have done some fairly complex template coding but I'm really struggling with the CSSUI and the ready themes without documentation that I thought was going to make this transition easier.

[lesliekirk]

I understand the concept of modifying the CSS file or creating a new CSS file but how do I figure out which CSS element it even is? I feel like its searching for a needle in a haystack.

Couple things that might help - are you using a browser developer tool to look for the CSS elements? I suspect you might be but are having issues with that all.php file telling you everything is in it. What I do to work around that is to add the paths of all the CSS files in the head tag.

This is just an example. Your PHP file may list different files and your paths may be different:

<mvt:comment>
<link href="&mvte:global:theme_path;/css/css.php" rel="stylesheet" />
</mvt:comment>

<link href="&mvte:global:theme_path;/css/normalize.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/base.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/scaffolding.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/typography.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/buttons.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/fonts.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/forms.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/tables.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/colors.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/slider.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/magnific-popup.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/helpers.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/structure.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/pages.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/custom.css" rel="stylesheet" />
<link href="&mvte:global:theme_path;/css/print.css" rel="stylesheet" />

When you are finished with the build comment out all the file paths (or removed them), and then uncomment your PHP file.

This will help you find the style, but my personal rule is to never make changes in the files but to create a custom.css file and add my changes to it.

Hope this helps a little.