1. Global
   1. Colours
   2. Images
   3. Typography
   4. Flow
   5. Responsive breakpoints
2. Page header
3. Page footer
4. Planning pages
5. My account pages
6. Licensing pages
7. Council Tax Widget
8. Find Address Widget
9. My Service Request Widget
10. Refuse Collection Dates Widget
11. Key Object Viewer Widget
12. MyProperty and MyNeighbourhood Widgets
13. Full Text Search Widget
14. Styling Files
    1. Elements - All
    2. Header Element
    3. Footer Element
    4. Form Elements
    5. Body Elements
    6. Links
    7. Quotes
    8. Tables and List
    9. Page Layout
    10. Font Awesome Icons
    11. Qtips
    12. Datepicker
    13. Address Picker
    14. Accordions
    15. Alerts
    16. Breadcrumbs
    17. Civica Menu
    18. Help
    19. Search
    20. Advanced Search
    21. Busy Indicator
    22. Keyobject Viewer
    23. Document Viewer
    24. Document List
    25. Open Layers
    26. My Property Styling
    27. Home Page Styling
    28. Login Page Styling
    29. MyAccounts Page Styling
    30. Planning Page Styling
    31. Licensing Page Styling
    32. List Styling

Global

Global colours

Images

For the logo use an image with the same height as the header

Logo Image

/css/client/LogoImage.png

default main page image

/media/main-page.jpg

Typography

Global flow

Control the spacing round certain elements.

The civica-content class can be used to denote seperate sections of content, for example some instructions, or a button group.

The content class will have the default spacing applied to the base.

Page Header

Page footer

Planning

For best results use an image with a ratio of 4:1 (width:height)

E.g. 1380px by 345px

planning home page image

/media/Planning/home.jpg

My Accounts

For best results use an image with a ratio of 4:1 (width:height)

E.g. 1380px by 345px

myaccounts home page image

/media/Accounts/home.jpg

Licencing

For best results use an image with a ratio of 4:1 (width:height)

E.g. 1380px by 345px

licensing home page image

/media/licensing/gambling.jpg

taxi licensing home page image

/media/licensing/taxi.jpg

alcohol licensing home page image

/media/licensing/alcohol.jpg

Booking

For best results use an image with a ratio of 4:1 (width:height)

E.g. 1380px by 345px

booking home page image

/media/Booking/home.jpg

Blue Badges

For best results use an image with a ratio of 4:1 (width:height)

E.g. 1380px by 345px

bluebadges home page image

/media/BlueBadges/home.jpg

Council Tax Widget

Default styling for the Council Tax Widget. This widget displays generic band/charge data only.

Back to top of page

Find Address Widget

Default styling for the Find Address Widget. This widget searches for addresses based on the supplied search criteria, allows for the selection from anm address list and provides the ability to add new address.

Address Finder Example

Back to top of page

My Service Request List Widget

Default styling for the My Service Request List Widget. TThis widget displays a list of Service Requests (processes) associated with the current authenticated user.

Back to top of page

Refuse Collection Dates Widget

Default styling for the Refuse Collection Dates Widget. The widget displays the different refuse collection dates associated with the logged in user.

Back to top of page

Key Object Viewer Widget

Default styling for the Key Object Viewer Widget. This widget displays KeyObject (Case) Information.

Key Object Viewer Example

Back to top of page

MyProperty and MyNeighbourhood Widget

Default styling for the both these widgets. The MyProperty widget displays the property and map information of the logged in user. The MyNeighbourhood Widget displays information regarding conservation areas, listed buildings, etc.

Widget Examples

Back to top of page

Full Text Widget

Default styling for the Free Text Widget. This is how the free text field for searching can be rendered.

Back to top of page

List Styling

Default styling for Lists. In this section we specify the styling we have created for lists.

Back to top of page

General Elements

CSS File:element.all.less

General element placeholder

Body Elements

CSS File:element.body.less

This file contains the element styles for html and body. Here the font family, colour,font size and margins styles are specified.

Back to top of page

Header Element

CSS File: element.header.less

This file contains the styling for the header element.

For example

Menu

Back to top of page

Element - Footer

CSS File:element.footer.less

This file contains the styles used for the footer element

Back to top of page

Form Elements

CSS File:element.form.less

This file contains the styles for form elements - e.g input, textarea, select, button. These should only be overridden if there is a great need for it.

Back to top of page

Heading Elements

CSS File:element.headings.less

This file contains the element styles for headings e.g h1, h2. It defines the size, weight and font. H1 and H2 should not be used within the widgets. These elements should be handled by the page content management system. So H2 should be used to introduce the widget on the page and then H3, H4 can be used within the widgets.

Back to top of page

Elements - Links

CSS File:element.links.less

This file contains the element styles for html links. Links should all be consistent therefore should use the styling defined here.

Back to top of page

Elements - quotes

CSS File:element.quotes.less

This file contains the element styles for quotes and citations

Back to top of page

Elements - Emphasized

CSS File:element.emphasized.less

This file contains the element styles for emphasized elements

Back to top of page

Elements - Tables and List

CSS File:element.tables-and-lists.less

This file contains the element styles for tables and list.

Back to top of page

Object - Page Layout

CSS File:object.page-layouts.less

This file gives a bunch of classes to use for responsive layouts

Layouts tend to be grouped into the following sizes

Phones less than 768px @breakpoint-phone

Small device tablets greater than or equal to 768px @breakpoint-small

Medium device desktops greater than or equal to 992px @breakpoint-medium

Large device desktops greater than or equal 1200px @breakpoint-large

Back to top of page

Font Awesome Icons

CSS File:component.fontawesome.less

This file contains styling associated with font awesome icons used within the Civica widgets.

Back to top of page

Qtip

CSS File:component.qtip.less

This file contains the styling for the qtips. These are used mostly in forms to identify mandatory fields.

Back to top of page

Datepicker

CSS File:component.datepicker.less

The styling here relates to the date picker used on forms. The position should be absolute and not like in the example below.

Back to top of page

Address Picker

CSS File: component.addresspicker.less

This file describes the styling used for the address picker. The widget displays the number of matches, the list of address and an option to add a new address.

Back to top of page

Accordions

CSS File: component.accordian.less

This file describes the styling for the civica accordions.

Accodions are used when large amounts of content needs to be displayed but there is a limited space on the screen.

Back to top of page

Alerts

CSS File: component.alerts.less

These are the styles used for alerts. These alerts can be warning, errors and successful outcomes.

Back to top of page

Breadcrumbs

CSS File: component.breadcrumb.less

Describes styling used for the breadcrumbs.

Back to top of page

Civica Menu

CSS File:component.civica-menu.less

The styling here relates to the "In this Section" (right side) Menu

Back to top of page

Help

CSS File:component.help.less

This file contains the styles for the help functionality (for instance on callscripts). It requires the qtip styling to be included first.

Back to top of page

Advanced Search

CSS File:component.keyobject-advanced-search.less

This file contains the styles for the advance keyobject search functionality

All available keyobject search fields are displayed as default. If a search field needs to be hidden, it can be done by following the steps belows:

1. From the advance search page, right click on the label of the field and select "Inspect" in Chome or "Inspect Element" in IE.
2. This will open up the developer tools. In the elements tab you will see the label highlighed. Above the label you will see a div with class 'civicaQuestion'. Two divs above this is a div that has two class names. One of the class name is "civica-input" and the other class name is unique to the search field.
3. At this div level a style can be added to hide the search fields (e.g. display:none;) using the unique class name e.g. civicakeyobjectsearch-appplancase-appealref.

Back to top of page

Busy indicator

CSS File:component.busy-indicator.less

This file contains the styling associated with the busy icon.

Back to top of page

Civica Form

CSS File:component.civica-form.less

This is extra specific styling for civica forms. The file holds styling overrides. For example the date field length - it has a class of hasDatepicker.

Back to top of page

KeyObject Viewer

CSS File: component-civica-keyobject-viewer.less

This file contains styling associated with the keyobject viewer.

Back to top of page

Document Viewer

CSS File:component.document-viewer.less

This file contains the style associated with the document viewer.

Back to top of page

Document List

CSS File:component.document-list.less

The styling here relates to the document list widget. Different icons are used to represent different doc types.

Back to top of page

Open Layers

CSS File:component.openlayers.less

This file contains the styles used for OpenLayers (rendering the maps).

Back to top of page

My Property

CSS File:component.myproperty.less

This file contains styling for the MyNeighbourhood widget and MyProperty widget.

For Example - MyProperty widget

• 14 Esmond Terrace
• Leeds
• West Yorkshire
• LS12 1XE

Choose alternative

Map will go here

Your Pin

Remove

+−

⇧

For Example - MyNeighbourhood Widget

in a conservation area

a listed building

covered by a tree preservation order

in a designated area of natural beauty

Back to top of page

Search

CSS File:component.search.less

This file contains the styles for the search functionality.

Back to top of page

Planning Page

CSS File: theme.planning.less

This file contains the styling for the Planning page.

Back to top of page

Taxi Licence

CSS File: theme.taxi-licence.less

This file contains the styling for the taxi licence page.

Back to top of page

MyAccount Page

CSS File: theme.myaccounts.less

This file contains the styling for the My Accounts page.

Back to top of page

Home Page Styling

CSS File: theme.home.less

This file contains the styling for the home page.

Back to top of page

Login Page

CSS File: theme.login.less

This file contains the styling needed for the login page.

Back to top of page

Booking Page

CSS File: theme.booking.less

This file contains the styling for the Booking page.

Back to top of page

Blue Badges Page

CSS File: theme.bluebadges.less

This file contains the styling for the Blue Badges page.

Back to top of page

Responsive

CSS File: trumps.responsive.less

These styles are overrides for responsive functionality.

Back to top of page

Authentication State

CSS File:trumps.authentication-state.less

You can use these styles to show / hide according to the logged in contacts authentication status.

They are set in the masterpage after the authentication widget has run.

Back to top of page