Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 09-10-2015, 12:35 AM
SilverBoy SilverBoy is offline
 
Join Date: Feb 2002
Location: Libya
Posts: 497
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Who can help to modify RecentArticle widget layout

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.
Reply With Quote
  #2  
Old 09-11-2015, 02:51 AM
SilverBoy SilverBoy is offline
 
Join Date: Feb 2002
Location: Libya
Posts: 497
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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??
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:44 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.03546 seconds
  • Memory Usage 2,202KB
  • Queries Executed 14 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (3)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (2)post_thanks_box
  • (2)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit_info
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete