|
|
|
|
|
Search
|
|
|
|
|
|
|
|
|
What is it? Setup & Configuration Using the Design Gallery Using the Global Feature Helpful Tips Customizing Display |  | Stylizing the veCSSViewer Display
While there are defaut styles built into this module, you can completely customize the layout and display. You can apply the default styles to any module on your site by simply setting the CSS Class in the module settings to "MyCssViewerClass".
For Example:
|
Drop a new module on any page and add some new elements, like below
|
|
Go to the module configurations and add the name of the CSS Class you want to use
|
|
View the results
|
Hover menu display
These are the default styles you can use as reference. *There is a hover menu style shown below that displays good in Firefox, that I can't get to display in IE. 
If you can resolve this issue, or have a display that you'd like to share, please tell us about it!
|
Default veCSSViewer Module Styles
/*Main CssItemContainer*/
.MyCssViewerClass{
border-collapse: collapse;
border: 1px dashed #B85A7C;
background-color:#F6ECF0
}
/*Css Item Cells! */
.MyCssViewerClass td{
border: 1px dashed #B85A7C;
padding: .8em;
vertical-align: top;
text-align: center;
}
/*Css Item Hover*/
.MyCssViewerClass td:hover{
background-color:#641B35;
}
/*This is the Css Items Title Style*/
.MyCssViewerClass td span.SubHead{
color: #B85A7C;
font-weight: bold;
font-size:larger;
}
/*Title Hover*/
.MyCssViewerClass td span.SubHead:hover{
color:white;
}
/*This is the Css Items Description Style*/
.MyCssViewerClass td span.Normal{
color: #999999;
display:block;
height:50px;
}
/*Description Hover*/
.MyCssViewerClass td span.Normal:hover{
color:white;
}
/*This is the Css Item Image itself*/
.MyCssViewerClass tbody td input.imgItem{
padding:2px;
}
/*Css Item Image hover*/
.MyCssViewerClass tbody td input.imgItem:hover{
background-color: #F6ECF0;
} |
|
|
|
|
|
|
|
|
|
|
|
|
|