Overview#
Some visual elements can be configured to allow operators to setup the Network Site according to their brand identity - this includes logos, colors and fonts.
Logos and images#
Every new network site starts with the default MainCross logos as an example showcase. These MUST be replaced by the relevant logos for the network as soon as possible using the comprehensive MainCross image editor.
There are 2 logos, 1 favicon and and 1 SEO image that needs to be configured for best results. It is essential to configure all of them.
Network site primary logo - This logo in a 4:1 aspect ratio is displayed on the Navigation Bar, Extended Menu, Footer, login screens, etc. It is always placed on a background that matches the Navigation Bar background.
Network site alt logo - This optional logo in a 4:1 aspect ratio is is displayed only on the Navigation Column. If not supplied, then the Network site primary logo is used.
Guidelines for best results:
- For best results, create the logo images in an external image editor with at least 800px on the longer side. Image should be an illustration and not a photo.
- Both logos must have transparent background. Do not set a background color in the logo file.
- If your primary logo requires placement on a colored background, set the Navigation Bar background color to the desired color so that the transparent logo when placed on the background color appears seamless. Of course, the Navigation Bar background color could be white as well.
- The alt logo allows for a variant of the primary logo to be used on the Navigation Column, depending on the background color of the Navigation Column.
- If the background color of the Navigation Column is similar to the Navigation Bar, then the primary logo will work on both surfaces.
- If the background color of the Navigation Column is quite different from the Navigation Bar, then use an alt logo, perhaps with inverted color that will produce sufficient contrast vs the background.
The logos need to be designed in 4:1 aspect ratio for best results.
Network site favicon - This logo in a 1:1 aspect ratio is the favicon - shown on the top menu bar on mobile screens, as the browser icon and used as app icon when installed as an MCiW.
For best results, create the 1:1 image in an external image editor with dimension 512px x 512px. Image should be an illustration with optional transparent background and not a photo.
Since the square logo is rendered small (and quite tiny in case of the browser icon), it is highly recommended that the logo be clear and bold, and without any needless whitespace around.
SEO image - This image in a 2:1 aspect ratio is the default image used for any page or post that does not have an image. This is used for SEO & displayed on link previews etc.
For best results, create the 2:1 image in an external image editor with at least 800px on the longer side. Image should preferably be an illustration and not a photo. Image should NOT have a transparent background.
Colors#
Some selected colors across the Network Site can be configured. Other colors are automatically derived from the set colors.
Element reference
Site background
The entire site can have a background color, if desired. It should be a very light tint, and we recommend leaving it as white.
Border for various elements are automatically derived from the background color.
Modal and information island colors are also automatically derived from the background color.
Accent colors
Accent colors control pretty much most aspects on the site. 2 main complementary colors can be setup - primary and secondary.
The primary accent color is used on the menu and buttons.
The secondary accent color is used sparingly to show action items like menu select, active notifications etc.
For ideal results, these 2 colors should be dark enough to be visible (ie should have sufficient contrast), and should be complementary to each other.
The primary & secondary hover colors are automatically derived from the accent colors. The primary hover color is used to highlight element (like links) on mouse hover, action strips, etc.
Top navigation bar
3 colors can be set:
Background - Background color of the Navigation Bar at the top, and the Extended Menu.
Foreground - Color of the text and icons on the Navigation Bar at the top, and on the Extended Menu.
Selected - Color of the *selected* text and icons on the Navigation Bar at the top.
The extended menu inherits the colors from the top navigation bar.
Left navigation column
Background - Background color of the Navigation Column at the left side of larger screens.
Foreground - Color of the text and icons on the Navigation Column at the left side of larger screens.
Selected - Color of the *selected* text and icons on the Navigation Column at the left side of larger screens.
It is recommended to set the left navigation color same as the site background color so as not to be overly distracting.
Examples
The color settings allow for different site designs to be achieved, here are some examples:
1. Primarily white design - Hoten Life
2. White background with splashes of color on navigation strips - maincross.net (this site)
3. Colourful - joinfairshare.com
4. Dark theme
Fonts#
Fonts configured here affect the "website" side of Network Sites, which are build using Featured Pages.
Note that the "network" side always uses system fonts. Read more.
Button style#
At this time, a single button variant style can be configured: rounded buttons instead of the default rectangle
