Customize the design

Customize the design
Yve has a white label approach that allows you to customize colors and names of control elements:
  • Background and colors: upload a background image and adjust the colors of the text, links, tabs, borders, ... for the event website and public registration. Caution: Changes in the font colors are not all displayed under 'Events-> Websites-> Event Website'. Please use the function 'Events-> Websites-> Preview Website', and you will see the event website as a participant
  • Navigation: determine whether the event website has a navigation bar above and a sidebar to the right of the page. This navigation element is only necessary if you have several events simultaneously for a participant or a community.
  • Tabs: specifies the name for the tabs. Tabs are displayed as soon as they have a content, regardless of the name.
  • Buttons text and color: You can set the color and the name of the login button (on the event website), the registration button (public registration) and the community button (on the event website)
  • Fonts: You can upload your own font under 'Account -> Own Font' as an administrator, which will then automatically be displayed in the editor.
 
Responsive design
Yve uses a so-called responsive design. Yve automatically detects the width of the screen and adjusts the display. This makes your website easy to read on a PC as well as on a smartphone. There are four levels of representation:
  • Large screens (e.g., desktop with HD monitor)
  • Medium sized screens (e.g., desktop with small monitor)
  • Small screens (e.g., touchpad)
  • Mini screens (e.g., smartphone)

We recommend developing your website for large screens and testing the other sizes by making your browser window narrower. Texts are automatically collapsed to the width of the screen, and yve automatically adjusts all images larger than the respective screen to 100% of the screen. From the touchpad and smaller level, the sidebar is displayed below, the navbar is collapsed and the tabs are stacked horizontally.
 
The following widths apply to large screens (important when you want to insert a banner across the entire width, for example):
  • Website: 840px content + 2 * 30px border
  • Public page: 690px Content + 2 * 30px border