Home Page Menu

Civica Town Styles

You can change and view the global styles for civica town here

Changing the values below will create overrides in less files under css/client

For more information about less see the Less CSS preprocessor documentation

Please note: For best functionality open this page in Chrome - or anything other than I.E. The file and colour pickers may not work otherwise.

Contents

  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

Global

Global colours

foreground color
#000000
background color
#ffffff
background emphasised color
#AA1E48
background lightly emphasised color
#F2F2F1
primary color
#000000
primary color hover
#AA1E48
secondary color
#ffffff
secondary color hover
#AA1E48
accent color
#f6c21d
dark background color
#072438
disabled background color
#626e73
success color
#00ff00
warning color
#FFA500
error color
#ff0000
link color
#AA1E48
link color hover
#AA1E48
link color visited
#ffffff

Images

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

Logo Image
/css/client/LogoImage.gif
default main page image
/media/main-page.jpg

Typography

header font family
arial
copy font family
arial
font size small
20px
font size base
15px
font size medium
20px
font size large
24px
font size extralarge
30px
icon font
"FontAwesome"
icon font size
14px

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.

Example text in civica-content. Below are some standard buttons
wide spacing
30px
default spacing
15px
narrow spacing
5px
control height
40px
header background color
#A52449
header color
#FFFFFF
footer height
75px
footer color
@background-color
footer background color
#ffffff

Responsive breakpoints

  • Phones < @breakpoint-small
  • Small device tables >= breakpoint small
  • Medium device desktops >= breakpoint medium
  • Large device desktops >= breakpoint large
breakpoint small
768px
breakpoint medium
992px
breakpoint large
1200px

Planning

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

E.g. 1380px by 345px

planning home page image
/css/client/planning-home-page-image.png

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

Council Tax Widget

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

For Example

Band

D

Current Council Tax Annual Charge (£)

£175

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.

For Example
Filter Options
Showing1-2 of 2 Results

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.

For Example

Normal collection day

Wednesday

Next black bin collection

03-02-2016

Next green recycling collection

10-02-2016

Normal garden waste collection day

Tuesday

Next garden waste collection

02-02-2016

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.

For example

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.

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.

For Example

Select Box

Multi-Select Box

Displays four rows

Input Field

Buttons

All button styling should be consistent. Use a[role="button"], input[type="submit"], input[type="button"], button, .btn

Next

Textarea Field

Radio Button

Labels

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.

For Example

H1

H2

H3

H4

H5

Back to top of page

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

For Example

Aren’t all these quotes the same?

No. First of all: quote ≠ block quote ≠ pull quote.

Sven Lennartz, Block Quotes and Pull Quotes: Examples and Good Practices

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.

For example

List

  • List 1
  • List 2

Table

Col 1Col 2
SomeNotes

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.

For Example

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.

For Example
PrevNext
SuMoTuWeThFrSa
 123456
78910111213
14151617181920
21222324252627
2829     

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.

For example

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.

For Example - civica-error-alert styling
  • Password and Password Confirm must match
  • Email Address and Email Address Confirm must match

Back to top of page

Breadcrumbs

CSS File: component.breadcrumb.less

Describes styling used for the breadcrumbs.

For Example

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

For Example

In this section

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.

For Example

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.

For Example

Back to top of page

KeyObject Viewer

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

This file contains styling associated with the keyobject viewer.

For Example
Report it case
Reference
2014/08/00106
Type
Graffiti - Offensive
Status
Active
Description
Someone has written some graffiti on the gable end of my house

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.

For Example

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

For Example - MyNeighbourhood Widget

Not in a conservation area.in a conservation area
Is not a listed building.a listed building
Is not covered by a tree preservation order.covered by a tree preservation order
Does not fall within the South Downs National Park.in a designated area of natural beauty

Back to top of page

CSS File:component.search.less

This file contains the styles for the search functionality.

For Example

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

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