Tự thiết kế template Joomla "made in tự tui"

Thảo luận trong 'Templates Joomla! 1.5.x' bắt đầu bởi Lê Xuân Thành, 21/3/12.

  1. huyteo

    huyteo Thành viên mới

    Cảm ơn bạn!
  2. sorry

    sorry Thành viên mới

    Anh Thành ơi,viết tiếp phần 2 đi ạ,em định làm 1 con template mà chưa biết làm thế nào,mong anh giúp...
  3. ngtranthanhtoan

    ngtranthanhtoan Thành viên mới

    Cám ơn bác đã chia sẻ! Mình có góp ý nho nhỏ! Nếu được bác có thể viết bài việt với bố cục rõ ràng hơn, mọi người sẽ dễ hiểu hơn! Và điều này chắc cũng không tốn nhiều thời gian. Hy vọng được ủng hộ.
  4. Cknight

    Cknight Thành viên mới

    Phần bắt đầu từ thẻ Body trở xuống để định hình các vị trí modul mình không được hiểu lắm.
    Mình vẫn chưa biết cách xác định các vị trí tại index.html để sau chuyển thành index.php
    Bạn có thể hướng dẫn chi tiết cho mình được không.

    Xin lỗi mọi người vì câu hỏi có phần ngu ngốc của mình, vì mình không phải là dân lập trình. Mong mọi người bỏ qua và giúp đỡ.
  5. vantrungit89

    vantrungit89 Thành viên mới

    @Cknight:
    Chưa rõ lắm câu hỏi của bạn, nhưng bạn có thể hình dung việc làm một template như sau:
    Về cấu trúc và các file or forder thì như bạn ấy đã hướng dẫn từ đầu, còn về file index.php, đó chỉ là việc dàn trang bằng div và css thôi (như làm một layout bình thường)- giống như sau:
    Mã:
    <html>
    <head>
    <title>Thiết kế layout joomla</title>
    <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/vietcanh/css/layout.css" type="text/css" /><!-- Nhúng file layout.css vừa tạo vào file index.php để sử dụng các lớp của file css -->
    </head>
    <body>
        <div id="container"> <!-- Thẻ div của toàn trang, trong thẻ div này sẽ khai báo thêm các thẻ cho 3 vị trí còn lại -->
            <div id="top"> <!-- Thẻ div cho vị trí top -->
                    <h1>Đây là đầu trang, thẻ h1 là loại chữ to nhất</h1>
            </div>
            <div id="leftnav"><!-- Thẻ div cho vị trí left -->
                    <p>Đây là menu bên trái</p>
            </div>
            <div id="rightnav"><!-- Thẻ div cho vị trí right -->
                    <p>Đây là menu bên phải</p>
            </div>
            <dir id="content"><!-- Thẻ div cho nội dung -->
                    <h2>Tiêu đề nội dung bài viết</h2>
                    <p>Các bạn đang theo dõi <font color="red"><b>[Chinh phục joomla] - (SeriOne)Thiết kế template joomla - P3: Thiết kế layout, css cho joomla<b></font></b>, chúc các bạn sớm thành công và thiết kế cho mình một template thật đẹp, hãy chia sẻ kinh nghiệm và giúp đỡ mọi người, hãy làm cho cộng đồng joomla ngày càng phát triển hơn nữa</p>
                    <p>Các bạn đang theo dõi <font color="red"><b>[Chinh phục joomla] - (SeriOne)Thiết kế template joomla - P3: Thiết kế layout, css cho joomla<b></font></b>, chúc các bạn sớm thành công và thiết kế cho mình một template thật đẹp, hãy chia sẻ kinh nghiệm và giúp đỡ mọi người, hãy làm cho cộng đồng joomla ngày càng phát triển hơn nữa</p>                
            </dir>
            <div id="footer"><!-- Thẻ div cho vị trí footer -->
            Đây là chân trang!
            </div>
        </div>
    </body>
    </html> 
    
    Sau đó thì bạn thêm các câu lệnh của Joomla (cùng với css như bạn trên đã trình bày) để hoàn thiện template:
    PHP:
    <?php
    defined
    ('_JEXEC') or die;
    ?>
    <html>
    <head>
    <title>Thiết kế layout joomla</title>
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template?>/css/layout.css" type="text/css" /><!-- Nhúng file layout.css vừa tạo vào file index.php để sử dụng các lớp của file css -->
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template?>/css/position.css" type="text/css" /><!-- Nhúng file position.css vừa tạo vào file index.php để sử dụng các lớp của file css -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language?>" lang="<?php echo $this->language?>" dir="<?php echo $this->direction?>" >
    </head>
    <body>
        <div id="container"> <!-- Thẻ div của toàn trang, trong thẻ div này sẽ khai báo thêm các thẻ cho 3 vị trí còn lại -->
            <div id="top"> <!-- Thẻ div cho vị trí top, gọi một bức ảnh vào làm banner -->

                    <div id="logo">
                    <!-- <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/images/ads.png" /> -->
                    </div> 
                    <div id="ads">
                    <jdoc:include type="modules" name="ads" />    
                    </div>                               
            </div>
            <?php if ($this->countModules('position-7')): ?>
            <div id="leftnav"><!-- Thẻ div cho vị trí left và gọi nội dung nào là module ở position-7 vào vị trí này -->
                    <jdoc:include type="modules" name="position-7" />
            </div>
             <?php endif; ?>
            <?php if ($this->countModules('position-6')): ?>
            <div id="rightnav"><!-- Thẻ div cho vị trí right -->
                    <jdoc:include type="modules" name="position-6" />        
            </div>
            <?php endif; ?>
            <dir id="content"><!-- Thẻ div cho nội dung -->
                       <jdoc:include type="component" />                
            </dir>
            <div id="footer"><!-- Thẻ div cho vị trí footer -->
                <div id="footer-outer"><!-- style bên ngoài footer -->
                    <div id="footer-inner"><!-- style bên trong footer, những module được gọi ra trong footer sẽ chịu ảnh hưởng về style của footer -->
                        <dir id="bottom"> <!-- Gọi lớp bottom -->
                            <?php if ($this->countModules('position-9')): ?>
                            <div class="box box1"> <!-- Gọi lớp box 1, kế thừa thêm các thuộc tính từ lớp box -->
                            <jdoc:include type="modules" name= "position-9"  style="xhtml" />
                            </div>
                            <?php endif; ?>
                            <?php if ($this->countModules('position-10')): ?>
                            <div class="box box2"><!-- Gọi lớp box 2, kế thừa thêm các thuộc tính từ lớp box -->
                            <jdoc:include type="modules" name= "position-10"  style="xhtml" />
                            </div>
                            <?php endif; ?>
                            <?php if ($this->countModules('position-11')): ?>
                            <div class="box box3"><!-- Gọi lớp box 2, kế thừa thêm các thuộc tính từ lớp box -->
                            <jdoc:include type="modules" name= "position-11"  style="xhtml" />                        
                            </div>
                            <?php endif; ?>
                        </dir>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>       

  6. phamhuy89

    phamhuy89 Thành viên mới

    Giúp em chuyển template

    Tình hình là em học tin trắc địa,nhưng bên em chỉ học ứng dụng tin vào trắc địa thôi,nhưng ông thầy em lại yêu cầu là phải lập trình web,em không rành về joomla lắm nên template em tạo là html thuần,có ai giúp em chuyển cái temp này sang template joomla
    Hạn nộp của em là tối nay rồi,bác nào giúp được em sớm em xin cảm ơn và hậu tạ

    Các file đính kèm:

  7. tuanvu199x

    tuanvu199x Staff Member

    phamhuy89 thích bài này.
  8. Lê Xuân Thành

    Lê Xuân Thành Staff Member

    Thấy footer web cậu này có artisteer mà!
    làm xong rồi export ra thôi.
    phamhuy89 thích bài này.
  9. gmc

    gmc Thành viên mới

    có key của nó không anh thành
  10. phamhuy89

    phamhuy89 Thành viên mới

    Cái này lúc bắt đầu thiết kế là chọn temp web,xong mình export nó ra joomla thì mấy cái mình làm nó mất hết,nó chuyển về giao diện temp joomla,và mất cái tab design bên trái,tức là muốn thay đổi menu,nội dung trong trang thì k biết phải làm ntn bạn ạ

Chia sẻ trang này