there are many changes in xoops.css
and it overrides the css definition in our custom theme
i use custom theme in my xoops site
as example in my custom theme i have define the css for form button in mysite
and now randomly i will see different design button for the form from xoops.css
xoops.css for 2.5
le="color: #000000"><?php /* $Id: xoops.css 5690 2010-11-05 14:48:38Z kris_fr $ */ /*=== FORMAT BASIC ELEMENTS, can be overwritten in theme styles ===*/ table {width: 100%; border-collapse:collapse; border-spacing: 0;} strong, b, dfn { font-weight: bold;} u {text-decoration: underline;} i, em { font-style: italic;} del { text-decoration: line-through;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} ins {text-decoration:none;} img { border: 0;} img.center { text-align: center; margin: 6px auto; display: block; margin-bottom: 4px; } img.left { text-align: left; float: left; margin: 2px 6px 2px 0; clear: left; } img.right { float: right; text-align: right; margin: 2px 0 2px 6px; clear: right; } acronym, abbr, dfn {cursor: help;} pre {overflow: auto;} #xoopsHiddenText { visibility: hidden; background-color: transparent; color: #000; font-weight: normal; font-style: normal; text-decoration: none; } /* for pagenav, can be overwritten in theme styles */ .pagneutral { font-size: 10px; width: 16px; height: 19px; text-align: center; background-image: url(./images/pagneutral.gif); } .pagact { font-size: 10px; width: 16px; height: 19px; text-align: center; background-image: url(./images/pagact.gif); } .paginact { font-size: 10px; width: 16px; height: 19px; text-align: center; background-image: url(./images/paginact.gif); } /* For required elements in XOOPS form */ .xoops-form-element-caption .caption-marker { display: none;} .xoops-form-element-caption-required .caption-marker { background-color: inherit; padding-left: 2px; color: #ff0000; } .xoops-form-element-help { font-size: .9em; padding-top: 5px; font-weight: normal; } /* forms basic style */ fieldset { border:0;} input, textarea, select {background-color: #fff; color: #000;} input[type=submit], input[type=reset], input[type=button], .xo-formbuttons, .formButton, button { background-color: #D3D2D6; color: #405A80; padding: 3px; } /* fix for swf banner */ #xo-fixbanner a { display: block; position: absolute; z-index: 102; width: 468px; height: 60px; } /* jGrowl redirection */ div.jGrowl {padding: 1em; z-index: 9999;} /* JGrowl Box position in the page */ body > div.jGrowl {position: fixed;} body > div.jGrowl.top-right {right: 25%; left: 25%; top: 2px;} body > div.jGrowl.bottom-left {left:0; bottom:0;} body > div.jGrowl.bottom-right {right:0; bottom:0;} body > div.jGrowl.center {top:0; left:0;} body > div.jGrowl.top-left {left:0; top:0;} /* jGrowl Box style */ div.center div.jGrowl-notification, div.center div.jGrowl-closer {margin-left: auto; margin-right: auto;} div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer { background-color: #EBFBFE; color: #000080; width: 100%; padding: .5em; margin-top: .5em; margin-bottom: .5em; font-family: Tahoma, Geneva, sans-serif; font-size: 1.2em; text-align: center; border: 1px solid #6699FF; display: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; } div.jGrowl div.jGrowl-notification {min-height: 40px;} div.jGrowl div.jGrowl-notification div.header {font-weight: bold; font-size: 10px;} /* jGrowl Close button */ div.jGrowl div.jGrowl-notification div.close {float: right; font-weight: bold; font-size: 12px; cursor: pointer;} div.jGrowl div.jGrowl-closer {height: 15px; padding-top: 4px; padding-bottom: 4px; cursor: pointer; font-size: 11px; font-weight: bold; text-align: center;} /*=== GENERIC CLASS, for use in themes, modules and contents ===*/ /* Position */ .floatleft{ float:left; margin:0; padding-left:4px; border:0; } .floatright{ float:right; margin:0; padding:2px; border:0; } .floatcenter0 {margin: 0 auto;} .floatcenter1 {margin: 1em auto;} .clear{ clear:both; height:0; font-size:0; line-height:0; } .clearleft{ clear:left;height:0;font-size:0;line-height:0; } .clearright{ clear:right; height:0; font-size:0; line-height:0; } .block{ display: block; } .inline {display: inline;} .blockinline { display: inline-block;} /* Texte */ .left, .txtleft { text-align: left; } .right, .txtright { text-align: right; } .center, .txtcenter { text-align: center; } .justify, .txtjustify { text-align: justify; } /* Table alignement */ .middle, .alignmiddle { vertical-align: middle;} .top, .aligntop { vertical-align: top;} .bottom, .alignbottom { vertical-align: bottom;} .positop{ margin-top:0;padding-top:0; } .posibottom{ margin-bottom:0;padding-bottom:0; } /* Others table div class */ .table {display:table;} .tcaption1 { display:block; width:100%; /* for 1 columns */} .tcaption2 { display:block; width:200%; /* for 2 columns */} .tcaption3 { display:block; width:300%; /* for 3 columns */} .tcaption4 { display:block; width:400%; /* for 4 columns */} .tcaption5 { display:block; width:500%; /* for 5 columns */} .tcaption6 { display:block; width:600%; /* for 6 columns */} .tbody { display:table-row-group;} .trow { display:table-row;} .tcell { display:table-cell;} .tfootend { width:auto;} .collapse {border-collapse: collapse;} .separate {border-collapse: separate;} .bspacing1 {border-spacing: 1px;} .bspacing2 {border-spacing: 2px;} .bspacing3 {border-spacing: 3px;} .bspacing4 {border-spacing: 4px;} .bspacing5 {border-spacing: 5px;} .bspacing10 {border-spacing: 10px;} /* Width */ .widthauto { width: auto;} .width100 { width: 100%;} .width90 { width: 90%} .width80 { width: 80%;} .width75 { width: 75%;} .width70 { width: 70%} .width66 { width: 66.6%} .width60 { width: 60%} .width50 { width: 49%;} .width45 { width: 45%} .width40 { width: 40%} .width33 { width: 33.3%;} .width30 { width: 30%;} .width25 { width: 25%;} .width20 { width: 20%;} .width15 { width: 15%;} .width10 { width: 10%;} .width5{ width: 5%; } .width3{ width: 3%; } .width2{ width: 2%; } .width1{ width: 1%; } /* Padding */ .pad2 {padding: 2px;} .pad3 {padding: 3px;} .pad5 {padding: 5px;} .pad7 {padding: 7px;} .pad10 {padding: 10px;} /* Margin */ .marg2 {margin: 2px;} .marg3 {margin: 3px;} .marg5 {margin: 5px;} .marg7 {margin: 8px;} .marg10 {margin: 10px;} /* Font */ .verysmall, .xx-small { font-size : .7em;} .smallsmall, .x-small { font-size: .8em;} .small { font-size: .92em;} .normal { font-size: 1em;} .big { font-size: 1.17em;} .maxi { font-size: 1.5em;} .bold { font-weight: bold;} .bolder { font-weight: bolder; } .lighter { font-weight: lighter; } .normal {font-weight: normal; font-style: normal;} .italic {font-style: italic;} .oblique { font-style: oblique; } .underline{ text-decoration:underline; } .expanded { letter-spacing: .5em; } .condensed { letter-spacing: -.1em; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform:capitalize; } /*======== line-height ======== */ .line100 { line-height: 1em;} .line120 { line-height: 1.2em;} .line140 {line-height: 1.4em;} .line160 {line-height: 1.6em;} .line170 {line-height: 1.7em;} .line180 {line-height: 1.8em;} .line200 {line-height: 2em;} .line220 {line-height: 2.2em;} .line240 {line-height: 2.4em;} /* Colors */ .red {background-color:transparent; color:#ff0000;} .blue {background-color:transparent; color:#0000ff;} .black {background-color:transparent; color:#000;} .white {background-color:transparent; color:#fff;} .yellow {background-color:transparent; color:#ffff00;} .orange {background-color:transparent; color:#ffa500;} .green { background-color:transparent; color:#008000;} .silver {background-color:transparent; color:#c0c0c0;} /* Hidden */ .hide{ display:none; } .hidden{ visibility:hidden; position:absolute; top:0; left:0; } /* Space */ .spacer{ padding:0 0 3px 0;} .separator { clear: both; float: left; height: 1px; width: 100%; } /* Cursor class */ .cursordefault{ cursor:default; } .cursormove{ cursor:move; } .cursorpointer{ cursor:pointer; } .cursorhelp{ cursor:help; } /*======== others opacity class ======== */ .opac5 { opacity:.5 !important; filter: alpha(opacity=50) !important;} .opac5:hover { opacity:1 !important; filter: alpha(opacity=100) !important;} .opac7 { opacity:.7 !important; filter: alpha(opacity=70) !important;} .opac7:hover { opacity:1 !important; filter: alpha(opacity=100) !important;} .opac1 {opacity: 1 !important; filter: alpha(opacity=100) !important;} .opac1:hover {opacity: .5 !important; filter: alpha(opacity=50) !important;} /*======== others radius class ======== */ .bradius3 { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;} .bradius5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .bradius10 { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} .bradius15 { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;} /*======== border class ======== */ .bnone {border:0;} .border{ border: 1px solid #000; } .dotted{ border: 1px dotted #000; } .dashed{ border: 1px dashed #000; } .solidblack { border : 1px solid #000;} .solidwhite { border : 1px solid #fff;} .solidred { border : 1px solid #ff0000;} .solidyellow { border : 1px solid #ffff00;} .solidblue { border : 1px solid #0000ff;} .solidorange { border : 1px solid #ffa500;} .solidgreen { border : 1px solid #008000;} .solidbrown { border : 1px solid #a52a2a;} .solidsilver { border : 1px solid #c0c0c0;} .dottedblack { border : 1px dotted #000;} .dottedwhite { border : 1px dotted #fff;} .dottedred { border : 1px dotted #ff0000;} .dottedyellow { border : 1px dotted #ffff00;} .dottedblue { border : 1px dotted #0000ff;} .dottedorange { border : 1px dotted #ffa500;} .dottedgreen { border : 1px dotted #008000;} .dottedbrown { border : 1px dotted #a52a2a;} .dottedsilver { border : 1px dotted #c0c0c0;} .dashedblack { border : 1px dashed #000;} .dashedwhite { border : 1px dashed #fff;} .dashedred { border : 1px dashed #ff0000;} .dashedyellow { border : 1px dashed #ffff00;} .dashedblue { border : 1px dashed #0000ff;} .dashedorange { border : 1px dashed #ffa500;} .dashedgreen { border : 1px dashed #008000;} .dashedbrown { border : 1px dashed #a52a2a;} .dashedsilver { border : 1px dashed #c0c0c0;} .doubleblack { border : 4px double #000;} .doublewhite { border : 4px double #fff;} .doublered { border : 4px double #ff0000;} .doubleyellow { border : 4px double #ffff00;} .doubleblue { border : 4px double #0000ff;} .doubleorange { border : 4px double #ffa500;} .doublegreen { border : 4px double #008000;} .doublebrown { border : 4px double #a52a2a;} .doublesilver { border : 4px double #c0c0c0;} .grooveblack { border : 3px groove #000;} .groovewhite { border : 3px groove #fff;} .groovered { border : 3px groove #ff0000;} .grooveyellow { border : 3px groove #ffff00;} .grooveblue { border : 3px groove #0000ff;} .grooveorange { border : 3px groove #ffa500;} .groovegreen { border : 3px groove #008000;} .groovebrown { border : 3px groove #a52a2a;} .groovesilver { border : 3px groove #c0c0c0;} .ridgeblack { border : 3px ridge #000;} .ridgewhite { border : 3px ridge #fff;} .ridgered { border : 3px ridge #ff0000;} .ridgeyellow { border : 3px ridge #ffff00;} .ridgeblue { border : 3px ridge #0000ff;} .ridgeorange { border : 3px ridge #ffa500;} .ridgegreen { border : 3px ridge #008000;} .ridgebrown { border : 3px ridge #a52a2a;} .ridgesilver { border : 3px ridge #c0c0c0;} .insetblack1 { border : 1px inset #000;} .insetblack { border : 3px inset #000;} .insetwhite1 { border : 1px inset #fff;} .insetwhite { border : 3px inset #fff;} .insetred { border : 3px inset #ff0000;} .insetyellow { border : 3px inset #ffff00;} .insetblue { border : 3px inset #0000ff;} .insetorange { border : 3px inset #ffa500;} .insetgreen { border : 3px inset #008000;} .insetbrown { border : 3px inset #a52a2a;} .insetsilver1 { border : 1px inset #c0c0c0;} .insetsilver { border : 3px inset #c0c0c0;} .outsetblack1 { border : 1px outset #000;} .outsetblack { border : 3px outset #000;} .outsetwhite1 { border : 1px outset #fff;} .outsetwhite { border : 3px outset #fff;} .outsetred { border : 3px outset #ff0000;} .outsetyellow { border : 3px outset #ffff00;} .outsetblue { border : 3px outset #0000ff;} .outsetorange { border : 3px outset #ffa500;} .outsetgreen { border : 3px outset #008000;} .outsetbrown { border : 3px outset #a52a2a;} .outsetsilver1 { border : 1px outset #c0c0c0;} .outsetsilver { border : 3px outset #c0c0c0;} /*======== font family class ======== */ .arial { font-family: Arial, Helvetica, sans-serif; } .courierNew { font-family: 'Courier New', Courier, monospace; } .georgia { font-family: Georgia, 'Times New Roman', Times, serif; } .lucidaConsole { font-family: 'Lucida Console', Monaco, monospace; } .lucidaSansUnicode { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; } .tahoma { font-family: Tahoma, Geneva, sans-serif; } .times { font-family: 'Times New Roman', Times, serif; } .trebuchet { font-family: 'Trebuchet MS', Helvetica, sans-serif; } .verdana { font-family: Verdana, Geneva, sans-serif; } .msSans { font-family: 'MS Sans Serif', Geneva, sans-serif; } .msSerif { font-family: 'MS Serif', 'New York', serif; } .helvetica { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .impact { font-family: Impact, Charcoal, sans-serif; } .century { font-family: 'Century Gothic', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; } /*======== shadows class ======== */ .shadow { text-shadow: 2px 2px 3px #aaa;} .shadowlight { text-shadow: 1px 1px 2px #aaa;} .boxshadow { box-shadow: 1px 2px 3px rgba(0,0,0,0.5); -moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5); } .boxshadow1 { box-shadow: 0 0 20px #787878; -webkit-box-shadow:0 0 20px #787878; -moz-box-shadow:0 0 20px #787878; filter:progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=135, Strength=5); zoom: 1; } .boxrelief { box-shadow: 0 20px 10px -10px rgba(255,255,255,0.3) inset; -moz-box-shadow: 0 20px 10px -10px rgba(255,255,255,0.3) inset; -webkit-box-shadow: 0 20px 10px -10px rgba(255,255,255,0.3) inset; } .boxinset { box-shadow: 0 3px 8px rgba(0,0,0,.24) inset; -moz-box-shadow: 0 3px 8px rgba(0,0,0,.4) inset; -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.4) inset; } /*======== multiple columns content ======== */ .twocolumn { column-count:2; column-gap:1.5em; -moz-column-count: 2; -moz-column-gap: 1.5em; -webkit-column-count: 2; -webkit-column-gap: 1.5em; } .threecolumn { column-count:3; column-gap:1.2em; -moz-column-count: 3; -moz-column-gap: 1.2em; -webkit-column-count: 3; -webkit-column-gap: 1.2em; } .forcolumn { column-count:4; column-gap:1.2em; -moz-column-count: 4; -moz-column-gap: 1.2em; -webkit-column-count: 4; -webkit-column-gap: 1.2em; } .column10 { column-width:10em; column-gap:1.2em; -moz-column-width: 10em; -moz-column-gap: 1.2em; -webkit-column-width: 10em; -webkit-column-gap: 1.2em; } .column15 { column-width:15em; column-gap:1.2em; -moz-column-width: 15em; -moz-column-gap: 1.2em; -webkit-column-width: 15em; -webkit-column-gap: 1.2em; } .column20 { column-width:20em; column-gap:1.2em; -moz-column-width: 20em; -moz-column-gap: 1.2em; -webkit-column-width: 20em; -webkit-column-gap: 1.2em; } .column25 { column-width:25em; column-gap:1.2em; -moz-column-width: 25em; -moz-column-gap: 1.2em; -webkit-column-width: 25em; -webkit-column-gap: 1.2em; }
