[درس] طريقة تصميم الاستايلات

[جواد النيل]

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

??? ?????? ????? ???????? phpBB ???? ?????? ????? ??????? ??? ?????
??? ????? ?? ????? ????? ???????? ?? ???? ????????? ???? ????? ????? ?? ???
????? ??? ???? ????? ????? ???????? ??? ?????? ??? ????? ???????
??????? ???? ?????? ???? ???? ???????? ??? ??? ????? ???? ???? ??????? ?????? ??? ???????
???? ????? ???? ???????

??? ???? ????

????? ?????? ??? ?????????? ?????? ???????
--[????? ??????]--
--[??????? ?????????]--
?????? ????? ?????? ?????? ?????? ??? ?????
????? ????????

?????? edit plus ?????? ????? ???php
????? ????????

?????? ?? ???? ???? ??????? ?? ????? www ??? ???????




????? ?? ??????? ??????? ?? ??? ?????? localhost/phpBB3 ??? ?????? ???????

--[??? ?????]--
1-) ???? ?????? ???????? ?????? ?? ???? ?????? ?????????
???? ???? ?????? ??? ?????? Black Hook
???? ???????? ??? ?????? ??????????


2-) ???? ???? ?????? ????? ???????? ??? ?? ??????? ?????? ???? ?? ???? ???? ???????? ??????? ??? ?????? ????? ????? ???????



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




3-) ???? ???? ??? ??? ????? ????? ?????? ?? ????? styles\subsilver2\theme\images

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

[جواد النيل]

--[????? ??????]--
????? ????? ??? ?????? Front Page

?? ?????? ?? ???? ???????? Front Page 2003

??? ??? ?????? ???? ???? ???? ??????? ???????? ????? SPlit



(-1???? ???? ???? 6 ??????



(-2???? ??? ????? ??????? ???? ???????



(-3 ???? ?????? ?????



4-) ????? ??????? ????? ????? ?? ????? ?? ????? ??????



5-) ???? ???? ??? ???? ?????? ?? ????????

???? ??????? ??? ?????? ?????? ????? ?? ???? ???? ??Right Click



?? ???? ??????? ??? ?????? ????? ??????? ?? ?????? ??? 2 ?? ????? ?????



????? ?????? ??? ????? ?? ???????? 1 ? 2 ? 3 ? 4

????? ?????


6-) ???? ???? ????? ??????? ???? ?? ???? ?????? ?? ?? ???? ????? Right Click



???? ???



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




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

[جواد النيل]

--[????? ??????]--

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

????? ???? ???? ????? ?? ?????? ???Front Page ????? ???? ??? ???????

?????? ?????? ???????
http://www.uploadak.com/images/888_11.jpg



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

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

???? ??? overall_header.html ????? ?????? ??

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

<div id="wrapheader">

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

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

<div id="menubar">

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

http://www.uploadak.com/images/182_12.jpg



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

?????? ?????? ???????
http://www.uploadak.com/images/901_13.jpg



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

?? ???? ???? ??? overall_footer.html ????? ???? ????? ?????? ?? ????? ???

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

</body>

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

http://www.uploadak.com/images/269_14.jpg



???? ???? ?????? ?????? ??? ??? ??? ????? ???? ???? ???????? ????? ???? styles\subsilver2\theme

????? ???????? ????? ????? ????? ???? overall_header.html ? overall_footer.html ???? ????????

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

{T_THEME_PATH}/images

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

?????? ?????? ???????
http://www.uploadak.com/images/990_style.jpg



????? ???? ??? ???????? ?? ???????? ???? ??? ??????? ???? ???? ??? stylesheet.css ??????? ????? styles\subsilver2\theme
????? ?????? ??

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

td {
        padding: 2px;

???????? ?????? 2px ?? 0px

????? ????? ?????? ???? ???? ??? ????? ??? ??? ???? ??? ??? ????? ??????? ???? ??? ????? ?? ??? ????[/b]

[ياسر عتريس]

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

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

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

[yazoody_3sal]

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

????? ????

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

????????

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

[جواد النيل]

--[????? ??????]--
???? ???? ??? ????? ????????
????? ??? ????? ???? ?????? ?????? color cop ?????? ???????
????? ??????? ?? ???
http://www.uploadak.com/files/ColorCop.rar

???? ???? ???? stylesheet.css ??????? ?????? styles\subsilver2\theme

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

1-) ????? ??? ????? ??????? ???? ?????? ?? ??????

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

a:link {
        color: #006597;

???? ????? ??? ????? ??? ????? ?????? ????? ??????? #262626

2-) ????? ????? ????? [???? , ?????? , ??????? , ??? ??????] ???? ?????? ??

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

        background-image: url('./images/cellpic3.gif');

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

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

        background-color: #006699;

???????? ??? ????? ?????? ???? ????? ????? ??????? #c0c0c0

3-) ???? ???? ???? ???? ??? [???? , ?????? , ??????? , ??? ??????]

?? ?????? ??

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

th {
        color: #FFA34F;

????? ??? ????? ????? ??????#ffffff

4-) ???? ???? ??? ???? ????? ???????
???? ?????? ??

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

        background-image: url('./images/cellpic1.gif');

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

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

        background-color: #C7D0D7;

??? ?????????? ?????? ??????? ????? ??????? #c0c0c0


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

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

        background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;

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

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

.catdiv {
        height: 28px;
        margin: 0;
        padding: 0;
        border: 0;
        background: white url('./images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
        background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

??? ?????? ??

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

.tablebg {
        background-color: #c0c0c0;

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

5-) ???? ???? ????? ????? ????? ???????? ?????????? ???? ??????
???? ?????? ??

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

.row2 {
        background-color: #DCE1E5;

????? ????? ??? ????? ??? ????? ?????? ????? ??????? ?????? #ececec

6-) ???? ???? ????? ??? ????? ??????? ??? ??????? ?? ??? ???? ??????? ??? ?????? ??????? ???? ??? ????
???? ?????? ??

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

a.topictitle:visited {
        color: #c0c0c0;

????? ????? ??? ????? ??? ????? ?????? ????? ??????? ?????? #797979

7-) ???? ???? ??? ???? ??? ??????? ???? ?????? ??

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

a.forumlink {
        color: #069;

???????? ??? ????? ??? ????? ?????? ????? ?????? #000000

????? ???????
????? ?????? ?????? ???????
http://www.uploadak.com/images/859_finish.jpg



8- ) ???? ??? ???? ??????? ?? ???? ??? ???????? ??????? ?????? ???? ?????
???? ???? ?? ??
mageset.cfg ??????? ?????? styles\subsilver2\imageset
template.cfg ??????? ?????? styles\subsilver2\template
theme.cfg ??????? ?????? styles\subsilver2\theme
style.cfg ??????? ?????? styles\subsilver2

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

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

name = subsilver2

????? ??????? ??? ??? ???????? ????? gawad ????? ???????? ???? ?????

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

name = gawad

?? ???? ????? ????? ???????? subsilver2 ??? ??? ???????? gawad

????? ????? ??????? ????? ????? ?????? ???
[/b]

[جواد النيل]

--[??? ?????]--
???? ???? ?? ?????? ?? ???? ???? overall_header
??? ???? ????????? ?? ???Front Page

???? ??????
http://www.uploadak.com/images/569_baner.jpg



???? ??????
http://www.uploadak.com/images/694_replacea.jpg



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

[Zero_Cool]

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

[msfn]

???? ????? ???? ?????? ?? ??? ????? ?????? ???????????? ???? ??? ??? ???? ??? ?????????.
???? ??? ?? ???.

[nagooo]

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

[roboowsy]

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