Naviga Web
Docs Home
  • Introduction
  • Release notes
  • Starter kit
    • Introduction
    • Environment Variables
    • Makefile
    • Changelog
    • API
  • Feature: Advanced Search
    • User guide
    • Search Help
    • How to Setup
    • Technical Details
  • Developer documentation
    • Developer prerequisites
      • Developer hardware suggestions
      • Setup on Windows
      • Setup on Linux/Ubuntu
    • Getting started with development
      • Composer package management
      • Gulp and asset building (optional)
      • Git
      • Hosts file
      • Certificate
      • Initiate Naviga Web
      • Start Naviga Web
      • Bin scripts
      • Create theme
      • Environments
      • Deployment
      • Onboarding tasks
        • #0 - New site
        • #1 - Configuration
        • #2 - Front page
        • #3 - Content presentation
        • #4 - OC List
        • #5 - Content containers
        • #6 - Teaser template
        • #7 - Single article
        • #8 - Widget
        • #9 - Custom task
        • #10 - Feedback
    • Architecture
    • Paywall and authentication
      • CloudFront Paywall
      • Engage paywall
      • Lua Paywall (deprecated)
    • Project management: A typical project
    • Database dump
    • Debugging
    • Keep your project up-to-date
    • Gulp and Sass
    • Domain mapping
    • Widgets overview
  • Starter kit packages
    • Base package
      • Changelog
    • Boards plugin (EveryBoard)
      • Installation
      • Setup
      • Board Widgets
        • Linked board
        • Template board
        • Embed widget
        • OC List item
        • Content container
      • Teaser templates
      • Actions and filters
      • Export - import
      • Changelog
    • ContentSync plugin
      • Usage
      • Changelog
    • Drop In Plugins package
      • Changelog
    • Everyware plugin
      • Installation
      • Setup
      • Actions and filters
      • Fetching lists and their content
      • Sorting
      • Widgets
      • Changelog
    • Imengine package
      • Helper class: Imengine
      • Changelog
    • NewsML package
      • Idf Parser
      • Changelog
      • Usage
    • NGINX conf package
      • API
      • Changelog
      • Usage
    • Presentation Preview plugin
      • API
      • Changelog
      • Usage
    • Support package
      • Changelog
    • Theme EU resources package*
      • Changelog
    • Theme US resources package
      • Changelog
    • Twig package
      • Development
        • Filters
          • class_string
          • spacey
          • trim_array
        • Functions
          • php_function
          • php_method
          • render_classes
          • render_partial
        • Operators
          • contains
      • Helper classes
        • View
        • ViewSetup
      • Changelog
  • Widgets and component packages
    • Article List widget
      • Installation
      • Using Article List
      • Changelog
    • Menu handler
      • Usage
      • Changelog
    • Section Header widget
      • Changelog
    • Social media icons widget
      • Installation
      • Changelog
    • Google Analytics plugin
      • Set up Google Analytics
      • Most read widget
      • Changelog
    • Redirect Original URLs plugin
      • Installation
      • Changelog
    • Settings Parameters plugin
      • Installation
      • Usage
      • Changelog
  • Design and theme packages
    • Base theme 1
      • Changelog
    • Base theme 2
      • Colors
      • Fonts
      • Header
      • Menus
      • Pages with Board
      • Sidebars
      • Teaser layouts
      • Article page (text)
      • Article page (embeds)
      • Changelog
    • Example theme
      • Changelog
  • MU Plugins
    • Project Plugin
      • Installation
      • Changelog
    • Starter Package Catalyst
    • Concepts
      • Admin Pages
        • All Concepts
        • Add New Concept
        • Types
        • Errors
        • Concept duplicates
      • API
      • Console
      • Changelog
    • Network
      • Changelog
    • Cache Invalidator
      • Getting Started & WP admin
      • Implementation of Lua endpoint
      • Filters
      • Changelog
    • RSS Feeds
      • Setup
      • Administration pages
      • Changelog
  • Services
    • Imengine
    • Imengine documentation
    • Open Content
    • Writer Bookmarklet
Powered by GitBook
On this page
  • Deprecated layouts
  • What teasers are used?
  • Create own addition teaser layout
  • Customise existing teasers?

Was this helpful?

  1. Design and theme packages
  2. Base theme 2

Teaser layouts

Overview of standard teaser layouts to choose from in Base theme 2.

PreviousSidebarsNextArticle page (text)

Last updated 3 years ago

Was this helpful?

There are five main teaser types you can use:

  • Teaser Image Top (default)

  • Teaser Image Right

  • Teaser Image Bottom

  • Teaser Image Left

  • Notice teaser - with and without image

Teasers can flex in height so every column in each row has the same height regardless how much text it contains.

These can be used in all central features of Naviga Web:

  • Article List and Most Read widgets

  • OC List and Content Container widgets

  • Board widget and column teaser fallback

  • Custom built solution can add and use these

Deprecated layouts

These old layouts are still available, but are going to be removed in version 2.0.0.

  • Standard teaser: will default to Teaser Image Top in version 2.0.0 if left unchanged.

  • Headline teaser: use Teaser Image Bottom instead. Looks the same.

  • Small teaser: use Teaser Image Right instead. Looks almost the same.

What teasers are used?

Create own addition teaser layout

You can copy base theme teasers to start from if you want.

It is almost always easier to create an own teaser than trying to modify or override Base theme teasers. Use good naming convention for your own teaser code so you avoid conflicts on upgrades.

Please verify your own teasers and own style dependencies when upgrading Base theme on your site.

Customise existing teasers?

You have to decide what is best for you. Making changes means maintaining and testing on Base theme upgrades.

To give some guidance, these are probably ok to override:

  • Minor css additions is usually ok, like color, font or background in a base theme teaser. Override with your own css in your child theme. - Low risk

  • Hiding blocks with css is usually ok, like always hide teaser text, label or pubdate. - Low risk

And these are probably own code:

You can configure what teaser layouts should be are available .

Yes, , and use your own in parallell with the Base theme teasers.

Layout css can be done, but risky (margin, padding, separator). Not recommended. layout with own css will probably be safer on upgrades.

Moving image position is not recommended. It you want to move around elements in the teaser, like image for example, you should .

Modifying image crop is not recommended in existing base theme teasers. They are all 16:9. If you want another crop, you should .

in Boards
you can easily develop your own teasers
Creating your own teaser
create your own teaser
create your own teaser layout instead
The first 4 teaser layouts at different widths.
The deprecated teaser layouts (see below), and Notice teaser layout, at different widths.