Design

�� (� ��)

mybb@mybb.ru (Shed.y) — Tue, 19 Oct 2010 16:14:12 +0400

�� , � �� . (�� )

�� html ��:

��:

<style>
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background:  url(http://upforme.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

�� ?

width: 130px; - �� , � ��.
height: 40px; - �� , � ��.
border: 2px solid #FFD700; - ��, �� .
background: #FFFFCC; - �� .
text-align: center; - �� (�� - left � ��- right).
font-family: Comic Sans Ms; - �� .
font-size: 15px; - �� .
padding: 5px; - �� (��).

�� html ��:

��:

<!--������� - ���������-->
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

� �� , �� . (�� )

��:

<center><table style="width: 90%">
<tr>

<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">������ ���������</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
��� ����� ���-��</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">������ ���������</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
��� ����� ���-��</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">������ ���������</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
��� ����� ���-��</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">�������� ���������</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
��� ����� ���-��</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">����� ���������</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
��� ����� ���-��</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">������ ���������</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
��� ����� ���-��</DIV></DIV>
</div></td>

</tr>
</table></center>

� �� , � �� .

��
��
��

��

mybb@mybb.ru (Shed.y) — Tue, 19 Oct 2010 16:04:31 +0400

�� 

��:

<script>
var num_f = 0;
var num_c = 0;
var tr = document.getElementsByTagName("tr")
for(i=0;i<tr.length;i++){
	if(tr[i].id.indexOf("forum_f")!=-1){
num_f++
	}
}
var div = document.getElementsByTagName("div")
for(q=0;q<div.length;q++){
	if(div[q].id.indexOf("pun-category")!=-1){
num_c++
	}
}
var v = document.getElementById('onlinelist');
v = v.parentNode.firstChild;
if (!v.innerHTML)
    v = v.nextSibling;
v.innerHTML = '<span>����� �������: </span><b>'+num_f+'</b><br /><span>����� ���������: </span><b>'+num_c+'</b><br />' + v.innerHTML;
</script>

10 �� 

1-�� (�� )

��:

<script src="/export.php?type=js&max=10" type="text/javascript"></script>
<script type="text/javascript">
var html='';
var ts = '';
var mo = '';
var hh = '';
var mm = '';
var i = 0;
for(i=0;i<content.length;i++) {
    ts = new Date();
    ts.setTime(1000*content[i][0]);
    mo = ts.getMonth()+1;
    if (mo<10) mo='0'+mo;
    hh = ts.getHours();
    mm = ts.getMinutes()+'';
    if (mm<10) mm='0'+mm;
    ts = ts.getDate()+'.'+mo+' '+hh+':'+mm;
html2="</tr></tbody></table></div>"
html1="<h2>��������� 10 ��������� ������</h2><div class=\"container\"><table cellspacing=\"0\" width=100%><thead><tr><th scope=\"col\">�����</th><th scope=\"col\">�����</th><th scope=\"col\">��������� ���������</th></tr></thead><tbody class=\"hasicon\">"
html+='<tr><td>'+content[i][1]+'</td><td class=\"tc2\">'+ts+'<td class=\"tcr\"><a href=\"'+content[i][2]+'\" target=\"_blank\">'+content[i][3]+'</a><br /></td></tr>';
}

var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if((str.substring(str.lastIndexOf('/')+1)=="" || str.substring(str.lastIndexOf('/')+1)=="index.php") && arr[i].className=="statscon"){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML=""+html1+""+html+""+html2+"<br><h2>����� ����������</h2>"+name+""
}
i++
}
</script>

2-�� (�� )

��:

<script src="/export.php?type=js&max=10" type="text/javascript"></script>
<script type="text/javascript">
var html='';
var ts = '';
var mo = '';
var hh = '';
var mm = '';
var i = 0;
for(i=0;i<content.length;i++) {
ts = new Date();
ts.setTime(1000*content[i][0]);
mo = ts.getMonth()+1;
if (mo<10) mo='0'+mo;
hh = ts.getHours();
mm = ts.getMinutes()+'';
if (mm<10) mm='0'+mm;
ts = ts.getDate()+'.'+mo+' '+hh+':'+mm;
html2="</tr></tbody></table></div>"
html1="<div class=\"container\"><table cellspacing=\"0\" width=100%><thead><tr><th scope=\"col\">�����</th><th scope=\"col\">�����</th><th scope=\"col\">��������� ���������</th></tr></thead><tbody class=\"hasicon\">"
html+='<tr><td>'+content[i][1]+'</td><td class=\"tc2\">'+ts+'<td class=\"tcr\"><a href=\"'+content[i][2]+'\" target=\"_blank\">'+content[i][3]+'</a><br /></td></tr>';
}
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if((str.substring(str.lastIndexOf('/')+1)=="" || str.substring(str.lastIndexOf('/')+1)=="index.php") && arr[i].className=="statscon"){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML=""+html1+""+html+""+html2+""+name+""
}
i++
}
</script>

��

mybb@mybb.ru (Shed.y) — Tue, 19 Oct 2010 15:43:06 +0400

�� ?
��-��-�� style.css
�� :

��:

/* A5.1 */
#pun {
  margin: 30px;
  position: relative;
  }

� �� :

/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 900px;
padding: 0px 0px 0px 0px;
border: none;
border-top: none;
}

900 - �� (px), �� (�� px �� %). �� .
0 - �� , ��
0 - �� , �� .

��

mybb@mybb.ru (Shed.y) — Tue, 19 Oct 2010 15:37:46 +0400

�� ?
�� -��-�� style_cs.css �� . (� �� )

��:

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #b7aea5 #978E85 #877E75 #978E85}
tr.iredirect div.icon {border-color: #b7aea5 #b7aea5 #b7aea5 #b7aea5}
div.inew {border-color: #FFFFFF #DFDFDF #CFCFCF #DFDFDF}

#pun-main div.catleft, #pun-main div.catright {display: none}

� �� :

��:

   /* CS4 Post status icons
 -------------------------------------------------------------*/
 div.icon {
            background: url(����� �������� "��� ����� ���������") no-repeat;
    }

    tr.inew div.icon {
            background: url(����� �������� "���� ����� ���������") no-repeat;
    }

    tr.iclosed div.icon {
            background: url(����� �������� "�������� ���") no-repeat;
    }

    tr.iredirect div.icon {
            background: url(����� �������� "����������, �������������") no-repeat;
    }

    tr.isticky div.icon {
            background: url(����� �������� ������ ���) no-repeat;
    }

�� , �� . �� .
��, �� -��-�� style.css
� �� .

��:

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0
  }

/* C2.14 */
.punbb tbody.hasicon td.tcl {
  padding-left: 3.2em
  }

/* C2.15 */
.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
  }

/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }

�� :

��:

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0
  }

* html .tclcon {height: 1px}

/* C2.14 */
.punbb td div.tclcon {
        margin-left: 80px;
}

/* C2.15 */
.punbb div.icon {
    float: left;
    display: block;
    width: 80px;
    height: 80px;}

/* C2.14 */
.punbb td div.tclcon {
margin-left: 80px;
}
�� . (�� )

/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 80px;
height: 80px;}
�� (width) � �� (height) ��.

Design

���� (� �������)

���������� � ����������

������������

������ ��������� �������

�� (� ��)

��

��

��