DO NOT MODIFY TEMPLATES THAT ARE NOT YOUR OWN!

What is a template? 

Templates are the framework for a layout of a webpage. A template is created to be generic so that a front-end developer can use it as a base for the creation of a new webpage. An unlimited number of webpages on your site can be based upon, or inherit, a template. When a change is made to the template, the change is reflected on each page that inherits the template.

Template facts

  • Bento uses templates to define how a page should look and what parts are editable.
    • Editable areas are called placeholders
  • A template contains variables and tags
    • Variables are structures that hold data and are uniquely named by the programmer.  They hold assigned data until new values are assigned or the program is finished.  
    • Tags control the logic of the template. 
  • Bento offers complete and ready to use templates for Stations and Producers.
  • Bento templates are based on Django. Learn more about Django templates

Responsive templates

Responsive templates are designed to appear on any device at any resolution without losing optimal viewability.  All elements contained within a responsive template, including images and columns, contract and expand to display correctly on all mobile devices.  For instance, if a user is viewing your website on a desktop and then views your website on a mobile device such as a tablet or smartphone, the site will reconfigure itself to display properly at both sizes. Responsive templates are regulated by breakpoints.  Learn more about breakpoints

 Click here to view how content reconfigures on various devices

Click the image to enlarge

 See a real life example

Click images to enlarge

DesktopTabletSmartphone

Right rail items display to on the right side of the page.

Right rail 2 items display below Right rail 1 items.

Right rail 1 column items display in the left column, to the left of the Right Rail 2 items, beneath Page Content items.

Right rail 2 items display beneath Page Content items in the right column, to the right of the Right rail 1 items.

All Right rail items display in one column beneath Page Content items.

Figure 1

 

Breakpoints

What is a breakpoint?  Breakpoints are the point at which your site content reconfigures to provide the user with the best possible layout according to the device on which it is being viewed.

How are breakpoints created?  Breakpoints are created through a combination of HTML and CSS and have an associated media query declaration which changes the layout once the browser is within the declared range. In other words, when a page is designed, there are certain sizes at which a user can view the page and the items on the page they are viewing rearrange on the page to accommodate the viewing size.

Figure 2 displays the dimensions associated with each breakpoint. 

Figure 2

Breakpoints
ResolutionMain section column widthRight rail section column widthDevice 

1280 & 1245

619px

330px

Desktops, laptops 

600

545px

267px

Tablets 

768

698px

342px

iPad, tablets 

600

530px

259px

Tablets 

480

410px410pxSmartphones 

480

250px250pxSmartphones

What templates are provided?

PBS supplies several templates for stations and producers:

TemplateExample
Studio
Marquee

 

Can I change the look and feel of my website?

Yes.  There are a couple ways to apply a completely unique look and feel to your Bento site through the use of templates:

  1. Create or modify a .CSS file and upload it to the site.  (warning) This is the easiest and fastest way to overwrite the existing look and feel.
  2. Create a completely new base template as well as templates that contain a right rail.  (warning) This option is available to stations only and you must first contact PBS. 

Producer templates 

 Click here to see Producer templates
Explorer Producer HeroExplorer ProducerExplorer Producer One Column

 

Learn more about this template

Producer Preview Template  
  

View template themes that can be applied

Station templates

 Click here to see Station templates
Explorer StationExplorer Station One Column

View template themes that can be applied

DO NOT MODIFY TEMPLATES THAT ARE NOT YOUR OWN!

PBS provided templates

Bento offers templates that are provided and maintained by PBS.  These templates have been tested and are ready to use in your Bento site with no extra effort by you.  PBS makes changes to these templates as necessary and the changes are reflected automatically on your website. 

How to view PBS provided templates

  • From the main Bento administration page, click Templates (Figure 1).

Figure 1

  • Under the Filters section on the right side of the page, there is a section named By PBS Provided.  All templates that are PBS provided can be accessed by clicking the All PBS provided link (Figure 2).

Figure 2

What is in this section

In this section you will learn how to: