Customization

Lato can be customized in several ways:

Configure Bootstrap layout classes using the Lato::Btstrap class;
Customize layout behavior via the Lato::Layoutable concern;
Update layout content using content partials;
Modify page-specific CSS using body classes.

Layout Class Configuration

With the Lato::Btstrap class, you can customize the Bootstrap classes used by Lato for the layout’s UI components.
The layout is composed of the following UI elements: navbar, content, sidebar, and footer.
To override the default classes, you can create an initializer with the following code:

Lato.bootstrap do |btstrap|
  btstrap.navbar = 'navbar-light navbar-expand-lg fixed-top bg-light shadow-sm px-3'
  btstrap.navbar_container = 'container-fluid'
  btstrap.navbar_collapse = 'justify-content-end'

  btstrap.sidebar = 'sidebar'

  btstrap.content = 'p-3'
  btstrap.content_container = 'container-fluid'

  btstrap.footer = 'bg-light px-3 py-2'
  btstrap.footer_container = 'container-fluid'
end

Source code: Example
Source code: Lato::Btstrap

Layout Behavior Customization

Lato’s layout behavior can be customized using methods provided by the Lato::Layoutable concern.
This concern offers a set of useful functions. Here’s an example:

class TutorialController < ApplicationController
  def index
    hide_sidebar # hides the sidebar
    show_sidebar # shows the sidebar
    active_sidebar(:tutorial) # sets active state on sidebar item with key :tutorial
    active_navbar(:tutorial) # sets active state on navbar item with key :tutorial
    page_title('Custom title') # sets the page title
    page_class('custom-class') # adds a CSS class to the body element
  end
end

Note

All Lato::Layoutable methods can also be used inside controller before_action callbacks.

Source code: Lato::Layoutable

Layout Content Customization

Most layout content in Lato is defined via specific partials following the naming convention _partial-name_content.html.erb.
To customize these layout parts, override and edit the partials as desired.
These partials are automatically loaded into the main application via the rails lato:install:application command.

Note

This same partial-based approach is used for email templates (see _mailer-head_content.html.erb and _mailer-foot_content.html.erb).

Source code: partials directory

Page CSS Customization

To easily apply custom CSS rules to specific pages, you can use the classes applied to the <body> tag.
The body always includes two classes that identify the controller and the action rendering the view.

For example, if you have an tutorial action inside the HelpController, the body will have the classes:
.controller-help
.action-tutorial