Help Giúp em với mấy anh , làm sao thay đổi kích thước này được

Dang Van Dat

Private
Tham gia
02/03/2017
Bài viết
19
Được Like
5
có anh chị nào biết cách nào thay đổi chiều ngang với chiều dọc ở khung bên này hông ( trong ảnh ) giúp em với
18452787_786620014831693_1240582029_o.png
 

onlyonelove

MasterCorporal
Tham gia
03/11/2015
Bài viết
367
Được Like
213
bỏ cái ảnh hoặc thu nhỏ ảnh lại thôi
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Bạn vào tìm trong template message_user_info.css nha
 

nghienvt

Gefreiter
Tham gia
01/01/2017
Bài viết
65
Được Like
65
messageuserinfo.gif


Bạn xem ví dụ mình chỉnh khung Message User Info của VNXF to ra một chút như hình minh họa.

Bên tay phải, bạn thấy mình đã chỉnh 2 dòng:
width: 230px !important;
margin-right: 20px !important;

Vậy là bạn copy bộ này:

.messageUserInfo {
float: left;
width: 230px !important;
margin-right: 20px !important;
}

bỏ vào Extra.css rồi save lại, kiểm tra kết quả.

Còn bạn muốn toàn bộ khung này nằm ngang với màn hình, thì hãy tìm nội dung của .messageUserInfo trong trường hợp responsive (tìm Template từ khóa .messageUserInfo), rồi copy nội dung của trường hợp responsive bỏ ra Extra, bỏ đi các điều kiện .responsive.

Bạn có thể chọn hiển thị dạng di động trong lúc mở Chrome Developer Tool lên, sẽ thấy khi cửa sổ co lại, tự động khung Message User Info sẽ nằm ngang. Vậy thì lấy trường hợp lúc responsive ra áp dụng vào lúc bình thường là được...
 

nghienvt

Gefreiter
Tham gia
01/01/2017
Bài viết
65
Được Like
65
Ví dụ, mình nhấn nút Toogle Device Toolbar để hiển thị trường hợp responsive, thì khung Message User Info hiển thị nằm ngang, tràn màn hình:

messageuserinfo2.gif


Như có gì đó sai sai, các User Banners bị lệch (ví dụ như khung của Mod PVS ấy), vậy là tìm đúng chỗ thêm dòng:

.Responsive .messageUserBlock h3.userText {
text-align: center !important;
}

Kết quả:

messageuserinfo3.gif


Vẫn chưa đẹp, vậy là cần phải tách User Banner so với dòng bên trên một chút nữa:

.Responsive .messageUserBlock .userBanner {
margin-top: 5px !important;
}

Kết quả:

messageuserinfo4.gif


Vậy là tạm ổn, giờ thì copy những gì đã chỉnh bỏ vào Extra để trong trường hợp user xem diễn đàn trên điện thoại/máy tính bảng, thì không bị lệch...
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom