Phần 2 - Hướng dẫn rip skin và cách bố trí xenportal

Viết tiếp phần 2 ở đây cho đỡ dài dòng và tránh gây mê cho các bạn

Phần này mình sẽ hướng dẫn tiếp về:
- Cách chỉnh css cho các block;
- Tư duy bố cục block cho giống với 1 site tin tức.

1>. Cách chỉnh css cho các block:
Có rất nhiều bạn hỏi: "tại sao mình tạo nhiều block giống vậy nhưng các khung hiển thị không đều nhau, các block bị chênh nhìn rất xấu?"
Mình xin trả lời đó chính là do các bạn chưa chỉnh lại CSS cho các vị trí cho nên khi hiển thị sẽ vỡ khung, block chênh nhau, lệch, không đều, ...

Trước tiên chúng ta nhìn vào các vị trí của portal: ACP >>> Home >>> -portal



Ở đây chúng ta có thể thấy portal mặc định chia ra làm 7 vị trí gồm: top-left, top-right, mid-left, mid-right, btm-left, btm-right và sidebar

Nhìn hình minh họa nhé:



Ở đây ta thấy 2 dạng block này được chia rất đều và đẹp, trước tiên chúng ta phải xác định vị trí để đặt các block để thể hiện như hình trên ở đâu, ví dụ tôi chọn 2 vị trí mid-left và right-left để đặt 2 block tin này, thì bước này cần xác định css cho nó để đều ra như thế nhé. Chúng ta tìm temp EWRporta.css, các bạn sẽ thấy đoạn code này:

Đây chính là phần chúng ta sẽ CSS thêm cho các khung đối xứng với nhau tại đây! Ví dụ như hình trên, trừ 1 block quảng cáo nằm bên phải (chúng ta phải hình dung width của block này và lấy tổng số pixel của site trừ cho width này đi là ra tổng width của 2 block, ví dụ block ads này là 300px, ta lấy 1000-300=700px -10px= 690px (10px này tôi nhắc ở đây chính là khoảng cách của 2 block cho đẹp hơn)

Do đó chúng ta còn 690px cho 2 block - 10 px khoảng cách của 2 block này nữa là còn 680px. Lấy số này chia cho 2 thì mỗi block sẽ có width là ??? (Đang tính nhẩm )

Đặc biệt, các bạn nên bỏ css ở đoạn này:

Xóa phần màu đỏ đi nhé!

Khi nhìn CSS ta thấy mặc định sẽ là 3 block xài chung 1 CSS, các bạn khi đặt CSS cho từng bock thì bỏ dấu "," và đặt code vào sau nó nhé!
Ok. Chúng ta đặt width bằng css vào cho 2 vị trí này trên temp WRporta.css ví dụ như sau:

Ở đây chúng ta định dạng cho các block trước tiên bằng các loại css như: width= chiều rộng, float: các block sẽ nằm bên trái và nên nhớ 2 block liền kề muốn hiển thị cùng hàng phải đặt float như nhau, margin: là khoảng cách của 2 block!


Xem hình:
- Trước khi CSS:

-Sau khi CSS:

bạn nào bị vỡ khung hay tràn xuống dưới là do width của site không đủ thì có thể cân chỉnh width đoạn trên nhé!
Done! Các block khác tương tự cách làm như trên!

2.> Tư duy bố cục block cho giống với 1 site tin tức:

Khi bạn đã nắm được cách đặt block và css cho các vị trí rồi thì phần tiếp theo là làm sao để đặt các block để thể hiện làm sao cho giống 1 site tin tức theo ý muốn! Các bạn có thể tự desgin 1 site riêng cho mình hoặc nhìn theo 1 số site tin tức để làm theo, mình lấy 1 site như ở trên để làm ví dụ nhé: (mình sẽ lấy 1 site có cấu trúc khác nhau tí để các bạn có thể nhìn rõ hơn)

Ờ đây mình lấy site zing.vn nhé:


Các hình vuông mình đánh dấu là cho bạn 1 block, nhìn sơ chúng ta thấy khoảng 30 block+ cần tạo ra để hoàn hành theo giống site này! Xem cách tạo block ở phần 1 nhé!

Tiếp theo chúng ta cần xác định vị trí cho các block để trình bày tin! Nhìn hình các bạn có thể hình dùng cần phải tận dụng hết 7 vị trí của portal đề trình bày! Xin thưa rằng, các bạn đừng nên và hạn chế dùng sidebar để đặt block. Vì sao ư? Do khi trình bày bằng sidebar chúng ta có thể chỉnh width để phù hợp với site tin tức song sẽ ảnh hưởng đến cả width của sidebar trong forum, cho nên các bạn nên suy nghĩ cẩn thận! Trước giờ mình rất ít dùng sidebar này để đặt vị trí và nếu có đặt thì mình thường chèn thêm tùy biến cho xenforo chỉ xuất hiện ở template portal thôi (cách làm thế nào thì bài khác mình sẽ hướng dẫn nhé)

Theo mình thì để làm site như thế này, chỉ cần dùng 2 vị trí là đủ để đặt block! Vì sao ư? bạn xác định chi trang làm 2 phần bao gồm tin trái và phần quảng cáo bên phải, các tin bên trái đều nằm gọn trong width mặc dù có cả 2 block song chúng ta vẫn có thể dùng thuộc tính float của css để chúng nằm cùng với nhau! Và tin phải chúng ta sẽ cho nằm ở vị trí kế bên tin trái, ví dụ như bước 1 ở trên, dùng midLeftBlocks và midRightBlocks.

Ok! Sau khi chúng ta tư duy block và xác định vị trí thì cần css lại cho 2 block này như sau (xem sourch của trang zing để lấy width cụ thể)
- phần quảng cáo (tin phải có width là 300px)
- phần tin trái có width là 665px;
>>> total là 965px, 35px còn lại (nếu site bạn có width là 1000px) chúng ta sẽ chia margin cho chúng để nhìn đẹp hơn.

Done! Phần này mình chưa hướng dẫn cách cho các bạn rip, mình chỉ nói sơ qua để các bạn có thể tư duy cách đặt vị trí cho block nhé!

Phần 2 kết thúc ở đây, Phần 3 sẽ hướng dẫn tiếp về:
- Cách rip tin cho 1 block đơn giản nhất;
- Cách tạo các tin sử dụng xen:if trong temp recentnews

Chúc các bạn vui! Like mạnh để nhanh có phần tiếp theo nhé!

 

Mới update thêm, do điện chập chờn quá

Thôi, ăn cơm rồi ngủ nghĩ, chờ xem anh em hưởng ứng thế nào để có tinh thần viết tiếp

 

Nhờ mod đưa dùm phần ra trước tiêu đề cho các bạn dễ phân biệt nhé!
Cảm ơn!

 

a lam 1 video huong dan rip skin trang forum cua xenforo di.

 

Like mạnh, bài viết quá chi tiết. Ủng hộ bác !!

 

muốn thêm 1 khung quảng cáo bên phải thì làm kiểu gì nhỉ

 

mong @nttruong có những bài hướng dẫn từ cơ bản đến chuyên sau để mọi người newbie đam mê xenforo có những kiến thức nền tảng để phát triển diễn đàn! Rất cám ơn những bài viết cần thiết của bạn!

 

Dạo này lu bu trở lại, sẽ cố gắng update thật nhanh!

 

Up mạnh!! Chi tiết và bổ ích.