آموزش فارسی سازی استایل های ویبولتین ورژن 4

[mr.bahram]

آموزش فارسی سازی استایل های ویبولتین ورژن 4

سلام
این اموزش برای اولین بار توسط سایت وی بی اسکین تهیه شده و هر گونه کپی برداری و یا الگو برداری بدونه ذکر منبع اصلی ممنوع و در این سایت اعلام خواهد شد

برای شروع ما می خوایم یک استایل انگلیسی که مد نظرمون هست رو در لوکال نصب بکنیم
این استایل LifeElement نام داره
از طریق ادمین سایت بخش استایل ها & قالب ها استایل رو نصب کرده و در صفحه اول سایت اجراش می کنیم
مانند تصویر شماره 1 ، از مسیر تصویر ها URL میگیریم تا مشخص بشه در چه مسیری فایل ها باید قرار بگیرن
[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]images/styles/lifeElement/style/logo.png

[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

برای شروع ما اول سعی می کنیم تمام ایراد های اصلی برای اجرای این استایل رو بگیریم برای همین منظور وقتی یک استایل با ورژن پایین خواستید فارسی کنید و ورژن اصلی شما 4.1.4 بود باید محتویات فلدر editor استایل دیفالت را درون پوشه ای که در مسیر بالا نصب کردید اپلود کنید یعنی این مسیر
[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]images/styles/lifeElement/editor

برای شروع ما از بالای سایت باید اقدام کنیم
این نکته همیشه باید مد نظر دوستان باشه که استایل ها به دو صورت باید برسی شون
1 از دید مهمان
2 از دید یوزر ها ( افرادی که وارد سایت شدن )
برای همین من از دو نما برای شما دوستان تصویری که مشخص میکنه این استایل بعد از نظر چطور نمایش داده میشه تهیه کردم و در تصویر شماره 2 و 3 قرار میدم

[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید][برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

خب ما اول بصورت یوزر ها استایل رو فارسی می کنیم
بخش بالای سایت شامل دو بخش هست ، header و navbar ، در اینجا ما از بخش هدر سایت میخوایم شروع کنیم
داخل سایت بخش استایل ها و قالب ها ، جستجوی استایل ، header را سرچ می کنیم و وارد بخش میشیم
یکی از بهترین ادیتور هایی که من همیشه ازش استفاده می کنم ادیتور Microsoft Office FrontPage و من به شما دوستان توسیعه می کنم از این ادیتور استفاده کنید
کدهای موجود درون سایت رو درون ادیتور ریخته و دنبال کد می گردیم
توجه داشته باشید ما برعکس استایل های 3 که در خود کدها تغییرات اعمال می کردیم باید در وی بی 4 در کلاس ها یا css ها تغییرات رو اعمال کنیم
برای این کار باید اول کلاس مورد نظر رو پیدا کنیم
من نسبت به تجربه ای که پیدا کردم به معرفی کد میپردازم و در 90 درصد استایل ها این کد ها یکی هستن و میشه از همین اموزش الگو برداری کرد
در تصویر شماره 2 مشاهده می کنید بخش جستجوی سایت بسمت چپ هست و همین شکل ظاهری مناسبی نداده چون با بخش مشخصات کاربری قاطی شده
در کدهای هدر سایت بخشی که مربوط به سرچ میشه شامل زیر هست

        <div class="searchBox">
            <vb:if condition="$vboptions['enablesearches']">
            <!-- search form -->
                <form action="search.php?{vb:raw session.sessionurl}do=process" method="post">
                <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                    <ul>
                        <li><div   class="searchInputBox"><input class="searchInput" type="text"   name="query" tabindex="99" value="" /></div></li>
                        <li><input type="image"   src="images/styles/lifeElement/style/searchButton.gif" value="Search"   alt="Submit" tabindex="100" /></li>
                    </ul>    
                </form>
            <!--/ search form -->

در کد بالا بخشی که مربوط به کلاس جستجو میشه هست

<div class="searchBox">

searchBox را درون جستجوی استایل پیدا می کنیم
معمولا کلاس های وی بی 4 در این استایل هست additional.css وارد بخش استایل شده و دنبال searchBox می گردیم

کد زیر کلاس سرچ هست

.searchBox {
    background:url(images/styles/lifeElement/style/searchBG.gif) no-repeat left;
    float:left;
    height:31px;
    padding-left:33px;
    position:absolute;
    top:5px;
    left:2px;
}

گذینه قرمز را به right تغییر بدید و ذخیره کنید
وارد صفحه اول سایت بشید ، مشاهده می کنید جستجو به سمت راست امده
خب بصورت یوزر برسی می کنیم و می بینم هیچ ایرادی نداره استایل ، سراق یوزر مهمان می ریم و برسی می کنیم

تصویر شماره 4 رو مشاهده کنید می بینید بخش جستجو امده روی گذینه ثبت نام

[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

و بخشی که درونش یوزر و پسورد قرار میگیره بصورت جابجا هست یعنی اول باید کادر یوزر باشه و بعد پسورد ولی در اینجا اول پسورد هست و بعد یوزر

خب این تغییرات رو باید هم در کدهای استایل بدیم و هم در کلاس
ابتدا وارد کدهای بخش header میشیم و کدها رو داخل یک ادیتور میریزیم
کد هایی که مربوط به بخش دکمه ثبت نام میشه این هست

    <vb:if condition="$show['registerbutton']">
        <a href="register.php{vb:raw session.sessionurl_q}"  rel="nofollow" class="registerButton"><img  src="images/styles/lifeElement/style/button-register.gif"  alt="{vb:rawphrase register}" /></a>
    </vb:if>

در کد های بالا مشخص میشه که کلاس registerButton هست برای همین ما در قسمت additional.css دنبال کلاس registerButton میگردیم
کد زیر پیدا میشه

.registerButton {
    position:absolute;
    top:7px;
    right:5px;
}

گذینه قرمز رنگ را به left تغییر داده و ذخیره می کنیم
بصورت مهمان صفحه را رفرش کرده و مشاهده می کنیم گذینه ثبت نام سمت چپ قرار گرفته

برای قسمت ورود کاربران ما باید کد های استایل header را ویرایش کنیم
کدهای این بخش را درون یک ادیتور ریخته و طبق زیر عمل می کنیم

توجه داشته باشید که ما بخاطر راحتی کار برای شما دوستان در پیدا کردن کدها خط یا لاین ها رو اسم خواهیم برد

کدی که مربوط به بخش ورود میشه این هست که از خط 65 تا 147 می باشد
ما تمام کدهای خط 71 و 72 را برداشته ( cut )
از انتهای کد های 69 امده پایین یعنی اینتر میزینم تا خط جدید ساخته بشه و در خط 70 کد ها رو قرار میدهیم
کد ها رو درون بخش هدر گذاشته و ذخیره کنید
توجه داشته باشید این تنها نمونه ای از استایل هست و کد ها و خط ها عین همین نیست و شما باید با شکل و نوع کدها اشنا شده تا بتوانید کد صحیح را انتخاب کنید
نوشته Member Login را درون استایل جستجو کرده و معادل آن را قرار دهید یعنی محل ورود کاربران ، ذخیره
بعد از رفرش کردن استایل بصورت مهمان می بینید که استایل بصورت کامل فارسی در امده

خب در اینجا بخش بالای سایت هم برای مهمان و هم برای کاربران فارسی شده و ما میخواید نوشته ای که در بخش navbar هست رو فارسی یا برداریم

admin , به انجمن خوش آمدید !, be sure to check out the [برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید] section if you have any questions. Also please take a moment and update your with your latest information.

در اینجا ما نوشته رو بر میداریم ، ولی اموزش تغییر را هم میدیم
ابتدا وارد بخش navbar میشیم و کدها را درون یک ادیتور می ریزیم
برای دلیت کردن خط های 135 تا 136 را حذف می کنیم
برای ویرایش معادل متن های انگلیسی را که در بین این خطا ها هست را قرار میدیم یا اون چیزی که مدنظرمون هست رو حالا میتونه عکس یا کدهای html باشه درون کدها قرار داده و تمام کدها را در قسمت navbar استایل ریخته و ذخیره می کنیم

بخش بالای سایت تمام شده و الان بخش فروم را در نظر میگیریم
از این بخش به بعد برای کاربران تنها در نظر گرفته میشه و برای یوزرهای مهمان مهم نیست که چطور باشه چون همان جور که برای کاربران هست برای مهمان ها هم نمایش داده میشه
اگر تصویر شماره 5 را مشاهده کنید می بینید در این تصویر بخش عنوان انجمن و فعاليت هاي در حال انجام در انجمن به سمت چپ امده و ما باید این قسمت رو به سمت راست هدایت کنیم

[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]
برای این مورد ما باید css را مورد نظر را پیدا کرده و تغییر بدیم
برای بخش عنوان انجمن باید وارد قسمت forumhome_forumbit_level1_nopost بشیم و کدها رو مورد برسی قرار بدیم
کدهای forumhome_forumbit_level1_nopost را درون یک ادیتور میریزیم
بصورت design کد ها رو نمایش در میاریم
ابتدای کد زیر را انتخاب می کنیم
{vb:raw forum.title}
و 3 بار فاصله یا اسپیس را می زنیم تا بصورت زیر در بیاد تصویر شماره 6
خط انتخاب شده مشکی رنگ ، مد نظر هست

کد ها را انتخاب و درون استایل ریخته و ذخیره می کنیم

[mr.bahram]

این اموزش ویدیوی

[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

[game]

سلام من این آموزش رو انجام دادم ولی حالا از هر انجمنم 2 بار امده چرا باید چی کار کنم ؟ممنون

[mr.bahram]

سلام من این آموزش رو انجام دادم ولی حالا از هر انجمنم 2 بار امده چرا باید چی کار کنم ؟ممنون

استایل رو قرار بده یه نگاه بندازم

[A M I R]

سلام

آقا این آواتار چجوری میاد وسط؟ الان سمت راست قرار داره هر کاری میکنم هم نمیاد وسط.

از تگ <center> هم اول و آخر کدها استفاده کردم ولی بازم نشد. اینها رو دقیقا کجا باید بذارم؟ قالبی که ویرایش میکنم مربوط به 1.4.5 هست.

قبلا از همینجا ویرایش کرده بودم 1 ساعت گشتم پیدا نکردمش.

[mr.bahram]

سلام

آقا این آواتار چجوری میاد وسط؟ الان سمت راست قرار داره هر کاری میکنم هم نمیاد وسط.

از تگ <center> هم اول و آخر کدها استفاده کردم ولی بازم نشد. اینها رو دقیقا کجا باید بذارم؟ قالبی که ویرایش میکنم مربوط به 1.4.5 هست.

قبلا از همینجا ویرایش کرده بودم 1 ساعت گشتم پیدا نکردمش.

کدی که ویرایش کردی رو اینجا ضمیمه کن تا برسی بکنم

[farhaddd]

آقا دمت گرم ، خیلی آموزش توپی بود.
رنگ لینک ها و هاورشونو رو از کجا عوض کنم ؟

[Patira]

آقا دمت گرم ، خیلی آموزش توپی بود.
رنگ لینک ها و هاورشونو رو از کجا عوض کنم ؟

درود،

از Stylevar می تونید.

همچنین می تونید در additional.css یه کلاس مربوط به لینک ها و Hover ها بنویسید و از اون کلاس برای لینک هاتون و همچنین Hover اون استفاده کنید.

پیروز باشید.

[farhaddd]

درود،

از Stylevar می تونید.

همچنین می تونید در additional.css یه کلاس مربوط به لینک ها و Hover ها بنویسید و از اون کلاس برای لینک هاتون و همچنین Hover اون استفاده کنید.

پیروز باشید.

من تازه اومدم وی بی 4
الان خود لینک ها خواص هاور رو دارن.میخوام رنگشونو تغییر بدم.ولی نمیدونم از کدوم قالب و ....

[mr.bahram]

از همین بخش Stylevar استفاده کنید ، بهتره توی لوکال تست کنید و ببیند کدوم بخش میشه بعد روی استایل انجمن پیاده کنید