{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"How to write a Theme for SmartStore.NET","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Files and folders:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"theme.config","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"preview.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"/Content (optional)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"/Views (optional)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"/Views/Shared/ConfigureTheme.cshtml (optional)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"/Content/_user.scss (optional)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"theme.config","type":"text"}]},{"type":"paragraph","content":[{"text":"The file ","type":"text"},{"text":"theme.config","type":"text","marks":[{"type":"em"}]},{"text":" is the most important file of a theme. Here, you can configure the basic values such as ","type":"text"},{"text":"title","type":"text","marks":[{"type":"em"}]},{"text":", ","type":"text"},{"text":"author","type":"text","marks":[{"type":"em"}]},{"text":" or ","type":"text"},{"text":"version","type":"text","marks":[{"type":"em"}]},{"text":". Also, you can declare variables that can be configured by the user.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\t\n\t\t#E8F5E9\n\t\t14px\n\t\tlabel\n\t\n\t\n\t\t\n\t\n","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Attributes of the Theme-Node","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"baseTheme","type":"text","marks":[{"type":"strong"}]},{"text":": determines the theme from which your theme is derived (find more information about theme inheritance further below)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"strong"}]},{"text":": determines the title of your theme","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"previewText","type":"text","marks":[{"type":"strong"}]},{"text":": determines the preview text which is shown within the admin area next to the theme","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"author","type":"text","marks":[{"type":"strong"}]},{"text":": contains information about the company or person who has written the theme","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"version","type":"text","marks":[{"type":"strong"}]},{"text":": determines the version of the theme","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Theme inheritance","type":"text"}]},{"type":"paragraph","content":[{"text":"Before you start a design from scratch, you can also derive everything from a base theme and just alter the parts of it that you don't like. Therefore, you just need to determine a base theme within the ","type":"text"},{"text":"baseTheme","type":"text","marks":[{"type":"strong"}]},{"text":" attribute in the ","type":"text"},{"text":"theme.config.","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"We've structured our css files to be very granular so that in most cases, you only need to overwrite small parts in order to change the design of a certain area. Sometimes, you may just want to change or add a line, in which case we recommend using the file ","type":"text"},{"text":"_custom.sass","type":"text","marks":[{"type":"code"}]},{"text":" to overwrite other css declarations. This is an empty file that gets rendered last, so its declarations have the highest priority. When you work like this, you can update your base theme to a higher version without any problems. You have the latest code and your changes remain as they were before the update.","type":"text"}]},{"type":"paragraph","content":[{"text":"Whereas the file _","type":"text"},{"text":"custom.sass","type":"text","marks":[{"type":"code"}]},{"text":" is set up to be edited for theme developers, the file ","type":"text"},{"text":"_user.sass","type":"text","marks":[{"type":"code"}]},{"text":" is there to be edited by shop admins.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can also derive your theme from one that has also been derived from another, thanks to multi-level inheritance. The SmartStore.NET theme engine tries to locate the actual physical file by looking up all corresponding paths in the hierarchy chain.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you just want to alter certain lines in a particular css file, you can also import the css file of one of the parent themes and add your lines to it. This way, your theme keeps up to date with the current code and your changes also remain intact.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":"/*\n The 'explicit' query at the end is extremely important here,\n as it forces the theme engine to load the referenced file explicitly\n without looping through the hierarchy chain (beginning with the current theme)\n*/\n@import \"../../Flex/Content/block.sass?explicit\";\n\n.block.block-bordered .block-title a {\n color: #fff;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Theme variables","type":"text"}]},{"type":"paragraph","content":[{"text":"You can define your own variables within the ","type":"text"},{"text":"variables","type":"text","marks":[{"type":"code"}]},{"text":" node in the ","type":"text"},{"text":"theme.config","type":"text","marks":[{"type":"em"}]},{"text":" file. These variables can be used within your css. There are 5 different variable types as listed below:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select","type":"text","marks":[{"type":"code"}]},{"text":": any value defined within a corresponding selection. The ","type":"text"},{"text":"type","type":"text","marks":[{"type":"code"}]},{"text":" attribute of ","type":"text"},{"text":"select","type":"text","marks":[{"type":"code"}]},{"text":" always has to refer to the ","type":"text"},{"text":"id","type":"text","marks":[{"type":"code"}]},{"text":" of a ","type":"text"},{"text":"select","type":"text","marks":[{"type":"code"}]},{"text":" node (see example above). Variable type and select id are separated by a #","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"String","type":"text","marks":[{"type":"code"}]},{"text":": string value","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Color","type":"text","marks":[{"type":"code"}]},{"text":": hexadecimal color value","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Boolean","type":"text","marks":[{"type":"code"}]},{"text":": boolean value (true or false)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Number","type":"text","marks":[{"type":"code"}]},{"text":": integer value (e.g.: 1, 2, 1024)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The file ","type":"text"},{"text":"ConfigureTheme.cshtml","type":"text","marks":[{"type":"strong"}]},{"text":" has to be placed in the directory ","type":"text"},{"text":"Views\\Shared","type":"text","marks":[{"type":"code"}]},{"text":". Its purpose is to provide an administration area for your theme. This is optional as long as you derive from a base theme. You only have to create it when you have defined new theme-specific variables. To add an editor for the variables that are defined in your theme.config, simply add the following code for every variable you have determined.","type":"text"}]},{"type":"codeBlock","content":[{"text":"@ThemeVarEditor(\"MyVariable\")","type":"text"}]},{"type":"paragraph","content":[{"text":"This code will automatically render an editor depending on the variable type.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select","type":"text","marks":[{"type":"code"}]},{"text":": Select-Box","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"String","type":"text","marks":[{"type":"code"}]},{"text":": Textbox","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Color","type":"text","marks":[{"type":"code"}]},{"text":": Color-Picker","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Boolean","type":"text","marks":[{"type":"code"}]},{"text":": Selectbox (with the values true or false)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Number","type":"text","marks":[{"type":"code"}]},{"text":": Textbox","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Once you've defined your variables, you can use them in css like this:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":"body {\n background: @var_MyVariable;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"preview.png","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"preview.png","type":"text","marks":[{"type":"em"}]},{"text":" will be shown within the admin area, where the themes are selected by the Shop-Adminstrator.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"/Content","type":"text"}]},{"type":"paragraph","content":[{"text":"Within the ","type":"text"},{"text":"/Content","type":"text","marks":[{"type":"code"}]},{"text":" directory, you can override any content of the base theme or the ","type":"text"},{"text":"/Content","type":"text","marks":[{"type":"code"}]},{"text":" directory from the SmartStore.Web project.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"/Views","type":"text"}]},{"type":"paragraph","content":[{"text":"When you want to restructure the HTML structure, you need to have a look in the ","type":"text"},{"text":"/Views","type":"text","marks":[{"type":"code"}]},{"text":" directory in the ","type":"text"},{"text":"SmartStore.Web","type":"text","marks":[{"type":"strong"}]},{"text":" project where all views are located. Once you've found the view that contains the HTML you want to alter, create a directory with the same name in your theme and copy the view into it. Now, you can alter the HTML structure within your theme.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Own Resources","type":"text"}]},{"type":"paragraph","content":[{"text":"Should you need to access your own resources for a theme, you can refer to them in ","type":"text"},{"text":"Views/Shared/Head.cshtml","type":"text","marks":[{"type":"code"}]},{"text":" as follows.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"csharp"},"content":[{"text":"Html.AppendCssFileParts(false, \"~/Themes/MyTheme/Content/mysassfile.sass\");\nHtml.AppendCssFileParts(false, \"~/Themes/MyTheme/Content/mycssfile.css\");\nHtml.AppendScriptParts(false, \"~/Themes/MyTheme/Scripts/myscriptfile.js\");","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Packaging","type":"text"}]},{"type":"paragraph","content":[{"text":"To package a theme so that it can be installed by SmartStore.NET, open the ","type":"text"},{"text":"SmartStore Packager","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"src\\Tools\\SmartStore.Packager\\bin\\Debug\\SmartStore.Packager.exe","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"The root path is your ","type":"text"},{"text":"SmartStore.Web","type":"text","marks":[{"type":"code"}]},{"text":" project which contains your theme. After entering this path, you can read the extensions that are included within. Then, you just choose your theme and an output path and click on ","type":"text"},{"text":"Create package","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Components","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sass","type":"text"}]},{"type":"paragraph","content":[{"text":"Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.","type":"text"}]},{"type":"paragraph","content":[{"text":"http://lesscss.org/","type":"text","marks":[{"type":"link","attrs":{"href":"http://lesscss.org/"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Bootstrap","type":"text"}]},{"type":"paragraph","content":[{"text":"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.","type":"text"}]},{"type":"paragraph","content":[{"text":"http://bootstrapdocs.com/v2.1.0/docs/getting-started.html","type":"text","marks":[{"type":"link","attrs":{"href":"http://bootstrapdocs.com/v2.1.0/docs/getting-started.html"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Font Awesome","type":"text"}]},{"type":"paragraph","content":[{"text":"Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.","type":"text"}]},{"type":"paragraph","content":[{"text":"http://fortawesome.github.io/Font-Awesome/","type":"text","marks":[{"type":"link","attrs":{"href":"http://fortawesome.github.io/Font-Awesome/"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"ASP.NET MVC","type":"text"}]},{"type":"paragraph","content":[{"text":"ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites, enabling a clean separation of concerns, giving you full control over markup for enjoyable, agile development.","type":"text"}]},{"type":"paragraph","content":[{"text":"http://www.asp.net/mvc","type":"text","marks":[{"type":"link","attrs":{"href":"http://www.asp.net/mvc"}}]}]}],"version":1}

Browser not supported