XF Style Properties Dictionary 1.0.0

8/9/2019 XF Style Properties Dictionary 1.0.0

http://slidepdf.com/reader/full/xf-style-properties-dictionary-100 1/123

XenForo Style Properties Dictionary

An oversight of the available style properties within XenForo.

A detailed list of all the style options available in XenForo 1.0.0.

11/20/201 1 Author: Peter Schmitz – SchmitzIT

http://www.schmitzit.com/

http://www.schmitzit.com/



© www.schmitzit.com

1

Table of ContentsColor Palette - The set of colours used to build this style. ..................................................................... 9

General - General style settings for this style. ...................................................................................... 10

Settings.............................................................................................................................................. 10

HTML (@html)................................................................................................................................... 10

Body (@body) ................................................................................................................................... 10

Content (@content) .......................................................................................................................... 11

Page Width Controller (@pageWidth) .............................................................................................. 11

Inline Moderation Checked (@InlineModChecked) ......................................................................... 12

Page Title (@h1) ................................................................................................................................ 12

Page Description (@pageDescription) .............................................................................................. 13

Avatar (@avatar) ............................................................................................................................... 13

Link (@link) ....................................................................................................................................... 14

Link (hover state) (@linkHover) ........................................................................................................ 14

Building Blocks - Controls building block classes used for the vast majority of the XenForo interface.

.............................................................................................................................................................. 15

Section (@section) ............................................................................................................................ 15

Section Main (@sectionMain) .......................................................................................................... 15

Heading (@heading) ......................................................................................................................... 16

Sub-Heading (@subHeading) ............................................................................................................ 16

Sub-Heading, Hover State (@subHeadingHover) ............................................................................. 17

Text-Heading (@textHeading) .......................................................................................................... 17

Primary Content (@primaryContent) ............................................................................................... 18

Primary Content Link (@primaryContentLink) ................................................................................. 18

Secondary Content (@secondaryContent) ....................................................................................... 19

Secondary Content Link (@secondaryContentLink) ......................................................................... 19

Section Footer (@sectionFooter)...................................................................................................... 20

Header and Navigation - Controls the appearance of the header and navigation elements of all

pages. .................................................................................................................................................... 21

Settings.............................................................................................................................................. 21

Header (@header) ............................................................................................................................ 21

Navigation Tabs Container (@navTabs)............................................................................................ 21




2

Navigation Tab (@navLink) ............................................................................................................... 22

Selected Tab (@navTabSelected) ..................................................................................................... 22

Selected Tab Sub-Link (@navTabLink) .............................................................................................. 23

Selected Tab Link, Hover State (@navTabLinkHover)....................................................................... 23

Alert Balloon (@alertBalloon) ........................................................................................................... 24

Alert Balloon Arrow (@alertBalloonArrow) ...................................................................................... 24

Breadcrumb - Controls the breadcrumb unit, which allows users to navigate back up to the site home

page. ...................................................................................................................................................... 25

Container (@breadBox) .................................................................................................................... 25

Breadcrumb (@breadcrumb) ............................................................................................................ 25

Item Container (@breadcrumbItemCrust) ....................................................................................... 26

Item Content (@breadcrumbItemCrumb) ........................................................................................ 26

Item Content, Hover State (@breadcrumbItemCrumbHover) ......................................................... 27

Item Content, First Item (@breadcrumbItemFirstCrumb) ............................................................... 27

Item Content, Last Item (@breadcrumbItemLastCrumb)................................................................. 28

Item Arrow, Outer (@breadcrumbItemArrowOuter) ....................................................................... 28

Item Arrow, Inner (@breadcrumbItemArrowInner) ......................................................................... 29

Board Title (@breadcrumbBoardTitle) ............................................................................................. 29

Jump Menu Trigger (@breadcrumbItemJumpMenuTrigger) ........................................................... 30Call-to-action Button (@breadcrumbTopCtrl) .................................................................................. 30

Footer - Controls the bottom of the page. ........................................................................................... 31

Main Container (@footer) ................................................................................................................ 31

Link (@footerLink) ............................................................................................................................ 31

Link, Hover State (@footerLinkHover) .............................................................................................. 32

Left Content Block (@footerLeftBlock) ............................................................................................. 32

Right Content Block (@footerRightBlock) ........................................................................................ 33

PageNav, Link Groups and Tabs - Controls multi-page links, link groups and tabs other than those in

the header. ............................................................................................................................................ 34

Settings.............................................................................................................................................. 34

PageNav / Link Group Container (@pageNavLinkGroup) ................................................................ 34

PageNav Container (@pageNav) ...................................................................................................... 35

PageNav Item Link (@pageNavLink) ................................................................................................. 35

PageNav Page Link (@pageNavPage) ............................................................................................... 36

PageNav Current Page Link (@pageNavCurrentPage) ...................................................................... 36




3

PageNav Page Link, Hover State (@pageNavPageHover) ................................................................. 37

PageNav Scroll Button (@pageNavScroller) ..................................................................................... 37

Link Group Link (@linkGroupLink) .................................................................................................... 38

Tabs Container (@tabsContainer) .................................................................................................... 38

Tab (@tab) ........................................................................................................................................ 39

Tab, Hover State (@tabHover) .......................................................................................................... 39

Tab, Selected (@tabActive)............................................................................................................... 40

SideBar – Controls the XenForo sidebar and various elements that appear within it. ........................ 41

Sidebar (@sidebar) ........................................................................................................................... 41

Visitor Panel Avatar (@visitorPanelAvatar) ...................................................................................... 41

Visitor Panel Username (@visitorPanelUsername) .......................................................................... 42

Visitor Panel Stats (@visitorPanelStats) ........................................................................................... 42

Block Heading (@sidebarBlockHeading) ........................................................................................... 43

Block Footnote (@sidebarBlocknote) ............................................................................................... 43

Avatar List Item (@sidebarAvatarListItem)....................................................................................... 44

Avatar List Avatar (@sidebarAvatarListAvatar) ................................................................................ 44

Avatar List Username (@sidebarAvatarListUsername) .................................................................... 45

Avatar List User Title (@sidebarAvatarListUserTitle) ....................................................................... 45

User List Username (@sidebarUserListUsername) ........................................................................... 46

User List Invisible Username (@sidebarUserListUsernameInvisible) ............................................... 46

User List Followed Username (@sidebarUserListUsernameFollowed) ............................................ 46

Followed Users (@sidebarFollowedUsers) ....................................................................................... 47

Followed Users Item (@sidebarFollowedUsersItem) ....................................................................... 47

Followed Users Avatar (@sidebarFollowedUsersAvatar) ................................................................. 48

Forms – Defines the layout and style of most forms in Xenforo. ......................................................... 49

Settings.............................................................................................................................................. 49Control Unit (@ctrlUnit) ................................................................................................................... 49

Label Area (@ctrlUnitLabel) .............................................................................................................. 50

Label Hints (@ctrlUnitLabelHint) ...................................................................................................... 50

Label Inline Errors (@ctrlUnitLabelError) ......................................................................................... 51

Controls Area (@ctrlUnitCtrl) ........................................................................................................... 51

Text Control (@textCtrl) ................................................................................................................... 52

Text Control, Monospace / Code (@textCtrlCode) ........................................................................... 52




4

Text Control, Disabled State (@textCtrlDisabled) ............................................................................ 53

Text Control Placeholder Text (@formElementPrompt) .................................................................. 53

Text Control, Focussed State (@textCtrlFocus) ................................................................................ 54

Textarea, Focussed State (@textCtrlTextareaFocus) ........................................................................ 54

Control Explanatory Text (@ctrlUnitCtrlExplain) .............................................................................. 55

Buttons – Contains properties used to style the various types of buttons used by XenForo. ............. 56

Button (@button) ............................................................................................................................. 56

Button, Focus State (@buttonFocus) ................................................................................................ 56

Button, Hover State (@buttonHover) ............................................................................................... 57

Button, Active State (@buttonActive) .............................................................................................. 57

Sign-up Now Button Container (@signupButton) ............................................................................ 58

Sign-up Now Button Inner (@signupButtonInner) ........................................................................... 58

Sign-up Now Button Hover State (@signupButtonHover) ............................................................... 59

Sign-up Now Button Active State (@signupButtonActive) ............................................................... 59

Call-to-Action Button Container (@callToAction) ............................................................................. 60

Call-to-Action Button Inner (@callToActionSpan) ............................................................................ 60

Call-to-Action Button, Hover State (@callToActionHover) ............................................................... 61

Call-to-Action Button, Active State (@callToActionActive) .............................................................. 61

Overlays and Tooltips – Styling for overlays and tooltips that allow content to be displayed on-top ofregular page content. ............................................................................................................................ 62

Settings.............................................................................................................................................. 62

General Overlay Container (@overlaySection) ................................................................................. 62

Overlay Close Gadget (@overlayCloseControl) ................................................................................ 63

AJAX Progress Indicator (@ajaxProgress) ......................................................................................... 63

Redirect Message Container (@redirectMessage) ........................................................................... 64

Redirect Message Content (@redirectMessageContent) ................................................................. 64

Tooltip (@tooltip) ............................................................................................................................. 65

Tooltip Arrow (@tooltipArrow) ........................................................................................................ 65

Preview Tooltip (@previewTooltip) .................................................................................................. 66

Preview Tooltip Arrow (Outer) (@previewTooltipArrowOuter) ....................................................... 66

Preview Tooltip Arrow (Inner) (@previewTooltipArrowInner) ........................................................ 67

Form-Type Overlays – Controls the appearance of form-type overlays and their content. ................ 68

Container (@formOverlay) .............................................................................................................. 68




5

Heading (@formOverlayHeading)..................................................................................................... 68

Sub-Heading (@formOverlaySubHeading) ....................................................................................... 69

Text Heading (@formOverlayTextHeading) ...................................................................................... 69

Link (@formOverlayLink) .................................................................................................................. 70

Button (@formOverlayButton) ......................................................................................................... 70

Label Hint (@formOverlayLabelHint) ............................................................................................... 70

Text Control (@formOverlayTextCtrl)............................................................................................... 71

Text Control, Focus State (@formOverlayTextCtrlFocus) ................................................................. 71

Text Control Placeholder Text (@formOverlayTextCtrlPrompt) ...................................................... 72

Text Control, Disabled State (@formOverlayTextCtrlDisabled) ....................................................... 72

Tabs Container (@formOverlayTabs) ............................................................................................... 72

Tab (@formOverlayTab) ................................................................................................................... 73

Tab, Hover State (@formOverlayTabHover) ..................................................................................... 73

Tab, Active / Selected (@formOverlayTabActive) ............................................................................ 74

Tab Panel (@formOverlayTabPanel)................................................................................................. 74

Popup Menus – Styling for most popup menu elements can be found here. ...................................... 75

Popup Control (closed, hover) (@popupControlClosedHover) ........................................................ 75

Popup Control (open) (@popupControl) .......................................................................................... 76

Popup Control Arrow (closed) (@popupArrowClosed) .................................................................... 76

Popup Control Arrow (open) (@popupArrowOpen) ........................................................................ 77

Menu (@menu) ................................................................................................................................. 77

Menu Header Title (@menuHeaderTitle) ......................................................................................... 77

Menu Header Subtitle (@menuHeaderSubtitle) .............................................................................. 77

Menu Links Container (@blockLinksList) .......................................................................................... 78

Menu Link (@blockLinksListItem) ..................................................................................................... 78

Menu Link, Hover State (@blockLinksListItemHover) ...................................................................... 79Menu Link, Active State (@blockLinksListItemActive) ...................................................................... 79

Menu Link, Selected State (@blockLinksListItemSelected) .............................................................. 80

Forum List – Controls the appearance of the list of forums, categories, pages etc. ............................ 81

Settings.............................................................................................................................................. 81

Category Strip (@categoryStrip) ....................................................................................................... 81

Category Strip Title (@categoryStripTitle) ........................................................................................ 82

Category Strip Description (@categoryStripDescription) ................................................................. 82




6

Node Icon (@nodeIcon) .................................................................................................................... 83

Node Text Block (@nodeText) .......................................................................................................... 83

Node Title (@nodeTitle) ................................................................................................................... 84

Node Title - Unread (@nodeTiteUnread) ......................................................................................... 84

Node Description (@nodeDescription) ............................................................................................. 85

Node Statistics (@nodeStats) ........................................................................................................... 85

Node Last Post (@nodeLastPost) ...................................................................................................... 86

Tiny Icon (@nodeTinyIcon) ............................................................................................................... 86

Tiny Icon - Hover (@nodeTinyIconHover) ......................................................................................... 87

Description Tooltip (@nodeDescriptionTip) ..................................................................................... 87

Description Tooltip Arrow (@nodeDescriptionTipArrow) ................................................................ 88

Discussion List – Controls the appearance of the list of discussions within a forum or a conversation

etc. ........................................................................................................................................................ 89

Settings.............................................................................................................................................. 89

Discussion Starter Avatar (@discussionListAvatar) .......................................................................... 89

Mini-Me Container (@discussionListMiniMe) .................................................................................. 90

Mini-Me Image (@discussionListMiniMeImg) .................................................................................. 90

First Row Text (@discussionListFirstRow) ........................................................................................ 91

Second Row Text (@discussionListSecondRow) ............................................................................... 91Title (Unread) (@discussionListTitleUnread) .................................................................................... 92

Discussion Flag (@discussionListIcon) .............................................................................................. 92

Item Page Nav Item (@discussionListItemPageNavItem) ................................................................. 93

Item Page Nav Link (@discussionListItemPageNavLink) ................................................................... 93

Item Page Nav Link, Hover State (@discussionListItemPageNavLinkHover) .................................... 94

Options Panel Form (@discussionListOptions) ................................................................................. 94

Options Panel Handle (@discussionListOptionsHandle) .................................................................. 95

Options Panel Handle Link (@discussionListOptionsHandleLink) .................................................... 95

Message Layout – Controls the layout of the full-size message template. .......................................... 96

Message List (@messageList) ........................................................................................................... 96

Message Container (@message) ...................................................................................................... 96

User Info Container (@messageUserInfo) ........................................................................................ 97

User Info Block (@messageUserBlock) ............................................................................................. 97

Avatar Holder (@messageAvatarHolder) ......................................................................................... 98




7

User Text Block (@messageUserText) .............................................................................................. 98

Extra User Info (@messageExtraUserInfo) ....................................................................................... 99

Content Container (@messageInfo) ................................................................................................. 99

Rich Text Editor Content (@editorContent) ................................................................................... 100

Main Content (@messageContent) ................................................................................................ 100

Controls Area (@messageMeta) ..................................................................................................... 101

Notices (@messageNotice) ............................................................................................................. 101

Likes (@messageLikesSummary) .................................................................................................... 102

Message Elements – Controls the content area of the full message template. ................................. 103

Settings............................................................................................................................................ 103

Author Username (@messageUsername) ...................................................................................... 103

Author User Title (@messageUserTitle) ......................................................................................... 104

Message Text (@messageText) ...................................................................................................... 104

Signature (@messageSignature) ..................................................................................................... 105

User-Generated Link (@ugcLink) .................................................................................................... 105

User-Generated Link (hover) (@ugcLinkHover) .............................................................................. 106

‘Private’ Controls Container (@messagePrivateControls) .............................................................. 106

‘Public’ Controls Container (@MessagePublicControls) ................................................................. 107

Control (@messageMetaControl) .................................................................................................. 107

Control, Focus State (@messageMetaControlFocus) ..................................................................... 108

Control, Hover State (@messageControlHover) ............................................................................. 108

Control, Active State (@messageMetaControlActive) ................................................................... 109

New Indicator (Outer) (@messageNewIndicator) .......................................................................... 109

New Indicator (Inner) (@messageNewIndicatorInner) .................................................................. 110

BB Code Elements –Controls the appearance of BB code elements within messages. ..................... 111

BB Code Block (@bbCodeBlock) ..................................................................................................... 111BB Code Block Type Row (@bbCodeBlockType) ............................................................................. 111

BB Code Pre / Code (@bbCodeCode) ............................................................................................. 112

BB Code Quote (@bbCodeQuote) .................................................................................................. 112

Quote Attribution Block (@bbCodeQuoteAttribution) .................................................................. 113

BB Code Quote Message (@bbCodeQuoteMessage) ..................................................................... 113

Member List Item – Styles the blocks used for each member on the member list. ........................... 114

Settings............................................................................................................................................ 114




8

List Item Container (@memberListItem) ........................................................................................ 114

Avatar (@memberListItemAvatar) ................................................................................................. 114

User Info Container (@memberListItemMember) ......................................................................... 114

Username (@memberListItemUsername) ..................................................................................... 115

Username (Guests) (@memberListItemGuest) .............................................................................. 115

User Info (@memberListItemUserInfo) .......................................................................................... 116

User Title (@memberListItemUserTitle) ......................................................................................... 116

Content Info (@memberListItemContent) ..................................................................................... 116

Extra Content (@memberListItemExtra) ........................................................................................ 116

User Status Tooltip (@statusTooltip) .............................................................................................. 117

User Status Tooltip Arrow (@statusTooltipArrow) ......................................................................... 117

Member Profile Page – Style properties for pages showing detailed information about members. 118

Settings............................................................................................................................................ 118

Profile Page Container (@profilePage) ........................................................................................... 118

Sidebar Info Block (@profilePageSidebarInfoBlock) ....................................................................... 119

Sidebar Info Field Name (@profilePageSidebarInfoBlockDt) ......................................................... 119

Sidebar Info Field Value (@profilePageSidebarInfoBlockDd) ......................................................... 120

User Name (@profilePageUsername) ............................................................................................ 120

User Status Text (@profilePageUserStatus) ................................................................................... 120

Last Activity Text (@profilePageLastActivityText) .......................................................................... 121

Tab (@profilePageTab) ................................................................................................................... 121

Tab, Hover State (@profilePageTabHover)..................................................................................... 121

Tab, Selected State (@profilePageTabSelected) ............................................................................ 122




9

Color Palette - The set of colours used to build this style. @pageBackground

@contentBackGround

@textCtrlBackground

@contentText

@textCtrlText

@dimmedTextColor

@mutedTextColor

@faintTextColor

@tooltipBackground

@inlineMod

@primaryDarker

@primaryDark@primaryMedium

@primaryLightish

@primaryLight

@primaryLighter

@primaryLighterStill

@primaryLightest

@secondaryDarker

@secondaryDark@secondaryMedium

@secondaryLight

@secondaryLighter

@secondaryLightest

Note: The section is called Color palette, where the description mentions colours (additional u).




10

General - General style settings for this style.

Settings

o Path to Images (imagePath) - This path represents either the relative or absolute

path to images used by the XenForo user interface. You may change this to point to a

CDN if you wish.

o Enable Animations, Using Multiplier - If you enable animations, you can adjust the

speed using the multiplier. 1: Normal speed, 0.5: double speed, 2: half speed etc.

o Facebook Plugin Color Scheme - Choose a color scheme for all Facebook plugins in

this style.

HTML (@html)

This property controls the browser background and text.

o

Text

Color Size Font Family Bold Italic

Small Caps Underline Overline Line-Through No text

decoration

o Background

Color Image Repeat Position

o Miscellaneous – Use this box to enter any additional CSS you would like to include.

Body (@body)

This property controls the CSS for the main <body> element of the XenForo pages.

Primarily, it is used for text styling, which is inherited by almost all other elements within

XenForo.

o

Text



decoration

o

Background


o

Border

All Color Style Width Radius Margin Padding

Top Color Style Width Radius Margin Padding

Right Color Style Width Radius Margin Padding

Bottom Color Style Width Radius Margin Padding

Left Color Style Width Radius Margin Padding

o

Miscellaneous

Width

Height

Other – Use this box to enter any additional CSS you would like to include.




11

Content (@content)

The styling of the main page area is controlled with this property.

Its primary function is to provide the content background color.

o Text



decoration

o

Background


o Border




Bottom Color Style Width Radius Margin PaddingLeft Color Style Width Radius Margin Padding

o Miscellaneous

Width

Height


Page Width Controller (@pageWidth)

The width of the page is controlled with this property. Use this to switch between liquid and

fixed layouts.

Liquid example: width: auto; margin: 020px;Fixed example: width: 960px; margin: auto;

o

Border

All Margin Padding

Top Margin Padding

Right Margin Padding

Bottom Margin Padding

Left Margin Padding

o Miscellaneous

Width

Height





12

Inline Moderation Checked (@InlineModChecked)

The values specified here will be applied to items selected for inline moderation.

o Text



decoration

o

Background


o Border





Left Color Style Width Radius Margin Paddingo

Miscellaneous

Width

Height


Page Title (@h1)

This styles the <H1> page title.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





13

Page Description (@pageDescription)

Styles the optional description text that may be presented below the page title.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Avatar (@avatar)

Controls the display of most avatars (user identity pictures) shown throughout the system.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





14

Link (@link)

The default styling for textual hyperlinks.

o Text



decoration

o

Miscellaneous


Link (hover state) (@linkHover)

Styles normal textual links when hovered.

o Text


Small Caps Underline Overline Line-Through No textdecoration

o Miscellaneous





15

Building Blocks - Controls building block classes used for the vast

majority of the XenForo interface.

Section (@section)

Wraps around most content.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height


Section Main (@sectionMain)

A specially emphasized version of 'Section'.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height





16

Heading (@heading)

Big, important headings

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Note: Missing period (.) at end of description

Sub-Heading (@subHeading)

Smaller, more commonly-used headings

o Text



decoration

o Background


o Border





o Miscellaneous

Width

Height






17

Sub-Heading, Hover State (@subHeadingHover)

Occasionally, sub-headings may be used as block-level links. In these cases, this property

controls what happens to the sub-heading link on hover.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


Text-Heading (@textHeading)

A minor heading

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height






18

Primary Content (@primaryContent)

Most content uses this property

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height



Primary Content Link (@primaryContentLink)

Styling for links within primaryContent containers.

o Text



decoration

o Miscellaneous







20

Section Footer (@sectionFooter)

Footnotes or summary for a section

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height






21

Header and Navigation - Controls the appearance of the header and

navigation elements of all pages.

Settings

o

Header Logo Image Path (headerLogoPath) - This path describes the location of themain logo image used in the header of all pages.

o

Height of Header Logo (headerLogoHeight) - Enter the height in pixels that you

would like to reserve for the logo in the header.

o Facebook Open Graph Logo - This logo will be displayed in Facebook when a visitor

likes a page on your site. Must be at least 50x50 and should be square.

o Header Tab Height (headerTabHeight)

Header (@header)

Styling for the header background

o

Text Color Size Font Family Bold Italic


decoration

o Background



Navigation Tabs Container (@navTabs)

Controls the container for the header navigation tabs.

o

Text



decoration

o Background


o Border


Top Color Style Width Radius Margin PaddingRight Color Style Width Radius Margin Padding



o Miscellaneous

Width

Height





22

Navigation Tab (@navLink)

Controls each individual navigation tab link.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Selected Tab (@navTabSelected)

Styles the currently-selected header navigation tab.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





23

Selected Tab Sub-Link (@navTabLink)

Styles each link in the row of controls below the selected navigation tab.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Selected Tab Link, Hover State (@navTabLinkHover)

Styles links under the selected navigation tab, in their hover state.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





24

Alert Balloon (@alertBalloon)

Controls the appearance of the balloons that appear above Inbox and Alerts in the

navigation bar to indicate unread items.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


Alert Balloon Arrow (@alertBalloonArrow)

Controls the appearance of the pointer-arrow attached to alert balloons.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height





25

Breadcrumb - Controls the breadcrumb unit, which allows users to

navigate back up to the site home page.

Container (@breadBox)

Controls the container within which the breadcrumb sits.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height


Breadcrumb (@breadcrumb)

Controls the main breadcrumb unit.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height





26

Item Container (@breadcrumbItemCrust)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height


Note: Missing description.

Item Content (@breadcrumbItemCrumb)

o

Text

Color Size Font Family Bold ItalicSmall Caps Underline Overline Line-Through No text

decoration

o Background


o Border






o

Miscellaneous

Width

Height






27

Item Content, Hover State (@breadcrumbItemCrumbHover)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height



Item Content, First Item (@breadcrumbItemFirstCrumb)

o

Text


decoration

o Background


o Border






o

Miscellaneous

Width

Height






28

Item Content, Last Item (@breadcrumbItemLastCrumb)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Item Arrow, Outer (@breadcrumbItemArrowOuter)

o

Text


decoration

o Background


o Border






o

Miscellaneous

Width

Height






29

Item Arrow, Inner (@breadcrumbItemArrowInner)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Board Title (@breadcrumbBoardTitle)

You may optionally display the board title at the head of your breadcrumb.

o

Text



decoration

o Background


o Border





o

Miscellaneous

Width

Height





30

Jump Menu Trigger (@breadcrumbItemJumpMenuTrigger)

You may optionally display the board title at the head of your breadcrumb.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


- Note: Missing description.

Call-to-action Button (@breadcrumbTopCtrl)

Sometimes the top breadcrumb is associated with a call to action button. This property

controls the container for that button.

o

Text



decoration

o Background


o Border



Right Color Style Width Radius Margin PaddingBottom Color Style Width Radius Margin Padding


o Miscellaneous

Width

Height





31

Footer - Controls the bottom of the page.

Main Container (@footer)

Controls the appearance of the container for the upper footer section.

o

Text



decoration

o Background


o Border





o

Miscellaneous

Width

Height


Link (@footerLink)

Styling for links in the main header section

o



decoration

o Background


o Border





o

Miscellaneous

Width

Height






32

Link, Hover State (@footerLinkHover)

Styling to be added to links in the main footer section in their hover state.

o Text



decoration

o

Background


o Miscellaneous

Width

Height


Left Content Block (@footerLeftBlock)Styles the container of the style and language chooser trigger controls.

o

Text



decoration

o Background


o Border






o Miscellaneous

Width

Height





33

Right Content Block (@footerRightBlock)

Styles the block of links usually shown on the right of the footer.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





34

PageNav, Link Groups and Tabs - Controls multi-page links, link

groups and tabs other than those in the header.

Settings

o

Link Group Link Spacing ( linkGroupLinkSpacing) - Controls the amount of separationbetween items in link groups.

o

PageNav Link Width ( pageNavLinkWidth) - This width is the basis for all page

navigation links.

o PageNav Link Spacing ( pageNavLinkSpacing) - Controls the amount of space between

individual page navigation links.

PageNav / Link Group Container (@pageNavLinkGroup)

This element is used in instances where a page navigation block is placed alongside a group

of links, such as above the list of threads on the forum view, or above the list of messages on

thread view.

o

Text



decoration

o Background


o Border






o Miscellaneous

Width

Height





35

PageNav Container (@pageNav)

The container for the page navigation element, normally controls overall elements such as

font size etc.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


PageNav Item Link (@pageNavLink)

Used to style each individual page navigation link including pages, next and previous

buttons, and the scroll arrows.

o Text



decoration

o Background


o Border





o Miscellaneous

Width

Height





36

PageNav Page Link (@pageNavPage)



o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


PageNav Current Page Link (@pageNavCurrentPage)



o Text



decoration

o Background


o Border





o Miscellaneous

Width

Height





37

PageNav Page Link, Hover State (@pageNavPageHover)

Controls the appearance of page links when the mouse hovers over them.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


PageNav Scroll Button (@pageNavScroller)

Controls the appearance of the scroll buttons that appear when more than seven pages are

available.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height





38

Link Group Link (@linkGroupLink)

Individual links within link groups, as defined above.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Tabs Container (@tabsContainer)

Controls the appearance of tabbed user interfaces other than those in the navigation bar.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





39

Tab (@tab)

Controls the appearance of individual tabs in general tabbed interfaces.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Tab, Hover State (@tabHover)

Controls general tabs in their hover state.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height







41

SideBar – Controls the XenForo sidebar and various elements that

appear within it.

Sidebar (@sidebar)

Controls the layout of the sidebar element.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height


Visitor Panel Avatar (@visitorPanelAvatar)

Layout for the visitor panel. The image size is controlled by the @visitorPanelAvatarSize

property.

o

Text



decoration

o Border





o

Miscellaneous

Width

Height





42

Visitor Panel Username (@visitorPanelUsername)

Layout for the visitor panel. The image size is controlled by the @visitorPanelAvatarSize

property.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


Visitor Panel Stats (@visitorPanelStats)

o Text


decoration

o Background


o

Border





Left Color Style Width Radius Margin Paddingo Miscellaneous

Width

Height


Note: no description






44

Avatar List Item (@sidebarAvatarListItem)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Avatar List Avatar (@sidebarAvatarListAvatar)

o Text



decoration

o Background


o

Border






Width

Height






45

Avatar List Username (@sidebarAvatarListUsername)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Avatar List User Title (@sidebarAvatarListUserTitle)

o Text



decoration

o Background


o

Border






Width

Height






46

User List Username (@sidebarUserListUsername)

o Text



o

Miscellaneous

Width

Height



User List Invisible Username (@sidebarUserListUsernameInvisible)

o



decoration

o Miscellaneous

Width

Height



User List Followed Username (@sidebarUserListUsernameFollowed)

o Text



decoration

o Miscellaneous

Width

Height






47

Followed Users (@sidebarFollowedUsers)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Followed Users Item (@sidebarFollowedUsersItem)

o Text



decoration

o Background


o

Border






Width

Height






48

Followed Users Avatar (@sidebarFollowedUsersAvatar)

o Text



o

Border






o Miscellaneous

Width

Height






49

Forms – Defines the layout and style of most forms in Xenforo.

Settings

o Form Width (formwidth) - Controls the width of forms using the .xenForm class.

o

Form Control Unit Label Width (ctrlUnitLabelWidth) - Defines the width of the label

area to the left of form control units.

o Form Control Unit Controls Indent Width (formCtrlIndent) - Defines the amount that

controls should be indented from controls upon which they depend.

o Form Control Unit Edge Spacer ( ctrlUnitEdgeSpacer) - Defines a horizontal spacing

either side of control units.

o

Form Width in Overlays (overlayFormWidth) - Controls the width of forms using the

.xenForm class when being shown in an overlay.

o Form Control Unit Label Width in Overlays (overlayCtrlUnitLabelWidth) - Defines the

width of the label area to the left of form control units within overlays.

Control Unit (@ctrlUnit)

Controls the individual blocks around which forms in XenForo are built.

o

Text



decoration

o

Background


o

Border All Color Style Width Radius Margin Padding





o

Miscellaneous

Width

Height







51

Label Inline Errors (@ctrlUnitLabelError)

Controls the display of any inline validation errors that appear with form element labels.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Controls Area (@ctrlUnitCtrl)

Styles the area containing the actual form controls and any explanation text within the

control unit.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height





52

Text Control (@textCtrl)

Styling to be applied to <input type="text" /> and <textarea> text-editing elements.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Text Control, Monospace / Code (@textCtrlCode)

Additional styling to be applied to text controls if they are to contain code rather than

regular text.

o Text



decoration

o Miscellaneous

Width

Height





53

Text Control, Disabled State (@textCtrlDisabled)

Additional styling to be applied to text controls in their disabled state.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Text Control Placeholder Text (@formElementPrompt)

Styling for placeholder / prompt text in text controls.

o Text



decoration

o

Miscellaneous

Width

Height





54

Text Control, Focussed State (@textCtrlFocus)

Styling to be applied to text controls when they receive focus.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Textarea, Focussed State (@textCtrlTextareaFocus)

Additional styling to be applied to text controls when focused if they are multi-line

textarea types.

o Text



decoration

o Miscellaneous

Width

Height





55

Control Explanatory Text (@ctrlUnitCtrlExplain)

Styles longer explanatory text that may appear below form controls in control units.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





56

Buttons – Contains properties used to style the various types of

buttons used by XenForo.

Button (@button)

This property controls the .button class, which is used for form controls and action buttons

throughout the system.

o

Text



decoration

o Background


o Border






o

Miscellaneous

Width

Height


Button, Focus State (@buttonFocus)

o

Text



decoration

o Background


o Border






o

Miscellaneous

Width

Height


-





57

Button, Hover State (@buttonHover)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height


- Note: no description

Button, Active State (@buttonActive)

o Text



o Background


o Border






o

Miscellaneous

Width

Height






58

Sign-up Now Button Container (@signupButton)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height



Sign-up Now Button Inner (@signupButtonInner)

o Text



o Background


o Border






o

Miscellaneous

Width

Height






59

Sign-up Now Button Hover State (@signupButtonHover)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height



Sign-up Now Button Active State (@signupButtonActive)

o Text



o Background


o Border






o

Miscellaneous

Width

Height






60

Call-to-Action Button Container (@callToAction)

Controls the style of major call to action buttons such as 'Reply to Thread'.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Call-to-Action Button Inner (@callToActionSpan)

Controls the <span> inside call to action buttons

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


- Note: Missing period (.) at end of description




61

Call-to-Action Button, Hover State (@callToActionHover)

Used to style the mouse-over / hover state of call to action buttons.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Call-to-Action Button, Active State (@callToActionActive)

Something about the active state of hover buttons.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





62

Overlays and Tooltips – Styling for overlays and tooltips that allow

content to be displayed on-top of regular page content.

Note: The description is missing

Settingso Enable Overlays - You may disable all overlays and instead load full pages by

switching off this option.

o Overlay Mask Color (overlayMaskColor)

o Overlay Mask Opacity (overlayMaskOpacity) - Controls the degree of transparency of

the mask applied to the background content when an overlay is shown. Default: 0.6;

fully transparent: 0; fully opaque: 1.

o

Overlay Top Position (overlayTop) - Default position of overlays relative to the top of

the browser window.

o Overlay Opening Speed (overlaySpeed) – Speed in milliseconds for overlays to fade

in. Default: 200.o

Overlay Closing Speed (overlayClosingSpeed) - Speed in milliseconds for overlays to

fade out. Default: 100.

General Overlay Container (@overlaySection)

This is the property that controls the main container for overlays, including their border and

shadow etc.

o

Text



o Background


o Border






o

Miscellaneous

Width

Height


Note: missing comma in description before etc.




63

Overlay Close Gadget (@overlayCloseControl)

Styles the 'close' gadget that is added when no other control is provided to close an overlay.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


AJAX Progress Indicator (@ajaxProgress)

This styles the element that appears when AJAX operations are in progress.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





64

Redirect Message Container (@redirectMessage)

Styles the container for redirect messages that appear after some forms are submitted with

AJAX.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


Redirect Message Content (@redirectMessageContent)

Styles the content of redirect messages shown after AJAX submissions.

o Text



decoration

o Background


o Border





o Miscellaneous

Width

Height





65

Tooltip (@tooltip)

The basic styling for all generic XenForo tooltips.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Tooltip Arrow (@tooltipArrow)

The extra arrow often shown with tooltips.

o Border






o Miscellaneous

Width

Height





66

Preview Tooltip (@previewTooltip)

This defines the style of the element used for thread, and other content preview tooltips.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Preview Tooltip Arrow (Outer) (@previewTooltipArrowOuter)

Styles the arrow attached to content preview tooltips that points to the content.

o Border






o Miscellaneous

Width

Height





67

Preview Tooltip Arrow (Inner) (@previewTooltipArrowInner)

Styles the arrow attached to content preview tooltips that points to the content.

o Border






o Miscellaneous

Width

Height


Note: Missing description




68

Form-Type Overlays – Controls the appearance of form-type overlays

and their content.

Container (@formOverlay)

Controls the appearance of form-type overlays.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height


Heading (@formOverlayHeading)

Major headings within form-type overlays.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height





69

Sub-Heading (@formOverlaySubHeading)

Controls minor headings within form-type overlays.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Text Heading (@formOverlayTextHeading)

Controls textual headings within form-type overlays.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height







71

Text Control (@formOverlayTextCtrl)

Alters the appearance of text controls within form-type overlays.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Text Control, Focus State (@formOverlayTextCtrlFocus)

Controls text controls in form overlays when focused.

o Text



decoration

o

Background


o

Border






Width

Height





72

Text Control Placeholder Text (@formOverlayTextCtrlPrompt)

Controls the placeholder / prompt text within text controls in form overlays.

o Text



decoration

Text Control, Disabled State (@formOverlayTextCtrlDisabled)

Controls disabled text controls in form overlays.

o Text



decoration

o

Background


o

Border






o Miscellaneous

Width

Height


Tabs Container (@formOverlayTabs)

Controls the appearance of tabs within form overlays.

o Text



decoration

o

Background


o

Border






o Miscellaneous

Width

Height




73


Tab (@formOverlayTab)

Controls the appearance of individual tabs within form overlays.

o



decoration

o Background


o Border






o

Miscellaneous

Width

Height


Tab, Hover State (@formOverlayTabHover)

Controls hovered tabs on form overlays.

o

Text



decoration

o Background


o Border






o

Miscellaneous

Width

Height





74

Tab, Active / Selected (@formOverlayTabActive)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height



Tab Panel (@formOverlayTabPanel)

Control the panel that sits below a collection of tabs in a form overlay.

o Text


decoration

o Background


o

Border






Width

Height





75

Popup Menus – Styling for most popup menu elements can be found

here.Note: The description is missing

Settings

o Minimum Menu Width (menuMinWidth) - Defines the minimum width for all pop-up

menus.

o Minimum Menu Height (menuMinHeight) - The minimum height for pop-up menus.

Popup Control (closed, hover) (@popupControlClosedHover)

Controls the appearance of popup controls as the mouse passes over them when the menu is

closed.

o

Text


decoration

o Background


o Miscellaneous

Width

Height


Note: Inconsistent naming. Control, where elsewhere “ctrl” is used.




76

Popup Control (open) (@popupControl)

Popup menu trigger elements

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Note: Inconsistent naming. Control, where elsewhere “ctrl” is used. Missing period (.) at end

of description

Popup Control Arrow (closed) (@popupArrowClosed)

Points down, indicates the menu can be opened

o

Text



decoration

o Background


o Border





o Miscellaneous

Width

Height






77

Popup Control Arrow (open) (@popupArrowOpen)

Indicates that the menu can be closed

o Background

Color Image Repeat PositionNote: Missing period (.) at end of description

Menu (@menu)

The main container for the pop-up part of pop-up menus.

o Text



decoration

o

Background


o

Border






o Miscellaneous

Width

Height Other – Use this box to enter any additional CSS you would like to include.

Menu Header Title (@menuHeaderTitle)

The large text that appears at the top of pop-up menus..

o

Text



decoration

Menu Header Subtitle (@menuHeaderSubtitle)

The smaller text that sometimes appears below the main menu title.

o

Text



decoration




78

Menu Links Container (@blockLinksList)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height



Menu Link (@blockLinksListItem)

o

Text


decoration

o Background


o Border






o

Miscellaneous

Width

Height


-





79

Menu Link, Hover State (@blockLinksListItemHover)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Menu Link, Active State (@blockLinksListItemActive)

o Text



decoration

o Background


o

Border






Width

Height






80

Menu Link, Selected State (@blockLinksListItemSelected)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height






81

Forum List – Controls the appearance of the list of forums, categories,

pages etc.

Note: Missing comma before etc. in the style properties description.In RC2, the description is missing

Settingso Show Forum Descriptions on Node List - Include descriptions underneath node titles

on the main node list.

o Enable Forum Descriptions Tooltips - Show descriptions only when hovering over

forum titles on the main node list.

o

Forum Icon Path – Read (forumIconReadPath) - Path to the icon shown for unread

forums.

o

Forum Icon Path – Unread (forumIconUnreadPath)


o Page Icon Path (pageIconPath)

Note: Missing descriptiono

Link Icon Path (linkIconPath)


o Feed Icon Path (feedIconPath) - Path to the RSS feed icon shown on forums.

Category Strip (@categoryStrip)

Applied to level one (no parent) categories. The majority of the styles for category strips

come by default from the @subHeading style property.

o

Text


decoration

o Background


o Border






o

Miscellaneous

Width

Height





82

Category Strip Title (@categoryStripTitle)

o Text



decoration

o

Background


o

Border






o

Miscellaneous Width

Height



Category Strip Description (@categoryStripDescription)

o Text



o Background


o Border






o

Miscellaneous

Width

Height






83

Node Icon (@nodeIcon)

Controls the large icon shown on forum, page and link nodes.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Node Text Block (@nodeText)

This controls the area within which the main text for node display is contained.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





84

Node Title (@nodeTitle)

Controls the display of non-category node titles

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Node Title - Unread (@nodeTiteUnread)

Extra properties to apply to node titles when they contain unread content.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





85

Node Description (@nodeDescription)

Controls the display of non-tooltip node description text.

o Text



o

Background


o

Border






o

Miscellaneous

Width

Height


Node Statistics (@nodeStats)

Controls the display of the total number of discussions, messages etc.

o Text



decoration

o

Background


o

Border






Width

Height







87

Tiny Icon - Hover (@nodeTinyIconHover)

Changes to be made to tiny icons when the mouse moves over them

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height



Description Tooltip (@nodeDescriptionTip)

o Text


decoration

o Background


o

Border






o Miscellaneous

Width

Height






88

Description Tooltip Arrow (@nodeDescriptionTipArrow)

The triangle / arrow attached to node description tooltips

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height






89

Discussion List – Controls the appearance of the list of discussions

within a forum or a conversation etc.

Note: Missing comma before etc. in the style properties description.

Settingso Show forum descriptions on thread list - Display text underneath the main page title.

Note: Setting name uses lowercase, whereas others use first letter capitalized.

o Hide item page navigator unless hovered - This option allows the multi-page

navigator shown on discussion list items with multiple pages to remain hidden until

the item is moused-over.

Note: Setting name uses lowercase, whereas others use first letter capitalized.

o

Avatar Cell Width (discussionListAvatarWidth) - Controls the width of the avatar cell.o

Stats Cell Width (discussionListStatsWidth) – Controls the width of the statistics cell.

o

Last Message Cell Width (discussionListLastPostWidth) – Controls the width of the

‘last message’ cell.

Discussion Starter Avatar (@discussionListAvatar)

Controls the appearance of the avatar of the user who started the discussion.

o Background


o

Border






o Miscellaneous

Width

Height





90

Mini-Me Container (@discussionListMiniMe)

Mini-Me is the small avatar of the current visitor that shows up on discussions in which the

visitor has posted.

o Background


o Border






o Miscellaneous

Width

Height Other – Use this box to enter any additional CSS you would like to include.

Mini-Me Image (@discussionListMiniMeImg)

Mini-Me is the small avatar of the current visitor that shows up on discussions in which the

visitor has posted.

o Background

Color Image Repeat Positiono Border






o Miscellaneous

Width

Height





91

First Row Text (@discussionListFirstRow)

Controls the display of text on the first row of discussion list items, including the title.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Second Row Text (@discussionListSecondRow)

Controls the second row of text for discussion list items.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height





92

Title (Unread) (@discussionListTitleUnread)

Alters the display of discussion list item titles when they contain unread messages.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Discussion Flag (@discussionListIcon)

Controls the appearance of flags / icons for discussions such as sticky, locked etc.

o Border






o Miscellaneous

Width

Height





93

Item Page Nav Item (@discussionListItemPageNavItem)

Controls individual items within the discussion page nav.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Item Page Nav Link (@discussionListItemPageNavLink)

o Text



o

Background


o Border






o

Miscellaneous

Width

Height






94

Item Page Nav Link, Hover State (@discussionListItemPageNavLinkHover)

Changes applied to page links on hover.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Options Panel Form (@discussionListOptions)

Controls the appearance of the display options panel that can appear below the

discussion list.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height





95

Options Panel Handle (@discussionListOptionsHandle)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Options Panel Handle Link (@discussionListOptionsHandleLink)

o

Text



decoration

o Background


o Border





o

Miscellaneous

Width

Height






96

Message Layout – Controls the layout of the full-size message

template.

Message List (@messageList)

This is the container used for lists of messages.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height


Message Container (@message)

This element entirely surrounds each message.

o Text



decoration

o Background


o Border






o Miscellaneous

Width

Height







98

Avatar Holder (@messageAvatarHolder)

Styles the block that surrounds the large avatar for a message author.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


User Text Block (@messageUserText)

Styles the container for the author username and user title next to messages.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height







100

Rich Text Editor Content (@editorContent)

The content of the rich text editor should appear in the same colors, fonts etc. as your

messages. If it does not, you can use this style property to tweak the appearance.

o Text



decoration

o

Background


o Border





o Miscellaneous

Width

Height


Main Content (@messageContent)

This is used to enclose the message text and any other user-generated content for the

message, such as attached files.

o Text



decoration

o Background


o Border





o Miscellaneous

Width

Height





101

Controls Area (@messageMeta)

This block sits below the main content area and includes the inline moderation checkbox, permalink

and message controls.

o Text



decoration

o Background


o Border





o Miscellaneous

Width

Height


Notices (@messageNotice)

Notices are used to display information such as the message being in the moderation queue,

or being deleted.

o

Text



decoration

o Background


o Border





o Miscellaneous

Width

Height





102

Likes (@messageLikesSummary)

This styles the block that displays the summary of users who have liked the message.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height







104

Author User Title (@messageUserTitle)

Controls the appearance of the user title displayed with the message poster's username.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Message Text (@messageText)

The text shown in the body of full-size messages will be controlled by the values set in this

property.

It does not apply to small messages, such as profile posts and comments, which use the text

styling from 'body'.

o Text



decoration

o Miscellaneous

Width Height







106

User-Generated Link (hover) (@ugcLinkHover)

Hovered user-generated links.

o Text



decoration

o Background


o

Border






Miscellaneous

Width

Height


‘Private’ Controls Container (@messagePrivateControls)

Container for controls generally seen only by privileged visitors - Edit, Delete, IP etc.

o Text



decoration

o

Background


o

Border





o

Miscellaneous

Width

Height





107

‘Public’ Controls Container (@MessagePublicControls)

Container for controls seen by general visitors - Like, Reply etc.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Control (@messageMetaControl)

Defines the appearance of message controls such as Edit, Delete, Like, Reply.

o Text



decoration

o

Background


o

Border





o Miscellaneous

Width

Height





108

Control, Focus State (@messageMetaControlFocus)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



Control, Hover State (@messageControlHover)

o

Text



decoration

o Background


o Border





o Miscellaneous

Width

Height






109

Control, Active State (@messageMetaControlActive)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height



New Indicator (Outer) (@messageNewIndicator)

o

Text



decoration

o Background


o Border





o Miscellaneous

Width

Height






110

New Indicator (Inner) (@messageNewIndicatorInner)

o Text



o

Background


o

Border






o

Miscellaneous Width

Height








112

BB Code Pre / Code (@bbCodeCode)

Styles the area containing code such as [php], [html] and [code].

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


BB Code Quote (@bbCodeQuote)

This definition is used together with the BB Code Block definition to provide styling for

[QUOTE] blocks.

o



decoration

o

Background


o

Border





o Miscellaneous

Width

Height





113

Quote Attribution Block (@bbCodeQuoteAttribution)

Controls the appearance of the attribution row that sits above a quoted message.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


BB Code Quote Message (@bbCodeQuoteMessage)

This styling applies to the message area of [QUOTE] blocks, styling the actual quoted

message itself.

o



decoration

o

Background


o

Border





o Miscellaneous

Width

Height





114

Member List Item – Styles the blocks used for each member on the

member list.

Settings

o

Fixed Column Width (memberListItemExtendedWidth - Width of fixed column inextended member list items.

List Item Container (@memberListItem)

Controls the appearance of the container for member list items.

o

Miscellaneous


Avatar (@memberListItemAvatar)This property applies to the user avatar shown in member list items.

o Miscellaneous


User Info Container (@memberListItemMember)

Controls the style of the container for everything in the member list item except the user

avatar.

o



decoration

o Miscellaneous





115

Username (@memberListItemUsername)

Applies to the main username link on member list items.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


Username (Guests) (@memberListItemGuest)

Applied in addition to the regular username styling.

o Text


decoration

o

Miscellaneous





116

User Info (@memberListItemUserInfo)

This property is applied to the contain for all user info underneath the main username link.

o Text



decoration

o

Background


o Border






Miscellaneous

Width

Height


User Title (@memberListItemUserTitle)

User titles in member list items are styled with this property.

o Text


decoration

o

Miscellaneous


Content Info (@memberListItemContent)

Sometimes, info about a post or thread etc. will be shown inside a member list item. This

applies styling to that content.

o

Miscellaneous


Extra Content (@memberListItemExtra)

On occasions, extra content is added to member list items. Use this to restyle it.

o

Text



decoration

o

Miscellaneous







118

Member Profile Page – Style properties for pages showing detailed

information about members.

Settings

o

Sidebar Width (profilePageSidebarWidth) - Specifies the width of the sidebar for themember profile page. This sidebar is usually the same width as the large avatar.

o

Tab Height (profilePageTabHeight) - Controls the height of the tabs on the profile

page.

o Tab Inset (profilePageTabInset) - Controls the amount of indent from the notional

left margin to the tabs area.

Profile Page Container (@profilePage)

Styles the outer container for the profile page elements.

o



decoration

o

Background


o

Border





o

Miscellaneous

Width

Height







120

Sidebar Info Field Value (@profilePageSidebarInfoBlockDd)

Styles the values for fields in sidebar info blocks.

o Text



decoration

o

All Margin Padding

Top Margin Padding


Bottom Margin Padding

Left Margin Padding

o Miscellaneous

Width

Height

User Name (@profilePageUsername)

Styles the large heading showing the name of the person whose profile page this is.

o

Text



decoration

User Status Text (@profilePageUserStatus)

Styles the text of the current user status message, if shown.

o Text



decoration

o

All Margin Padding

Top Margin Padding


Bottom Margin PaddingLeft Margin Padding

o Miscellaneous

Width

Height






Tab, Selected State (@profilePageTabSelected)

Additional styling for the selected tab on the profile page.

o Text



decoration

o

Background


Date post:	01-Jun-2018
Category:	Documents
Upload:	ariainvictus
View:	229 times
Download:	0 times

XF Style Properties Dictionary 1.0.0

Documents