Paty Freitas : O significado dos grupos no CSS: Decodificando o estilo do seu site

O significado dos grupos no CSS: Decodificando o estilo do seu site

O significado dos grupos no CSS

Você já se perguntou como a magia acontece nos bastidores do seu site?

Como as cores, fontes e estilos são definidos para criar uma experiência visual envolvente para seus visitantes?

Neste artigo vamos fazer um passeio pelo mundo do design de sites, vamos explorar o que está por trás das princais linguagens, analisando o código CSS que dá vida à estética do seu site.

Você vai entender o significado de cada grupo de estilos.

Bora lá!

Na caixa abaixo estará todo código após ele vou explicar o que cada grupo representa no código CSS:

   "/* Variable definitions
   ====================

<Group description="Cor de fundo do menu" selector=".menu-outer ">
<Variable name="menu.background.color" description="Background Color" type="color" default="#141414" value="#5e1098"/>
<Variable name="menu.selected.background.color" description="Cor do fundo do menu hover" type="color" default="#444444" value="#320952"/>
<Variable name="submenu.background.color" description="Cor de fundo do submenu" type="color" default="#444444" value="#f0eded"/>
<Variable name="submenu.selected.background.color" description="Cor do fundo do submenu hover" type="color" default="#444444" value="#5e1098"/>
</Group>
<Group description="Fontes do menu" selector=".menu-inner .widget li a">
<Variable name="menu.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Calibri"/>
<Variable name="menu.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
<Variable name="menu.selected.text.color" description="Selected Color" type="color" default="$(menu.text.color)" value="#ffffff"/>
<Variable name="submenu.text.color" description="Submenu Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
<Variable name="submenu.text.color.hover" description="Submenu Text Color Hover" type="color" default="$(body.text.color)" value="#ffffff"/>
</Group>


   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff" value="#ffffff"/>

   <Group description="Page" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.background.color" description="Background Color" type="color" default="#000000" value="#ffffff"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#ffffff" value="#632766"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#888888" value="#41b375"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#444444" value="#0F9D58"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#cccccc" value="#5e1098"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 35px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)"  value="#5e1098"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="description.text.color" description="Text Color" type="color"
         default="$(body.text.color)"  value="#632766"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(tabs.text.color)" value="#5e1098"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#141414" value="transparent"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#444444" value="transparent"/>
     <Variable name="tabs.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
   </Group>

   <Group description="Date Header" selector=".main-inner .widget h2.date-header, .main-inner .widget h2.date-header span">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 3px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 3px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#666666" value="#888888"/>
     <Variable name="date.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
   </Group>

   <Group description="Post Background" selector=".post">
     <Variable name="post.background.color" description="Background Color" type="color" default="$(widget.background.color)"  value="#ffffff"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="$(widget.border.color)"  value="transparent"/>
     <Variable name="post.border.bevel.color" description="Bevel Color" type="color" default="$(widget.border.color)" value="transparent"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
   </Group>

   <Group description="Gadget Text" selector=".sidebar .widget">
     <Variable name="widget.font" description="Font" type="font"
        default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#666666" value="#5e1098"/>
   </Group>

   <Group description="Gadget Links" selector=".sidebar .widget">
     <Variable name="widget.link.color" description="Link Color" type="color" default="$(link.color)" value="#444444"/>
     <Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#888888"/>
     <Variable name="widget.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#5e1098"/>
   </Group>

   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="#141414" value="#ffffff"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="transparent"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="#EEEEEE"/>
   </Group>

   <Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">
     <Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>
   </Group>

   <Group description="Feed" selector=".blog-feeds">
      <Variable name="feed.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#532766"/>
   </Group>

   <Group description="Feed Links" selector=".blog-feeds">
     <Variable name="feed.link.color" description="Link Color" type="color" default="$(link.color)" value="#888888"/>
     <Variable name="feed.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#282828"/>
     <Variable name="feed.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#5e1098"/>
   </Group>

   <Group description="Pager" selector=".blog-pager">
     <Variable name="pager.background.color" description="Background Color" type="color" default="$(post.background.color)"  value="transparent"/>
   </Group>

   <Group description="Footer" selector=".footer-outer">
     <Variable name="footer.background.color" description="Background Color" type="color" default="$(widget.background.color)"  value="#282828"/>
     <Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)"  value="#ffffff"/>
   </Group>

   <Variable name="title.shadow.spread" description="Title Shadow" type="length" default="-1px" min="-1px" max="100px" value="-1px"/>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="#000000 url(none) repeat scroll top left"/>
   <Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
       default="none" value="none"/>
   <Variable name="body.background.size" description="Body Background Size" type="string" default="auto" value="auto"/>

   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="none" value="none"/>

   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none"  value="none"/>
   <Variable name="header.padding.top" description="Header Top Padding" type="length" default="22px" min="0" max="100px" value="22px"/>
   <Variable name="header.margin.top" description="Header Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="header.margin.bottom" description="Header Bottom Margin" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="8px" min="0" max="20px" value="8px"/>
   <Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="widget.outer.background.gradient" description="Gradient" type="url" default="none"  value="none"/>
   <Variable name="widget.border.radius" description="Gadget Border Radius" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="outer.shadow.spread" description="Outer Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="date.header.border.radius.top" description="Date Header Border Radius Top" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="date.header.position" description="Date Header Position" type="length" default="15px" min="0" max="100px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="date.position" description="Date Float" type="string" default="static"  value="static"/>
   <Variable name="date.padding.bottom" description="Date Padding Bottom" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="date.border.size" description="Date Border Size" type="length" default="0" min="0" max="10px" value="0"/>
   <Variable name="date.background" description="Date Background" type="background" color="transparent"
       default="$(color) none no-repeat scroll top left"  value="$(color) none no-repeat scroll top left"/>
   <Variable name="date.first.border.radius.top" description="Date First top radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
   <Variable name="date.last.space.bottom" description="Date Last Space Bottom" type="length"
       default="20px" min="0" max="100px" value="20px"/>
   <Variable name="date.last.border.radius.bottom" description="Date Last bottom radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="image.shadow.spread" description="Image Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="image.border.radius" description="Image Border Radius" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="separator.outdent" description="Separator Outdent" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="title.separator.border.size" description="Widget Title Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="list.separator.border.size" description="List Separator Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="shadow.spread" description="Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>

   <Variable name="date.side" description="Side where date header is placed" type="string" default="$(endSide)" value="right"/>

   <Variable name="pager.border.radius.top" description="Pager Border Top Radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
   <Variable name="pager.space.top" description="Pager Top Space" type="length" default="1em" min="0" max="20em" value="1em"/>

   <Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none"  value="none"/>

   <Variable name="mobile.background.size" description="Mobile Background Size" type="string"
       default="$(body.background.size)" value="auto"/>
   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>
*/
"

   "/* Variable definitions
   ====================

<Group description="Cor de fundo do menu" selector=".menu-outer ">
<Variable name="menu.background.color" description="Background Color" type="color" default="#141414" value="#5e1098"/>
<Variable name="menu.selected.background.color" description="Cor do fundo do menu hover" type="color" default="#444444" value="#320952"/>
<Variable name="submenu.background.color" description="Cor de fundo do submenu" type="color" default="#444444" value="#f0eded"/>
<Variable name="submenu.selected.background.color" description="Cor do fundo do submenu hover" type="color" default="#444444" value="#5e1098"/>
</Group>
<Group description="Fontes do menu" selector=".menu-inner .widget li a">
<Variable name="menu.font" description="Font" type="font"
default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Calibri"/>
<Variable name="menu.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
<Variable name="menu.selected.text.color" description="Selected Color" type="color" default="$(menu.text.color)" value="#ffffff"/>
<Variable name="submenu.text.color" description="Submenu Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
<Variable name="submenu.text.color.hover" description="Submenu Text Color Hover" type="color" default="$(body.text.color)" value="#ffffff"/>
</Group>


   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff" value="#ffffff"/>

   <Group description="Page" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.background.color" description="Background Color" type="color" default="#000000" value="#ffffff"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#ffffff" value="#632766"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#888888" value="#41b375"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#444444" value="#0F9D58"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#cccccc" value="#5e1098"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 35px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)"  value="#5e1098"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="description.text.color" description="Text Color" type="color"
         default="$(body.text.color)"  value="#632766"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(tabs.text.color)" value="#5e1098"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#141414" value="transparent"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#444444" value="transparent"/>
     <Variable name="tabs.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
   </Group>

   <Group description="Date Header" selector=".main-inner .widget h2.date-header, .main-inner .widget h2.date-header span">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 3px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 3px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#666666" value="#888888"/>
     <Variable name="date.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="transparent"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
   </Group>

   <Group description="Post Background" selector=".post">
     <Variable name="post.background.color" description="Background Color" type="color" default="$(widget.background.color)"  value="#ffffff"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="$(widget.border.color)"  value="transparent"/>
     <Variable name="post.border.bevel.color" description="Bevel Color" type="color" default="$(widget.border.color)" value="transparent"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#5e1098"/>
   </Group>

   <Group description="Gadget Text" selector=".sidebar .widget">
     <Variable name="widget.font" description="Font" type="font"
        default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#666666" value="#5e1098"/>
   </Group>

   <Group description="Gadget Links" selector=".sidebar .widget">
     <Variable name="widget.link.color" description="Link Color" type="color" default="$(link.color)" value="#444444"/>
     <Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#888888"/>
     <Variable name="widget.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#5e1098"/>
   </Group>

   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="#141414" value="#ffffff"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="transparent"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="#EEEEEE"/>
   </Group>

   <Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">
     <Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>
   </Group>

   <Group description="Feed" selector=".blog-feeds">
      <Variable name="feed.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#532766"/>
   </Group>

   <Group description="Feed Links" selector=".blog-feeds">
     <Variable name="feed.link.color" description="Link Color" type="color" default="$(link.color)" value="#888888"/>
     <Variable name="feed.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#282828"/>
     <Variable name="feed.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#5e1098"/>
   </Group>

   <Group description="Pager" selector=".blog-pager">
     <Variable name="pager.background.color" description="Background Color" type="color" default="$(post.background.color)"  value="transparent"/>
   </Group>

   <Group description="Footer" selector=".footer-outer">
     <Variable name="footer.background.color" description="Background Color" type="color" default="$(widget.background.color)"  value="#282828"/>
     <Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)"  value="#ffffff"/>
   </Group>

   <Variable name="title.shadow.spread" description="Title Shadow" type="length" default="-1px" min="-1px" max="100px" value="-1px"/>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="#000000 url(none) repeat scroll top left"/>
   <Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
       default="none" value="none"/>
   <Variable name="body.background.size" description="Body Background Size" type="string" default="auto" value="auto"/>

   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="none" value="none"/>

   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none"  value="none"/>
   <Variable name="header.padding.top" description="Header Top Padding" type="length" default="22px" min="0" max="100px" value="22px"/>
   <Variable name="header.margin.top" description="Header Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="header.margin.bottom" description="Header Bottom Margin" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="8px" min="0" max="20px" value="8px"/>
   <Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="widget.outer.background.gradient" description="Gradient" type="url" default="none"  value="none"/>
   <Variable name="widget.border.radius" description="Gadget Border Radius" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="outer.shadow.spread" description="Outer Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="date.header.border.radius.top" description="Date Header Border Radius Top" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="date.header.position" description="Date Header Position" type="length" default="15px" min="0" max="100px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="date.position" description="Date Float" type="string" default="static"  value="static"/>
   <Variable name="date.padding.bottom" description="Date Padding Bottom" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="date.border.size" description="Date Border Size" type="length" default="0" min="0" max="10px" value="0"/>
   <Variable name="date.background" description="Date Background" type="background" color="transparent"
       default="$(color) none no-repeat scroll top left"  value="$(color) none no-repeat scroll top left"/>
   <Variable name="date.first.border.radius.top" description="Date First top radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
   <Variable name="date.last.space.bottom" description="Date Last Space Bottom" type="length"
       default="20px" min="0" max="100px" value="20px"/>
   <Variable name="date.last.border.radius.bottom" description="Date Last bottom radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="image.shadow.spread" description="Image Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="image.border.radius" description="Image Border Radius" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="separator.outdent" description="Separator Outdent" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="title.separator.border.size" description="Widget Title Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="list.separator.border.size" description="List Separator Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="shadow.spread" description="Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>

   <Variable name="date.side" description="Side where date header is placed" type="string" default="$(endSide)" value="right"/>

   <Variable name="pager.border.radius.top" description="Pager Border Top Radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
   <Variable name="pager.space.top" description="Pager Top Space" type="length" default="1em" min="0" max="20em" value="1em"/>

   <Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none"  value="none"/>

   <Variable name="mobile.background.size" description="Mobile Background Size" type="string"
       default="$(body.background.size)" value="auto"/>
   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>
*/
"

GRUPO 1 - (Group description="Cor de fundo do menu")

Cor de fundo do menu . Neste grupo, são definidas as cores de fundo para o menu do site. Isso inclui a cor de fundo padrão e a cor de fundo quando o mouse paira sobre o menu.

GRUPO 2 - (Group description="Fontes do menu")

Fontes do menu. Neste grupo, são definidas as fontes e cores de texto para os itens do menu, incluindo a cor do texto padrão e a cor do texto quando um item do menu está selecionado.

GRUPO 3 - (Group description="Links")

Links. Este grupo lida com as cores dos links no site, incluindo a cor padrão dos links, a cor quando um link é visitado e a cor quando o mouse paira sobre um link.

GRUPO 4 - (Group description="Blog Title")

Blog Title. Aqui, são definidas as propriedades de estilo para o título do blog, incluindo a fonte, a cor do texto e a cor de fundo.

GRUPO 5 - (Group description="Blog Description")

Blog Description. Neste grupo, são definidas as propriedades de estilo para a descrição do blog, como a fonte e a cor do texto.

GRUPO 6 - (Group description="Tabs Text")

Tabs Text. Este grupo trata do estilo dos textos nas abas do site, incluindo a fonte, a cor do texto padrão e a cor do texto quando uma aba está selecionada.

GRUPO 7 - (Group description="Tabs Background")

Tabs Background. Aqui são definidas as cores de fundo para as abas do site, incluindo a cor de fundo padrão e a cor de fundo quando uma aba está selecionada.

GRUPO 8 - (Group description="Date Header")

Date Header. Este grupo lida com a estilização dos cabeçalhos de datas, incluindo a fonte, a cor do texto e as bordas.

GRUPO 9 - (Group description="Post Title")

Post Title. Neste grupo, são definidas as propriedades de estilo para os títulos das postagens, como a fonte e a cor do texto.

GRUPO 10 - (Group description="Post Background")

Post Background. Aqui são definidas as cores de fundo das postagens, bem como as bordas.

GRUPO 11 - (Group description="Gadget Title")

Gadget Title. Este grupo lida com o estilo dos títulos dos gadgets, incluindo a fonte e a cor do texto.

GRUPO 12 - (Group description="Gadget Text")

Gadget Text. Aqui, são definidas as propriedades de estilo para o texto nos gadgets, como a fonte e a cor do texto.

GRUPO 13 - (Group description="Gadget Links")

Gadget Links. Este grupo trata das cores dos links nos gadgets, incluindo a cor padrão dos links, a cor quando um link é visitado e a cor quando o mouse paira sobre um link.

GRUPO 14 - (Group description="Gadget Background")

Gadget Background. Neste grupo, são definidas as cores de fundo e as bordas dos gadgets.

GRUPO 15 - (Group description="Sidebar Background")

Sidebar Background. Aqui são definidas as cores de fundo para a barra lateral do site.

GRUPO 16 - (Group description="Images")

Images. Este grupo lida com as cores de fundo e as bordas de imagens no site.

GRUPO 17 - (Group description="Feed")

Feed. Aqui, são definidas as cores de texto para os feeds do site.

GRUPO 18 - (Group description="Feed Links")

Feed Links. Este grupo trata das cores dos links nos feeds, incluindo a cor padrão dos links, a cor quando um link é visitado e a cor quando o mouse paira sobre um link.

GRUPO 19 - (Group description="Pager")

Pager. Neste grupo, são definidas as cores de fundo para o paginador do site.

GRUPO 20 - (Group description="Footer")

Footer. Aqui são definidas as cores de fundo e as cores de texto para o rodapé do site.

Cada grupo representa uma seção específica do estilo do site e define várias propriedades de estilo, como cores, fontes e tamanhos. Isso permite personalizar a aparência e o design do site de acordo com as preferências do designer.

Agora que você mais sobre os códigos do seu site, quer se aprofundar ainda mais?

Aprenda mais nos contteus aqui do blog Desenvolvimento Web e Otimização

E confira também nosso canal