Custom Styles
If you would like to modify the skin with a minor amount of custom styles, add them to the skin.css located in your Portals/_default/Skins/VividBlueSkins folder.
The most common styles are described below. Change the values of the appropriate CSS attributes to customize the site according to your needs.
Note: colors are specified in HEX and RGBA format, i.e. #xxxxxx , grba(0, 0, 0, 0.1)
0.1 is used for the transparency level of a specific style.
General styles
Changing background colors
The default main section background color can be changed in line 5 of the skin.css: body { background: url(images/Bg.png) repeat #f6f6f6 !important;} This is the main bgcolor which changes all skin color for top line, header slider area, top panes for the home skin, inner skin page titles, Inner skin breadcrumb, and Footer line.
The default color and font of the main paragraph text can be changed in line 174 of the skin.css:
body, html, TH, TD, td, div , p, table, li, blockquote {color: #434343; font-size:15px; font-family:'droid_sansregular', Arial, Verdana, Helvetica, sans-serif;}
The default link style can be changed in line 210 and the hover color in line 211 of the skin.css:
/* Default link syle */
A:Link, A:Visited, A:Active , a * {color: #169fe6;}
A:Hover {color: #017cbc;}
Changing Heading Scheme h1 h2 h3
Styles that are responsible for the color and font-family of H1-H6 headings can be changed in the following lines of the skin.css: (Line no . 40-45)
/* H1 */H1 , h1 {color: #333333;} /* H2 */H2 , h2 {color: #444444;}
/* H3 */H3 , h3 {color: #169fe6;} /* H4 */H4 , h4 {color: #333333;}
/* H5 */H5 , h5 {color: #787878;} /* H6 */H6 , h6 {color: #444444;}
Changing color scheme
Please review our demo site to see a preview of the different skin colors:
http://vivid.t-worxsites.com/
The #169fe6 color is used for the default color scheme.
All element styles that depend on this color (for example, the color of links while hovering, and others) are localized in the CSS files below.
skin.css
container.css
WebControlSkin/TWBar/PanelBar.TWBar.css (For sidemenu)
If you want to change the default #169fe6 skin color, just use the Find and Replace function in your HTML/Text editor.
Top Panes and Footer : color, background, font, hover effect:
Style can be changed in /TWMenu/TWMenu.css file (in the skins folder) for the footer.
.BottomMain .ContainerTitle { color: #fff !important;}
.BottomMain * { color: #fff !important;}
.BottomMain * { color: #999 !important; }
.BottomMain * a:hover { color: #169fe6 !important; }
Changing main menu: color, background, font, hover effect:
Style can be changed in the TWMenu/TWMenu.css file (in the skins folder) for menus.
The background style can be changed on line no. 1:
#dnnMenu{ background: none; }
Font styles can be changed in line 17:
#dnnMenu .rootMenu li a div div { color:#fff; font-family: 'droid_sansregular', Arial, Helvetica, sans-serif; font-size:14px; }
The dropdown menu bg can be changed in line 22:
#dnnMenu ul ul {background: #fff;}
Submenu hover style can be changed in line no 31 and 33
#dnnMenu .subMenu li.TWselected > a div, #dnnMenu .subMenu li.TWbreadcrumb > a div,
#dnnMenu .subMenu li.item a:hover div {background:#f5f5f5;}
#dnnMenu .subMenu li.TWselected.haschild > a div,
#dnnMenu .subMenu li.TWbreadcrumb.haschild > a div,
#dnnMenu .subMenu li.item.haschild > a:hover div
{background: #f5f5f5; }
Changing Mega menu: color, background, font, hover effect:
Style can be changed in the /TWMenu/TWMenu.css file (in the skins folder) for menus.
Font styles can be changed in line 28:
ul.dnnGlobalNav li.dgn-root a div div {color:#fff; font-family: 'droid_sansregular', Arial, Helvetica, sans-serif; font-size:14px; }
Dropdoen menu bg can be changed in line 25:
.NavPane ul .dnnSubNav {background: #fff;}
Mega Submenu hovewr style can be changed in lines 40 and 41:
.dnnSubNav li a:hover {background:#666666;}
.dnnSubNav li a:hover div div {background:#f5f5f5;}
Mobile menu: color, background, font, hover effect:
Style can be changed in the mobile.css file (in the skins folder) for menus.
Background style can be changed on lines 26 – 34:
#dnnMenu .rootMenu li a div , #dnnMenuMobi .rootMenu li a div{ }
The hover state can be changed in lines 36 – 43:
#dnnMenu .rootMenu li.selected a div, #dnnMenu .rootMenu li.breadcrumb a div , #dnnMenu .rootMenu li.rmhover a div, #dnnMenu .rootMenu li a:hover div ,
#dnnMenuMobi .rootMenu li.selected a div, #dnnMenuMobi .rootMenu li.breadcrumb a div , #dnnMenuMobi .rootMenu li.rmhover a div, #dnnMenuMobi .rootMenu li a:hover div{ }
Responsive Properties:
Please refer to our demo site for help with responsive properties: http://avenger.t-worxsites.com/Features/ResponsiveDesign.aspx
Containers:
Container colors and font styles can be changed in the container.css file (in the skins folder). We have clearly commented each container style.