Nốt phần 2 cho nó gọn

Nếu bạn đã có trình độ và kinh nghiệm về css, hãy tự tạo cho mình một file template.css sau cho bố trí hợp lý vị trí của các phần trên web. Còn nếu như chưa biết, việc đơn giản là …paste đoạn code sau vào css của bạn 

* {
     padding: 0;
     margin: 0;
}
img {
     border: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #ffffff;
    background-color: #580808;          
}
a:link, a:visited {
    text-decoration: underline;
    font-weight: normal;
    color: #ffffff;
    outline: none;
    text-align: left;
}
.float {
     float: left;
}
.clear {
    clear: both;
}
.overall {
    background-color: #fff;    
}
div.center {
    text-align: center;
    margin: 0px auto 0 auto;
    padding: 0;
    width: 950px;
    background: #FFFFFF;
}
#container {
    width:870px;
    margin: auto;
    background-color: #3C0806;
    border: 0px solid #e2e2e2;
    text-align: left;
}
#header {
    text-align: right;
    background-color:#000000;
text-color:#ffffff;
    height: 69px;
}
#banner {
    text-align: center;
    background-image:url('../images/banner_to.jpg');
    background-color:#ff0000;
    height: 260px;
}
#content {
    width: 684px;
    text-align: left;
    background-color:#440402;
    padding: 5px;
text-color: #fff;
}
#sidebar_left {
    text-align: center;
    background-color:#440402;
    width: 165px;
    border-right: 0px solid #e2e2e2;
    border-bottom: 0px solid #e2e2e2;
    padding: 5px;

#sidebar_right {
    text-align: center;
    background-color:#440402;
    width: 165px;
    border-right: 0px solid #e2e2e2;
    border-bottom: 0px solid #e2e2e2;
    padding: 5px;
}
#footer {  
    background-color:#3C0806;
    text-align:center;
    border-top: 0px solid #e2e2e2;
    border-botom: 0px solid #e2e2e2;
    padding: 5px;
}

Mỗi #position là thông tin khai báo cho position đó, bao gồm màu mè, text, căn chỉnh trên dưới trái phải, border có hay không. Đây là file css tôi lấy sẵn từ một file temp do tôi làm nên sẽ có một số chỗ không liên quan đến bài viết. Tuy nhiên táng lên thì vưỡn chạy thoải mái Ngoài ra khi làm web tôi thường “thích” font Arial hoặc Verdana nên hay dùng 2 font này làm font family mặc định cho web.

Sau khi thực hiện xong các bước trên, việc đơn giản là vào ACP -> Extensions -> Template Manager và chọn default cho temp bạn vừa làm. Sau đó quay ra ngoài trang chính để xem thành quả của mình.

Đây chỉ là 1 trang đơn giản và chưa có ảnh ọt gì, tất cả đều là css.

Không sao, đây là bước đầu, thành công bước đầu thì chúng ta tiến đến bước tiếp theo, cắt ghép giao diện có sẵn

Hãy nhớ disable tất cả những position mặc định của joomla và tự làm cho mình những thằng mới theo như giao diện của mình. Nếu như bạn hơi khó khăn trong việc trình bày css và code, việc đơn giản nhất, hãy cắt nguyên từng “cục” position ra, dùng slice tool của PTS để cắt rồi export ra web. Sau đó vào Module Manager => Tạo một module mới với position là position bạn mong muốn, type là Custom HTML, giờ việc cần làm là up ảnh bạn đã cắt ra nhét vào trong tên_temp/images/ và paste đoạn code HTML của position đó vào đúng vị trí. Save và F5 trang web của bạn

Thật đơn giản và dễ dàng phải không nào

Tags: Tutorial