Website Skins / Themes

This section will show you how to develop your own skins (’skins’ is the b2evolution lingo for ‘themes’).

  • Skin Development Primer

    This article will teach you what you need to know to be able to develop your own b2evolution skins as quickly as possible.More »

  • Loading additional resources into a skin

    As skin developers, sometimes we need to add our own resources, such as Javascript or CSS code, to our skins, either as complete filenames or just as code snippets. In order to do so, the b2evolution skin’s API provides several methods to manage…More »

  • Where are the skin files?

    All the files related to Skins/Themes are located in a sub-folder called /skins/ at the root of your b2evolution installation. In this folder, you will find on sub-folder for each skin. For example, if you use the EvoPress skin, you will want to look i…More »

  • CSS Guidelines

    See ale Coding Standard Guidelines. Do NOT write CSS, write LESS! Always write your code to a .less (or .sass) file and let Grunt compile it to a .css file and even a .min.css file. Use Grunt all the time Learn to use grunt in the background. It will…More »

  • Targeted CSS Selectors

    Many things can be customized very precisely by the use of smart CSS selectors. To that extent you can leverage the CSS classes that b2evolution adds to the <body> element. For example the homepage may have: HTML<body…More »

  • Introducing evoSkins

  • Modifying evoSkins

  • Creating evoSkins

  • Skin Tags / API

  • Styling widgets

    b2evolution has a method to automagically apply styles to each widget you might select for any given container. Your skin needs to use a special class caller in order to get the automagic classes to happen. After that, your style sheet needs to say what…More »

  • Skin Quality Control

    When you develop a new skin, you should check that it matches a set of standards so that it will work effectively in a variety of situations, for a variety of users and so that it is as much future poof as possible (best compatibility with future…More »

  • Using HTML 5 tags

    b2evolution 6.4.1 uses HTML 5 semantic tags in the Skin API v6 by default. This page explains how the tags are used on b2evolution skins v6. IMPORTANT: these tags are for semantic markup. Imagine you are blind and you listen to an audio screen-reader.…More »

  • Using Custom Item Templates

    When you edit a post type, you can define custom templates. These custom templates will be used when displaying the Item/Post/Page in various places of the front-office (like disp = posts (List of Posts / Items), disp = single, etc.). The templates can…More »

  • Using bootstrap classes in footers

    Very often we want to have several widgets/sections in the footer of our website. By default, if we insert several widgets in the footer container (or any other), they would be placed one below the other, which is usually not what we want. In most…More »

  • Using Grunt

    Grunt is a very powerful command line tool for processing files on your development machine. For example, it can compile a .less file into .css, then concatenate several .css files into a .bundle.css file, then minify (compress) that bundle into a…More »

  • Dev Menu

    When developing skins, enabling the little Dev menu can be very useful. How to enable the Dev menu In the _advanced.php, change the following lines: /** * Do you want to display the "Dev" menu in the evobar? * This allows to display the dev…More »

  • How to add a Google Font (WebFont) ?

    Google offers many webfonts that your are free to use. You can pick and choose here: https://fonts.google.com Once you have selected the fonts you are interested in, here’s how you can quickly add them to b2evolution without editing any file. (If…More »

  • Displaying Custom Fields in a Template

    This page explains how you can use Custom Fields with PHP code in order to display them exactly the way you want inside of your templates. This is especially useful if you want to build custom templates, either generally or for specific item types.…More »

  • Site Skins

    Site skins apply to the whole website/whole installation.

Comments on this chapter