Documentation › Headway Base Default Styles

Headway Base Default Styles

Headway Base comes with certain styles defined. It may be helpful for you to be aware of what they are in case you need to change them or set them to inherit in Design Mode. Otherwise, you may make style customizations that don’t appear because they are being overridden by default styles.

The elements are organized in this list according to where they appear in the element tree in Design Mode.

Global Styling

Text

  • font-size: 14px
  • font-family: Palatino
  • line-height: 100%
  • color: #555555

Hyperlink

  • color: #555555

Block Title

  • font-size: 22px
  • line-height: 150%

Block Subtitle

  • font-size: 14px
  • font-styling: italic
  • color: #999

Structure

Body

  • background-color: #dddddd

Wrapper

  • background-color: #ffffff
  • padding-top: 15px
  • padding-right: 15px
  • padding-bottom: 15px
  • padding-left: 15px
  • box-shadow-color: #c7c7c7
  • box-shadow-blur: 8px
  • box-shadow-horizontal-offset: 1px
  • box-shadow-vertical-offset: 1px
  • margin-top: 30px
  • margin-bottom: 30px

Blocks

Header Block

Site Title

  • color: #222222
  • font-size: 34px
  • line-height: 100%
  • text-decoration: none
  • margin-top: 20px
  • margin-right: 10px
  • margin-bottom: 0px
  • margin-left: 10px

Site Tagline

  • color: #999999
  • font-size: 15px
  • line-height: 120%
  • font-styling: italic
  • margin-top: 10px
  • margin-right: 10px
  • margin-bottom: 20px
  • margin-left: 10px

Navigation Block

  • border-top-width: 1px
  • border-bottom-width: 1px
  • border-left-width: 0px
  • border-right-width: 0px
  • border-color: #eeeee
  • border-style: solid
  • overflow: visible

Menu Item

  • text-decoration: none
  • color: #88888
  • capitalization: uppercase
  • padding-right: 15px
  • padding-left: 15px

Menu Item (State: Selected)

  • color: #22222

Menu Item (State: Hover)

  • color: #55555

Sub Menu Item

  • background-color: #eeeeee

Content Block

Entry Container

  • border-style: solid
  • border-top-width: 0px
  • border-bottom-width: 1px
  • border-left-width: 0px
  • border-right-width: 0px
  • border-color: #efefef
  • padding-bottom: 30px

Title

  • font-size: 24px
  • color: #333333
  • line-height: 130%

Archive Title

  • font-size: 24px
  • color: #555555
  • line-height: 110%
  • border-bottom-width: 1px
  • border-color: #eeeeee
  • border-style: solid
  • padding-bottom: 15px

Body Text

  • color: #555555
  • font-size: 14px
  • line-height: 180%

Meta

  • line-height: 120%
  • color: #818181

Heading (H1, H2, H3)

  • font-size: 20px
  • line-height: 180%

Sub Heading (H4, H5, H6)

  • font-size: 16px
  • line-height: 180%

Featured Image

  • border-top-width: 1px
  • border-right-width: 1px
  • border-bottom-width: 1px
  • border-left-width: 1px
  • border-color: #eeeeee
  • border-style: solid
  • padding-top: 3px
  • padding-right: 3px
  • padding-bottom: 3px
  • padding-left: 3px

Continue Reading Button

  • background-color: #eeeeee
  • text-decoration: none
  • border-top-left-radius: 4px
  • border-top-right-radius: 4px
  • border-bottom-right-radius: 4px
  • border-bottom-left-radius: 4px
  • padding-top: 2px
  • padding-right: 6px
  • padding-bottom: 2px
  • padding-left: 6px

Continue Reading Button (State: Hover)

  • background-color: #e7e7e7

Loop Navigation Button

  • background-color: #e1e1e1
  • text-decoration: none
  • border-top-left-radius: 4px
  • border-top-right-radius: 4px
  • border-bottom-right-radius: 4px
  • border-bottom-left-radius: 4px
  • padding-top: 4px
  • padding-right: 8px
  • padding-bottom: 4px
  • padding-left: 4px
  • line-height: 130%

Loop Navigation Button (State: Hover)

  • background-color: #d5d5d5

Comments Area Headings

  • color: #333333
  • font-size: 18px
  • line-height: 130%

Comment Container

  • padding-left: 64px

Comment Author

  • font-size:18px
  • line-height: 120%

Comment Meta

  • color: #888888
  • font-size: 14px

Comment Body

  • font-size: 14px
  • line-height: 170%

Comment Reply Link

  • font-size: 12px
  • background-color: #eeeeee
  • text-decoration: none
  • border-top-left-radius: 4px
  • border-top-right-radius: 4px
  • border-bottom-right-radius: 4px
  • border-bottom-left-radius: 4px
  • padding-top: 3px
  • padding-right: 6px
  • padding-bottom: 3px
  • padding-left: 6px

Comment Reply Link (State: Hover)

  • background-color: e7e7e7

Comment Form Input Label

  • font-size: 14px
  • line-height: 220%
  • color: #888888

Widget Area Block

  • line-height: 150%
  • padding-top: 5px
  • padding-right: 10px
  • padding-bottom: 5px
  • padding-left: 10px
  • margin-top: 15px

Widget Title

  • font-size: 13px
  • border-style: solid
  • border-top-width: 1px
  • border-bottom-width: 1px
  • border-left-width: 0px
  • border-right-width: 0px
  • border-color: #eeeee
  • letter-spacing: 1px
  • capitalization: uppercase
  • line-height: 250%
  • color: #111111
  • margin-bottom: 10px

Widget Links

  • color: #33333

Footer Block

  • border-top-width: 1px
  • border-right-width: 0px
  • border-bottom-width: 0px
  • border-left-width: 0px
  • border-color: #eeeeee
  • border-style: solid

Copyright

  • color: #666666

Headway Attribution

  • color: #666666

Administration Panel

  • color: #666666

Go to Top Link

  • color: #666666

Responsive Grid Toggle Link

  • color: #666666

Slider Block

Slider Container

  • overflow: visible
  • margin-bottom: 30px

Slider Viewport

  • overflow: hidden

Slider Caption

  • background-color: rgba(0,0,0,0.6)
  • color: #ffffff
  • font-size: 14px
  • line-height: 150%
  • padding-top: 20px
  • padding-right: 20px
  • padding-bottom: 20px
  • padding-left: 20px
  • position: absolute
  • text-align: center

Slider Paging

  • position: absolute
  • text-align: center

Slider Direction Nav Link

  • margin-top: -20px
  • position: absolute
  • background-image: headway_url() . ‘library/blocks/slider/assets/bg_direction_nav.png’
  • background-repeat: no-repeat
  • background-position: left top

Slider Direction Next

  • background-position: right top

Slider Paging Link

  • background-color: rgba(0,0,0,0.5)
  • border-top-left-radius: 20px
  • border-top-right-radius: 20px
  • border-bottom-right-radius: 20px
  • border-bottom-left-radius: 20px
  • margin-left: 2px
  • margin-right: 2px

Headway Base comes with certain styles defined. It may be helpful for you to be aware of what they are in case you need to change them or set them to inherit in Design Mode. Otherwise, you may make style customizations that don’t appear because they are being overridden by default styles. The elements are organized in this list according to where they appear in the element tree in Design Mode.

Global Styling

Text

  • font-size: 14px
  • font-family: Palatino
  • line-height: 100%
  • color: #555555

Hyperlink

  • color: #555555

Block Title

  • font-size: 22px
  • line-height: 150%

Block Subtitle

  • font-size: 14px
  • font-styling: italic
  • color: #999

Structure

Blocks

Body

  • background-color: #dddddd

Wrapper

  • background-color: #ffffff
  • padding-top: 15px
  • padding-right: 15px
  • padding-bottom: 15px
  • padding-left: 15px
  • box-shadow-color: #c7c7c7
  • box-shadow-blur: 8px
  • box-shadow-horizontal-offset: 1px
  • box-shadow-vertical-offset: 1px
  • margin-top: 30px
  • margin-bottom: 30px

Blocks

Header Block

Site Title

  • color: #222222
  • font-size: 34px
  • line-height: 100%
  • text-decoration: none
  • margin-top: 20px
  • margin-right: 10px
  • margin-bottom: 0px
  • margin-left: 10px

Site Tagline

  • color: #999999
  • font-size: 15px
  • line-height: 120%
  • font-styling: italic
  • margin-top: 10px
  • margin-right: 10px
  • margin-bottom: 20px
  • margin-left: 10px

Navigation Block

  • border-top-width: 1px
  • border-bottom-width: 1px
  • border-left-width: 0px
  • border-right-width: 0px
  • border-color: #eeeee
  • border-style: solid
  • overflow: visible

Menu Item

  • text-decoration: none
  • color: #88888
  • capitalization: uppercase
  • padding-right: 15px
  • padding-left: 15px

Menu Item (State: Selected)

  • color: #22222

Menu Item (State: Hover)

  • color: #55555

Sub Menu Item

  • background-color: #eeeeee

Content Block

Entry Container

  • border-style: solid
  • border-top-width: 0px
  • border-bottom-width: 1px
  • border-left-width: 0px
  • border-right-width: 0px
  • border-color: #efefef
  • padding-bottom: 30px

Title

  • font-size: 24px
  • color: #333333
  • line-height: 130%

Archive Title

  • font-size: 24px
  • color: #555555
  • line-height: 110%
  • border-bottom-width: 1px
  • border-color: #eeeeee
  • border-style: solid
  • padding-bottom: 15px

Body Text

  • color: #555555
  • font-size: 14px
  • line-height: 180%

Meta

  • line-height: 120%
  • color: #818181

Heading (H1, H2, H3)

  • font-size: 20px
  • line-height: 180%

Sub Heading (H4, H5, H6)

  • font-size: 16px
  • line-height: 180%

Featured Image

  • border-top-width: 1px
  • border-right-width: 1px
  • border-bottom-width: 1px
  • border-left-width: 1px
  • border-color: #eeeeee
  • border-style: solid
  • padding-top: 3px
  • padding-right: 3px
  • padding-bottom: 3px
  • padding-left: 3px

Continue Reading Button

  • background-color: #eeeeee
  • text-decoration: none
  • border-top-left-radius: 4px
  • border-top-right-radius: 4px
  • border-bottom-right-radius: 4px
  • border-bottom-left-radius: 4px
  • padding-top: 2px
  • padding-right: 6px
  • padding-bottom: 2px
  • padding-left: 6px

Continue Reading Button (State: Hover)

  • background-color: #e7e7e7

Loop Navigation Button

  • background-color: #e1e1e1
  • text-decoration: none
  • border-top-left-radius: 4px
  • border-top-right-radius: 4px
  • border-bottom-right-radius: 4px
  • border-bottom-left-radius: 4px
  • padding-top: 4px
  • padding-right: 8px
  • padding-bottom: 4px
  • padding-left: 4px
  • line-height: 130%

Loop Navigation Button (State: Hover)

  • background-color: #d5d5d5

Comments Area Headings

  • color: #333333
  • font-size: 18px
  • line-height: 130%

Comment Container

  • padding-left: 64px

Comment Author

  • font-size:18px
  • line-height: 120%

Comment Meta

  • color: #888888
  • font-size: 14px

Comment Body

  • font-size: 14px
  • line-height: 170%

Comment Reply Link

  • font-size: 12px
  • background-color: #eeeeee
  • text-decoration: none
  • border-top-left-radius: 4px
  • border-top-right-radius: 4px
  • border-bottom-right-radius: 4px
  • border-bottom-left-radius: 4px
  • padding-top: 3px
  • padding-right: 6px
  • padding-bottom: 3px
  • padding-left: 6px

Comment Reply Link (State: Hover)

  • background-color: e7e7e7

Comment Form Input Label

  • font-size: 14px
  • line-height: 220%
  • color: #888888

Widget Area Block

  • line-height: 150%
  • padding-top: 5px
  • padding-right: 10px
  • padding-bottom: 5px
  • padding-left: 10px
  • margin-top: 15px

Widget Title

  • font-size: 13px
  • border-style: solid
  • border-top-width: 1px
  • border-bottom-width: 1px
  • border-left-width: 0px
  • border-right-width: 0px
  • border-color: #eeeee
  • letter-spacing: 1px
  • capitalization: uppercase
  • line-height: 250%
  • color: #111111
  • margin-bottom: 10px

Widget Links

  • color: #33333

Footer Block

  • border-top-width: 1px
  • border-right-width: 0px
  • border-bottom-width: 0px
  • border-left-width: 0px
  • border-color: #eeeeee
  • border-style: solid

Copyright

  • color: #666666

Headway Attribution

  • color: #666666

Administration Panel

  • color: #666666

Go to Top Link

  • color: #666666

Responsive Grid Toggle Link

  • color: #666666

Slider Block

Slider Container

  • overflow: visible
  • margin-bottom: 30px

Slider Viewport

  • overflow: hidden

Slider Caption

  • background-color: rgba(0,0,0,0.6)
  • color: #ffffff
  • font-size: 14px
  • line-height: 150%
  • padding-top: 20px
  • padding-right: 20px
  • padding-bottom: 20px
  • padding-left: 20px
  • position: absolute
  • text-align: center

Slider Paging

  • position: absolute
  • text-align: center

Slider Direction Nav Link

  • margin-top: -20px
  • position: absolute
  • background-image: headway_url() . ‘library/blocks/slider/assets/bg_direction_nav.png’
  • background-repeat: no-repeat
  • background-position: left top

Slider Direction Next

  • background-position: right top

Slider Paging Link

  • background-color: rgba(0,0,0,0.5)
  • border-top-left-radius: 20px
  • border-top-right-radius: 20px
  • border-bottom-right-radius: 20px
  • border-bottom-left-radius: 20px
  • margin-left: 2px
  • margin-right: 2px

Slider Paging Link (State: Hover)

  • background-color: rgba(0,0,0,0.7)

Slider Paging Link (State: Active)

  • background-color: rgba(0,0,0,0.9)

Slider Paging Link (State: Hover)

  • background-color: rgba(0,0,0,0.7)

Slider Paging Link (State: Active)

  • background-color: rgba(0,0,0,0.9)

This article was last updated for version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress