[الدرس الثاني] تكويد ستايل مبني على بروسيلفر

[Dawn birth]

?????? ????? ????? ???? ???????
====================
???? ??? ?? ????? ?????? ? ?? ???? ????? ????? ???? ??? ???????? ???????? phpBB3 ? ?? ??? ????? ????? ??????? ?????? ?? ??????? ??? ????? ????? ???? ??????? ?? ???? ?????? + ????? ?????? ??????? ??????? ??? ??????? ???? ???? ??????? ?? ????? ?????.

???? ????? ????? ???? :

? ?? ?????? ?????? ??? ??????? ?????? ???? ??? ???? styles ??? ???? ???? prosilver ?? ??? ?????? ?? ?? ??? ??? ????? ???? ??? ??? ???????? ?????? ???? ???? ???? ????? ???? patterny .

? ???? ???? ???????? ?????? pattrny ?? ???? ??? style.cfg ????? ?????? ???? ??????? ????? ?? :

كود: تحديد الكل

name = prosilver

??? ???? prosilver ??? ??? ???????? ?????? patterny ????? ???? :

كود: تحديد الكل

name = patterny

??? ??? ?????? ??????? ??? ??????? ??????? :

• imageset.cfg ??????? ???? ???? imageset
• template.cfg ??????? ???? ???? template
• theme.cfg ??????? ???? ???? theme

???? ???? ??? ???? ???? ?????? ??? ????? ?????????? ????? ???????? ?????? ?patterny? ????? ?? ????? ???????? ????? ???? ??? ????? ?????? ???????? ?????????:



????? ????? ?? ???? ??????? ?? ????? ????? :
-?? ???? ????? ???? ???? ???????? ?? ????? ?????? ?? ???? images ??? ???? images ????? ????????? ???????? ?? ?????? ??????: styles/patterny/theme/images
??? ?? patterny ?? ??? ???? ???????? ?????? ???? ???? ????.

???? ???? ??? ???? template ????? ??? overall_header.html ????? ?????? :

??? ????? 106 ?????? ???? ??? ????? :

كود: تحديد الكل

<div id="wrap">

????? ?????? ???? ??? ????? ?? div ???? ???? wrap ????? ??? ??? div ???? ?????? ?? ??? indexhtml ???? ??????? ?? ????? ????? ???? ????? ??? ????? ??? ?? .

- ???? ???? ?? :

كود: تحديد الكل

<div id="page-header">

????? ?????? ????? ?? ??? div ????? ??????? ?? ????? ???????? ????? ?????? ???? ??? ?? ??? ??? index.html ??? div ?????? ???? wrapheader ?? ????? ????? .
????? ???? ???? ????? ?????? ?? ????? ??? ???? ??? ??? ??? ????? ?????? ????? ?????? ???? ??? ????:

كود: تحديد الكل

<a name="start_here"></a>

- ???? ?? ???? ??? ????? ?? ??? index.html ????? ?????? ?????? ???? ???? ??? ?????? ?? ?????? ???????:

كود: تحديد الكل

<div id="wrapheader"></div>

- ???? ?? ??? overall_header.html ???? ???? ?? ??? ????? :

كود: تحديد الكل

<div id="page-body">

????? ?????? ???? ??? div ????? ?????? ??????? ?????? ?? ????? prosilver ????? ???? wrapcenter ?? ????? ?????? ???? ??????? page-body ?? wrapcenter ????? ????? ???? :

كود: تحديد الكل

<div id="wrapcenter">

- ???? ?? ???? ??? overall_header.html ????? ???? ??? overall_footer.html ????? ?? :

كود: تحديد الكل

   <div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
      <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
   </div>
</div>

??? ???? ????? ????? ??????? :

كود: تحديد الكل

<div id="wrapfooter"></div>

???? ???? ?????? ????? ??? css ???? ???? ???????? ?? ??? style.css ?? ????? ????? :

???? ?????? ????? ??? ????? ??? css ?????? ?????? ???????? :

????? ????? ???????? ?? ???? theme ??? ???? ?? ??? css ???? ???? ??????? ???????? ??? ????? ??? ??????? ?? ??????? ?? ??? ???? ???? stylesheet.css ??? ??? ??????? ?? :

• common.css ??? ????? ???? ????? ??? ??????? ????????? ?????? ??? ????? ? ???????? ? ?????? ? ?. ?????? ????????? ????????
• colours.css ??? ????? ????? ???????? ??????? ?????????
• links.css ??? ????? ????? ???????? ??????? ????? ????? ??????? ????????? ??? ???? ?? ??? clolours.css
• content.css ??? ????? ????? ???????? ??????? ??? ????????? ? ?????? ???????? ?

???? ??? ????? ?? ???? ???? ????????? ?????? ??????? wrap ????? ??????? ?? ????? ???????? ?? ????? ????? ???:

كود: تحديد الكل

#wrap {
    margin:0 auto;
   width:980px;
   background:url(images/bg.png);
}

???? ????? ????? ???? margin ?? ??? common.css ??? ????? ??????? ??????? ?? ??? colours.css
???? ???? ??? common.css ????? ?? :

كود: تحديد الكل

#wrap {
    padding: 0 20px;
    min-width: 650px;
}

??????? ?? :

كود: تحديد الكل

#wrap {
    margin:0 auto;
   width:980px;
}

?? ???? ??? colours.css ???? ?? ????? ????? ??? wrap :

كود: تحديد الكل

#wrap {
   background:url("{T_THEME_PATH}/images/bg.png");
}

???? ????? ??????? ????? .. ???? ???? common.css ????? ?? :

كود: تحديد الكل

.headerbar {
    background: #ebebeb none repeat-x 0 0;
    color: #FFFFFF;
    margin-bottom: 4px;
    padding: 0 5px;
}

??????? ?? :

كود: تحديد الكل

#wrapheader {
    height:294px;
   width:980px;
}

?? ??? common.css ???? ???? ?? :

كود: تحديد الكل

#page-body {
    margin: 4px 0;
    clear: both;
}

???????? ?? :

كود: تحديد الكل

#wrapcenter {
    width:90%;
   margin:0 auto;
}

????? ???? ?? :

كود: تحديد الكل

#page-footer h3 {
    margin-top: 20px;
}

??? ???? ??????? ????? ??????? :

كود: تحديد الكل

#wrapfooter {
    height:81px;
   width:980px;
}

???? ???? ???? colours.css ????? ???????? ?????? ?? wrapfooter ? wrapheader
???? ?? :

كود: تحديد الكل

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}

??????? ?? :

كود: تحديد الكل

#wrapheader {
   background:url("{T_THEME_PATH}/images/header.png");
}

??? ??? ????? ?? ?? ?? ???? ?? :

كود: تحديد الكل

#wrapfooter {
   background:url("{T_THEME_PATH}/images/footer.png");
}

??? ??? ??????? ???? ???? ??? ???? ?????? ?????? ???????? ????? ??????? ??????? ?????? ???????? ???????? .. ??????? ???? ?? ??????? ?? ????? ????? ???? ?????? ?? ????? ????? ?????? ???? ????? ?????? ???? ????? ?? ?????? ??? ??????? ???? ????? :

[ابو عبد الودود]

??? ???? ? ??? ??? ????? ??????? ???????

???? ????? ??????? Dawn birth ??? ??????? ???? ???? ??????

[alhitary]

???? ????

[ياسر عتريس]

???? ?? ????? ???? ?? ???? ?? ????? ???? ?????