Master Widget

View previous topic View next topic Go down

Master Widget

Post by _Twisted_Mods_ on 2/8/2015, 3:21 am

avatar
_Twisted_Mods_
Founder
Founder

Posts : 101
Reputation : 2
Birthday : 1986-08-05
Join date : 2014-10-03
Age : 30
Location : USA

View user profile
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

Step2.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 2.2: 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 2.3: 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 2.4: change the title of the widget


Code:
Lc Statics



Step 2.5: 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 3: 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 4: 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 5: save the widget



Step 6:
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;}


Last edited by _Twisted_Mods_ on 3/5/2015, 4:43 am; edited 2 times in total

Back to top Go down

Re: Master Widget

Post by Guest on 2/8/2015, 3:56 am


Guest
Guest


Awesome feature, dude! Great work! Super Great!

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum