• 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 »
  • Photo Gallery Anatomy

    The "Photo Albums" skin is designed to present photos and videos (and possibly other types of media files) in the form of albums. You first see a page showing all albums (disp=posts) in the form of thumbnails. If you hover on a thumbnail it t… 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

  • 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 »
  • 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 »
  • 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 »
  • 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 »
  • 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 »
  • 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 »
  • Using Custom Templates

    When you edit a post type, you can define a custom template. Let’s illustrate this with an example… An example Set up Let’s set up a "Movie Review" post type, like this: Now, let’s create a new Movie Review Post:… 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 »
  • Site Skins

    Site skins apply to the whole website/whole installation.

Comments on this chapter


Form is loading...