FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 18 users online :: 0 Registered, 0 Hidden and 18 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

[TUTORIAL] One Widget To Rule Them All

View previous topic View next topic Go down

_Twisted_Mods_
_Twisted_Mods_

Gender : Male
Age : 37
Posts : 36
Points : 3509
Reputation : 20
Location : USA
Language : code
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://liquidcode.forumotion.com/

Post_Twisted_Mods_ Sun 08 Feb 2015, 01:39

this is basically 1 widget to contain multiple widgets



widget - [TUTORIAL] One Widget To Rule Them All 6O6zCdjSSKzWqZqIP3J4+lcstatsdemo


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;}
Van-Helsing
Van-Helsing

Gender : Male
Age : 49
Posts : 853
Points : 4804
Reputation : 84
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
http://itexperts.forumgreek.com/

PostVan-Helsing Sun 08 Feb 2015, 07:38

Nice tutorial @_Twisted_Mods_
_Twisted_Mods_
_Twisted_Mods_

Gender : Male
Age : 37
Posts : 36
Points : 3509
Reputation : 20
Location : USA
Language : code
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://liquidcode.forumotion.com/

Post_Twisted_Mods_ Sun 08 Feb 2015, 13:25

thankyou
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sun 08 Feb 2015, 15:21

I'll say it again twisted, it's awesome ! Mr. Green

I do have a small suggestion Surprised

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. Rolling Eyes

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. Smile
Michael_vx
Michael_vx

Gender : Male
Age : 32
Posts : 302
Points : 4067
Reputation : 76
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx Sun 08 Feb 2015, 20:01

Confused 
to many steps that i can not handle
do mind make it with a bit shorter steps
sorry im not good with long tutorials Sad
i feel like im more dumber
i forget to say thank you for this tutorial
_Twisted_Mods_
_Twisted_Mods_

Gender : Male
Age : 37
Posts : 36
Points : 3509
Reputation : 20
Location : USA
Language : code
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://liquidcode.forumotion.com/

Post_Twisted_Mods_ Sun 08 Feb 2015, 22:49

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
schiggysboard
schiggysboard

Gender : Male
Posts : 79
Points : 3696
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.schiggysboard.com/

Postschiggysboard Wed 27 May 2015, 11:20

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!
schiggysboard
schiggysboard

Gender : Male
Posts : 79
Points : 3696
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.schiggysboard.com/

Postschiggysboard Sun 31 May 2015, 08:45

bump
schiggysboard
schiggysboard

Gender : Male
Posts : 79
Points : 3696
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.schiggysboard.com/

Postschiggysboard Sat 13 Jun 2015, 06:32

Kadebostany
Kadebostany
New Member
Gender : Unspecified
Posts : 3
Points : 3089
Reputation : 2
Language : Turkish, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostKadebostany Mon 19 Oct 2015, 14:18

I'm not sure if it works:

I did all steps and got this:

widget - [TUTORIAL] One Widget To Rule Them All O9r0vQ
Kadebostany
Kadebostany
New Member
Gender : Unspecified
Posts : 3
Points : 3089
Reputation : 2
Language : Turkish, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostKadebostany Wed 21 Oct 2015, 08:56

Bump.
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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