PBTech

Paul Ajax Shoutbox - PBTech

Paul Ajax Shoutbox

by noth » Wed Jan 14, 2015 8:28 pm

this Ajax Shoutbox is still in Development and should never be used on a Live Board

having said that, what if hypothetically if you were using a demo board PBTech style? if you tried out Paul's BETA shoutbox you would find that it worked fine in PBTech, no problems

however the prosilver ajax_shoutbox_body.html that is held in the ext styles folder is what PBTech uses to display the Shoutbox on the index page

I have tried stripping out the prosilver elements from that body and placing it in a PBTech folder

the ext then stops inheriting the prosilver and uses what you give it in a PBTech folder

unfortunately my trial and error mucking about just succeeded in causing me a long waste of time and some laughable results that got me nowhere

Has anyone else got PBTech up and running and using Paul's Ajax Beta ?? :P
User avatar
noth
Registered User
Posts: 2481
Joined: Fri Jan 07, 2005 7:10 pm
Location: North Surrey
Contact:

Re: Paul Ajax Shoutbox

by PayBas » Fri Jan 16, 2015 8:54 am

I've got a custom template for PTech for this extension. I'll post it somewhere later (I need to update some extensions first and check if anything is broken in the updates).
User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: Paul Ajax Shoutbox

by PayBas » Fri Jan 16, 2015 1:34 pm

Here is my template. Just put it in ext/paul999/ajaxshoutbox/styles/

shoutbox-pbtech.zip
(2.15 KiB) Downloaded 219 times


Also make sure that you have the latest CSS.
https://github.com/PayBas/style-PBTech/ ... #L361-L524

Since the shoutbox ext is still under development, don't expect this template to work forever. I'll remove it if an update breaks it.
User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: Paul Ajax Shoutbox

by noth » Fri Jan 16, 2015 7:44 pm

hi Paybas

I put it in ext/paul999/ajaxshoutbox/styles/
and I added the latest CSS but although the Shoutbox now moved from bottom of the PBTech index page to the top and appears to have improved style the scroll down is now gone and there are squares after each messge in IE11 and Chrome
Attachments
squares after each message.JPG
squares after each message and no scroll down
User avatar
noth
Registered User
Posts: 2481
Joined: Fri Jan 07, 2005 7:10 pm
Location: North Surrey
Contact:

Re: Paul Ajax Shoutbox

by PayBas » Fri Jan 16, 2015 7:53 pm

Did you copy the CSS from the link above?
User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: Paul Ajax Shoutbox

by noth » Fri Jan 16, 2015 8:14 pm

I did but the line numbers from that went across to the notepad++ meaning I had my line nunbers then in the next column your line numbers
I went by hand and manually took out your line numbers from the notepad++

NOW PERFECT!! thank you Paybas, that makes such an amazing improvement, really good, thanks again
Attachments
sorted.JPG
nice one! thank you Paybas
User avatar
noth
Registered User
Posts: 2481
Joined: Fri Jan 07, 2005 7:10 pm
Location: North Surrey
Contact:

Re: Paul Ajax Shoutbox

by Nileson » Thu Jan 22, 2015 9:15 pm

Edit.

I copied folder event and file ajax_shoutbox_body.html to my /ext/paul999/ajaxshoutbox/styles folder.

Whats this about adding some css to where? What CSS code from that link do I add to what file?

Ed: Is it the /styles/pbtech/theme/extensions.css file I need to ad that to?

I done that but still chatbox is not showing on top.

Come on guys! Someone can shed some light? :)
Nileson
Registered User
Posts: 31
Joined: Thu Jan 22, 2015 2:35 am
Contact:

Re: Paul Ajax Shoutbox

by Nileson » Fri Jan 23, 2015 9:41 am

Anyone know?
Nileson
Registered User
Posts: 31
Joined: Thu Jan 22, 2015 2:35 am
Contact:

Re: Paul Ajax Shoutbox

by PayBas » Mon Jan 26, 2015 12:23 pm

Nileson wrote:Edit.

I copied folder event and file ajax_shoutbox_body.html to my /ext/paul999/ajaxshoutbox/styles folder.

Whats this about adding some css to where? What CSS code from that link do I add to what file?

Ed: Is it the /styles/pbtech/theme/extensions.css file I need to ad that to?

I done that but still chatbox is not showing on top.

Come on guys! Someone can shed some light? :)

If you uploaded my template files, your structure should look something like this:
Untitled-1.png


After that, copy these lines to the bottom of your PBTech extesion style file at
forum/styles/pbtech/theme/extensions.css

Code: Select all

/* Ajax Shoutbox
--------------------------------------------- */
.ajaxshoutbox_panel {
   margin: 0 2px;
}

.ajaxshoutbox_post {
   position: relative;
   margin: 5px 0;
}

.ajaxshoutbox_loadingbar:before {
   display: block;
   font-family: FontAwesome;
   content: "\f021";
   font-weight: normal;
   font-size: 16px;
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-animation: load-spin 2s infinite linear;
   animation: load-spin 2s infinite linear;
   opacity: 0.7;
}

@-webkit-keyframes load-spin {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
   }
}
@keyframes load-spin {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
   }
}

#ajaxshoutbox_loadbefore,
#ajaxshoutbox_loadafter {
   display: none;
}

#ajaxshoutbox_loadbefore {
   position: absolute;
   right: 1px;
   top: 0;
}

ul.waitinglist dt {
   width: 100%;
}

ul.ajaxshoutboxpost dt {
   width: 100%;
}

#shoutbox_scroll {
   max-height: 230px;
   overflow: auto;
}

#copy { /* This element is used to copy data from. Do not show */
   display: none;
}

ul.shoutboxlist dt,
ul.shoutboxlist dd {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 3px;
}

ul.shoutboxlist dt {
   width: 125px;
   margin: 0;
   padding-left: 0;
}

ul.shoutboxlist li.row .list-inner {
   margin: 0;
   padding: 0;
}

ul.shoutboxlist span.ajaxshoutbox_username {
   display: block;
   font-size: 1.1em;
}

ul.shoutboxlist span.ajaxshoutbox_date {
   display: block;
   opacity: 0.5;
   font-size: 0.9em;
}

ul.shoutboxlist dd.ajaxshoutbox_message {
   font-size: 1.1em;
   margin-left: 128px;
   float: none;
   display: block;
}

ul.shoutboxlist dd.ajaxshoutbox_delete {
   display: none;
   position: absolute;
   right: 0;
   top: 5px;
}

ul.shoutboxlist .ajaxshoutbox_delete_btn {
   background: none;
   border: none;
   outline: none;
   display: none;
}

ul.shoutboxlist li.row:hover .ajaxshoutbox_delete_btn {
   display: block;
}

ul.shoutboxlist .ajaxshoutbox_delete_btn:before {
   display: block;
   font-family: FontAwesome;
   color: #F00;
   content: "\f00d";
   font-weight: normal;
   font-size: 18px;
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
   ul.shoutboxlist dt {
      width: auto;
   }

   ul.shoutboxlist li.row .list-inner {
      min-height: inherit;
   }

   ul.shoutboxlist span.ajaxshoutbox_username,
   ul.shoutboxlist span.ajaxshoutbox_date {
      display: inline-block;
   }

   ul.shoutboxlist span.ajaxshoutbox_date::before {
      content: '\007E ';
   }

   ul.shoutboxlist dd.ajaxshoutbox_message {
      clear: both;
      margin-left: auto;
   }
}
User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: Paul Ajax Shoutbox

by Chris36 » Wed Feb 04, 2015 12:21 pm

Hello,

I probably made a mistake because the shoutbox is not displayed in BCP ..
I also glued the lines in the css extension.
can tell me where I'm wrong?
http://prntscr.com/60xbct


Edit; its ok now

many thanks for all
Chris36
Registered User
Posts: 13
Joined: Fri Jan 30, 2015 8:32 pm
Contact:

Re: Paul Ajax Shoutbox

by sam-owns » Sun Dec 06, 2015 11:58 pm

Having prob not showing sb on top ..can any one customise like

Image
sam-owns
Registered User
Posts: 1
Joined: Mon Nov 30, 2015 7:06 pm
Contact:

Re: Paul Ajax Shoutbox

by astroscopus » Wed Dec 09, 2015 10:12 pm

I have not tried editing css yet, will try that out soon.

I did the following to get the box at the top, as another user recommended:

Just rename:
paul999\ajaxshoutbox\styles\prosilver\template\event\index_body_stat_blocks_before.html
to:
paul999\ajaxshoutbox\styles\prosilver\template\event\index_body_markforums_after.html

Then off and activate again shoutbox ;)
astroscopus
Registered User
Posts: 5
Joined: Wed Dec 09, 2015 8:45 pm
Contact:

Re: Paul Ajax Shoutbox

by Tudop » Sat Dec 12, 2015 3:01 pm

Hi, I have some problem with it.
The shoutbox doesnt show..
Does anybody know where is the problem?
Tudop
Registered User
Posts: 3
Joined: Wed Nov 04, 2015 4:52 pm
Contact:

Re: Paul Ajax Shoutbox

by samden » Mon Jan 25, 2016 10:02 am

Tudop wrote:Hi, I have some problem with it.
The shoutbox doesnt show..
Does anybody know where is the problem?


Have you configured permissions so your users can view it?
samden
Registered User
Posts: 33
Joined: Mon Dec 08, 2008 9:16 am
Location: Hampshire, England
Contact:

Re: Paul Ajax Shoutbox

by skimugz21 » Fri Feb 26, 2016 12:47 pm

Sir paybas can you update FAQ no 7. How can add unique icon in every forum please...Your PBwow already broken link..thanks
skimugz21
Registered User
Posts: 6
Joined: Wed Feb 24, 2016 5:30 pm
Contact: