Làm cách nào để tạo theme mới hoặc mẫu giao diện cho NopCommerce


1. Các bước tạo theme cho nopCommerce

Trước tiên, hãy copy bản  nopCommerce source code (hoặc phiên bản Web)  về máy chủ web Microsoft  OS.

Bây giờ bạn có thể dùng Visual Studio 2012 mở Solution.Open Solution

1. Hãy mở theme đã có sẵn, tôi thường dùng  DefaultClean theme để cài bản nopCommerce. theo địa chỉ link thư mục sau:

Bản có Source Code – Presentation\Nop.Web\Themes

Bản cho Web – Nop.Web\Themes

Theme Location

2. Chọn Theme, bấm phải chuột và  bấm COPY, sau đó bấm phải chuột chọn ‘Themes’ folder và bấm PASTE và sau đó đổi tên thư mục mới ‘NewTheme’.

Copy Theme

3. Bây giờ bạn mở thư mục theme mới vừa tạo và mở các tệp trong đó với tên gọi theme.config

Bây giờ thay đổi tất cả các tệp liên quan DefaultClean references để bạn tạo mới tên themes name (tôi ví dụ gọi là  ModernTheme)

theme.config

4. Bây giờ bạn có 1 theme mới mở  Views\Shared\Head.cshtml

Bây giờ thay đổi tất cả đường dẫn từ   ’DefaultClean’ sang ‘modernTheme’ cho đúng với trong stylesheets và  javascript liên quan.

head.cshtml

Nội dung trong tệp stylesheet sẽ có link mới  ModernTheme\Content\styles.css  và các tệp ảnh cũng sẽ có link mới là  ModernTheme\Content\images.

 

2. Cài và áp dụng 1 theme cho nopCommerce

Bạn chỉ cần downloaded a new theme which is in a zip file.

  1. Giải nén tệp zip và copy nó vào thư mục “Themes” .
  2. Truy cập trang admin (www.yourdomain.com/admin).
  3. Tới menu Configuration > Settings > General And Miscellaneous settings
  4. Chọn theme theo tên “Desktop Store theme” kéo thả và chọn sau đó bấm  SAVE.
  5. Bây giờ chuyển qua mục  public store hoặc truy cập web theo domain. Bạn sẽ nhìn được giao diện mới khi bạn đã thay theme.

About thangletoan

Hallo Aloha

Posted on 01/02/2014, in HTTP, HTTPS, IIS, IIS 7, IIS 7.5, Microsoft, Microsoft IIS 7.0, Microsoft Web Platform Installer, Web and tagged , , . Bookmark the permalink. Để lại bình luận.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: