Last Updated on October 26, 2024 by Neil Murray

Table of contents

CF7 Skins CSS Classes we use.

• Skins – metabox
• Form – overall
• Form_Items
• .Controls
• .Toolbar
• .AfterFormItems
  • AddOns Multi in .AfterFormItems
• RST
• InputItem
• InputItemMenu
• Operate
• Edit
• Control Edit
• Select
• Action [TODO]

Skins – metabox #

• .wrap
• .inside
• #cf7s – start point for CF7 Skins
• .cf7-42
• .cf7s
• .nav-tab-wrapper
• .nav-tab-content
• .tab-visual

.wrap #

.inside #

#cf7s #

.cf7-42 #

.cf7s #

.nav-tab-wrapper #

.nav-tab-content #

.tab-visual #

back to top

Form – overall #

• .cf7s-visual-root
• .Form
• .FormItems
• .Operate
• .Action

.cf7s-visual-root #

.Form #

.FormItems #

.Operate #

.Action #

back to top

Form_Items #

• .FormItems
• .Controls
• .FormNotice
• .Items

.FormItems #

.Controls #

.FormNotice #

back to top

.Items #

back to top

Controls #

• .Controls
• .Toolbar
• .AfterFormItems

.Controls #

.Toolbar #

.AfterFormItems #

back to top

.Toolbar #

• .Toolbar
• .Toolbar .options

.Toolbar #

.Toolbar .options #

back to top

.AfterFormItems #

.AfterFormItems

.AfterFormItems #

back to top

AddOns Multi in .AfterFormItems #

• .AfterFormItems_scroll
• .AfterFormItems_scroll_prev
• .AfterFormItems_tabs
• .AfterFormItems_ul

.AfterFormItems_scroll #

.AfterFormItems_scroll_prev #

.AfterFormItems_tabs #

.AfterFormItems_ul #

back to top

RST #

• .rst__tree
• .overflow
• .ReactVirtualized
• .ReactVirtualized_Grid__innerScrollContainer
• .rst__node
• .rst__lineBlock
• .rst__nodeContent
• RST.height
• RST.collapseButton
• RST.lineChildren
• RST.rowWrapper
• RST.row
• RST.moveHandle
• RST.rowContents
• RST.resize-triggers

RST.rst__tree #

RST.overflow #

RST.ReactVirtualized #

RST.ReactVirtualized_Grid__innerScrollContainer #

RST.rst__node #

.rst__lineBlock #

.rst__nodeContent #

RST.height #

RST.collapseButton #

RST.lineChildren #

RST.rowWrapper #

RST.row #

RST.moveHandle #

RST.rowContents #

RST.resize-triggers #

back to top

InputItem #

• .rowContents (RST)
• .rowContentsStart
  • .ItemIcon
  • .ItemLabel
• .rowContentsEnd
  • .InputItemType
  • .rowToolbar (RST)
  • .toolbarButton (RST)
  • .InputItemOptions
  • .fieldChangeSelect
  • .InputItemButtons
  • .InputItemButton

.rowContents #

.rowContentsStart #

.ItemIcon #

.ItemLabel #

.rowContentsEnd #

.InputItemType #

.rowToolbar #

.toolbarButton #

.InputItemOptions #

.fieldChangeSelect #

.InputItemButtons #

.InputItemButton #

back to top

InputItemMenu #

• .rowContentsEnd (Menu)
• .InputItemType
• .rowToolbar
• .toolbarButton
• .InputItemOptions
• .InputItemButtons
• .InputItemButton

.rowContentsEnd (Menu) #

.InputItemType #

.rowToolbar #

.toolbarButton #

.InputItemOptions #

.InputItemButtons #

.InputItemButton #

.InputItemButton Addon #

back to top

Operate #

.Operate #

back to top

Edit #

• .edit
• .fieldChangeSelect
• .attribute
• .label
• .value
• .button

.edit #

.fieldChangeSelect #

.attribute #

.label #

.value #

button #

back to top

Control Edit #

• .editOptions
• .visualTextarea

.editOptions #

.visualTextarea #

back to top

Select #

• .select
• .select H3
• .cf7tagsContainer
  • .cf7tagsEven
  • SelectItem
  • .cf7tagsOdd
• .tipsContainer
• .cf7skinsItemsContainer

.select #

.select H3 #

.cf7tagsContainer #

.cf7tagsEven #

.cf7tagsOdd #

.tipsContainer #

.cf7skinsItemsContainer #

back to top

SelectItem #

• .elemContainer
  • .node
  • .typcn

.elemContainer #

.node #

.typcn #

back to top

Component #

.Class #

Further reading:

• Edit Component
• .rowContents

---

Notes

Add notes here

Save all Images to Sync – use ..\Sync\..\Images\CSS\