logo

Plone Training 2023 documentation

⌘ K

Training Overview

  • Mastering Plone 6 Development
    • 1. About Mastering Plone
    • 2. Watch the Training Video
    • 3. Introduction
    • 4. The Case Study
    • 6. What is Plone?
    • 7. Set up Plone
    • 8. Set up Plone for the Training
    • 9. The Features of Plone
    • 10. What's New in Plone?
    • 11. Configuring and Customizing Plone "Through The Web"
    • 12. Customizing Volto Components
    • 13. Semantic UI
    • 14. Theming in Volto
    • 15. Extending Plone
    • 16. Extending Plone With Add-on Packages
    • 17. Write Your Own Python Add-On to Customize Plone
    • 18. Dexterity I: Content types
    • 19. Dexterity II: Talks
    • 20. Dexterity: Reference
    • 21. Volto App Development
    • 22. Volto View Component: A Default View for a "Talk"
    • 23. Behaviors
    • 24. Creating a dynamic frontpage with Volto blocks
    • 25. Programming Plone
    • 26. IDEs and Editors
    • 27. Turning Talks into Events
    • 28. Vocabularies, Registry-Settings and Control Panels
    • 29. Custom Search
    • 30. Upgrade-steps
    • 31. Testing in Plone
    • 32. Using Third-Party Behaviors
    • 33. Dexterity Types III: Sponsors
    • 34. The Sponsors Component
    • 35. Using Volto add-ons
    • 36. Extending Volto With Custom Add-on Package
    • 37. Extending Volto With a FAQ Block Type
    • 38. Workflow, Roles and Permissions
    • 39. Relations
    • 40. Reusable Features packaged in add-ons
    • 41. Complex Behaviors
    • 42. REST API Endpoints
    • 43. Volto Actions and Component State
    • 44. Permissions
    • 45. Releasing Your Code
    • 46. Using plone.restapi without Volto
    • 47. Using the code for the training
    • 48. Trainer: Preparation
  • Mastering Plone 5 Development
    • 1. About Mastering Plone
    • 2. Introduction
    • 3. What is Plone?
    • 4. Installation & Setup
    • 5. Installing Plone for the Training
    • 6. What Vagrant is and does
    • 7. The Case Study
    • 8. The Features of Plone
    • 9. The Anatomy of Plone
    • 10. What's New in Plone 5, 5.1 and Plone 5.2
    • 11. Configuring and Customizing Plone "Through The Web"
    • 12. Theming
    • 13. Extending Plone
    • 14. Extend Plone With Add-On Packages
    • 15. Dexterity I: "Through The Web"
    • 16. Buildout I
    • 17. Write Your Own Add-Ons to Customize Plone
    • 18. Return to Dexterity: Moving contenttypes into Code
    • 19. Views I
    • 20. Page Templates
    • 21. Customizing Existing Templates
    • 22. Views II: A Default View for "Talk"
    • 23. Views III: A Talk List
    • 24. Testing in Plone
    • 25. Behaviors
    • 26. Writing Viewlets
    • 27. Programming Plone
    • 28. IDEs and Editors
    • 29. Dexterity Types II: Growing Up
    • 30. Custom Search
    • 31. Turning Talks into Events
    • 32. User Generated Content
    • 33. Resources
    • 34. Using Third-Party Behaviors
    • 35. Dexterity Types III: Python
    • 36. Dexterity: Reference
    • 37. Relations
    • 38. Manage Settings with Registry, Control Panels and Vocabularies
    • 39. Creating a Dynamic Front Page
    • 40. Creating Reusable Packages
    • 41. More Complex Behaviors
    • 42. A Viewlet for the Votable Behavior
    • 43. Making Our Package Reusable
    • 44. Using starzel.votable_behavior in ploneconf.site
    • 45. Releasing Your Code
    • 46. Buildout II: Getting Ready for Deployment
    • 47. Plone REST API
    • 48. The Future of Plone
    • 49. Optional
    • 50. Using the code for the training
  • React
    • 1. Introduction
    • 2. Watch the Training Video
    • 3. Bootstrapping A React Project
    • 4. Create React Component
    • 5. Styling Your Component
    • 6. Convert To A Reusable Component
    • 7. Use Snapshot Testing
    • 8. How To Use State In Your Component
    • 9. Use Event Handlers
    • 10. Use Callbacks To Delete An Item
    • 11. Use Forms To Add An Item
    • 12. Use Initial Form Data To Edit An Item
    • 13. Use Redux To Store Data
    • 14. Write Tests For Your Reducers
    • 15. Use Actions To Manipulate The Store
    • 16. Using External Data
    • 17. useEffect Hook
    • 18. Using Different Routes
    • 19. Using Links To Navigate
    • 20. Navigate Using Redirects
  • Volto
    • 1. Introduction
    • 2. Code Walkthrough
    • 3. Bootstrapping a Volto project
    • 4. Styling
    • 5. Static Resources
    • 6. Override Components
    • 7. Internationalization
    • 8. Override Views
    • 9. Custom Views
    • 10. Custom Widget
    • 11. Rich Text Editor Settings
    • 12. Actions & Reducers
  • Volto Hands-On
    • 1. Introduction
    • 2. Quick Start
    • 3. Project requirements
    • 4. Theming
    • 5. Header
    • 6. Breadcrumbs
    • 7. Footer
    • 8. Edit config and site cleanup
    • 9. Brief introduction to Volto blocks
    • 10. Blocks - Highlight Block
    • 11. Configurable Downloadlink Block
    • 12. Events listing template
    • 13. Sprint content type
  • Volto Add-ons Development
    • 1. Introduction
    • 2. Volto add-ons development
    • 3. Basic working block
    • 4. Improve the block view
    • 5. Block editing with a form
    • 6. Customizable columns
    • 7. Make the block extensible
    • 8. Add-ons - advanced topics
    • 9. Plone integration with Volto blocks
    • 10. About
    • 11. Developer integration with text editors
    • 12. Really short primer on Javascript enhancements
  • Effective Volto
    • About Effective Volto
    • Getting Started
      • 1. Bootstrapping a full Plone 6 project
      • 2. Bootstrapping an Add-on
      • 3. Developer roadmap
    • Architecture
      • 1. Volto Client - Server duality
      • 2. Razzle
      • 3. Webpack
      • 4. Babel
      • 5. Webpack loaders
      • 6. Bootstrap Volto
      • 7. Inside Volto
      • 8. Volto Blocks
      • 9. Configuration Registry
      • 10. Redux
      • 11. CORS
      • 12. Multilingual
    • Backend
      • 1. Plone REST API endpoints
      • 2. Writing an endpoint
      • 3. Writing a serializer or a deserializer
      • 4. Writing a content expansion endpoint
      • 5. Writing a block transform
      • 6. Block field contribute to searchableText
      • 7. Link integrity for blocks
      • 8. Writing Express middleware
    • Add-ons
      • 1. What is a Volto add-on
      • 2. Bootstrap an add-on
      • 3. How does a Volto add-on works?
      • 4. Configure a released Volto Add-on in your project
      • 5. Configure an unreleased add-on from an existing repository
      • 6. Volto views
      • 7. Create a block using BlockDataForm
      • 8. Blocks Layout
      • 9. Block Extensions
      • 10. Block Styling
      • 11. Add-on dependencies
      • 12. Add-on and project configuration pipeline
      • 13. Create a theme add-on
      • 14. Extending Semantic UI
      • 15. Create a custom Listing block variation
      • 16. Integrate with Volto’s asyncConnect for SSR
      • 17. Add-on Internationalization
      • 18. Extend Webpack setup from an add-on with razzle.extend.js
    • Testing
      • 1. Acceptance testing
      • 2. Jest
      • 3. Unit testing
      • 4. Storybook
      • 5. Testing add-ons
    • Deployment
      • 1. Seamless mode
      • 3. Simple deployment
      • 4. Docker
      • 5. release-it
    • Development tools
      • 1. How to setup your development environment using environment variables
      • 2. Environment variables
      • 3. Icons
      • 4. Husky and lint-staged
      • 5. Shortcuts
      • 6. Internationalization
      • 7. Lazyloading components, injectLazyLibs for libraries
      • 8. critical.css
      • 9. Bundle analyzing
      • 10. Component Registry
      • 11. Linters
      • 12. Debugging with Volto
      • 13. VSCode extensions/helpers
      • 14. vim and neovim integration
  • Testing Plone
    • Summary
    • Intro to tests
    • Some theory
    • How to test a Plone add-on
    • Testing setup
    • Unit tests
    • Testing a Dexterity content type
    • Testing a view
    • Acceptance testing
    • Robot tests
    • Continuous Integration
  • Plone 6 Classic UI Theming
    • 1. Preparation for the theming training
    • 2. TTW Customizations
    • 3. Create a theme based on Barceloneta
    • 4. Create a Theme from scratch
    • 5. Create a theme based on Diazo
  • Plone 5 Theming
    • Basic TTW Customizations
    • TTW Theming I: Introduction
    • TTW Theming II: Custom Barceloneta Theme
    • TTW Theming III: Make It Reproducible
    • Theme Package I: Preparations
    • Theme Package II: Diazo Theme
    • Theme Package III: Customizations
    • Theme Package IV: Templates
    • Theme Package V: Initial Content
    • Theme Package VI: TinyMCE Templates
    • Theme Package VII: Resource Registries
    • Advanced Diazo
    • Jbot
    • Creating Custom Components
  • JavaScript For Plone Developers (up to Plone 5)
    • Setup
    • JavaScript Development Process
    • RequireJS And JavaScript Modules
    • Mockup
    • Writing Documentation For Mockup
    • Through-The-Web Development
    • Exercises
      • Exercise 1: Include a JavaScript resource TTW
      • Exercise 2: Include JavaScript In Browser View
      • Exercise 3: Gallery Integration With Theme
      • Exercise 4: Gallery integration as resources
      • Exercise 5: Simple Pattern
      • Exercise 6: Using A Pattern In A Z3C Form Widget
      • Exercise 7: Pattern Wrapping A 3rd Party Library
      • Exercise 8: Customizing Pattern
      • Exercise 9: Overriding a pattern TTW
      • Exercise 10: NG2 APP Component Rendered In A Browser View
      • Exercise 11: NG2 APP Component In a A bundle
      • Exercise 12: NG2 APP In Logged In Bundle
      • Exercise 13: Pattern with React
    • Scratchpad
  • Plone Deployment
    • Introduction
    • Training setup
    • Introduction to Plone stack
    • Plone Docker Images
    • Create a Project
    • Editing your project
    • Server Setup
    • Deploy
  • Automating Plone Deployment
    • Introduction
    • Intro To Plone Stack
    • Intro To Ansible
    • The Plone Playbook
    • Basic Use Of The Playbook
    • In Operation
    • Customized Use
    • Maintenance Strategies
    • Plone Deployments With Amazon OpsWorks
      • Introduction
      • Deployment Terminology
      • Creating Your First Stack
      • Deploying Changes
      • Maintenance
      • What Doesn't It Do
    • Introduction
    • Deployment Terminology
    • Creating Your First Stack
    • Deploying Changes
    • Maintenance
    • What Doesn't It Do
    • Let's Encrypt Certificates and certbot
  • Plone Deployments With Amazon OpsWorks
    • Introduction
    • Deployment Terminology
    • Creating Your First Stack
    • Deploying Changes
    • Maintenance
    • What Doesn't It Do
  • Deploying and Operating Plone on WSGI
    • 1. Setup a box for the training
    • 2. PEP 3333
    • 3. Deploying Plone with WSGI using zc.buildout, plone.recipe.zope2instance and Waitress
    • 4. Differences to the ZServer setup
    • 5. Understanding the contents of wsgi.ini
    • 6. What's left in zope.conf?
    • 7. WSGI options
    • 8. Bjoern
    • 9. Gunicorn
    • 10. uWSGI
    • 11. Debugging Plone on WSGI
    • 12. Useful Add-ons and Utilities
    • 13. Can I talk to the supervisor?
    • 14. Buildout for the training
  • "Through-The-Web" Plone Customization
    • Customizing logo and CSS of default theme
    • Configuring and Customizing Plone
    • Introduction to Diazo Theming
    • Creating a custom theme based on Barceloneta
    • Dexterity
    • Mosaic
    • Rapido
    • Workflow
  • Plone Training Solr
    • Setup
    • Solr GUI And Query Syntax
    • First Steps
    • How Does collective.solr Work
    • Solr Buildout Configuration
    • More Features
    • Solr Testing
    • Production Setup
    • Alternative Indexing/Search Solutions
  • Plone Workflow
    • Introduction To Workflows
    • Basic Roles and Permissions
    • Local Roles
    • Dynamic Roles
    • Placeful Workflow
    • Multi-chain Workflows
    • Workflow Variables
    • Using GenericSetup to Manage Plone Workflows
  • Migration best practices
    • Migrating Plone
    • In-place migrations
    • Migrating with collective.exportimport
    • Migrate to Volto
    • Migrating from third party systems to Plone
  • Migrating Content with Transmogrifier
    • Export Current Site Content
    • Transmogrifier Basics
    • Before Running the Import
    • Writing the Import Pipeline
    • Writing Custom Blueprints
    • Running the Import
    • Advanced Pipeline Tips
    • Advanced Blueprint Tips
    • Users & Groups Migration
  • GatsbyJS
    • Summary
    • What Is GatsbyJS
    • How it works
    • Installing The Development Environment
    • Pages
    • Data
    • Source plugins
    • Transformer plugins
    • Dynamic pages
    • Building Source Plugins
    • Fetching Data Using Plone REST.API
    • Search Traversal Method Of Retrieving Data
    • gatsby-source-plone
    • gatsby-starter-plone
    • Copying The Plone Site
    • RichText Component
    • Navigation
  • Angular SDK for Plone
    • Summary
    • What Is Angular
    • What Is The Plone Angular SDK
    • Installing The Development Environment
    • Using And Customizing The Angular Plone Components
    • Integrating A Theme
    • Override A default Plone Component Template
    • Creating A Custom View For The Talk Content Type
    • Displaying News On The Home Page
    • Login
    • Adding Quick Links In the Footer
    • Deployment
    • Managing The Plone Configuration From The Angular Project
    • Advanced
  • Build your own webframework from scratch
    • About this course
    • The Web and Python
    • Hello WSGI
    • Middlewares
    • Routing
    • From Raw WSGI to a framework
    • Exploiting Python's data model
    • Metaclasses
    • Functional Python
    • Summary

Plone Trainings

  • Glossary
  • Contributing to Plone Trainings Documentation
    • Building and Checking the Quality of Documentation
    • General Guide to Writing Documentation
    • Authors Guide
  • Teaching
    • 1. Training theory: education, how people learn and process information
    • 2. Before the training: Create material, invite trainees, preparation
    • 3. During training day(s): what to expect, do's and don'ts
    • 4. After the training: Aftercare, keep in touch, learn, improve

plone.org plone.org

7. Footer – Volto Hands-On
  • repository
  • open issue
  • suggest edit
  • .md

Footer

7. Footer#

We customize the footer using component shadowing as well, by copying the original Volto Footer component from the omelette folder (omelette/src/components/theme/Footer/Footer.jsx) into the customizations/components/theme/Footer/Footer.jsx file.

Since we need the Logo component in the Footer, we import it from Volto as we did in the Header:

import { Logo } from '@plone/volto/components';

Then, we replace the Footer component content to match the one from plone.org.

<>
  <Segment
    role="contentinfo"
    vertical
    padded
    inverted
    textAlign="center"
    id="footer"
  >
    <Container>
      <Grid textAlign="left" columns={6}>
        <Grid.Column>
          <List inverted>
            <List.Header>
              <UniversalLink href="/about-plone">
                Plone Foundation
              </UniversalLink>
            </List.Header>
            <List.Content>
              <List.Item>
                <UniversalLink href="/donate">Donate & Sponsors</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/meeting">Meeting minutes</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/board">Current board</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/board">Foundation members</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/coc">Code of Conduct</UniversalLink>
              </List.Item>
            </List.Content>
          </List>
        </Grid.Column>
        <Grid.Column>
          <List inverted>
            <List.Header>
              <UniversalLink href="/support">Support</UniversalLink>
            </List.Header>
            <List.Content>
              <List.Item>
                <UniversalLink href="/community/chat">Chat room</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://community.plone.org/">
                  Forums
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/locals">Local user groups</UniversalLink>
              </List.Item>
            </List.Content>
          </List>
        </Grid.Column>
        <Grid.Column>
          <List inverted>
            <List.Header>
              <UniversalLink href="/downloads">Downloads</UniversalLink>
            </List.Header>
            <List.Content>
              <List.Item>
                <UniversalLink href="/get-plone">Get Plone</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/addons">All add-ons</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/security">Security</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/hotfixes">Check hotfixes</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://github.com/plone">
                  Browse source
                </UniversalLink>
              </List.Item>
            </List.Content>
          </List>
        </Grid.Column>
        <Grid.Column>
          <List inverted>
            <List.Header>
              <UniversalLink href="https://docs.plone.org/">
                Documentation
              </UniversalLink>
            </List.Header>
            <List.Content>
              <List.Item>
                <UniversalLink href="https://docs.plone.org/">
                  Full documentation
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://training.plone.org/">
                  Training
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="http://docs.plone.org/manage/installing/">
                  Installation
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://www.youtube.com/c/PloneCMS">
                  YouTube
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://www.linkedin.com/company/plone-foundation/">
                  Linkedin
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/about">About this site</UniversalLink>
              </List.Item>
            </List.Content>
          </List>
        </Grid.Column>
        <Grid.Column>
          <List inverted>
            <List.Header>
              <UniversalLink href="/contribute">Contribute</UniversalLink>
            </List.Header>
            <List.Content>
              <List.Item>
                <UniversalLink href="/roadmap">Roadmap</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/report-bugs">
                  Report bugs in Plone
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/security">
                  Report website issues
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="/skills">Contribute skills</UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://github.com/plone">
                  Contribute code
                </UniversalLink>
              </List.Item>
            </List.Content>
          </List>
        </Grid.Column>
        <Grid.Column>
          <List inverted>
            <List.Header>
              <UniversalLink href="/contribute">Stay up to date</UniversalLink>
            </List.Header>
            <List.Content>
              <List.Item>
                <UniversalLink href="/newsletter">
                  Newsletter signup
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="http://planet.plone.org/">
                  Planet Plone (blogs)
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://twitter.com/plone">
                  @plone on Twitter
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://www.facebook.com/plonecms/">
                  PloneCMS on Facebook
                </UniversalLink>
              </List.Item>
              <List.Item>
                <UniversalLink href="https://www.linkedin.com/groups/2300">
                  Plone LinkedIn group
                </UniversalLink>
              </List.Item>
            </List.Content>
          </List>
        </Grid.Column>
      </Grid>
    </Container>
  </Segment>
  <Segment id="sub-footer">
    <Container>
      <Grid columns={4}>
        <Grid.Column>
          <Logo />
        </Grid.Column>
        <Grid.Column>
          <p>
            The text and illustrations in this website are licensed by the Plone
            Foundation under a Creative Commons Attribution-ShareAlike 4.0
            International license.
          </p>
        </Grid.Column>
        <Grid.Column>
          <p>
            Plone and the Plone® logo are registered trademarks of the Plone
            Foundation, registered in the United States and other countries. For
            guidelines on the permitted uses of the Plone trademarks, see{' '}
            <UniversalLink href="https://plone.org/foundation/logo">
              https://plone.org/foundation/logo
            </UniversalLink>
          </p>
        </Grid.Column>
        <Grid.Column>
          <p>All other trademarks are owned by their respective owners.</p>
        </Grid.Column>
      </Grid>
    </Container>
  </Segment>
</>

and add this styling to the custom.overrides file:

//Footer
#footer {
  background-color: #113156;
  color: #dfe6ec;
  padding-top: 55px;
  .ui.grid {
    .ui.list {
      a:hover {
        text-decoration: underline;
      }
      .header {
        margin-bottom: 19px;

        a {
          font-size: 15px;
          color: #dfe6ec;
        }
      }
      .item {
        margin-bottom: 6px;
        a {
          font-size: 12.5px;
        }
      }
    }
  }
}

#sub-footer {
  background: #1f1238;
  margin-top: 0;
  border: none;
  padding-top: 36px;
  padding-bottom: 54px;
  p,
  a {
    color: @white;
    font-size: 11.5px;
    font-weight: bold;
  }
}

previous

6. Breadcrumbs

next

8. Edit config and site cleanup

By Plone Community
© Copyright The text and illustrations in this website are licensed by the Plone Foundation under a Creative Commons Attribution 4.0 International license..