[Skin] FCAmusement Blue and Pink

Link cập nhật:

http://www.mediafire.com/download/twbybgx63uprmhk/Skin%20FCAmusement(2).rar

Sửa chữa đê sửa chữa đê!!!

Hình như méo để nhầm cái position khi lưu :3 Tìm trong css: - .topicpost - .infofca - .subfca Đổi đoạn position:relative trong nó thành position:absolute :3 Còn cái .topicpost (Cái hiện số bài viết và trả lời ấy) mà vẫn giữ ở đó thì thêm cái bottom:0px vào đoạn của .topicpost :3

Thông tin:

- Ở đây méo có sử dụng một số code của huynh Vống như:

• Nút like facebook (bỏ phần báo xấu đề phòng các thím trẻ trâu chơi vote bừa)
  Jq tạo css active cho Crumbs và Thanh Nav
  Phương châm chạy
  

- Ở viewtopic_body: khi rê vào avatar sẽ hiện ra một khung vuông vuông ở bên cạnh avatar drop, cái khung đó là để khung pet, nếu không thích mọi người có thể tìm và xóa đi.
- Về phần css: Méo có để ghi chú cho mọi người dễ sửa hơn. Có thể sửa ảnh, kích thước box bằng css tùy ý :3
- Khi thoát sẽ có một số lỗi trong trang thông tin thành viên mà méo lười quá không muốn sửa.

Nói chung là skin này méo làm rất ít sử dụng jq, hầu hết toàn là xài css :3

Một số hướng dẫn:

Tải file về và thay các Template tương ứng trong file.
Tạo các mục trong profile:
WallBanner, Phương châm và Tên riêng giống như demo online. Để WallBanner ở Textzone còn hai cái kia để Textfield.
* Lưu ý: phần Phương châm và Tên riêng phải ghi giống y hệt như méo bày, ghi sai một ký tự nó cũng không hiện như demo đâu ;d
Sắp xếp các mục theo profile như sau:

Spoiler:

Nói chung là miễn sao cho Tên riêng đứng thứ 4, WallBanner thứ 5 và Phương châm thứ 11 là tốt nhất. Nếu có dùng thanh level hay gunny gì mà không thể để theo thứ tự này thì có thể sửa lại trong phần css các phần margin-top. Hơi cực chút :-

Có lỗi gì thì nói méo, méo xem lại nhé :3

Phối màu Xanh và Hồng sáng, trẻ trung, nhẹ nhàng, cho các 4rum chủ đề về tình củm, thơ văn, học sinh thì rất tuyệt :3

Nếu nói thích thì Ad thích nhất trang cá nhân, cách lên màu viền các tab và khối rất tốt. (y)

... còn chê thì hơi nhiều đấy: :P

Ý tưởng về bố cục có chút lạ nhưng hơi gò bó, kiểu chia khối không đồng nhất sẽ rất rắc rối nếu 4rum nhiều chuyên mục.
Tổng thẻ tông màu sáng Xanh và Hồng, nhưng khối chuyên mục nổi lên Viền đậm Đen và nền Xám làm bố cục trở nên đơn điệu, lạc lõng, có cảm giác như "râu ông nọ cắm cằm bà kia".
Icon chuyên mục bo tròn viền dày, trong khi Icon khá nhỏ, vị trí thì có lẽ là tùy tiện đặt mà thôi.
Khi xem bài viết, phần thông tin cá nhân khá lớn, làm nó trở thành điểm nhấn chứ không phải nội dung bài viết, thêm nữa là không có sự phân cách rõ ràng nữa các post.
Thiết kế header và footer hoàn toàn đối lập, không rõ có phải footer bị lỗi hay không.
Bảng thống kê và nhiều phần khác vẫn để mặc định nên skin này có lẽ chỉ là bán thành phẩm.

Nhịp điệu - Điểm nhấn - Đơn giản - Đồng nhất - Cân xứng là 5 tiêu chí cơ bản, Méo làm xong skin có thử xem lại đã đáp ứng chưa?

Bác vong mới post bài https://devs.forumvi.com/t199-tip-nguyen-tac-phoi-mau-va-ung-dung-trong-thiet-ke-website

Ý tưởng phần index_box khá thú vị nhưng về giao diện mình không đánh giá cao lắm :)

box giống CP^^

Cảm ơn những ý kiến đóng góp của mọi người, méo sẽ rút kinh nghiệm cho lần sau :3
riêng tên Gốt: trên CP nói đã lắm mà giờ đổi giọng nhanh ghê nhỉ

Cái thống kê méo quên mất chưa làm nhỉ :3 Mở cái temp ra định làm luôn mà lại đi làm chuyện khác thành ra quên luôn :3
Còn phần màu thì... thì... Méo định để tông màu nhạt hơn, hầu hết là xanh với hồng. Nhưng tự nhiên thấy cái box ở bên trang khác màu đen đệp đệp cái quên luôn mục tiêu :v
Khi làm skin này, trước đó méo có biến tấu skin xomnet, chắc huynh vống cũng biết nhỉ. Lúc đỏ mếu để viền nhỏ thì xấu quá nên để dày nguyên forum luôn :3
Icon méo không biết nên để đâu hết trơn, nên để tạm chỗ đó mà thấy cũng được được :v
Méo định để cho cái footer nó lớn hơn chút mà quên đi o.O

Khi tìm hiểu về thiết kế, Méo sẽ thấy người ta sẽ luôn nhấn mạnh sự sáng tạo, dùng màu mới (thay vì màu an toàn. Ví dụ: xanh dương, lục, đen...) hay bố cục mới, linh động hơn... nhưng đó không phải là những điều dành cho người mới.
Méo mới thử thiết kế skin thì nên bắt đầu với những "màu an toàn", "cấu trúc an toàn" tức là những gì được sử dụng phổ biến. Có thể học hỏi bằng cách rip hay convert skin chuẩn. Có như thế, Méo sẽ học hỏi được cách thiết kế chuẩn, dần nắm được bố cục và tương quan giữa các thành phần.
Cần lưu ý là không nên tham lam, thấy phần này ở skin này đẹp rồi lại phần khác ở skin khác đẹp, gắn vào chung một chỗ thì nó lại không đẹp do thiếu sự hài hòa, đồng nhất.
Nên chú trọng vào học hơn là cố làm ra một skin khi chưa đủ kiến thức, nó sẽ làm Méo tiêu tốn nhiều thời gian vẫn không đạt kết quả như ý.

Ad cũng là người mới khi nói về làm skin, và cũng thuộc nhóm đang học hỏi thôi. Ad không có ý dập lửa đam mê của Méo, chỉ là chút kinh nghiệm vì Ad cũng từng ảo tưởng với skin fmvi1 rồi fmvi2, đến fmvi3 thì khá hơn chút nhưng nhìn chung là thảm hại, đến giờ nhìn lại tự giễu mình. :D

nói chung là skin mặc định ... thêm màu mè , và chỉ có cái box là mới , tuy không xài nhưng cũng cám ơn bạn vì đã đóng góp

theo mình được biết thì cái gì đã qua chính sữa thì không còn được gọi là "mặc định" nữa
giống như việc con gái đã sinh con thì không thể nói "cô ấy còn trinh" được

cái box với view đẹp ~~

huynh vống: méo biết là trình méo như thế thì cần phải cố gắng rất nhiều :3
huynh cũng gợi ý méo rip và convert skin chuẩn. Nhưng mà méo lại không thích rip hay convert vì méo không biết :v mà cũng không muốn lấy bản quyền của người ta lắm -_- "

Thôi thì cứ cố gắng được bao nhiêu hay bấy nhiêu, cứ nghe theo sự gợi ý của mọi người để tiến bộ từ từ cũng tốt :3

Để thiết kế 1 site (all source) "chuẩn" cần lưu ý vài điều:
1/ Màu sắc, kết hợp màu tốt là một điều rất cần thiết, tốt cho việc design với HTML5 sau này (khuyên nên ít dùng ảnh).
2/ Tạo sự mềm mại, bằng cách kết hợp với CSS và JS để tạo nhưng hiệu ứng mềm mại hơn (transition, animate,....)
3/ Nhìn ở góc độ người dùng !!!

Anh @NCat ơi
CSS em thay rồi sao vẫn bị

Code:

/* Box */
.statusfca{width:50px;height:50px;border-radius:100%;border:5px solid #ffb2b2!important;background:#ffe6e6;border-top:5px solid #ff6b6b!important;border-left:5px solid #ff6b6b!important;position:absolute;z-index:3;margin-left:5px;margin-top:-15px}
a[href="/f2-forum"] ~ .subfca{margin-top:-110px}
.boxfca{position:relative;width:455px;height:200px;background:#fff;margin:20px 0 10px 30px;border:5px solid #555;float:left;border-bottom:15px solid #555}
.boxfca:hover .infofca,.boxfca:hover .subfca{visibility:visible;height:75px;overflow:hidden;padding:10px 0 10px 10px}
.boxfca:hover .topicpost{display:none}
.infofca a{transition:all 0.5s ease;text-shadow:0 0 5px #fff}
.topicpost{position:absolute;display:block;padding:10px;background:#333;color:#fff;font-weight:bold;margin-top:-50px;width:30%}
.infofca{overflow:hidden;visibility:hidden;height:0;padding:10px 0 10px 10px;color:#999;z-index:10;background:rgba(0,0,0,.8);float:left;width:250px;bottom:0;position:absolute;margin-top:-95px}
.fcainfo{background:rgba(255,255,255,.3);color:#fff;font-weight:bold;padding:8px}
.titlefca{width:100%;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-weight:bold;line-height:25px}
.bgboxfca{height:175px;width:100%}
.boxfca:hover .overlayfca{visibility:visible}
.overlayfca{background:rgba(0,0,0,.3);width:100%;height:calc(100% - 25px);visibility:hidden;position:absolute;margin-top:-175px}
.subfca{padding:0 0 0 10px;color:#999;position:absolute;z-index:10;background:rgba(0,0,0,.8);width:184px;bottom:0;margin-left:260px;border-left:1px solid #fff;height:0;overflow-y:auto!important;white-space:nowrap;margin-top:-95px}
.subfca .gensmall{height:17px;margin-top:-15px;width:calc(100% - 30px )!important;background:#333;padding:2px 10px;white-space:normal;display:block;border-bottom:1px solid #555;color:#fff!important;font-weight:bold;position:absolute}
.fcasub{margin-top:15px}