Header#
Header styling#
We will start introducing the basic styling for the header.
We use the theme/extras/custom.overrides to apply general styling to our site theme.
Note
Use this rule of thumb when building Volto themes: use the default Semantic overrides system when the override is site-wide and applies to Semantic components.
When using your own components and specific theme styling, use instead custom.overrides.
Applying styling later using this method is much faster than doing it in the Semantic default components. Dont feel confused by the fact, that the header still does look a bit "weird" in comparison to the plone.org one
This :
.ui.basic.segment.header-wrapper {
background: #007eb6;
color: @white;
padding: 0 0 1em 0;
.top-header {
background-color: #1f1238;
width: 100%;
margin-bottom: 1em;
.ui.container {
display: flex;
justify-content: flex-end;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
a {
color: @white;
margin-right: 10px;
}
}
}
.nav-wrapper {
display: flex;
align-items: baseline;
text-transform: uppercase;
.ui.secondary.pointing.menu .item,
.ui.pointing.dropdown {
color: @white;
border: none;
padding: 0.5em 0.8em;
border-radius: 5px;
margin-right: 5px;
font-size: 14px;
&:first-child {
display: none;
}
&.active,
&:hover {
background-color: #1a0b31;
}
}
.ui.button.search {
background: transparent;
padding: 0.5em 0.8em;
border-radius: 5px;
color: @white;
font-weight: normal;
text-transform: uppercase;
&:hover {
background-color: #1a0b31;
}
.icon {
margin-bottom: -2px;
}
}
}
}
Then we adjust the margin for the content area:
.ui.basic.segment.content-area {
padding-top: 0;
margin-top: 0;
}
Logo#
We use component shadowing to customize (and override) Volto original components.
Get the Plone logo (Logo.svg) from the training-resources you downloaded from the google drive.
Note
Every time you add a file to the customizations folder or to the theme folder, you must restart Volto for changes to take effect. From that point on, the hot reloading should kick in and reload the page automatically.
Header component#
We will customize the existing Volto header, since the one we want does not differ much from the original.
We will do so by copying the original Volto Header component from the omelette folder omelette/src/components/theme/Header/Header.jsx folder into src/customizations/components/theme/Header/Header.jsx.
Note
If you have not worked with React that much so far you will notice that the Navigation component in Volto is not a javascipt function. This is because in React components can also be created from a js class. Actually this was the preffered way to create components in earlier versions of React. Volto is currently undergoing the progress to switch to function components where possible. But as Volto has already a rather extensive codebase this is still an ongoing process.
We have to make some more changes to that component, such as removing the search widget and the Anontools component, adding the upper Header section and many more amendmends.
This will be the outcome:
import { Container, Segment, Dropdown } from 'semantic-ui-react';
import {
Anontools,
Logo,
Navigation,
Icon,
UniversalLink,
} from '@plone/volto/components';
import zoomSVG from '@plone/volto/icons/zoom.svg';
...
render() {
return (
<Segment basic className="header-wrapper" role="banner">
<div className="top-header">
<Container>
<UniversalLink href="https://2022.ploneconf.org">
Conference
</UniversalLink>
<UniversalLink href="https://docs.plone.org">
Documentation
</UniversalLink>
<UniversalLink href="https://training.plone.org">
Training
</UniversalLink>
<UniversalLink href="https://community.plone.org">
Forum
</UniversalLink>
<UniversalLink href="https://discord.com/invite/zFY3EBbjaj">
Chat
</UniversalLink>
</Container>
</div>
<Container>
<div className="header">
<div className="logo">
<Logo />
</div>
<div className="nav-wrapper">
<Navigation pathname={this.props.pathname} />
<Dropdown text="More" pointing>
<Dropdown.Menu>
<Dropdown.Item>
<UniversalLink href="/about-plone">
About Plone
</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/conferences">
Conferences
</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/donate">Donate</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/download">Download</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/features">Features</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/events">Events</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/news">News</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/providers">Providers</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/related">
Related websites
</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/security">Security</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/support">Support</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/newsroom">Newsroom</UniversalLink>
</Dropdown.Item>
<Dropdown.Item>
<UniversalLink href="/products">Products</UniversalLink>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<div className="tools-search-wrapper">
<div className="tools-search">
<UniversalLink href="/search" className="ui button search">
<Icon name={zoomSVG} size="18px" color="white" />
Search
</UniversalLink>
</div>
{!this.props.token && (
<div className="tools">
<Anontools />
</div>
)}
</div>
</div>
</div>
</Container>
</Segment>
);
}
Component shadowing#
We use a technique called component shadowing to override an existing Volto component with our local custom version, without having to modify Volto's source code at all.
You have to place the replacing component in the same original folder path inside the src/customizations folder. Take the src directory in Volto as the root when recreating the path in /customizations.
Note
Component shadowing is very much like the good old Plone technique called "JBOT" ("just a bunch of templates"), but you can customize virtually any module in Volto, including actions and reducers, not only components.
Page content#
To have the header look as much as the plone.org page as possible you now can create the pages "get started", "community" and plone foundation to be featured in the navigation.