Bento allows the ability to incorporate custom stylesheets into your template to create a desired look for your website.  Implementing your stylesheet is a two step process:

  1. Add the stylesheet to your project
  2. Add the stylesheet to your template

You will need the following two items:

  1. CSS stylesheet
  2. Template

  How to add a stylesheet to your Bento project

Before adding the stylesheet to your Bento template you must first add the stylesheet to your Bento project.  Adding the stylesheet to your project allows the template code to access it.  Follow the steps below to add your stylesheet through the Bento tool:

  • Open Bento and from the Filers section within the Site Administration dashboard, click Folders.
  • Click New Folder.
  • Name your new folder and click Save.
  • Your new folder is now listed.  Click the folder icon to open it.
  • Click New Folder to create a subfolder for your stylesheet.

(info)   To keep your website files organized, it is recommended you place different file types in separate folders.  Learn more about filer folders

  • Name your new folder and click Save.
  • Click on your new folder.
  • Click Upload.
  • Locate the .css file(s) on your computer and click Open.
  • On the right side of the screen, click the left arrow icon to add the file(s) to your folder. 
    • To discard the file and grab a new one, click the Discard button.

How to add a stylesheet to your Bento template

Now that your stylesheet is part of your Bento project, it is available for inclusion in your template.  Below are the steps to achieve this.

  • Create a template
  • Open the template
  • Add your stylesheet to the template code in the following manner: 

    {% render_block "css" %}
    
    <link rel="stylesheet" type="text/css" href="{{'filerfoldername/filename.css'|filercss}}" />

Embed filer files in templates

1. Load filertags

{% load filertags %}

2. Include image from filer

<img src="{% thumbnail 'demo_calin/pbs_logo_green.jpeg'|filerthumbnail 100x250 crop %}" />

3. Include css from filer

{% load sekizai_tags filertags %}
<head>
    {% render_block "css" %}
    <link rel="stylesheet" type="text/css" href="{{'folder/global.css'|filercss}}" />
</head>

4. Create thumbnails from images

{% load thumbnail filertags %}
<body>
    <img src="{% thumbnail 'demo_calin/pbs_logo_green.jpeg'|filerthumbnail 100x250 crop %}" />
    <img src="{% thumbnail 'demo_calin/pbs_logo_green.jpeg'|filerthumbnail 200x200 sharpen bw %}" />
</body>

Embed filer files in other files

To refer a file from filer in other file from filer you have to specify the relative path of that file.
Example: include a pbs_logo.jpg file in a global.css file in the same folder like this:

body {
    background-image:url('pbs_logo_css.jpg');
    border:10px solid black;
}