Widget optie !!!

van peepplaza di 12 jan 2016 - 18:06

Boven aan dit forum zie jezelf staan ingelogd als.
Vervolgens zie je eigen avatar staan en o.a. in Algemeen je rang, aantal berichten, pm's en reputatie etc.

Is dit ook mogelijk als widget?

van 10spetter10 di 12 jan 2016 - 19:35

Er is een standaard widget 'inloggen' die ongeveer hetzelfde laat zien. Namelijk de gebruikernaam, avatar, aantal berichten en aantal privéberichten. Als je er meer op zou willen moet je dit aanpassen met javascript/html.

Als je me zegt wat er allemaal op moet wil ik wel eens kijken om dit te doen. Smile

van peepplaza di 12 jan 2016 - 22:19

Beste Spetter bedankt voor de snelle reactie.

Ik heb de standaard widget inloggen even geactiveerd maar viel mij direct op dat ik hier zelf niets in kan bewerken (geen rond geel schijfje/wieltje) en tevens op de index pagina rommelig staat i.v.m. dat niets is gecentreerd.

Het liefst zou ik momenteel iets van het volgende willen hebben staan als dit mogelijk is:

Rang:
Berichten:
PMs:
Leeftijd:
Locatie:
Mijn onderwerpen: (link naar mijn onderwerpen)
Browser: (zag ik voorheen hier tot de nieuwe layout)
IP adres:
Profiel: (link)

Ik ben benieuwd wat de mogelijkheden zijn, het heeft geen haast.

Groeten Danny

van 10spetter10 di 12 jan 2016 - 23:14

Je kan die standaardwidgets aanpassen in de templates. Maar voor ik begin zou je eens kunnen zeggen of je nog steeds punBB gebruikt en welke soort profiel je hebt ingesteld, simpel of geavanceerde?

van peepplaza wo 13 jan 2016 - 7:03

Ja gebruik punbb geavanceerd.

van 10spetter10 wo 13 jan 2016 - 15:02

Normaal zou de widget alles moeten bevatten als je deze template gebruikt.

Beheerderspaneel

Display

Templates

Portaal

mod_login:

Code:: <div class="module main">  <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div> <div class="main-content"> <form action="{S_LOGIN_ACTION}" method="post"> <fieldset class="frm-set login"> <dl> <dt><label for="username">{L_USERNAME}:</label></dt> <dd><input type="text" tabindex="1" name="username" id="username" size="20" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></dd> </dl> <dl> <dt><label for="password">{L_PASSWORD}:</label></dt> <dd><input type="password" tabindex="2" id="password" name="password" size="20" maxlength="25" class="inputbox autowidth" /></dd> <dd><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></dd> </dl> <dl> <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /> {L_AUTO_LOGIN}</label></dd> </dl> <dl> <dd style="text-align:center;"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></dd> </dl>  <dl> <dd style="text-align:center;"> <div class="fb_login_widget"> <div class="fb_or_widget">{switch_login.switch_fb_connect_login.L_OR}</div> <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button> </div> </dd> </dl>  </fieldset> </form> </div>   <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div> <div class="main-content"> <form action="{S_LOGIN_ACTION}" method="post"> <p><label for="username"><strong>{L_USERNAME}:</strong></label></p> <p style="height:2em;valign:top;"><input type="text" name="username" id="username" size="15" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></p> <p><label for="password"><strong>{L_PASSWORD}:</strong></label></p> <p style="height:2em;valign:top;"><input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" /></p> <p><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></p> <br> <p><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /><label for="autologin"> {L_AUTO_LOGIN}</label></p> <br> <p align="center"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></p>  <div class="fb_login_widget"> <div class="fb_or_widget">{switch_login_small.switch_fb_connect_login.L_OR}</div> <p align="center"><fb:login-button size="small" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login_small.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login_small.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button> </p> </div>  </form> </div>   <div id="profile_cont"> <div class="main-head"><h3>{USERNAME}</h3></div> <div class="main-content clearfix details"> <div class="left"> {USERNAME_AVATAR} </div> <dl class="left"> <dt>Rang: </dt> <dd id="profile_rank"></dd> <dt>{L_MESSAGES}: </dt> <dd> {NB_MESSAGES} </dd> <dt>{L_PM}: </dt> <dd> {NB_PM_UNREAD} / {NB_PM_READ}</dd> <dt>Leeftijd: </dt> <dd id="profile_age"></dd> <dt>Locatie: </dt> <dd id="profile_loc"></dd> <dt>IP-adres: </dt> <dd id="profile_ip"></dd> <dt>Browser: </dt> <dd id="profile_browser"></dd> <dd style="text-align: center;"><a id="profile_topics" href="#">Mijn onderwerpen</a></dd> <dd style="text-align: center;"><a href="{U_PROFILE}">{L_MY_PROFILE}</a></dd> </dl> </div> </div>  </div>  <div id="fb-root"></div> <script> FB.init({ appId : {switch_fb_widget_login.FACEBOOK_APP_ID}, cookie : true, xfbml : true, oauth : true, version : 'v2.3' }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>  <script> //<![CDATA[ $(function(){$("#profile_rank").html(_lang.rank_title),$.get("/u"+_userdata.user_id,function(e){var r=$(""+e);$("#profile_age").html(r.find('#profile-advanced-details dl:contains("Leeftijd") div.field_uneditable').html()),$("#profile_loc").html(r.find('#profile-advanced-details dl:contains("Woonplaats") div.field_uneditable').html())}),$("#profile_topics").attr("href","/st/"+_userdata.username),$.get("http://ipinfo.io",function(e){$("#profile_ip").html(e.ip)},"jsonp"),navigator.userAgent.search("MSIE")>=0?browser="Internet Explorer":navigator.userAgent.search("Chrome")>=0?browser="Chrome":navigator.userAgent.search("Firefox")>=0?browser="Firefox":navigator.userAgent.search("Safari")>=0&&navigator.userAgent.search("Chrome")<0?browser="Safari":navigator.userAgent.search("Opera")>=0?browser="Opera":browser="ongekend",$("#profile_browser").html(browser)}); //]]> </script>

van peepplaza wo 13 jan 2016 - 16:52

Ik heb de code geplakt in Mod_login maar eerlijk gezegd begrijp ik het niet helemaal wat dit moet gaan doen, moet ik de oude code nu verwijderen in Mod_login en de nieuwe laten staan of gewoon beide laten staan?
(in mijn widget is namelijk nog niets veranderd)

van 10spetter10 wo 13 jan 2016 - 18:30

Oke, een iets uitgebreidere uitleg.

Template 'mod_login' wijzigen

Beheerderspaneel Display Templates Portaal

Hier zoek je naar 'mod_login' en klik je op :*:, een nieuw scherm verschijnt waar je heel de code die er staat vervangt door onderstaande.

Code:
<div class="module main">  <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div> <div class="main-content"> <form action="{S_LOGIN_ACTION}" method="post"> <fieldset class="frm-set login"> <dl> <dt><label for="username">{L_USERNAME}:</label></dt> <dd><input type="text" tabindex="1" name="username" id="username" size="20" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></dd> </dl> <dl> <dt><label for="password">{L_PASSWORD}:</label></dt> <dd><input type="password" tabindex="2" id="password" name="password" size="20" maxlength="25" class="inputbox autowidth" /></dd> <dd><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></dd> </dl> <dl> <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /> {L_AUTO_LOGIN}</label></dd> </dl> <dl> <dd style="text-align:center;"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></dd> </dl>  <dl> <dd style="text-align:center;"> <div class="fb_login_widget"> <div class="fb_or_widget">{switch_login.switch_fb_connect_login.L_OR}</div> <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button> </div> </dd> </dl>  </fieldset> </form> </div>   <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div> <div class="main-content"> <form action="{S_LOGIN_ACTION}" method="post"> <p><label for="username"><strong>{L_USERNAME}:</strong></label></p> <p style="height:2em;valign:top;"><input type="text" name="username" id="username" size="15" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></p> <p><label for="password"><strong>{L_PASSWORD}:</strong></label></p> <p style="height:2em;valign:top;"><input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" /></p> <p><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></p> <br> <p><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /><label for="autologin"> {L_AUTO_LOGIN}</label></p> <br> <p align="center"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></p>  <div class="fb_login_widget"> <div class="fb_or_widget">{switch_login_small.switch_fb_connect_login.L_OR}</div> <p align="center"><fb:login-button size="small" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login_small.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login_small.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button> </p> </div>  </form> </div>   <div id="profile_cont"> <div class="main-head"><h3>{USERNAME}</h3></div> <div class="main-content clearfix details"> <div class="left"> {USERNAME_AVATAR} </div> <dl class="left"> <dt>Rang: </dt> <dd id="profile_rank"></dd> <dt>{L_MESSAGES}: </dt> <dd> {NB_MESSAGES} </dd> <dt>{L_PM}: </dt> <dd> {NB_PM_UNREAD} / {NB_PM_READ}</dd> <dt>Leeftijd: </dt> <dd id="profile_age"></dd> <dt>Locatie: </dt> <dd id="profile_loc"></dd> <dt>IP-adres: </dt> <dd id="profile_ip"></dd> <dt>Browser: </dt> <dd id="profile_browser"></dd> <dd style="text-align: center;"><a id="profile_topics" href="#">Mijn onderwerpen</a></dd> <dd style="text-align: center;"><a href="{U_PROFILE}">{L_MY_PROFILE}</a></dd> </dl> </div> </div>  </div>  <div id="fb-root"></div> <script> FB.init({ appId : {switch_fb_widget_login.FACEBOOK_APP_ID}, cookie : true, xfbml : true, oauth : true, version : 'v2.3' }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>  <script> //<![CDATA[ $(function(){$("#profile_rank").html(_lang.rank_title),$.get("/u"+_userdata.user_id,function(e){var r=$(""+e);$("#profile_age").html(r.find('#profile-advanced-details dl:contains("Leeftijd") div.field_uneditable').html()),$("#profile_loc").html(r.find('#profile-advanced-details dl:contains("Woonplaats") div.field_uneditable').html())}),$("#profile_topics").attr("href","/st/"+_userdata.username),$.get("http://ipinfo.io",function(e){$("#profile_ip").html(e.ip)},"jsonp"),navigator.userAgent.search("MSIE")>=0?browser="Internet Explorer":navigator.userAgent.search("Chrome")>=0?browser="Chrome":navigator.userAgent.search("Firefox")>=0?browser="Firefox":navigator.userAgent.search("Safari")>=0&&navigator.userAgent.search("Chrome")<0?browser="Safari":navigator.userAgent.search("Opera")>=0?browser="Opera":browser="ongekend",$("#profile_browser").html(browser)}); //]]> </script>

Klik nu op 'Verzenden' en bevestig de aanpassing door naast de template nog eens op :add: te drukken.
Template 'mod_login' wijzigen

Nu moet je de widget 'Inloggen' nog instellen op je forum. Ga hiervoor naar het forum widget beheer:

Beheerderspaneel Modules Portaal & Widgets Forum widgets beheer

Zoek hier in het tabblad 'Existing widgets' naar 'Inloggen' en plaats die in je widgetbalk.

van peepplaza wo 13 jan 2016 - 20:14

Oke gelukt maar zie geen verbetering ten opzichte voorheen!
Ik heb geen portaal, zou ik hem dan niet bij Templates algemeen ergen moeten neerzetten?

Ik zag wel in de code de optie's staan die ik graag zou willen zien.

van 10spetter10 wo 13 jan 2016 - 20:28

Het zou voldoende moeten zijn om deze in de widgetbalk te steken, je hoeft geen portaal te hebben. Zorg dan ook dat je in het Forum widgets beheer zit en niet in het Portal beheer.

van peepplaza do 14 jan 2016 - 20:44

Wat ik dacht kan ook niet ben ik achter, het moet idd in Forum widgets beheer
Ik heb precies zo gedaan zoals je omschreef maar geen resultaat Crying or Very sad

van 10spetter10 za 16 jan 2016 - 10:24

Heb je eigenlijk ook al andere widgets ingesteld op je forum en werken die nog nadat je de code instelde?
Kan je ook eens de url naar je forum posten, want degene in je profiel is het volgens mij niet, die is phpBB2.

van peepplaza za 16 jan 2016 - 11:54

Ik heb eigenlijk alleen de standaard widgets erop zitten, wel andere gehad om te testen.
De andere standaard widgets werken naar mijn idee gewoon goed.

forum adres is: http://waterzoekers.actieforum.com/

van 10spetter10 za 16 jan 2016 - 12:06

Heb je misschien je templates op standaard geforceerd? Kijk eens of je bovenaan bij de templatesopties de optie 'Force the default templates :' op 'ja' hebt staan. Als dat zo zou zijn verander het dan naar 'nee'.

Als het dat niet is zou ik eigenlijk moeten kijken op jouw forum/beheerderspaneel wat er misloopt. Embarassed

van peepplaza za 16 jan 2016 - 12:35

Yes dat was dus het probleem........opgelost Very Happy

Super weer Spetter Widget optie !!! 3613474791

Alleen volgens mij werkt de Brwoser optie niet en staat de avatar niet mooi gecentreerd, heb je hier nog tips voor?

In elk geval super bedankt weer

van 10spetter10 za 16 jan 2016 - 14:30

Hmm, de code die ik gebruikte voor de browser te zoeken was wat verouderd. Probeer deze eens :

Code:: <div class="module main">  <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div> <div class="main-content"> <form action="{S_LOGIN_ACTION}" method="post"> <fieldset class="frm-set login"> <dl> <dt><label for="username">{L_USERNAME}:</label></dt> <dd><input type="text" tabindex="1" name="username" id="username" size="20" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></dd> </dl> <dl> <dt><label for="password">{L_PASSWORD}:</label></dt> <dd><input type="password" tabindex="2" id="password" name="password" size="20" maxlength="25" class="inputbox autowidth" /></dd> <dd><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></dd> </dl> <dl> <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /> {L_AUTO_LOGIN}</label></dd> </dl> <dl> <dd style="text-align:center;"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></dd> </dl>  <dl> <dd style="text-align:center;"> <div class="fb_login_widget"> <div class="fb_or_widget">{switch_login.switch_fb_connect_login.L_OR}</div> <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button> </div> </dd> </dl>  </fieldset> </form> </div>   <div class="main-head"><h1 class="page-title">{L_LOGIN}</h1></div> <div class="main-content"> <form action="{S_LOGIN_ACTION}" method="post"> <p><label for="username"><strong>{L_USERNAME}:</strong></label></p> <p style="height:2em;valign:top;"><input type="text" name="username" id="username" size="15" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></p> <p><label for="password"><strong>{L_PASSWORD}:</strong></label></p> <p style="height:2em;valign:top;"><input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" /></p> <p><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></p> <br> <p><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /><label for="autologin"> {L_AUTO_LOGIN}</label></p> <br> <p align="center"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></p>  <div class="fb_login_widget"> <div class="fb_or_widget">{switch_login_small.switch_fb_connect_login.L_OR}</div> <p align="center"><fb:login-button size="small" onlogin="window.location='/facebook_connect.forum'" scope="{switch_login_small.switch_fb_connect_login.L_FB_PERMISSIONS}" class="margTop4">{switch_login_small.switch_fb_connect_login.L_FB_LOGIN_BUTTON}</fb:login-button> </p> </div>  </form> </div>   <div id="profile_cont"> <div class="main-head"><h3>{USERNAME}</h3></div> <div class="main-content clearfix details"> <div class="left"> {USERNAME_AVATAR} </div> <dl class="left"> <dt>Rang: </dt> <dd id="profile_rank"></dd> <dt>{L_MESSAGES}: </dt> <dd> {NB_MESSAGES} </dd> <dt>{L_PM}: </dt> <dd> {NB_PM_UNREAD} / {NB_PM_READ}</dd> <dt>Leeftijd: </dt> <dd id="profile_age"></dd> <dt>Locatie: </dt> <dd id="profile_loc"></dd> <dt>IP-adres: </dt> <dd id="profile_ip"></dd> <dt>Browser: </dt> <dd id="profile_browser"></dd> <dd style="text-align: center;"><a id="profile_topics" href="#">Mijn onderwerpen</a></dd> <dd style="text-align: center;"><a href="{U_PROFILE}">{L_MY_PROFILE}</a></dd> </dl> </div> </div>  </div>  <div id="fb-root"></div> <script> FB.init({ appId : {switch_fb_widget_login.FACEBOOK_APP_ID}, cookie : true, xfbml : true, oauth : true, version : 'v2.3' }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>  <script> //<![CDATA[ $(function(){var browser=get_browser_info();$("#profile_rank").html(_lang.rank_title),$.get("/u"+_userdata.user_id,function(e){var r=$(""+e);$("#profile_age").html(r.find('#profile-advanced-details dl:contains("Leeftijd") div.field_uneditable').html()),$("#profile_loc").html(r.find('#profile-advanced-details dl:contains("Woonplaats") div.field_uneditable').html())}),$("#profile_topics").attr("href","/st/"+_userdata.username),$.get("http://ipinfo.io",function(e){$("#profile_ip").html(e.ip)},"jsonp"),$("#profile_browser").html(browser.name)}); function get_browser_info(){var e,r=navigator.userAgent,a=r.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)||[];return/trident/i.test(a[1])?(e=/\brv[ :]+(\d+)/g.exec(r)||[],{name:"IE ",version:e[1]||""}):"Chrome"===a[1]&&(e=r.match(/\bOPR\/(\d+)/),null!=e)?{name:"Opera",version:e[1]}:(a=a[2]?[a[1],a[2]]:[navigator.appName,navigator.appVersion,"-?"],null!=(e=r.match(/version\/(\d+)/i))&&a.splice(1,1,e[1]),{name:a[0],version:a[1]})} //]]> </script>

van peepplaza za 16 jan 2016 - 14:50

Top Spetter helemaal gelukt en erg blij mee, zal zelf nog even de code bekijken om de avatar te centreren. nogmaals super bedankt Widget optie !!! 3613474791

Gr, Danny

van peepplaza za 16 jan 2016 - 20:25

Toch nog even een vraag voordat deze topic op gesloten staat:

Avatar centreren en kleiner maken lukt mij niet, heb wat dingen geprobeerd in de code en weer hersteld........enig idee hoe ik dit voor elkaar krijg.

van 10spetter10 zo 17 jan 2016 - 0:23

Je kan deze css eens proberen:

Code:: #profile_cont .left { float: none; } #profile_cont .details img { margin: 0px auto; display: block; width: 40px; /*breedte kan je aanpassen naar keuze */ }

van peepplaza zo 17 jan 2016 - 9:05

Top helemaal gelukt.
Kan een slotje op.

van 10spetter10 zo 17 jan 2016 - 10:57

..	Ondersteunings Vraag opgelost en gesloten.

Widget optie !!!

Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!

Re: Widget optie !!!