vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   Who can help to modify RecentArticle widget layout (https://vborg.vbsupport.ru/showthread.php?t=320182)

SilverBoy 09-10-2015 12:35 AM

Who can help to modify RecentArticle widget layout
 
1 Attachment(s)
Hi

I want to change the template of recent articles widget to looks like the picture, I think it is easy but I don't have experience in CSS stuff.

Attachment 153332

I want some one to explain to me how I can divide results to 2 columns, and in this CSS the main column contain only one article with preview text and the other column contain 4 articles with title only.

Thanks in advance.

SilverBoy 09-11-2015 02:51 AM

I used this code to implement this layout
HTML Code:

<div class="cms_widget">
    <div class="block">
          <div class="cms_widget_header">
              <h3>{vb:raw widget_title}</h3>
          </div>
          <div class="cms_widget_content widget_content">
              <div class="list-box">
                    <ul>
                        <vb:each from="articles" key="contentid" value="article">
                                <vb:if condition="$article['num'] == 1">
                                        <li class="first-news">
                                            <div class="cms_widget_post_bit widget_post_bit">
                                                <div><a href="{vb:raw article.page_url}">
                                                <img style="border: 3px solid #FFFFFF; float: right; margin: 7px; outline: 1px solid #C8C8C8;" alt="{vb:raw article.title}" src="{vb:raw article.previewimage}" width="390" height="220px" />
                                                </a></div>
                                                <vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
                                                        <h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
                                                </vb:if>
                                                {vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a>
                                                <a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"></a>
                                            </div>
                                        </li>
                                <vb:else />
                                          <li class="other-news">
                                              <div class="cms_widget_post_bit widget_post_bit">
                                                  <a href="{vb:raw article.page_url}">
                                                  <img style="border: 3px solid #FFFFFF; float: right; margin: 7px; outline: 1px solid #C8C8C8;" alt="{vb:raw article.title}" src="{vb:raw article.previewimage}&amp;thumb=1&amp;stc=1" width="100px" height="66px" /></a>
                                                  <div class="cms_widget_content widget_content">
                                                        <vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
                                                              <a href="{vb:raw article.page_url}">{vb:raw article.title}</a>
                                                        </vb:if>
                                                  </div>
                                              </div>
                                          </li>
                                </vb:if>
                        </vb:each>
                    </ul>
                    <div class="clear"> </div>
              </div>
          </div>
    </div>
</div>

and in additional CSS I added this code
HTML Code:

.list-box li {
    clear: left;
    float: left;
    overflow: hidden;
    padding: 10px;
    width: 50%;
}
.list-box li.other-news {
    border-right: 3px solid #eaeaea;
}
.list-box li.first-news {
    float: right;
    padding: 15px;
}
*, *::before, *::after{
box-sizing: border-box;
}

every thing works great, but this part of code making truples in alot of site parts
HTML Code:

*, *::before, *::after{
box-sizing: border-box;
}

for example, user drop down menu appear like a mixing rows, so do you have any suggestion to solve this problem??


All times are GMT. The time now is 10:40 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01173 seconds
  • Memory Usage 1,733KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (2)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete