Tạo Sub title cho mục tin tức

Thảo luận trong 'Hỗ trợ giao diện, block' đăng bởi thanhchunghti, 05/07/2016 12:45.

  • Không biết mô tả thế nào. Nhưng demo như đính kèm.

     

     

    - Chèn đoạn này vào style.css

     

    .title_home {
        height: 35px;
        color: #FFF;
        padding-left: 38px;
        line-height: 35px;
        background: url("../images/icon_label.png") no-repeat scroll 0 center;
        border-bottom: 2px solid #058B3A;
    }

    Link ảnh: 

     

    - Vào themes/ten-theme-ban/modules/news

    - Đổi nội dung file viewcat_main_right.tpl thành: 

    <!-- BEGIN: main -->
    <!-- BEGIN: listcat -->
    <div class="news_column">
    	<div class="panel panel-default clearfix">
    		<div class="title_home">
    			<ul class="list-inline" style="margin: 0">
    				<li><h2><a title="{CAT.title}" href="{CAT.link}"><span class="gbw">{CAT.title}</span></a></h2></li>
    				<li class="subcat">
    					<ul class="subtitle">
    						<!-- BEGIN: subcatloop -->
    						<li class="hidden-xs"><h3><a title="{SUBCAT.title}" href="{SUBCAT.link}"> • {SUBCAT.title}</a></h3></li>
    						<!-- END: subcatloop -->
    						<!-- BEGIN: subcatmore -->
    						<li class="pull-right hidden-xs"><h3><a title="{MORE.title}" href="{MORE.link}"><em class="fa fa-sign-out">&nbsp;</em></a></h3></li>
    						<!-- END: subcatmore -->
    					</ul>
    				</li>
    			</ul>
    		</div>
    
    		<div class="panel-body">
    			<div class="row">
    				<div class="{WCT}">
    					<!-- BEGIN: image -->
    					<a title="{CONTENT.title}" href="{CONTENT.link}"><img src="{HOMEIMG}" alt="{HOMEIMGALT}" width="{IMGWIDTH}" class="img-thumbnail pull-left imghome" /></a>
    					<!-- END: image -->
    					<h3>
    						<a title="{CONTENT.title}" href="{CONTENT.link}">{CONTENT.title}</a>
    						<!-- BEGIN: newday -->
    						<span class="icon_new">&nbsp;</span>
    						<!-- END: newday -->
    					</h3>
    					<div class="text-muted">
    						<ul class="list-unstyled list-inline">
    							<li><em class="fa fa-clock-o">&nbsp;</em> {CONTENT.publtime}</li>
    													</ul>
    					</div>
    					<p class="text-justify">{CONTENT.hometext}</p>
    				</div>
    
    				<!-- BEGIN: related -->
    				<div class="col-md-8">
                   <ul class="related">
                      <!-- BEGIN: loop -->                      
                      <li class="s-border clearfix">                       
                            <a href="{OTHER.link}" title="{OTHER.title}"><img src="{OTHER.imghome}" alt="{OTHER.title}" width="{OTHER.blockwidth}" class="s-border pull-left imghome" style="width:50px; height:40px"/></a>               
                            <a class="show" href="{OTHER.link}" data-content="{OTHER.hometext}" data-img="{OTHER.imghome}" data-rel="block">{OTHER.title_cut}</a>
                      </li>                        
                      <!-- END: loop -->
                   </ul>
                </div>
    				<!-- END: related -->
    			</div>
    		</div>
    	</div>
    </div>
    <!-- END: listcat -->
    <!-- END: main -->

    Có gì các bạn tùy biến thêm.

    Mình cũng được người khác hướng dẫn và giờ đăng bài đóng góp cho cộng đồng. Mong được góp ý  ạ.

     
  • sutiqa85

    sutiqa85 Tăng Thanh Suti

    Cái này thì OK rồi anh em cho mình hỏi nếu nền bg của subtitle đó có thể rộng theo độ dài của tiêu đề thì sửa thế nào ạ. Cảm ơn

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

    Em cảm ơn anh ạ ! wink

     
  • Bạn chia ảnh nền làm 3. Trái, giữa và phải
    Phần bên trái và phải bạn để bình thường và chọn để no-repeat
    Phần ở giữa bạn làm nền cho title và chọn repeat-x
    Để đảm bảo co giãn chuẩn nhất bạn cắt ảnh ở giữa càng nhỏ càng tốt (vì phần ở giữa giống nhau nên ta cho repeat-x thì n ghép lại cũng giống 1 ảnh thôi :D)
    Ảnh mình cắt cho bạn bên dưới rồi:

     

    Tệp đính kèm:

    hpleduit thanhchunghti thích điều này.
  • Muốn sửa cái tiêu đề mà không được. Với thêm ảnh demo cũng không được :))

     
  • Yamahayuv

    Yamahayuv zwusalmeltfqdxdGP zzusafme2ntkdkxGP

    Báo gấp với BQT nha cưng, hoặc gọi số 114

    blush

     
  • Zelenalsn

    Zelenalsn ZelenafoxOC ZelenacbrOC

    bị lỗi cái này

     

    Tệp đính kèm:

  • Chắc phải cấp quyền cho mấy thánh được phép sửa trong vòng 1 tuần quá smiley

     
  • Cho em sửa đi để em sửa cho chi tiết bác ạ. HD em còn thiếu :))

     
    ductrung thích điều này.
  • HeatherMal

    HeatherMal HeatherMalPE HeatherMalPE

     

    mình cũng bị lỗi này, có cách nào làm kiểu như nguoiquangnam.vn không mọi người

     
  • Yamahayuv

    Yamahayuv zwusalmeltfqdxdGP zzusafme2ntkdkxGP

    Cố lấy css của: http://nguoiquangnam.vn/

    về mà làm....

     
    ductrung thích điều này.
  • Zelenalsn

    Zelenalsn ZelenafoxOC ZelenacbrOC

    bác thành chung cho em hỏi tý là làm sao chuyên mục con nó hiển thị đc như demo của bác vậy à, em làm mà nó bị vỡ, không đc như bác

     
  • Zelenalsn

    Zelenalsn ZelenafoxOC ZelenacbrOC

    cuối cùng cũng mò ra

    thêm lớp css ni nữa là ok

    .list-inline .subtitle .hidden-xs {
        float: left;
        padding-left: 10px;
        padding-top: 5px;
    }

     

     
  • hentai

    hentai hentai hentai

     

    Cụa mình vẫn bị http://dichvu24.net/nukeviet/vi/

     
  • Zelenalsn

    Zelenalsn ZelenafoxOC ZelenacbrOC

    bạn đọc lại của chủ topic, rồi xem qua phần của mình nữa là ok

     
  • hentai

    hentai hentai hentai

    Rõ là chỉ copy. thêm cái của nạn nữa, vẫn lỗi

     
  • các bác cho em hỏi, làm thế nào để ảnh nền tiêu đề của mỗi mục tin là khác nhau?

     

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

     

    Tiêu đề ở vị trí nào bạn ?

    Khi xem bài viết con ?

    Khi xem trang chủ hay ở thanh menu hay ở đâu đó ?

     
    trinhh thích điều này.
  • Em muốn title mỗi chuyên  mục có một hình riêng như thế này.

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây