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';
We also need the Grid component from Semantic UI:
import { Grid } from 'semantic-ui-react';
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;
}
}