vBShout make shouts look better

[SᴩiDᴇЯ]

I have added vBshout on my site and had some trouble with tcats but thanks to the advice from nhkduy90 its all good now, then we looked at the way the shouts are all over the place, they are not inline with each other as seen in the picture below:

http://screensnapr.com/v/L3QQEm.png

So we had a look if we could fix this and we now have the shouts looking like this:

http://screensnapr.com/v/pE3K0v.png

as you can see the shouts are even through out the shoutbox and it looks more professional now, so i thought i would give it a mention here and maybe see if you guys like the idea and implement it into your shoutbox?

I absolutely love the vBShout and all credit to you guys, and Fillip H. I will buy the full pro version here next week.

 

[Fillip H.]

It looks good when all the members have short usernames, but what about those with 15-20 character usernames? That'll severely constrict the actual space for shouts on narrow skins (of which there sadly is still a few).

 

[SᴩiDᴇЯ]

Hi Fillip H..

True I agree with you, but as Admins we can restrict the user name to say 12 characters like i have done on my site, I don't think it would be a problem to do that on your own forum, but I thought I would just share the info with you guys and see if it would be of any benefit to you.

Maybe implement it as an Option in settings, so people can choose whether to use it or not?

As I said before I will purchase the full pro version next week.

Love your Shoutbox so keep up the good work guys.

There is one thing i would like to know? can i add a background picture to the shoutbox and have the same picture showing in all the chat rooms? and if so? could you tell me how please?

Thank you in advance.

 

[Fillip H.]

You could edit the CSS classes found in the .css templates and add them via background-image:url([path]) I suppose

 

[SᴩiDᴇЯ]

Hi Fillip H..

I have tried with the background image but i can't get it to show.

dbtech_vbshout.css

.editor_controls a.popupctrl.dbtech_vbshout_newchat {
background-image:url[images/misc/sbbg.jpg];
padding-$stylevar

:0;
_padding-$stylevar

:0;
border:0;
}

Is this command right?​

 

[Fillip H.]

No, that's a completely different CSS class.

Try .formcontrols .blockrow .dbtech_shouts .dbtech_vbshout_window .dbtech_vbshout_frame {

 

[SᴩiDᴇЯ]

No, that's a completely different CSS class.

Try .formcontrols .blockrow .dbtech_shouts .dbtech_vbshout_window .dbtech_vbshout_frame {

Hi Fillip H..

I have tried both these codes and they don't show the background picture at all.


.formcontrols .blockrow .dbtech_shouts .dbtech_vbshout_window .dbtech_vbshout_frame {background-image:url[images/misc/skull.png]
}


.formcontrols .blockrow .dbtech_shouts .dbtech_vbshout_window .dbtech_vbshout_frame {background-image:url[images/misc/skull.png]
}
and even this way doesn't work:

.formcontrols .blockrow .dbtech_shouts .dbtech_vbshout_window .dbtech_vbshout_frame .background-image:url[images/misc/skull.png] {
}

Could you please show me the full code to use, I would really appreciate it.

Thank you in advance

 

[Fillip H.]

background-image:url(images/misc/skull.png);

Try that.

 

[SᴩiDᴇЯ]

background-image:url(images/misc/skull.png);

Try that.

.formcontrols .blockrow .dbtech_shouts .dbtech_vbshout_window .dbtech_vbshout_frame{background-image:url(images/misc/skull.png);

Not working.

Fillip H. am i missing something in the code? I followed your instructions.

 

[Fillip H.]

I don't know, we don't support customisations of our products and we don't use background images ourselves, so I don't know

 

[SᴩiDᴇЯ]

OK well thank you for trying anyway, it looks like i will have to figure this one out myself.

 

[Trekkan]

I have added vBshout on my site and had some trouble with tcats but thanks to the advice from nhkduy90 its all good now, then we looked at the way the shouts are all over the place, they are not inline with each other as seen in the picture below:

http://screensnapr.com/v/L3QQEm.png

So we had a look if we could fix this and we now have the shouts looking like this:

http://screensnapr.com/v/pE3K0v.png

as you can see the shouts are even through out the shoutbox and it looks more professional now, so i thought i would give it a mention here and maybe see if you guys like the idea and implement it into your shoutbox?

I absolutely love the vBShout and all credit to you guys, and Fillip H. I will buy the full pro version here next week.

So is this a fixed spacing or is it dynamic? Meaning, I'd like for it to look like you have it, but if I allow 32 characters in a name, I don't want it to space out 33 characters if all of the people chatting have 15 characters max in their names. Does that make sense? As in, does it scale based on the text currently in the chat window, or is it a fixed number?

 

[SᴩiDᴇЯ]

So is this a fixed spacing or is it dynamic? Meaning, I'd like for it to look like you have it, but if I allow 32 characters in a name, I don't want it to space out 33 characters if all of the people chatting have 15 characters max in their names. Does that make sense? As in, does it scale based on the text currently in the chat window, or is it a fixed number?

Hi Trekkan.

It is a fixed number, on my site I have made Max characters for all usernames 11 and it work's perfectly, and btw why would you want 33 characters in a username that's just ridiculous if you ask me

 

[Trekkan]

Hi Trekkan.

It is a fixed number, on my site I have made Max characters for all usernames 11 and it work's perfectly, and btw why would you want 33 characters in a username that's just ridiculous if you ask me

I have no idea what the max is, it's whatever vB's max is. The numbers were just an example.

 

[SᴩiDᴇЯ]

Hi Fillip H..

I have done it, I got the picture inside the shoutbox!

http://screensnapr.com/v/2HduVl.png

Took a while to work it out but I finally got there.

Now the area where we type is now white with black text, could anyone tell me how do i get it Dark with White text? please.

 

[Ozzy47]

SᴩiDᴇЯ you would have to Enable Font Color Style in order to change the font color of your type, then in order to change the color of the text input area you would need to edit the following templates:

DragonByte Tech: vBShout Templates/ dbtech_vbshout_shoutarea_horizontal and dbtech_vbshout_shoutarea_vertical

look for this line or something similar depending on your version

[B]<textarea id="dbtech_shoutbox_editor{vb:var instance.instanceid}" rows="9" cols="1" onkeyup="javascript:vBShout{vb:var instance.instanceid}.check_length();" onkeydown="return vBShout{vb:var instance.instanceid}.keystroke(event);" style="height:{vb:math {vb:var instance.options.height} + 26}px; width:98%; float: {vb:raw direction};"></textarea>[/B]

after width:98%; add this line:

background-color:#000000"

So the new code would look like this:

<textarea id="dbtech_shoutbox_editor{vb:var instance.instanceid}" rows="9" cols="1" onkeyup="javascript:vBShout{vb:var instance.instanceid}.check_length();" onkeydown="return vBShout{vb:var instance.instanceid}.keystroke(event);" style="height:{vb:math {vb:var instance.options.height} + 26}px; width:98%; background-color:#000000" float: {vb:raw direction};"></textarea>