New messages Members Forum rules Search
Page 1 of 11
Forum moderator: kostova, Brazen 
uCoz Support Forum by uCozers » Coding » CSS » How to Customize your Ajax Windows (sml[question]You need to know a little CSS.)
How to Customize your Ajax Windows
looneyheadDate: Thursday, 2011 May 05, 4:44 AM | Message # 1
Font size: A | A |
Lieutenant
Group: uCozer
Message: 54
[ ]
Offline
uCoz uses Cascading Style Sheets for their a thier styling. In your website is automatically placed this code:
Code
<link type="text/css" rel="StyleSheet" href="http://s49.ucoz.net/src/layer3.css" />

It links the webpage with the this style sheet which contains the styling for the admin bar and the ajax windows.

If you want to have a custom ajax window you need to have this code to start:

Code
.x-unselectable {-moz-user-select:-moz-none;}
.x-selectable {-moz-user-select:text}

.x-sh, .x-sh *{overflow:hidden;margin:0;border:0}
.xsl *,.xsr *,.xsb * {height:100%}

.x-sh .xstl{padding-top:6px;background:transparent url( [color=blue]/.s/img/wd/3/shadow-h.png [/color]) no-repeat 0 0;}
.x-sh .xsml{background:transparent url( [color=blue]/.s/img/wd/3/shadow-h.png[/color] ) repeat-y -6px 0;}
.x-sh .xstr{padding-top:6px;background:transparent url( [color=blue]/.s/img/wd/3/shadow-h.png [/color]) no-repeat -18px 0;}
.x-sh .xsmr{background:transparent url( [color=blue]/.s/img/wd/3/shadow-h.png[/color] ) repeat-y -12px 0;}
.x-sh .xsbl{padding-left:6px;background:transparent url( [color=blue]/.s/img/wd/3/shadow.png[/color] ) no-repeat 0 -12px;}
.x-sh .xsbc{background:transparent url( [color=blue]/.s/img/wd/3/shadow.png[/color] ) repeat-x 0 -36px;}
.x-sh .xsbr{padding-right:6px;background:transparent url( [color=blue]/.s/img/wd/3/shadow.png[/color] ) no-repeat right -6px;}

.xt{position:relative;overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparent url([color=blue]/.s/img/wd/3/tool-sprites.gif[/color]) no-repeat;margin-left:2px;margin-top:4px;}
.xt-close{background-position:0 0;}
.xt-close-over{background-position:-15px 0;}
.xt-mini{background-position:0 -15px;}
.xt-mini-over{background-position:-15px -15px;}
.xt-maxi{background-position:0 -30px;}
.xt-maxi-over{background-position:-15px -30px;}
.xt-rest{background-position:0 -45px;}
.xt-rest-over{background-position:-15px -45px;}
.xw-hdr{text-align:left;white-space:nowrap;padding:1px 0 0 0;white-space:nowrap;zoom:1;height:24px}
.xw-hdr-text{vertical-align:3px;cursor:default;color:#4D4F53;font:bold 11px tahoma,arial,verdana,sans-serif;line-height:20px;}
.xw-sps {height:4px;overflow:hidden;position:absolute;width:100%;z-index:1}
.xw-tsps{height:6px}
.xw-resize .xw-tl {cursor:nw-resize}
.xw-resize .xw-tr {cursor:ne-resize}
.xw-resize .xw-sps {cursor:n-resize}
.xw-resize .xw-ml {cursor:w-resize}
.xw-resize .xw-mr {cursor:e-resize}
.xw-resize .xw-mc {cursor:default}
.xw-resize .xw-bl {cursor:sw-resize}
.xw-resize .xw-br {cursor:se-resize}
.xw-resize .xw-bc {cursor:s-resize}
.xw-dragging .xw-tl {opacity:0.7;filter:Alpha(Opacity='70');}
.xw-tc{background:transparent url([color=blue]/.s/img/wd/3/top-bottom.png[/color]) repeat-x 0 0;overflow:hidden;zoom:1;position:relative;font-size:0;line-height:0;}
.xw-tl{background:transparent url([color=blue]/.s/img/wd/3/left-corners.png[/color]) no-repeat 0 0;padding-left:6px;position:relative;zoom:1}
.xw-tr{background:transparent url([color=blue]/.s/img/wd/3/right-corners.png[/color]) no-repeat right 0;padding-right:6px;position:relative;zoom:1}
.xw-bc{background:transparent url([color=blue]/.s/img/wd/3/top-bottom.png[/color]) repeat-x 0 bottom;zoom:1;font-size:0;line-height:0;overflow:hidden;}
.xw-bcm{height:2px;background:transparent url([color=blue]/.s/img/wd/3/top-bottom.png[/color]) repeat-x 0 bottom;zoom:1}
.xw-bc .xw-footer{padding-bottom:6px;font-size:0;line-height:0;zoom:1;}
.xw-bcm .xw-footer{padding-bottom:2px;font-size:0;line-height:0;zoom:1;}
.xw-bl{background:transparent url([color=blue]/.s/img/wd/3/left-corners.png[/color]) no-repeat 0 bottom;padding-left:6px;zoom:1;}
.xw-br{background:transparent url([color=blue]/.s/img/wd/3/right-corners.png[/color]) no-repeat right bottom;padding-right:6px;zoom:1;}
.xw-mc{border:1px solid #BCBFC4;padding:0;margin:0;font:normal 11px tahoma,arial,helvetica,sans-serif;background:#D7D7D7;zoom:1;}
.xw-ml{background:transparent url([color=blue]/.s/img/wd/3/left-right.png[/color]) repeat-y 0 0;padding-left:6px;zoom:1;}
.xw-mr{background:transparent url([color=blue]/.s/img/wd/3/left-right.png[/color]) repeat-y right 0;padding-right:6px;zoom:1;}
.xw-bc {height:6px;}
.xw-icon{width:16px;margin:2px 2px 0 0;height:16px;}
.xw-body{background:transparent}
.xw-draggable,.xw-draggable .xw-hdr-text{cursor:move;}
.xw-plain .xw-mc{background:#D7D7D7;border-right:1px solid #EAEBEC;border-bottom:1px solid #EAEBEC;border-top:1px solid #C2C5CA;border-left:1px solid #C2C5CA;}
.xw-plain .xw-body{padding:3px;border-left:1px solid #EAEBEC;border-top:1px solid #EAEBEC;border-bottom:1px solid #C2C5CA;border-right:1px solid #C2C5CA;background:transparent!important;}
.xw-blank {background:#C2C5CA;opacity:0.4;filter:Alpha(Opacity='40');overflow:hidden}

In blueare the links to images. uCoz extracts parts out of these images so there could be 2 differint images from the same url.

Copy the above code to your favorite text editor (e.g Notepad) and edit it to your needs. Then save it as "ajax-win.css". Make sure you have "All file types" selected for file type. Now upload it to your website through the file manager or FTP.

Just a little FYI, the bottom corners, bottoms, and sides of the ajax menus style will be used in the drop down menu for the admin bar, so make them flow with the admin bar design.

Once you are don styling the ajax window...

Now you will need to insert the code below in every site page below the <body> tag:

Code
<style type="text/css">
@import url('[color=red]/design/ajaxwin/ajax-win.css[/color]') all;
</style>

The text in redis the URL to your ajax window cascading style sheet. Change it to fit your needs.

Enjoy!

Here is an example:

Attachments: 5548450.png(22Kb)


 
SirDarknightDate: Saturday, 2011 May 07, 8:06 PM | Message # 2
Font size: A | A |
Lieutenant
Group: uCozer
Message: 61
[ ]
Offline
Quote
.x-unselectable {-moz-user-select:-moz-none;}
.x-selectable {-moz-user-select:text}

.x-sh, .x-sh *{overflow:hidden;margin:0;border:0}
.xsl *,.xsr *,.xsb * {height:100%}

.x-sh .xstl{padding-top:6px;background:transparent url( /.s/img/wd/3/shadow-h.png) no-repeat 0 0;}
.x-sh .xsml{background:transparent url( /.s/img/wd/3/shadow-h.png ) repeat-y -6px 0;}
.x-sh .xstr{padding-top:6px;background:transparent url( /.s/img/wd/3/shadow-h.png) no-repeat -18px 0;}
.x-sh .xsmr{background:transparent url( /.s/img/wd/3/shadow-h.png ) repeat-y -12px 0;}
.x-sh .xsbl{padding-left:6px;background:transparent url( /.s/img/wd/3/shadow.png ) no-repeat 0 -12px;}
.x-sh .xsbc{background:transparent url( /.s/img/wd/3/shadow.png ) repeat-x 0 -36px;}
.x-sh .xsbr{padding-right:6px;background:transparent url( /.s/img/wd/3/shadow.png ) no-repeat right -6px;}

.xt{position:relative;overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparent url(/.s/img/wd/3/tool-sprites.gif) no-repeat;margin-left:2px;margin-top:4px;}
.xt-close{background-position:0 0;}
.xt-close-over{background-position:-15px 0;}
.xt-mini{background-position:0 -15px;}
.xt-mini-over{background-position:-15px -15px;}
.xt-maxi{background-position:0 -30px;}
.xt-maxi-over{background-position:-15px -30px;}
.xt-rest{background-position:0 -45px;}
.xt-rest-over{background-position:-15px -45px;}
.xw-hdr{text-align:left;white-space:nowrap;padding:1px 0 0 0;white-space:nowrap;zoom:1;height:24px}
.xw-hdr-text{vertical-align:3px;cursor:default;color:#4D4F53;font:bold 11px tahoma,arial,verdana,sans-serif;line-height:20px;}
.xw-sps {height:4px;overflow:hidden;position:absolute;width:100%;z-index:1}
.xw-tsps{height:6px}
.xw-resize .xw-tl {cursor:nw-resize}
.xw-resize .xw-tr {cursor:ne-resize}
.xw-resize .xw-sps {cursor:n-resize}
.xw-resize .xw-ml {cursor:w-resize}
.xw-resize .xw-mr {cursor:e-resize}
.xw-resize .xw-mc {cursor:default}
.xw-resize .xw-bl {cursor:sw-resize}
.xw-resize .xw-br {cursor:se-resize}
.xw-resize .xw-bc {cursor:s-resize}
.xw-dragging .xw-tl {opacity:0.7;filter:Alpha(Opacity='70');}
.xw-tc{background:transparent url(/.s/img/wd/3/top-bottom.png) repeat-x 0 0;overflow:hidden;zoom:1;position:relative;font-size:0;line-height:0;}
.xw-tl{background:transparent url(/.s/img/wd/3/left-corners.png) no-repeat 0 0;padding-left:6px;position:relative;zoom:1}
.xw-tr{background:transparent url(/.s/img/wd/3/right-corners.png) no-repeat right 0;padding-right:6px;position:relative;zoom:1}
.xw-bc{background:transparent url(/.s/img/wd/3/top-bottom.png) repeat-x 0 bottom;zoom:1;font-size:0;line-height:0;overflow:hidden;}
.xw-bcm{height:2px;background:transparent url(/.s/img/wd/3/top-bottom.png) repeat-x 0 bottom;zoom:1}
.xw-bc .xw-footer{padding-bottom:6px;font-size:0;line-height:0;zoom:1;}
.xw-bcm .xw-footer{padding-bottom:2px;font-size:0;line-height:0;zoom:1;}
.xw-bl{background:transparent url(/.s/img/wd/3/left-corners.png) no-repeat 0 bottom;padding-left:6px;zoom:1;}
.xw-br{background:transparent url(/.s/img/wd/3/right-corners.png) no-repeat right bottom;padding-right:6px;zoom:1;}
.xw-mc{border:1px solid #BCBFC4;padding:0;margin:0;font:normal 11px tahoma,arial,helvetica,sans-serif;background:#D7D7D7;zoom:1;}
.xw-ml{background:transparent url(/.s/img/wd/3/left-right.png) repeat-y 0 0;padding-left:6px;zoom:1;}
.xw-mr{background:transparent url(/.s/img/wd/3/left-right.png) repeat-y right 0;padding-right:6px;zoom:1;}
.xw-bc {height:6px;}
.xw-icon{width:16px;margin:2px 2px 0 0;height:16px;}
.xw-body{background:transparent}
.xw-draggable,.xw-draggable .xw-hdr-text{cursor:move;}
.xw-plain .xw-mc{background:#D7D7D7;border-right:1px solid #EAEBEC;border-bottom:1px solid #EAEBEC;border-top:1px solid #C2C5CA;border-left:1px solid #C2C5CA;}
.xw-plain .xw-body{padding:3px;border-left:1px solid #EAEBEC;border-top:1px solid #EAEBEC;border-bottom:1px solid #C2C5CA;border-right:1px solid #C2C5CA;background:transparent!important;}
.xw-blank {background:#C2C5CA;opacity:0.4;filter:Alpha(Opacity='40');overflow:hidden}

In Your Post The Blue Letters are not showing because You're Using [code][/code]. You Need to Use [quote ][/quote ] to the code to be appear .

Fix It


Please Give Me Some Reputation or Award If My Post Helps You

Edited BySirDarknight - Saturday, 2011 May 07, 8:06 PM
 
looneyheadDate: Sunday, 2011 May 08, 0:51 AM | Message # 3
Font size: A | A |
Lieutenant
Group: uCozer
Message: 54
[ ]
Offline
Quote
Fix It

Can't.

Quote
Posting Wrong Tutorials and Using Abusive Words

How did I use abusive words, and post a wrong tutorial?! I think "misuse of BB codes" sounds better, cause I don't see a single "abusive" word.

Quote
Using Wrong Icons

Sorry about that.




Edited Bylooneyhead - Sunday, 2011 May 08, 1:05 AM
 
uCoz Support Forum by uCozers » Coding » CSS » How to Customize your Ajax Windows (sml[question]You need to know a little CSS.)
Page 1 of 11
Search:


Copyrights uCozers 2009 - 2017 To TOP
Refresh Smileys Manager