Vitrals (WordPress theme)

Vitrals theme

WordPress theme based on images and transparencies for any device. Footnotes in pop-up window and marginal annotations in the sidebars.

Contributors: lbartolessi

Donate link:

Tags: two-columns, three-columns, left-sidebar, right-sidebar, grid-layout, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custo m-logo, editor-style, featured-image-header, featured-images, footer-widgets, microformats, sticky-post, theme-options, threaded-comments, translation-ready, blog, education, entertainment, food-and-drink, holiday

Requires at least: 4.6

Tested up to: 4.9.4

Stable tag: 1.0.0

Requires PHP: 5.2.4

License: GPLv2 or later

License URI:

Theme Name: vitrals

Theme URI:

Author: Luis Bartolessi

Author URI:

Text Domain: vitrals

vitrals is based on Underscores, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.


Visit as a live demo.

Current add-ons

  • Based on [Bootstrap 4] (, so you can use all the bootstrap features you want in your pages and posts.

  • It includes Font Awesome Free 5.0 that can also be used in your post and pages.

  • Customizable colors

  • Configurable background transparencies.

  • Dynamic background image according to the publications.

  • Kern Burn slider as front end and in the header of the page.

    • For the front end, the images of the categories are used. If they were less than 3, the featured images of the feed post are used. If these were also less than 3, the header images would be used.
    • For publications (posts and pages) the header images are used.
    • For category feeds, searches and archives in general, the featured images of the feed’s publications are used.
  • Readability
    • Three typographical styles available:
      • Bootstrap
      • Gutenberg
      • Typesettings
    • Automatic capitular drop-letters.
    • Division of words in the justified paragraphs.
    • The font size is variable to always maintain the optimal number of characters per line. Except in the case of smaller phones where a certain font size has been maintained at the expense of having shorter lines.
    • In the visual editor you can see what you write with the same typographic style that you have selected, except for the capitular letters and the division of words.
  • Footnotes in a pop-up window with no limits on the size or type of content.

  • Annotations in the margins (sidebars) also without limits and individualized for each publication

  • Same design for all devices:

    • The slider start is maintained in all sizes.
    • The sidebars do not disappear or are sent to the bottom of the page, but move out of the screen and scroll buttons appear on the right and left in the floating menu. Thus, not only the structure is maintained, but also the marginal annotations that each post can make in these bars.
    • The same menus on all devices. This imposes the restrictions of not displaying the menus when positioning the cursor over, being necessary the pulsation, and of being limited to two levels. In compensation the menus are indefinitely extensible and can host a large number of options and maintain the same visual structure even in small formats. You can add the menus you want in the sidebars.
    • Floating menu top bar:
      • It disappears when you slide the screen up and reappears when you slide a line down.
      • It has two menus:
        • Main menu that contains:
          • A logo of the site linked to the homepage.
          • A button to show / hide the left sidebar on devices whose width does not allow it to be displayed.
          • A button to remove / put the transparency of the text area if the reader at a given moment needs it. (This button does not appear when the opacity of that area has a value greater than 230).
          • The main menu defined by the user.
          • A Login button that displays a form or, in case the user is already logged in, a button to exit the session.
          • A simple search form.
          • A button to show / hide the left sidebar on devices whose width does not allow it to be displayed.
        • The secondary menu can be either a user-defined menu or a menu of categories automatically generated depending on the page you are visiting. In this case:
          • If the page is a feed of a category or a post that belongs to any category, this category and the siblings are shown on the horizontal level, and childs of these are shown as drop-down menus. In the rest of the cases (pages, files, search results, author page or label page) the upper level of categories without parent is shown.
          • If the category does not have siblings the upper level is shown, if there is one.
          • Except for the root menu, a link to the next higher category is always displayed, with an up arrow next to the name.
  • Compact design:
    • The content is shown in the form of tabs:
      • Article
      • Comments
      • Floating notes, compiled for joint review and to facilitate indexing.
      • Author’s file
    • The tabs can be selected from both the top and the bottom. In this case, the screen is automatically moved to the beginning of the chosen text. In this way the comments do not go unnoticed and do not bother anyone who is not interested in them.
    • In the case that a post has lateral notes, the bars of the sides used are reduced in length (with the possibility of displacement).

Use tips

  • Backgrounds and thumbnails
    • Posts that have a featured image will use it as a background image (with the degree of blur configured) and as a thumbnail in the feeds. They will also show it under the title of the post.
    • Those who do not have a featured image will show as background and thumbnail the first image inserted in the text. If the text does not contain images, the image of the category of the publication will be used. In the case of pages and publications whose category does not have an assigned image, the default background image will be used.
  • For featured images and images of the categories, the best results are obtained if the 16/9 format is used.

  • It is recommended, for purposes of greater efficiency, that the following sizes be defined in media settings:

    • Size of the thumbnail: 80 x 45.
    • Medium size: 235 x 132
    • Large size: 725 x 408.
  • Transparencies:
    • The images are never transparent and you do not have to worry about their visibility, focus on the legibility of the text.
    • Choose the post or page whose background image has more detail and less contrast with the overlaid text. If you use dark (transparent) backgrounds over light text, choose the image with more light areas and on the contrary if the text is dark.
    • On this image choose colors and opacities for all areas looking for the balance between visibility of the background image and text readability. You must ensure above all the good readability of the main text area of the publications.
  • Background blur:
    • A slight blur can create an effect of moving away from the image. A greater blur produces an effect of fogged or frosted glass.
    • The smaller the blur, the greater the opacity necessary to guarantee the legibility of the texts.
  • Footnotes:
    • Although its function is typical of the footnotes, in fact they are presented in the form of a pop-up window for easy reading. They also all meet in a tab of the content area to be in the main area and can be easily indexed by search engines.
    • They are made with two different shortcodes: one to call the note, inserted in the place of the corresponding text and another for the content, which can be anywhere, although perhaps it is best to put them all together at the end of the publication .
    • Call shortcode:

      [footnote id = «the ID you want»]

    • Shortcode of content:

      [textnote id = «the same identification»]
      The content, which can be anything, including links, images, videos, embeds, etc …

  • Notes to the margin.

    • Can be used to define terms that appear for the first time, put quotes, figures, videos or purely decorative elements.
    • It is usually fine to align to the right on the left side and to the left on the right side.
    • If the text is very extensive or you are interested in a lot that is easily indexed by the search engines, it will be better if you use a footnote.
    • When one of the sides contains this type of notes, the corresponding sidebar is reduced in length by activating its scroll bar.
    • There should only be one shortcode for each side. you can use <br> to space the contents, although it is difficult to ensure the exact correspondence with the main text in the different device widths.
    • The shorcodes are:

      [right] content of any type [/right]

      [left] content of any kind [/left]

  • Never use the <h1> titles: there should only be one on the page and it is already set as the title of the publication. Use them from <h2>.


  1. In your admin panel, go to Appearance > Themes and click the Add New button.
  2. Click Upload and Choose File, then select the theme’s .zip file. Click Install Now.
  3. Click Activate to use your new theme right away.
  4. The following message will appear:

    This theme requires the following plugin: %1$s.

  5. Click on the link:

    Begin installing plugin

  6. When the plugin installation screen is displayed click on the link:



Vitrals WordPress Theme, Copyright 2018 Luis Bartolessi
Vitrals is distributed under the terms of the GNU GPL
Theme URI:

You may remove the link to the Vitrals website in the footer, but we would appreciate any attribution to our work!

Vitrals is based on Underscores, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Bundled Resources:

1.) Bootstrap 4.0.0 | MIT license
Code and documentation copyright 2011-2018 the Bootstrap Authors and Twitter, Inc. Code released under the MIT License.

2.) Animate.css 3.5.2 | MIT license
Author: Daniel Eden (daneden)

3.) Jquery Aniview 1.0.2 | MIT license
Copyright (c) 2017 Jonathan James Cosgrove

4.) Slippry 1.4.0 | MIT license
Copyright (c) 2015 booncon PIXELS oy,
Author: Lukas Jakob Hafner Source:

5.) Hypher 0.2.5 | BSD-3-Clause license
Author: Bram Stein (

6.) hyphenation-patterns 0.2.1 | GNU Lesser General Public License
Author: Bram Stein (

7.) TGM Plugin Activation 2.6.1 | GNU GPL 2.0
Lead developers: Thomas Griffin (@jthomasgriffin), Gary Jones (@GaryJ), Juliette Reinders Folmer (@jrf_nl)

8.) Google Webfonts | SIL Open Font License (OFL)
Merriweather by Sorkin Type:

9.) Font Awesome Free 5.0 | SIL OFL 1.1 | Code licensed under MIT License

10.) Gutenberg 1.2 | Code licensed under Creative Commons 3.0
Author: Matej Latin (matejlatin)

11.) Typesettings 1.7 | Code licensed under MIT License
Copyright (c) 2014 Ian Rose



First version

Upgrade notice


First version

Luis Bartolessi


Luis  Bartolessi

Me gano la vida desarrollando webs en Java, PHP, javascript, o tocando el saxofón, según vengan las cosas. Me interesan la filosofía, los medios de comunicación, la antropología, la tecnopolítica. Leo mucho Lacán, Zyzek, Foucault, Evguen Mozorov, Carola Frediani, Duccio Canestrini, Silvia Federici, Mohsin Hamid, Amin Maalouf, Yourcenal, Wittgenstein, etc, etc...

Perfiles de redes sociales

A %d blogueros les gusta esto: