Tìm kiếm nhanh

Hướng dẫn thêm hình minh họa cho trang chủ tin tức

Thảo luận trong 'Modules tin tức' đăng bởi nhimthulinh, 07/07/2016 13:47.

  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    Để hiện thị hình ảnh nhỏ bên tin bên phải hay trái hoặc dưới chuyên mục ta làm như sau

    mở file: themes/default/css/news.css tìm đoạn css:

    div.news_column ul.related li {
        padding:0 4px 0 0;
    }

    thêm float: left; ta được

    div.news_column ul.related li {
    	float: left;
        padding:0 4px 0 0;
    }
    

    - Tiếp theo ta mở file mở file: themes/default/modules/news/viewcat_main_right.tpl

    tìm 

    <!-- BEGIN: related -->
    	Nội dung bên trong
    <!-- END: related -->

    thay thế bằng đoạn này

    <!-- BEGIN: related -->
    <div class="col-md-8">
    <ul class="related">
    <!-- BEGIN: loop -->
    <li>
    <a class="show h4" href="{OTHER.link}" title="{OTHER.title}" <!-- BEGIN: tooltip -->data-content="{OTHER.hometext}" data-img="{OTHER.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip -->><img src="{OTHER.imghome}" alt="{OTHER.title}" width="50" class="img-thumbnail pull-left " />{OTHER.title_0}</a>
    </li>
    <!-- END: loop -->
    </ul>
    </div>
    <!-- END: related -->

    Tiếp theo mở file modules/news/theme.php tìm function viewsubcat_main($viewcat, $array_cat)

    kéo xuống dưới tìm dòng $xtpl->assign('OTHER', $array_row_i);

    trước nso ta thêm đoạn

     $array_row_i['title_0'] = nv_clean60($array_row_i['title'], 50);

    xong hoàn tất

     

     

    Tệp đính kèm:

    Lần sửa cuối bởi bạn: 07/07/2016 13:53
    manhphan thích điều này.
  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    Mún hình tin chính full khi vào mobi thì ta làm như sau

    mở file: themes/default/css/style.responsive.css tìm đoạn css: @media (max-width:499px) {

    thêm vào

    .img_full{width: 100%; margin: auto}

    sau đó mở file: themes/default/modules/news/viewcat_main_right.tpl

     class="img-thumbnail pull-left imghome"

    thêm vào  img_full vào sẽ đc

     class="img_full img-thumbnail pull-left imghome"

     
    Lần sửa cuối bởi bạn: 07/07/2016 14:40
    Đông Gioăng huongpro_love dangdinhtu thích điều này.
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    Anh nhím giỏi quá hoan frown

     
    tuphung thích điều này.
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng


    E quên mất toàn clean luôn title thế là các thẻ alt cũng bị cắt luôn smiley

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Thỉnh thoảng a ấy bực là a ấy làm cho 1 bài ntn a ạ :V 

     
  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    mất có 3 phút thôi mà 3 người cày cả 2 tiếng thấy thông báo phát bực mà bảo up lên diễn đàn đi thì ko chịu

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Cái giới hạn tin thì em làm cho được ngay, có cái css ý nói mà cứ bảo ko được xong ko có demo, em cũng khó chịu :3 

     
  • Đông Gioăng

    Đông Gioăng Chung Bảo Ngọc

    Nhân tiện bác cho em hỏi khi hiển thị trên mobile. Em muốn hình ảnh của tin đầu tiên hiển thị kích thước 100% của thiết bị thì làm như thế nào ạ.Em thử thêm width:100% vào .img-thumbnail nhưng như thế thì khi hiển thị trên PC hình ảnh sẽ hiển thị 100% kích thước của hình anh ạ :(

     

    Tệp đính kèm:

    • 245.png
      245.png
      Dung lượng:
      70.50 KB
      Lượt xem:
      16
  • Đông Gioăng

    Đông Gioăng Chung Bảo Ngọc

     

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Thế trên PC bạn muốn n hiển thị bao nhiêu %

     
  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    mở file: themes/default/css/style.responsive.css tìm đoạn css: @media (max-width:499px) {

    thêm vào

    .img_full{width: 100%; margin: auto}

    sau đó mở file: themes/default/modules/news/viewcat_main_right.tpl

     class="img-thumbnail pull-left imghome"

    thêm vào  img_full vào sẽ đc

     class="img_full img-thumbnail pull-left imghome"

    đơn giản chỉ có thế thôi

     
    Đông Gioăng thích điều này.
  • Đông Gioăng

    Đông Gioăng Chung Bảo Ngọc

    Trên pc em muốn nó hiển thị theo kích thước cài đặt module tin tức 

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Bạn muốn dùng trên destkop và trên mobile 2 kích thước khác nhau thì phải dùng reponsive, mà reponsive chỉ có thể css được class chứ ko thay đổi được kích thước của ảnh nên ko lấy theo trong cấu hình module được. 

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Nếu làm reponsive bạn làm như a Nhím hướng dẫn đó

     
  • Đông Gioăng

    Đông Gioăng Chung Bảo Ngọc

    Cảm ơn bác nhím ạ em làm đc rồi

     
  • Ở giao diện 2 cột thì chỉnh sửa ra sao Nhím Thủ Lĩnh ơi. Trong file viewcat_two_column.tpl không có đoạn

    <!-- BEGIN: related -->
    	Nội dung bên trong
    <!-- END: related -->

     

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Với dạng 2 cột thì các tin nhỏ bên dưới là đoạn sau:

    <!-- BEGIN: other -->
    <li class="{CLASS}">
    	<a class="show h4" href="{CONTENT.link}" <!-- BEGIN: tooltip -->data-content="{CONTENT.hometext}" data-img="{CONTENT.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{CONTENT.title}">{CONTENT.title}</a>
    </li>
    <!-- END: other -->
    

     

     
    BumzChiu thích điều này.
  • Thay đoạn 

    <!-- BEGIN: related -->
    <div class="col-md-8">
    <ul class="related">
    <!-- BEGIN: loop -->
    <li>
    <a class="show h4" href="{OTHER.link}" title="{OTHER.title}" <!-- BEGIN: tooltip -->data-content="{OTHER.hometext}" data-img="{OTHER.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip -->><img src="{OTHER.imghome}" alt="{OTHER.title}" width="50" class="img-thumbnail pull-left " />{OTHER.title_0}</a>
    </li>
    <!-- END: loop -->
    </ul>
    </div>
    <!-- END: related -->

    vào đoạn

    <!-- BEGIN: other -->
    <li class="{CLASS}">
    	<a class="show h4" href="{CONTENT.link}" <!-- BEGIN: tooltip -->data-content="{CONTENT.hometext}" data-img="{CONTENT.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{CONTENT.title}">{CONTENT.title}</a>
    </li>
    <!-- END: other -->

    Không được anhyeuviolet ạ

     
  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    <ul class="related">
    <!-- BEGIN: other -->
    <li>
    <a class="show h4" href="{CONTENT.link}" <!-- BEGIN: tooltip -->data-content="{CONTENT.hometext}" data-img="{CONTENT.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{CONTENT.title}"><img src="{CONTENT.imghome}" alt="{CONTENT.title}" width="50" class="img-thumbnail pull-left " />{CONTENT.title}</a>
    </li>
     <!-- END: other -->
     </ul>

    trong thẻ  <!-- BEGIN: loopcat --> nhé , phía dưới ấ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