ناپ کامرس | فروشگاه ساز ناپ کامرس | طراحی فروشگاه اینترنتی | طراحی وب سایت | اپلیکیشن موبایل | هاست ناپکامرس | سرور ناپ کامرس
 

آموزش ناپ کامرس | سفارشی کردن تم فروشگاه ساز

سفارشی کردن تم  nopCommerce


ایجاد شده توسط Koroleva Mariann، آخرین ویرایش توسط Andrei در تاریخ 16 فوریه 2018 http://docs.nopcommerce.com/display/en/Customizing+nopCommerce+Themes


آپلود آرم | لوگوی فروشگاه شما

برای آپلود آرم فروشگاه شما در یک وب سایت فروش اینترنتی، اساسا 2 روش وجود دارد:

روش اول

برو به فروشگاه ریشه /Themes/YOUR THEME/Content/images/
به دنبال فایل تصویر logo.gif گردید و logo.gif را با آرم فروشگاه خود جایگزین کنید و نام آن را logo.gif (با همان عرض: 310px و ارتفاع: 60px) بگذارید.

روش دوم

لوگوی فروشگاه خود را در این مکان ذخیره کنید:root folder/Themes/YOUR THEME/Content/images/
برو به پوشه folder/ Views / Shared / Header.cshtml
فایل "Header.cshtml" را باز کنید
برای این کد در بالا نگاه کنید:

var logoPath = "~ / Themes /" + currentThemeName + "/Content/images/logo.gif"؛

شما می توانید مسیر لوگوی سفارشی خود را در اینجا ذکر کنید.

در کد بالا CSS فوق: logo.gif نام فایل تصویر لوگو فروشگاه است

تغییر logo.gif با YourLogo.gif / jpg / png
ذخیره تغییرات در فایل Header.cshtml

مهم: ممکن است مجبور باشید مرورگر را تازه و refresh کنید یا سابقه یا کوکی های مرورگر خود را برای مشاهده تغییرات (آرم فروشگاه جدید) حذف کنید.

اگر می خواهید تغییرات در سبک های مربوط به لوگو ایجاد کنید، کد زیر را در styles.css خود دنبال کنید:

.header-logo {
margin: 0 0 20px;
text-align: center;
}
.header-logo a {
display: inline-block;
max-width: 100%;
line-height: 0; /*firefox line-height bug fix*/
}
.header-logo a img {
max-width: 100%;
opacity: 1;
}

آموزش ناپ کامرس بسیار ساده است.

 

نحوه تغییر طرح و لایه ها
اگر می خواهید سفارشی / تغییر در لایه پایه (به عنوان مثال _Root.cshtml) از وب سایت nopCommerce خود را تغییر دهید. لطفا برای این کد CSS در style.css خود نگاه کنید

.master-wrapper-content {
position: relative;
z-index: 0;
width: 90%;
margin: 0 auto;
}
.master-column-wrapper {
position: relative;
z-index: 0;
}
.master-column-wrapper:after {
content: "";
display: block;
clear: both;
}

 

اگر می خواهید تغییرات در طرح _ColumnOne.cshtml را سفارشی / انجام دهید. لطفا برای این کد CSS در style.css خود نگاه کنید

.center-1 {
margin: 0 0 100px;
}

اگر می خواهید تغییرات در طرح _ColumnTwo.cshtml را سفارشی / تغییر دهید. لطفا برای این کد CSS در style.css خود نگاه کنید

.center-2, .side-2 {
margin: 0 0 50px;
}
.side-2:after {
content: "";
display: block;
clear: both;
}

نحوه تغییر در منوی هدر (منوی بالا)


اگر می خواهید تغییرات در منوی هدر (منوی بالای) وب سایت nopCommerce خود را سفارشی / تغییر دهید، لطفا به مکان زیر بروید:
برو به پوشه ریشه nopCommerce / Views / Shared / Components / TopMenu / Default.cshtml

فایل "Default.cshtml" را باز کنید - با توجه به نیازهای شما می توانید آیتم های منو را در <li> اضافه یا حذف کنید.
 

چگونگی تغییر در پاورقی (یا لینک های پاورقی)


اگر میخواهید سفارشی / تغییرات در لینک footer یا footer خود را از وب سایت nopCommerce خود داشته باشید، لطفا به مکان زیر بروید:
برو به پوشه ریشه nopCommerce / Views / Shared / Components / Footer / Default.cshtml

باز کردن فایل "Default.cshtml" - شما می توانید لینک ها را در <li> یا comlpete <ul> اضافه کنید یا حذف کنید با توجه به نیازهای شما.

شما میتوانید به سادگی به لایه های خود با دستورات Css رنگ بک گراند ، را شخصی سازی کنید و یا رنگ هدر و فوتر را ، همچنین میتوانید از یک عکس برای پشت زمینه استفاده کنید ،

و یا می توانید برای دکمه ها ، لوگو ، دسته بندی و یا کالا ها افکت های منحصر به فرد ایجاد کنید ، و تم ناپ کامرس شخصی خود را ایجاد کنید.