smiley picker window has changed background color... where to adjust?

Strumelia
@strumelia
6 years ago
3,603 posts

After recent updates, when i go to choose a smiley to use in a post, the window now suddenly has a banckground color that matches one of my darker site background colors. It used to have a simple white background. See screenshot.
The problem is that it looks crappy now and is distracting, because some of the smileys naturally have white background rectangle/containers.. and these now show glaringly when picking a smiley to insert.
Those white smiley background rectangles dont show much in the final post, because the background for posted posts is a very light cream... so I don't need to actually change the smileys themselves. But now it looks terrible in the picker for smileys because somehow the background has now been changed to the site background color which I believe is #d1c7a1 . I have not been doing anything to cause this sudden change... it seemed to kick in right after I applied the latest updates.

Can anyone tell me where I can find this bit of code so I can change it to white again?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 04/03/18 04:15:11PM

@brian
6 years ago
10,148 posts

The recent update made it so the popup follows the site style - previously it was unstyled. If you want to change it you just want to modify the "emotions.tpl" file in your Smiley module - i.e. change this:

<div class="p10">

To this:

<div class="p10" style="background-color: #FFFFFF">

You can modify to suit your needs.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Strumelia
@strumelia
6 years ago
3,603 posts

Oh yeah- that worked great! I changed it to the very very pale cream from my site posts.... thanks very much! :D

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Strumelia
@strumelia
6 years ago
3,603 posts

Oh- sorry.... one more thing about this-

ADDITIONAL little issue:
the recent changes have made the horizontal rows of smileys in the picker winder touch each other at top and bottom of the smileys... no padding anymore. This creates weird effects, like having a peace sign hand stuck on top of the head of the smiley below it, etc. I need to add some padding back in vertically between the rows of smileys, so they are easy to see individually again like before and aren't touching each other top to bottom. See this screenshot for how they are currently looking all crammed together. (The left to right padding between smileys seems still ok.)

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 01/02/18 10:21:33AM

Strumelia
@strumelia
6 years ago
3,603 posts

P.S. the smiley picker window in jrChat --is-- correctly padded, by the way. Like this:

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

Strumelia
@strumelia
6 years ago
3,603 posts

I added an additional small issue in my previous two posts, since I believe it may be related and I'd like to fix it somehow... thanks!

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@brian
6 years ago
10,148 posts

You just want to modify the template and add some padding around each image until the layout is what you like.

Let me know if that helps.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Strumelia
@strumelia
6 years ago
3,603 posts

O. M. G. ....I did it! =8-O

I changed a section in the Smiley Module's emotions.tpl code-- from this:

<div class="p10" style="background-color: #fcf7db">{foreach $_sets as $_set}
    <h1>{$_set[0]['smiley_set']}</h1>
    <br>
    {foreach $_set as $_s}
        <a title="{$_s.smiley_title}" href="javascript:" onclick="insertSmiley('{$media_url}/jrSmiley_{$_s._item_id}_smiley_image.{$_s.smiley_image_extension}','{$_s.smiley_title}');"><img src="{$media_url}/jrSmiley_{$_s._item_id}_smiley_image.{$_s.smiley_image_extension}" style="height: {$_conf['jrSmiley_size']}px" alt="{$_s.smiley_string}"></a>
    {/foreach}
    <br>
    <br>
{/foreach}
</div>

to this:

<div class="p10" style="background-color: #fcf7db;">{foreach $_sets as $_set}
    <h1>{$_set[0]['smiley_set']}</h1>
    <br>
    {foreach $_set as $_s}
        <a title="{$_s.smiley_title}" href="javascript:" onclick="insertSmiley('{$media_url}/jrSmiley_{$_s._item_id}_smiley_image.{$_s.smiley_image_extension}','{$_s.smiley_title}');"><img src="{$media_url}/jrSmiley_{$_s._item_id}_smiley_image.{$_s.smiley_image_extension}" style="height: {$_conf['jrSmiley_size']}px; padding-bottom: 6px; padding-right: 3px;" alt="{$_s.smiley_string}"></a>
    {/foreach}
    <br>
    <br>
{/foreach}
</div>

...and now the smiley picker window looks beautiful!, like this new screenshot! (and I only put the new code in the wrong place ONCE, at first, then got it in the right place where it did something... woo-hooo)
Here's how it looks now, just right:

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@brian
6 years ago
10,148 posts

Glad you got that fixed up - that's great

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

solved smiley picker window has changed background color... where to adjust?