This post has been prepared to assist with simple modifications to the Web Portal template on a client-by-client basis. The CSS snippets below include a comment describing the function they perform. This comment should be preserved when adding to the Custom CSS, so it can easily be found and removed later if needed. Where possible, these snippets should be added in the space around line 10-15 of the Custom CSS so they can be easily found and grouped.
Contents:
- Capitalise all tab names in the menu
- Hide Headline
- Hide Sub-Headline
- Remove Logo Drop Shadow
- Fix No Logo bugs
- Remove Gradient Overlay
- Fix Multi Office Layout – 6 Offices
- Firm Has No Office – Hide Address and Map
Capitalise all tab names in the menu
This was added to the template in July 2019, however is still a problem for most portals cloned before that time.
#menu-main-menu li a {text-transform: capitalize;} /* Capitalise tab names in the menu */
Hide Headline
As a standard, if the client’s logo contains the same words as the headline, we hide the headline for aesthetics. At no point should the headline text field be left emptied to achieve this effect, as this is bad for SEO and usability.
.site-header .title-area .company-name h2 {display: none !important;} /*Hide Headline*/
Hide Sub-Headline
Hides the second line of text in the header
.company-name { display: none !important; }/*Hide Sub-Headline */
Remove Logo Drop Shadow
Removes the drop shadow around the logo
.site-header .title-area .custom-logo { box-shadow: none !important;} /* Remove logo shadow */
Fix No Logo bugs
Fixes the style bugs if no logo has been uploaded. This needs to be removed if a logo is eventually added, so ensure this is kept near the top of the CSS for easy finding in future.
.topbar-active .site-header .title-area .site-title, .site-description {display: none;} /* Fix No Logo Bugs */
Remove Gradient Overlay
Removes the gradient which sits between the Headlines and the Banner Image.
.bottom-overlay { display: none; } /* Remove Gradient */
Fix Multi Office Layout – 6 Offices
If a portal is displaying 6 offices or more, add these styles to fix how they display.
/*--Multi-Office Location--*/
.multi-office-select {display:block;}
.multi-office-select .office-box {width: 30%; display: inline-block; text-align: center; margin: 1%;}
.multi-office-select .office-box .btn-office {display:inline-block;}
Firm Has No Office – Hide Address and Map
If a portal no physical offices, the address and map sections are not required and need to be hidden with CSS.
/*--No Physical Offices - Hide Address and Map from Enquiry Page--*/
.contact-wrapper .address-details, .contact-wrapper .map-details { display: none !important; }