ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
{آموزش جدید} آموزش ساخت navigation زیبا
نویسنده پیام
Shahin X2 آفلاین
خداحافظ....
*****
مدیر

ارسال‌ها: 199
تاریخ عضویت: شهر ۱۳۹۱
اعتبار: 193
سپاس ها : 488
 سپاس شده 165 بار در 51 ارسال
ارسال: #1
آموزش ساخت navigation زیبا
به تازگی یه طرح واسه navigation ساختم که امیدورام مورد پسندتون قرار بگیره
[تصویر:  nevis.png]نویسنده: شاهین یزدانی

نکته:اول کد هارو توی نوت پد کپی کنید بعد بذارید توی قالب و پوسته

ابتدا برید به بخش پوسته ها>>ویرایش پوسته مورد نظر>>ویرایش global.css در حالت پیشرفته

و این کد هارو به global.css اضافه کنید:

کد php:
.navx2 {
    
font-size11px;
    
background#ececec;
border1px solid #cfcfcf;
    
-moz-border-radius3px 3px 0 0;
    -
webkit-border-radius3px 3px 0 0;
    
border-radius3px 3px 0 0;
    
overflowhidden;
        
margin: -16px -16px 0 -16px;
        
padding0;
box-shadowinset 0 1px 0 #f9f9f9;
}

.
navx2 .skin {
    
displayblock;
    
floatright;
    
positionrelative;
}

.
navx2 .skin:first-child a.crumb {
    
padding-left14px;
    -
moz-border-radius-topleft3px;
    -
webkit-border-top-left-radius3px;
    
border-top-left-radius3px;
}

.
navx2 .skin a.crumb, .navx2 .skin b.lastcrumb {
    
text-indent5px;
    
text-decorationnone;
        
background-color#ececec;
    
padding0 35px 0px 12px;
        
margin-right: -1px;
    
margin-bottom0px;
    
outline0 none;
    -
moz-outline-style0 none;
    
displayblock;
    
line-height43px;
    
_border-bottomnone;
    
color#9b9b9b;
box-shadowinset 0 1px 0 #f9f9f9;
}

.
navx2 .skin b.lastcrumb {
    
backgroundtransparent none;
    
font-weightbold;
}

.
navx2 .skin a.crumb, .navx2 .skin b.lastcrumb {
    
line-height42px;
}

.
navx2 .skin .arrow {
        
border21px solid transparent;
        
border-left1px none black;
        
border-right-color#d2d2d2;
    
displayblock;
    
positionabsolute;
    
left: -21px;
    
top0px;
    
z-index50;
    
width0px;
    
height0px;
}

.
navx2 .skin .arrow span {
        
border21px solid transparent;
        
border-left1px none black;
        
border-right-color#ececec;
    
displayblock;
    
positionabsolute;
    
right: -22px;
    
top: -21px;
    
z-index51;
    
white-spacenowrap;
    
overflowhidden;
    
text-indent9999px;
    
width0px;
    
height0px;
}

.
navx2 .refresh:hover {
    
background-position0px -16px;
}

.
navx2 .skin:last-child a.crumb {
     
color#4d4d4d;
}

.
navx2 .skin:hover a.crumb {
     
background-color#ffffff;
}

.
navx2 .skin:hover .arrow span {
     
border-right-color#ffffff;
}

.
navx2 .skin:hover .skin span {
     
background-color#ffffff;


سپس به قسمت قالب ها برید و Navigation Templates رو پیدا کنید و به این شکل ویرایش کنید(قبل از ویرایش قالب ها از اون ها کپی بگیرید)

قالب nav

کد php:
<fieldset class="breadcrumb"><span class="crumbs">{$nav}{$activesep}
<
span class="crust" itemscope="itemscope">
{
$activebit}</span></span></fieldset


قالب nav_bit
کد php:
<span class="crust" itemscope="itemscope">
<
a href="{$navbit['url']}class="crumb" rel="up" itemprop="url">
            {
$navbit['name']}
        </
a>
        <
span class="arrow">
            <
span>></span>
        </
span></span>{$sep


قالب nav_bit_active
کد php:
<a href="{$navbit['url']}class="crumb" rel="up" itemprop="url">
{
$navbit['name']}
        </
a>
        <
span class="arrow">
            <
span>></span>
        </
span

سپس محتویات قالبهای nav_sep و nav_sep_active رو حذف کنید.
کار تمومه با کلید های ctrl+r صفحه انجمنتون رو رفرش کنید.

[تصویر:  home.png]نمونه:
   
(آخرین ویرایش در این ارسال: ۱-۶-۱۳۹۲ ۰۸:۰۰ عصر، توسط ! Omid StaR !.)
۱-۶-۱۳۹۲ ۰۶:۳۱ عصر
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
! Omid StaR ! آفلاین
امید کریم زاده
********
مدیریت کل سایت

ارسال‌ها: 3,846
تاریخ عضویت: فرو ۱۳۹۱
اعتبار: 2364
سپاس ها : 1643
 سپاس شده 6970 بار در 1965 ارسال
ارسال: #2
RE: آموزش ساخت navigation زیبا
درود

بسیار عالی و زیباست
کابرران محترم توجه داشته باشند این قالب ها بسیار حساس هستند:
1. قبل از قرار دادن از کد ها کپی بگیرند و بک آپ داشته باشند
2. قبل از کپی کردن کدهای قرار داده شده در نت پد بگذارند
3. حواسشان باشد همراه کد ها فاصله و... نگیرند

موفق باشید
۱-۶-۱۳۹۲ ۰۷:۳۳ عصر
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش اضافه کردن آیکون اختصاصی به هر انجمن (بدون پلاگین) senator 1 668 ۲۹-۱-۱۳۹۳ ۱۱:۰۸ صبح
آخرین ارسال: ! Omid StaR !
  آموزش قرار دادن آخرین ارسالی های انجمن های Mybb در وب سایت SheRvin 16 3,232 ۲۱-۱-۱۳۹۳ ۰۶:۰۳ عصر
آخرین ارسال: Shezen
  آموزش قفل کردن کلیک راست برا جلوگیری ار کپی کردن مطالب SheRvin 11 2,273 ۲۷-۱۱-۱۳۹۲ ۱۲:۵۵ عصر
آخرین ارسال: ᗩm!RH♥SsE!N
  آموزش بستن انجمن در مای بی بیMYBB SheRvin 2 1,531 ۱۰-۱۱-۱۳۹۲ ۰۵:۳۰ عصر
آخرین ارسال: ! Omid StaR !
  آموزش حل مشکل برخی پلاگین ها Hossein121 17 2,237 ۲-۱۱-۱۳۹۲ ۰۸:۲۲ صبح
آخرین ارسال: ! Omid StaR !
  پنجره زیبا و مزاحم ثبت نام برای مهمان Shezen 0 574 ۲۱-۸-۱۳۹۲ ۰۶:۱۰ عصر
آخرین ارسال: Shezen
  آموزش جدید  آموزش تغییرات پلاگین Extra File Chatbox 3.6.0 چتباکس برای انجمن Hossein121 0 616 ۲۶-۷-۱۳۹۲ ۰۱:۰۷ صبح
آخرین ارسال: Hossein121
  آموزش قرار دادن اهنگ مورد علاقه کاربران مشابه سایت آوا بیست !!! Hidden !!! 2 1,068 ۳۱-۶-۱۳۹۲ ۰۷:۱۴ صبح
آخرین ارسال: ! Omid StaR !
  آموزش جدید  آموزش ایجاد لینکدونی زیبا و پیشرفته arya0097 0 916 ۱۸-۶-۱۳۹۲ ۰۲:۳۸ عصر
آخرین ارسال: arya0097
  آموزش جدید  نمایش اخطاری زیبا برای تعویض مروگر اپرا arya0097 0 372 ۱۷-۶-۱۳۹۲ ۰۱:۴۴ صبح
آخرین ارسال: arya0097

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان

خانه | بازگشت به بالا | بازگشت به محتوا | نسخه موبایل | پیوند سایتی RSS
اخبار فناوری اطلاعات | نرم افزار املاک | هتل آپارتمان مشهد | نرم افزار رستوران | نرم افزار تاکسی سرویس | نرم افزار رستوران | دانلود نرم افزار مطب | دانلود نرم افزار تاکسی سرویس | مجله پزشکی آسان طب | اتوماسیون پزشکی | نرم افزار دفترچه تلفن نرم افزار چاپ چک نرم افزار رستوران نرم افزار فست فود نرم افزار کافی شاپ نرم افزار تاکسی سرویس نرم افزار نمایشگاه خودرو نرم افزار املاک نرم افزار هتلداری نرم افزار مطب نرم افزار دندانپزشکی نرم افزار انبارداری نرم افزار حسابداری فروشگاه نرم افزار وکالت مجله اینترنتی پارسی وان | مجله اینترنتی زیگیل | خرید بک لینک | خرید رپورتاژ | سینما تئاتر مای استیج | یک مهاجر | دنیای مهاجرت | مجله گردشگری کاروان | وردپرس دانلود | مجله تفریحی تندیس فان | نرم افزار Software | جوک جدید | اخبار هنر | اخبار کامپیوتر | سایت پزشکی | فروشگاه اینترنتی | سایت خبری | دانلود موزیک | اندروید سه | بانک شماره موبایل | پایگاه صالحین | مجله کامپیوتری | جاب لر | نوین ساخت | سهام نت | تکی کو | تم کد | مجله اینترنتی وبدون | پورتال خبری | سایت تفریحی تک لایو | مجله سرگرمی سیب رنک | سایت پزشکی دکتر طب | مدرن بوک | مجله اینترنتی فرتکست | مجله پزشکی نت سلامت | کافه ایرونی | مجله خندانک | مجله اینترنتی فان استار | مجله من | مجله اینترنتی دونیمه | مجله اینترنتی بردیا | فاینال مد | فرهنگیا | نامبروان | جان نو | مگفر | مجله 24 | نیمچه | تک پدیا | آیناز وب | مطالب بیست | میهن اسکای | نیک آنلاین | شینار | وطنی ها | طب جدید | هوای تازه | آاقای گل | برترین مطالب | دایی رضا | فارس پدیا | آجودانیه | چارشنبه | فانیفا | قارپوز | گوهرمند | گل بهار | جهان من | جوان امروز | کالچر | مه آذین | مجله سبز | مگناب | دنیای نت | نیک اندیشه | نیکاندوست | نیک پاتوق | ازبک | پارمینو | پیک آبی | پورتال من | راز آلود | روسپید | رشد نگر | رویای زندگی | شورانگیز | سیمای وب | نتیها | تاپکده | وب دوستان | ویکی وان | یکناز | زرچوب | زردقناری | عصرطلایی | فرتورز | آموزش گیتار | مایادانلود | | دکتر CMS | سایت آموزش گیتار | رایان درمان | پارسیان گشت | ایران کافه | گیتی بوک | مجله فراتوریسم | فراتوریسم | دکتر آسان دنت | آسان دنت | مجله گردشگری افراگشت | افراگشت | هشت گام | فرکافی | میهن تاج | مجله پزشکی رایان درمان | موج سینما | تیزباد | برفانک | کافه داران | کینگ دانلود |