HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media


Welcome to TinyPortal. Please login or sign up.

July 20, 2024, 07:49:12 PM

Login with username, password and session length
  • Total Posts: 195,333
  • Total Topics: 21,233
  • Online today: 133
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 53
  • Total: 54
  • @rjen

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

Started by MAJ.Ripinasz, April 15, 2010, 02:11:18 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.



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:

   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!

But Mama, That's Where all the fun is!


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!

But Mama, That's Where all the fun is!