• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Utility classes

    Sometimes you may need to use override styles to align elements the way you want. This might mean changing the margin or padding, removing shadows or borders, or floating elements left and right. The following classes can be applied to elements to override their styles without having to write custom code.

    .hide
    Hides the element using display:none. Shouldn't be used on content.
    .no-border
    Removes the border from the element.
    .no-padding
    Sets padding to zero.
    .no-margin
    Sets margin to zero.
    .no-shadow
    Removes box-shadow from the element.
    .margin
    Adds 10px of margin on all sides.
    .margin-top
    Adds 10px of margin to the top.
    .margin-bottom
    Adds 10px of margin to the bottom.
    .margin-left
    Adds 10px of margin to the left.
    .margin-right
    Adds 10px of margin to the right.
    .padding
    Adds 10px of padding on all sides.
    .padding-top
    Adds 10px of padding to the top.
    .padding-bottom
    Adds 10px of padding to the bottom.
    .padding-left
    Adds 10px of padding to the left.
    .padding-right
    Adds 10px of padding to the right.
    .left
    Floats the element to the left using float:left.
    .right
    Floats the element to the right using float:right.
    .text-left
    Aligns content inside the element to the left using text-align:left.
    .text-right
    Aligns content inside the element to the right using text-align:right.
    .text-center
    Aligns content inside the element to the center using text-align:center.
    Previous (UQ Base Regions)Next (UQ Base theme)