Arlo WordPress themes
Styling and formatting your Arlo for WordPress plugin pages is now easier than ever! The Arlo for WordPress plugin includes pre-built control themes, which will update all Arlo powered pages on your WordPress website with the selected theme.
Themes offer different levels of flexibility as they inherit some of the main website’s styles. Highly flexible themes tagged ‘For Designers’ will require assistance from a developer, other themes are designed to simply plug and play!
Selecting an Arlo for WordPress theme will only update the style and format of the Arlo information displayed on the Arlo powered pages. This will not change your WordPress theme.
Theme Previews
Click on a theme link below to preview one of our standard theme options.
Theme types
Standard themes: Our standard themes(themes without the 'For Designers' tag) offer limited flexibility in terms of styling and are great if you do not have access to a web designer or developer. These themes will not inherit your websites theme or styles and therefore the likelihood of styling issues occurring is mitigated. The selected themes styling will be applied ignoring your website's styles.
'For Designer' themes: Themes tagged with "For designers" provide maximum flexibility as they inherit some of your main website’s styles. They will, however, require additional work by a web designer or developer to fix any inadvertent styling issues.
Choosing a theme
- Login to your WordPress dashboard
- Select Arlo Settings from the left side navigation
- Select the Theme tab
- By default, the Arlo for WordPress plugin control theme is set to Jazz (standard theme)
- To change the theme, find a theme you like and select the appropriate button (see button descriptions below)
Apply will update the theme of the Arlo powered pages and KEEP the previous customization made to the selected themes Arlo templates within the Pages tab.
Apply & Reset will update the theme of the Arlo powered pages and RESET the tab.
Current shows the currently selected theme.
- Save changes
- The plugin will re-sync and the selected theme will be applied to your Arlo pages.
If you do not see the theme update please clear your browser cache
Customise the Arlo theme (override themes styling)
You can change the default colours or features of your Arlo for WordPress theme to match your website's existing colour scheme. Follow the instructions below to learn how to do this:
You should have basic understanding of HTML and CSS basics to do this.
- Find the 'override' CSS code that matches your selected Arlo WordPress plugin theme below.
- Copy and paste your themes override CSS into the Custom CSS tab within the Arlo Settings of your Arlo WordPress plugin.
- Update the colour by changing the hex or HEX color codes within the CSS to match your website's colours.
- Press 'Save Changes'
Your themes CSS may still override the CSS below e.g. CSS using!Important
Theme: 'Block' CSS Override
The 'Block' theme is made up of 4 colours. Important: Each block of CSS below contains the colour type, description of where the colour is used and the default colour. When updating a colour you must ensure all hex or RGBA codes within the colour block are updated.
/* Colour 1 */
/* Main colour used for buttons, links and headlines. Default: green */ .arlo#arlo .arlo-color1,
.arlo#arlo a,
.arlo#arlo a:hover,
.arlo#arlo a.arlo-template-name:hover,
.arlo#arlo .page-numbers:not(.next):not(.prev):hover,
.arlo#arlo .page-numbers.current:not(.next):not(.prev),
.arlo#arlo .upcoming .arlo-places-remaining,
.arlo#arlo .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .button.arlo-waiting-list,
.arlo#arlo .button.arlo-waiting-list:hover,
.arlo#arlo .arlo-event-offers .discount,
.arlo#arlo .prev.page-numbers,
.arlo#arlo .next.page-numbers,
.arlo#arlo .upcoming .arlo-button.arlo-waiting-list,
.arlo#arlo .button.arlo-waiting-list,
.arlo#arlo .arlo-button.arlo-waiting-list,
.arlo#arlo .arlo-show-more-link,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a,
.arlo .arlo-widget-upcoming a:hover,
.arlo#arlo .upcoming .button.arlo-waiting-list:hover,
.arlo#arlo .upcoming .button.arlo-waiting-list,
.arlo#arlo .arlo-list.event-search .arlo-next-running a {
color: #00cdc1;
} .arlo#arlo .arlo-background-color1,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-list.event-search .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-category-list a,
.arlo#arlo .button.arlo-register,
.arlo#arlo .arlo-button.arlo-register,
.arlo#arlo .upcoming .arlo-cf.arlo-group-divider:after,
.arlo#arlo .catalogue .arlo-cf.arlo-group-divider:after,
.arlo#arlo .upcoming .arlo-event-subhead > div:after,
.arlo#arlo .prev.page-numbers:hover,
.arlo#arlo .next.page-numbers:hover,
.arlo#arlo .upcoming .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .button.arlo-waiting-list:hover,
.arlo#arlo .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .arlo-show-more-link:hover,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running a:hover,
.arlo#arlo .arlo-event_tags-list > li,
.arlo .arlo-widget-upcoming .arlo-cal-month,
.arlo .arlo-categories-widget li a:hover,
.arlo#arlo .arlo-search-button {
background-color: #00cdc1;
} .arlo#arlo .arlo-border-color1,
.arlo#arlo .arlo-list.catalogue .arlo-cf.arlo-catalogue-event,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running a:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running a,
.arlo#arlo .upcoming .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .arlo-button.arlo-waiting-list,
.arlo#arlo .upcoming .button.arlo-waiting-list:hover,
.arlo#arlo .button.arlo-waiting-list:hover,
.arlo#arlo .upcoming .button.arlo-waiting-list:hover,
.arlo#arlo .upcoming .button.arlo-waiting-list,
.arlo#arlo .prev.page-numbers:hover,
.arlo#arlo .next.page-numbers:hover,
.arlo#arlo .arlo-show-more-link:hover {
border-left-color: #00cdc1;
border-right-color: #00cdc1;
border-top-color: #00cdc1;
border-bottom-color: #00cdc1;
} /* Colour 2 */
/* Dark colour used for text and some backgrounds. Default: navy */ .arlo#arlo .arlo-color2,
.arlo#arlo .arlo-content-field h3,
.arlo#arlo a.arlo-template-name,
.arlo .arlo-widget-upcoming * {
color: #46536b;
} .arlo#arlo .arlo-background-color2,
.arlo#arlo .arlo-event .arlo-event-full,
.arlo#arlo .arlo-filters-buttons a {
background-color: #46536b;
} .arlo#arlo .arlo-border-color2 {
border-color: #46536b;
} /* Colour 3 */
/* Medium colour used for some buttons. Default: grey */ .arlo#arlo,
.arlo#arlo .arlo-category-list a,
.arlo#arlo .arlo-color3,
.arlo#arlo select {
color: #747a87;
} .arlo#arlo .arlo-background-color3,
.arlo#arlo .arlo-list.catalogue .arlo-next-running span,
.arlo#arlo .arlo-list.event-search .arlo-next-running span,
.arlo#arlo .arlo-event-credits li {
background-color: #747a87;
} /* Colour 4 */
/* Light colour used to contrast coloured backgrounds and buttons. Default: white */ .arlo#arlo .arlo-button,
.arlo#arlo .button,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-list.catalogue .arlo-next-running span,
.arlo#arlo .arlo-list.event-search .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-list.event-search .arlo-next-running span,
.arlo#arlo .arlo-category-list a,
.arlo#arlo .arlo-filters-buttons a,
.arlo#arlo .arlo-button.arlo-register:hover,
.arlo#arlo .button.arlo-register:hover,
.arlo#arlo .arlo-show-more-link:hover,
.arlo#arlo .arlo-contrast-color,
.arlo#arlo .upcoming .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .prev.page-numbers:hover,
.arlo#arlo .next.page-numbers:hover,
.arlo#arlo .button.arlo-waiting-list:hover,
.arlo#arlo .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running a:hover,
.arlo#arlo .arlo-suggest-template-container .arlo-suggest-templates .arlo-suggest-template-event-link a:hover,
.arlo#arlo .arlo-advertised-duration,
.arlo#arlo .arlo-event .arlo-event-full,
.arlo#arlo .arlo-event_tags-list > li,
.arlo#arlo .arlo-event-credits li,
.arlo .arlo-widget-upcoming .arlo-cal-month,
.arlo .arlo-categories-widget li a:hover {
color: white;
} .arlo#arlo .arlo-contrast-background,
.arlo#arlo .upcoming .arlo-cal .arlo-day:after {
background-color: white;
}
Theme: 'Jazz' CSS Override
The 'Jazz' theme is made up of 4 colours. Important: Each block of CSS below contains the colour type, description of where the colour is used and the default colour. When updating a colour you must ensure all hex or RGBA codes within the colour block are updated.
/* Colour 1 */
/* Main colour used for buttons, links and borders. Default: orange */ .arlo#arlo .arlo-color1,
.arlo#arlo a:hover,
.arlo#arlo a.arlo-template-name,
.arlo#arlo a.arlo-template-name:hover,
.arlo#arlo .page-numbers:not(.next):not(.prev):hover,
.arlo#arlo .page-numbers.current:not(.next):not(.prev),
.arlo#arlo .upcoming .arlo-places-remaining,
.arlo#arlo .arlo-button.arlo-waiting-list:hover,
.arlo#arlo .button.arlo-waiting-list:hover,
.arlo#arlo .arlo-event_tags-list > li,
.arlo#arlo .arlo-event-offers .discount,
.arlo#arlo .arlo-social-media a:hover,
.arlo .arlo-widget-upcoming a:hover,
.arlo .arlo-categories-widget li a:hover,
.arlo#arlo a,
.arlo#arlo a.next.page-numbers:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running a:hover,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a:hover,
.arlo#arlo .upcoming .arlo-event-name a:hover {
color: #f97070;
} .arlo#arlo .arlo-background-color1,
.arlo#arlo .button.arlo-register,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-category-list a,
.arlo#arlo .button.arlo-register,
.arlo#arlo .arlo-button.arlo-register,
.arlo#arlo .arlo-button,
.arlo#arlo .arlo-list.event-search .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-suggest-template-container .arlo-suggest-templates .arlo-suggest-template-event-link a.arlo-register {
background-color: #f97070;
} .arlo#arlo .arlo-border-color1,
.arlo#arlo .arlo-list.catalogue .arlo-cf.arlo-catalogue-event,
.arlo .arlo-categories-widget li a,
.arlo .arlo-widget-upcoming .arlo-cal.arlo-left,
.arlo#arlo .arlo-suggest-template-container .arlo-suggest-templates tr,
.arlo#arlo .arlo-suggest-template-container .arlo-suggest-templates tr td:first-of-type {
border-left-color: #f97070;
border-right-color: #f97070;
border-top-color: #f97070;
border-bottom-color: #f97070;
} /* Colour 2 */
/* Light colour used for backgrounds and secondary buttons. Default: light grey */ .arlo#arlo .arlo-color2 {
color: #f8f8f8;
} .arlo#arlo .arlo-background-color2,
.arlo#arlo .prev.page-numbers,
.arlo#arlo .next.page-numbers,
.arlo#arlo select,
.arlo#arlo .upcoming .arlo-button.arlo-waiting-list,
.arlo#arlo .upcoming .button.arlo-waiting-list,
.arlo#arlo .presenter-events li,
.arlo#arlo .arlo-social-media a,
.arlo .arlo-widget-upcoming .arlo-cal.arlo-left,
.arlo .arlo-categories-widget li a,
.arlo#arlo .arlo-list.event-search .arlo-next-running a {
background-color: #f8f8f8;
} .arlo#arlo .arlo-border-color2 {
border-color: #f8f8f8;
} /* Colour 3 */
/* Dark colour used for text and some buttons. Default: dark grey */ .arlo#arlo,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a,
.arlo#arlo .arlo-category-list a,
.arlo#arlo .arlo-color3,
.arlo#arlo .arlo-button.arlo-waiting-list,
.arlo#arlo .button.arlo-waiting-list,
.arlo#arlo .arlo-social-media a,
.arlo .arlo-widget-upcoming .arlo-cal-month,
.arlo .arlo-widget-upcoming a,
.arlo .arlo-categories-widget a,
.arlo#arlo a.next.page-numbers,
.arlo#arlo .arlo-list.event-search .arlo-next-running a,
.arlo#arlo .upcoming .arlo-event-name a,
.arlo#arlo select {
color: #383838;
} .arlo#arlo .arlo-background-color3,
.arlo#arlo .arlo-filters-buttons a,
.arlo#arlo .arlo-list.catalogue .arlo-next-running span,
.arlo#arlo .arlo-list.event-search .arlo-next-running span,
.arlo#arlo .arlo-show-more-link {
background-color: #383838;
} /* Colour 4 */
/* Highlight colour used for discounts. Default: light orange */ .arlo#arlo .arlo-color4 {
color: #f9b3b3;
} .arlo#arlo .arlo-background-color4 {
background-color: #f9b3b3;
} /* Colour 5 */
/* Light colour used to contrast coloured backgrounds and buttons. Default: white */ .arlo#arlo .arlo-button,
.arlo#arlo .button,
.arlo#arlo .arlo-list.catalogue .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-list.catalogue .arlo-next-running span,
.arlo#arlo .arlo-category-list a,
.arlo#arlo .arlo-filters-buttons a,
.arlo#arlo .arlo-button.arlo-register:hover,
.arlo#arlo .button.arlo-register:hover,
.arlo#arlo .arlo-show-more-link,
.arlo#arlo .arlo-show-more-link:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running a.arlo-register,
.arlo#arlo .arlo-list.event-search .arlo-next-running a.arlo-register:hover,
.arlo#arlo .arlo-list.event-search .arlo-next-running span,
.arlo#arlo .arlo-suggest-template-container .arlo-suggest-templates .arlo-suggest-template-event-link a.arlo-register,
.arlo#arlo .arlo-suggest-template-container .arlo-suggest-templates .arlo-suggest-template-event-link a.arlo-register:hover {
color: white;
}
Theme: 'Spark' CSS Override
The 'Spark' theme is made up of 7 colours. Important: Each block of CSS below contains the colour type, description of where the colour is used and the default colour. When updating a colour you must ensure all hex or RGBA codes within the colour block are updated.
/* Colour 1 *//* Main colour used for texts and headlines. Default: dark gray */.arlo#arlo,.arlo#arlo .arlo-color1,.arlo#arlo .arlo-next-running,.arlo#arlo .arlo-button:hover,.arlo#arlo .arlo-filters .arlo-filters-buttons a:hover,.arlo#arlo .arlo-next-running>a:hover,.arlo-widget-upcoming .arlo-cal-day,.arlo#arlo .arlo-event-offers .replaced+.discount * { color: #666666;}.arlo#arlo .arlo-background-color1,.arlo#arlo .arlo-next-running a,.arlo#arlo .arlo-button { background-color: #666666;}.arlo#arlo .arlo-border-color1,.arlo#arlo .arlo-button:hover,.arlo#arlo .arlo-filters .arlo-filters-buttons a:hover,.arlo#arlo .arlo-next-running>a:hover { border-color: #666666;}/* Colour 2 *//* Secondary colour used for buttons, hovers. Default: orange */.arlo#arlo .arlo-color2,.arlo#arlo .arlo-tooltip-button,.arlo#arlo .arlo-suggest a,.arlo#arlo .arlo-no-results a,.arlo .dark-tooltip h6,.arlo#arlo .arlo-event-offers .discount,.arlo#arlo .arlo-event-offers .discount *,.arlo#arlo .arlo-event-offers .replaced .amount,.arlo#arlo a:hover,.arlo#arlo .arlo-category-list li a:hover,.arlo#arlo .arlo-event-registration>p>a,.arlo#arlo .arlo-pagination .page-numbers:hover,.arlo#arlo .arlo-pagination .page-numbers.next:hover,.arlo#arlo .arlo-pagination .page-numbers.prev:hover,.arlo#arlo .arlo-event-name a:hover,.arlo#arlo .arlo-event-provider a:hover,.arlo#arlo .arlo-event-location a:hover,.arlo#arlo .arlo-list.catalogue .arlo-template-name a:hover,.arlo#arlo ul.arlo-list.venues .arlo-venue-name a:hover,.arlo#arlo .arlo-event-presenters a:hover,.arlo#arlo ul.presenter-events>li a:hover,.arlo#arlo .arlo-event-registration>a:hover,.arlo#arlo .arlo-event-registration>a.arlo-waiting-list:hover,.arlo#arlo .arlo-buttons .arlo-event-registration>a:hover,.arlo#arlo .arlo-filters .arlo-filters-buttons a:hover,.arlo#arlo .arlo-show-more-link:hover,.arlo#arlo .arlo-oa-registration>a:hover,.arlo#arlo .arlo-next-running a.arlo-register:hover,.arlo#arlo .arlo-suggest-template-event-link a,.arlo#arlo .arlo-suggest-templates a:hover,.arlo#arlo ul.arlo-list.venues .arlo-venue-info-link a,.arlo#arlo ul.arlo-list.presenters .arlo-presenter-info-link a,.arlo#arlo ul.presenter-events>li a,.arlo-categories-widget .arlo-category-list li a:hover,.arlo-list.arlo-widget-upcoming a:hover { color: #ff7033;}.arlo#arlo .arlo-background-color2,.arlo#arlo .arlo-event-registration>a,.arlo#arlo .arlo-filters .arlo-filters-buttons a,.arlo#arlo .arlo-oa-registration>a,.arlo#arlo .arlo-register,.arlo#arlo .arlo-next-running a.arlo-register,.arlo#arlo .arlo-search-button,.arlo#arlo .arlo-show-more-link { background-color: #ff7033;}.arlo#arlo .arlo-border-color2,.arlo#arlo .arlo-cal,.arlo#arlo .arlo-search-field,.arlo#arlo .arlo-search-button,.arlo#arlo .arlo-list .arlo-group-divider,.arlo#arlo .arlo-category-list li a:hover,.arlo#arlo .arlo-event-registration>a:hover,.arlo#arlo .arlo-event-registration>a.arlo-waiting-list:hover,.arlo#arlo .arlo-buttons .arlo-event-registration>a:hover,.arlo#arlo .arlo-filters .arlo-filters-buttons a:hover,.arlo#arlo .arlo-show-more-link:hover,.arlo#arlo .arlo-oa-registration>a:hover,.arlo#arlo .arlo-next-running a.arlo-register:hover,.arlo#arlo .arlo-register:hover,.arlo-widget-upcoming>li:hover .arlo-cal.arlo-left { border-color: #ff7033;}/* Colour 3 *//* Light colour used for backgrounds. Default: light gray */.arlo#arlo .arlo-color3 { color: #e6e6e6;}.arlo#arlo .arlo-background-color3,.arlo#arlo select,.arlo#arlo .arlo-category-list li a,.arlo#arlo p.arlo-no-results,.arlo#arlo .arlo-next-running span,.arlo#arlo .arlo-pagination .page-numbers.current { background-color: #e6e6e6;}.arlo#arlo .arlo-event-registration>a.arlo-waiting-list,.arlo#arlo .arlo-pagination .page-numbers { border-color: #e6e6e6;}/* Colour 4 *//* Highlight colour used for important information. Default: yellow */.arlo#arlo .arlo-color4,.arlo#arlo .arlo-event-provider a,.arlo#arlo .arlo-event-location a,.arlo#arlo .arlo-event-presenters a,.arlo#arlo .arlo-places-remaining,.arlo#arlo .arlo-event-full,.arlo#arlo .arlo-presenter-details a { color: #f2d300;}/* Colour 5 *//* Light colour used for general links. Default: light blue */.arlo#arlo .arlo-color5,.arlo#arlo .arlo-presenter-content a,.arlo#arlo .arlo-venue-content a,.arlo#arlo .arlo-presenter-details a,.arlo#arlo .arlo-venue-details a,.arlo#arlo .arlo-content-field a { color: #7582d0;}/* Colour 6 *//* Contrast colour used for button texts with dark backgrounds. Default: white */.arlo#arlo .arlo-button,.arlo#arlo .arlo-filters .arlo-filters-buttons a,.arlo#arlo .arlo-buttons .arlo-event-registration>a,.arlo#arlo .arlo-buttons .arlo-event-registration p,.arlo#arlo .arlo-search-button,.arlo#arlo .arlo-search-button:hover,.arlo#arlo .arlo-next-running a,.arlo#arlo .arlo-next-running span,.arlo#arlo .arlo-event-registration>a,.arlo#arlo .arlo-show-more-link,.arlo#arlo .arlo-oa-registration>a { color: white;}/* Colour 7 *//* Light colour used for secondary texts. Default: gray */.arlo#arlo ul.upcoming .arlo-event-provider,.arlo#arlo ul.upcoming .arlo-event-time,.arlo#arlo ul.upcoming .arlo-event-location,.arlo#arlo ul.upcoming .arlo-event-presenters,.arlo#arlo .arlo-next-running span,.arlo#arlo .arlo-event-registration>a.arlo-waiting-list,.arlo#arlo .arlo-list.catalogue .arlo-next-running p,.arlo#arlo .arlo-list.catalogue .arlo-advertised-duration span,.arlo#arlo .arlo-list.catalogue .arlo-offers span,.arlo#arlo .arlo-reference-term,.arlo-categories-widget .arlo-category-list li ul { color: #ababab;}/* Transparent Background*/.arlo#arlo .arlo-search-field,.arlo#arlo .arlo-list .arlo-group-divider,.arlo#arlo .arlo-button:not(.arlo-search-button):hover,.arlo#arlo .arlo-filters .arlo-filters-buttons a:hover,.arlo#arlo .arlo-category-list li a:hover,.arlo#arlo .arlo-next-running>a:hover,.arlo#arlo .arlo-show-more-link:hover,.arlo#arlo .arlo-oa-registration>a:hover,.arlo#arlo .arlo-event-registration>a.arlo-waiting-list,.arlo#arlo .arlo-event-registration>a:hover,.arlo#arlo .arlo-suggest-templates a,.arlo#arlo .arlo-buttons .arlo-event-registration>a:hover,.arlo#arlo .arlo-filters .arlo-filters-buttons a:hover,.arlo#arlo .arlo-next-running a.arlo-register:hover { background-color: transparent;}
Theme: 'Starter' CSS Override
The 'Starter' theme is based on the Arlo starter template. The following override CSS allows you to change the way event sessions are displayed.
/* Display session as a list instead of hover window */.arlo#arlo.arlo-xs .events-1 .event.expanded .mobile-expanded-visible, .arlo#arlo.arlo-xs .events-2 .event.expanded .mobile-expanded-visible, .arlo#arlo.arlo-xs .events-3 .event.expanded .mobile-expanded-visible, .arlo#arlo.arlo-xs .events-4 .event.expanded .mobile-expanded-visible { max-height: 5000px; }
Advanced Customisation (Custom CSS)
For advanced styling and customisation of your Arlo WordPress pages (e.g the layout and structure of the pages) you will require a skilled developer and use of the Arlo WordPress plugin developer documentation.
Important: Technical support for client-side website integrations is not included as part of our product support service, if you are completing the website integration yourself, you can purchase additional technical support if required.
Arlo also provides advanced WordPress plugin integration services, view our integration packages and solutions page for more information.