[Tip] ShoutBox Bubble Color Change in TP 1.0 RC1 for Dark Theme

[MAJ.Ripinasz]

Link to my site: http://www.acrclan.org
SMF version: SMF ver. 1.1.11
TP version: TP ver. 1.0 Beta 5-1
Theme name and version: Helios_Multi TP 11Final
Browser Name and Version: Mozilla FireFox/3.63
Mods installed:     Anti-Spam Verification Questions, Lots_o_Smileys, Treasury
Related Error messages:None

Having problem reading the ShoutBox text that is now in a balloon or bubble. See for your self, is there a quick way to mod it so it shows up darker? I have installed this on another site and it looks fine but of course it has a light colored theme.

Thanks! 

[Blue Steel]

these type of colour change questions should really be posted in the theme section.. as its theme related.
(especially if that themer has a thread associated with it.. then the author can help you edit it )

you need to edit the ccs style entries associated with the class assigned to that output on the page.

[MAJ.Ripinasz]

Well since the theme didn't change seemed more appropriate for the install section, seeing how TP added the bubble?

[Blue Steel]

its all set in ccs files .. in the default theme (or the theme you were using when you installrd TP i believe)

the files that relate to the shoutbox are in the defaul themes directory.

edit them and save the edited version into the theme directory for the theme you are using

i think its in the TPShout. ccs

Code Select Expand


.tp_shoutbody{
background: #f3f3f3;
border: solid 1px #888;
border-top: none;
line-height: 1.3em;
margin: 0 5px 8px 0;
padding: 8px;
font-size: 0.9em;}


now i'm not a theme specialist .. but i believe i found the right one to edit .. jus change it to

Code Select Expand


.tp_shoutbody{
background: #000000;
border: solid 1px #888;
border-top: none;
line-height: 1.3em;
margin: 0 5px 8px 0;
padding: 8px;
font-size: 0.9em;}


this should change the bubbles BG colour to Black

[MAJ.Ripinasz]

Thanks BlueSteel that was my next question was the bubble! That worked like a champ.

Changed my TPShout.css to .tp_shoutbody
{
   background: #000000;
   border: solid 1px #888;
   border-top: none;
   line-height: 1.3em;
   margin: 0 5px 8px 0;
   padding: 8px;
   font-size: 0.9em;
}

Looks great!

[ZarPrime]

This seems like it would be a good tip to be placed in the Modules Board as a sticky. I will change the subject of the OP to better reflect the content and move it to that board.

ZarPrime

[djfs3]

sorry to jump in, but where can i find this TPShout.css 

[ZarPrime]

sorry to jump in, but where can i find this TPShout.css 

You'll find that my opening up your FTP client and navigating to the /Themes/default folder of your site.

ZarPrime

[djfs3]

sorry to jump in, but where can i find this TPShout.css 

You'll find that my opening up your FTP client and navigating to the /Themes/default folder of your site.

ZarPrime

oh yeah alright i found it and was able to change it.... pretty cool thanks 

[ZarPrime]

sorry to jump in, but where can i find this TPShout.css 

You'll find that my opening up your FTP client and navigating to the /Themes/default folder of your site.

ZarPrime

oh yeah alright i found it and was able to change it.... pretty cool thanks 

Yep.  Pretty cool.

ZarPrime

[Maxx1]

OK,

I have been playing around with this TPShout.css a little and found the following:

You can place this CSS file in to any theme that uses Tiny Portal current ver. and matching the BG and border colors and by adding a color line for the fonts....thus adapting your shout box to every Theme on your site:

What you need do is, Down load via FTA or file manager the TPShout.css from your default theme then edit the bg, border and font colors to match your theme scheme even if your theme is light you can add some color offset to the shout to make it stand out just a little bit.

The file will be placed in your theme like this:

Themes/theme_name/TPShout.css (this is where your index.template.php is located on each theme you want to customize.)

The code change is very much like the above posted only adding the "color:"

So it will look like this:

Code Select Expand


.tp_shoutbody{
   background: #f3f3f3;
   border: solid 1px #888;
   border-top: none;
   line-height: 1.3em;
   margin: 0 5px 8px 0;
   padding: 8px;
   color: #000;
   font-size: 0.9em;}


Note that if you make your border lighter than the bg, and add a few pxs you will inset the bg some try, 2px or 3px on the border.

0px for flat or no border 1px for default!

So I would recommend you place the TPShout.css in every theme on your site.

I limit mine to 5 shouts, because I don't like the scroll bars, and the last 50 shouts can be clicked on and view at anytime!


regards,
Maxx

[Maxx1]

For darker themes!

Please find attached a TPshout.css in ".txt" format and a shout_arrow.png

please note inside the TPshout where to arrow is to be place in you current theme image file and the TPShout.css should be placed in your current Theme "main" folder after your rename it to .TPSout.css.

hope u find it useful!

regards,
Maxx