[TUTORIAL] One Widget To Rule Them All

this is basically 1 widget to contain multiple widgets






it contains

• Top posters
  
• Top posting users this month
  
• Recent topics "with scrolling turned off"
  
• Top posting users this week
  
• Most Viewed Topics
  
• Most active topics
  
• list of topics or links of your choice
  
• and last 5 registered users
  

Step 1: so to start with we need to add these five widgets to either our forum widgets or portal widgets
Top posters
Top posting users this month
Recent topics
Top posting users this week
Most Viewed Topics
Most active topics


witch can both be located in acp>modules>portals&widgets

Step 2: create a new widget


Administration Panel > Modules > portal management > structure > Create a widget
or
Administration Panel > Modules > Forum widgets management > Create a widget
Name : Your choice
Use a table type: no
Title: Your choice

Step 2.1: first you will need to add the css to the new widget .. this is just default fill free to change it up to fit your forum better

Code:

<style>

#lcrctopics {
    float: left;
    width: 100%;
    height: 135px;
    background-color: #eee;
color: #000;
    overflow: auto;
}
#lctabs:hover, #lctabs1:hover, #lcrctitle:hover{background-color:#fff;cursor: pointer;}
#tmrowz {
    width: 100%;
    display: inline-block;
 border-bottom:1px solid #000;

}

#lcrtfooter {
    width: 100%;
    display: block;
    background-color: #EEE;
    color: #000;
    padding: 2px 0px;
    border-radius: 0px 0px 5px 5px;
    border-top: 1px solid rgba(0,0,0,0.5);
    text-align: right;
box-shadow: 0px -10px 6px rgba(0, 0, 0, 0.2) inset, 0px 10px 6px rgba(255, 255, 255, 0.2) inset;
}
#tmleft {
    width: 45%;
    display: inline-block;
    height: 15px;
    overflow: hidden;
    padding-right: 5%;
}
#lctabs,#lctabs1,#lcrctitle {
     text-align: center;
    text-decoration: none !important;
    font-size: 11px;
    vertical-align: middle;
    display: inline-block;
    box-shadow: 0px 10px 6px rgba(255, 255, 255, 0.3) inset, 0px -10px 6px rgba(0, 0, 0, 0.05) inset;
    border-style: none none solid;
    width: 50%;
    border-bottom: 1px solid #808080;
    background-color: #ccc;
    color: #000;
}
#lctabs1 {border-right: 1px solid #000; width: 49%;}
#lctopbox {
    display: block;
    width: 100%;
    height: 122px;
      background-color: #eee;
    color: #000;
    overflow: auto;
}
#lcrcbox {
    color: black;
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: inline-flex;

}
#lcrctheader {
    text-align: center;
    width: 100%;
    display: block;
    padding: 2px 0px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px 5px 0px 0px;
    box-shadow: 0px -10px 6px rgba(255, 255, 255, 0.3) inset, 0px 10px 6px rgba(0, 0, 0, 0.2) inset;
    background-color: #eee;
    color: #000;
}
#lctoppost {
    height: 150px;
    display: inline-block;
    width: 30%;
border-right: 1px solid rgba(0,0,0,0.5);
}
#lcrcmainbox {
    border: 1px solid rgba(0,0,0,1);
    border-radius: 5px;
}
#lcrctitle {
    text-align: center;
    display: inline-block;
    width: 100%;
}
#lctabsbox {
    height: 15px;
    display: inline-flex;
    width: 100%;
}
#lcrightbox {
    width: 70%;
    display: block;
}
#rctitle {
    width: 40%;
    display:inline-block;
 height:12px;
 overflow:hidden
}
#author {
    width: 30%;
    display:inline-block;
}
.lcactive {
    background-color: rgb(136, 136, 136) !important;
    color: rgb(0, 0, 0) !important;
}

</style>

step 3: we will add this script

Code:

<script>
jQuery(function(){

/*invision- jQuery('#main-content .borderwrap').eq(0).before('<div id="thisbox"></div>');
jQuery('#lcrcmainbox').detach().prependTo('#thisbox'); -*/

/*punbb- jQuery('#main-content .main').eq(1).before('<div id="thisbox"></div>');
jQuery('#lcrcmainbox').detach().prependTo('#thisbox'); -*/

/*phpbb3- jQuery('.linklist').eq(1).after('<div id="thisbox"></div>');
jQuery('#lcrcmainbox').detach().prependTo('#thisbox'); -*/

/*phpbb2- jQuery('.three-col > tbody > tr > td:eq(1) .forumline').eq(1).before('<div id="thisbox"></div>');
jQuery('#lcrcmainbox').detach().prependTo('#thisbox'); -*/

 
jQuery('#lcrctheader').text = "Lc Statics";
});
function lcaddlinks(){
var linnks = ['Welcome Center|http://liquidcode.forumotion.com/f5-welcome-center|A place to introduce yourself','Liquid Code|http://liquidcode.forumotion.com/|Awesome place for awesome scripts'];
var boxlinks = "";
for(var i =0;i<linnks.length;i++){
linksplit = linnks[i].split('|');
boxlinks = boxlinks +'<span id="tmrowz"><a href="'+linksplit[1]+'">'+linksplit[0] +' -- '+linksplit[2]+'</a></span><br>';
};
jQuery('#lcrctopics').html(boxlinks);
};</script>

now before we goto next step there are few things we need to change in this script above



step 3.1: if u chose to use the portal skip this step ... it is make the widget go over the top of topics...
above you will see

Code:

/*forumversion- jQuery(----); -*/

find your forum version and remove  /*yourversion-  and -*/ at the end



step 3.2: change the title of the widget

Code:

Lc Statics

Step 3.3: this is a list of your custom urls or other links

Code:

'Welcome
Center|http://liquidcode.forumotion.com/f5-welcome-center|A place to
introduce yourself','Liquid
Code|http://liquidcode.forumotion.com/|Awesome place for awesome scripts']

the setup is

Code:

'title | url | description'

seperated by a comma, for each url




Step 4: add this small bit of html

Code:

<div id="lcrcmainbox"></div>
<div id="lcloadboxes" style="display:none;">
<div id="lcloadbox1"></div>
<div id="lcloadbox2"></div>
<div id="lcloadbox3"></div>
<div id="lcloadbox4"></div>
<div id="lcloadbox5"></div>
<div id="lcloadbox6"></div>
<div id="lcloadbox7"></div>
</div>

Step 5: choose your script below and add it

:phpbb2:

Code:

<script src="http://yourjavascript.com/0821112155/lcstaticsbb2.js"></script>

:phpbb3:

Code:

<script src="http://yourjavascript.com/124448155/lcstaticsbb3.js"></script>

:invision:

Code:

<script src="http://yourjavascript.com/185128475/lcstaticsinvis.js"></script>

:punbb:

Code:

<script src="http://yourjavascript.com/1148223150/lcstaticspunbb.js"></script>

Step 6: save the widget



Step 7:
if you use other widgets only use one side or the master widget wont have enough width to display correct
also make sure the side your not using has the width set to 1px and set all widgets for this project in that side then you can add one of these to the css in the master widget

left side

Code:

#left{display:none!important;}

right side

Code:

#right{display:none!important;}

Nice tutorial @_Twisted_Mods_

thankyou

I'll say it again twisted, it's awesome !

I do have a small suggestion

It doesn't matter too much in HTML5 and somethings installed by default cause minor errors, but since Forumotion uses XHTML transitional, it's good practice to include the MIME type for stylesheets and scripts. CDATA is useful to use for scripts, although the widget management always makes unhelpful corrections.

For scripts : http://xhtml.com/en/xhtml/reference/script/
For sheets : http://xhtml.com/en/xhtml/reference/style/

It's good to know if you plan to write HTML documents with the same doctype. I usually check my documents here from time to time.

Again, nice work.

 
to many steps that i can not handle
do mind make it with a bit shorter steps
sorry im not good with long tutorials
i feel like im more dumber
i forget to say thank you for this tutorial

its actually quite short most of it is just explaining options ... ty both of you ... and ange ill have to try to do that i just always forget

Hi,

I tried to install that, but it doesn't work for me. I don't know how follow the steps in this tutorial correctly.

I put all codes from this tutorial (css, script, html) in ONE widget in order as in the tutorial. Also I followed step 3.1.

Step 7 says to put all widgets for this tutorial in the column which is not in use (so in my phpbb3 forum the right column). I did that. So in which column do I have to put this (master) widget?

There is also written that width should set to 1 px, but that is not possible?!
Also in step 7 is a little bit css. I added it to css from step 2.1 in the widget. Do I will have to use the one for 'right side', if the left is in use and the widgets for THIS tutorial are on the right?

Well, this is the widget content like I did (as I said pasted in order as in tutorial ^-^)

Spoiler:

I would be very grateful to get an answer for my questions and problem!

bump

bump
@Ange Tuteur

I'm not sure if it works:

I did all steps and got this:

Bump.