Buttons showing as black

[goodkel]

Forum URL: racl.freeforums.net

This is the image that I have attempted to replace Board description, new posts, and no new posts. What shows up is a black box. If I need to resize it, what are the pixel amounts that I need? Thank you! Kelly

[Craig]

Board description? It's usually text.

I had to register to view, but the account needs accepting

[CheatAreZee]

Hi goodkel,

Visit the Themes > Advanced Styles & CSS page in your admin panel, then click into the style sheet. Starting on line 174 you have the following:

/* General icons and fixes for specific icons
(remove this if you have your own icon set) */
.icon img[alt="No New Posts"], .legend img[alt="No New Posts"] {
-webkit-filter: invert(0.7); -moz-filter: invert(0.7); filter: invert(0.7); }
.icon img[alt="New Posts"], .legend img[alt="New Posts"] {
-webkit-filter: invert(0.4); -moz-filter: invert(0.4); filter: invert(0.4); }
.icon img {
-webkit-filter: invert(0.5); -moz-filter: invert(0.5); filter: invert(0.5);
border-radius: 10px;
padding: 5px;
display: inline-block;
-webkit-shadow: rgba(0,0,0,.5) 1px 1px 3px; -moz-shadow: rgba(0,0,0,.5) 1px 1px 3px; box-shadow: rgba(0,0,0,.5) 1px 1px 3px; }
.search-filters-button .icon img {
padding: 0px !important;
-webkit-shadow: none; -moz-shadow: none; box-shadow: none; }
.control-icons img, .legend img {
-webkit-filter: invert(0.5);
-moz-filter: invert(0.5);
filter: invert(0.5); }
.post .button img, .post-options.button img, .shoutbox_refresh img, .status img {
padding: 0px;
border-radius: 0;
filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1);
-webkit-shadow: none; -moz-shadow: none; box-shadow: none; }
.shoutbox_form ul.tools li img {
padding: 0px;
border-radius: 0;
filter: none; -webkit-filter: none; -moz-filter: none;
-webkit-shadow: none; -moz-shadow: none; box-shadow: none; }

This is causing the icon images to appear inverted. By removing this bit, it should appear as it normally does

[goodkel]

May 22, 2015 0:35:40 GMT -8 Craig said:

Board description? It's usually text.

I had to register to view, but the account needs accepting

Not the actual description, but the button to the left of it.

I did accept your account. I was curious who you were. I was newly elected to the Board of Directors this Tuesday and was flabbergasted when I was introduced to their "phone tree" system of communicating with each other, so I threw this up. I don't know all the staff so I assumed that you were and our President had forwarded you the link. Let me know when you are available for newsletter delivery....

[goodkel]

May 22, 2015 8:13:52 GMT -8 CheatAreZee said:

Hi goodkel,

Visit the Themes > Advanced Styles & CSS page in your admin panel, then click into the style sheet. Starting on line 174 you have the following:

/* General icons and fixes for specific icons
(remove this if you have your own icon set) */
.icon img[alt="No New Posts"], .legend img[alt="No New Posts"] {
-webkit-filter: invert(0.7); -moz-filter: invert(0.7); filter: invert(0.7); }
.icon img[alt="New Posts"], .legend img[alt="New Posts"] {
-webkit-filter: invert(0.4); -moz-filter: invert(0.4); filter: invert(0.4); }
.icon img {
-webkit-filter: invert(0.5); -moz-filter: invert(0.5); filter: invert(0.5);
border-radius: 10px;
padding: 5px;
display: inline-block;
-webkit-shadow: rgba(0,0,0,.5) 1px 1px 3px; -moz-shadow: rgba(0,0,0,.5) 1px 1px 3px; box-shadow: rgba(0,0,0,.5) 1px 1px 3px; }
.search-filters-button .icon img {
padding: 0px !important;
-webkit-shadow: none; -moz-shadow: none; box-shadow: none; }
.control-icons img, .legend img {
-webkit-filter: invert(0.5);
-moz-filter: invert(0.5);
filter: invert(0.5); }
.post .button img, .post-options.button img, .shoutbox_refresh img, .status img {
padding: 0px;
border-radius: 0;
filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1);
-webkit-shadow: none; -moz-shadow: none; box-shadow: none; }
.shoutbox_form ul.tools li img {
padding: 0px;
border-radius: 0;
filter: none; -webkit-filter: none; -moz-filter: none;
-webkit-shadow: none; -moz-shadow: none; box-shadow: none; }

This is causing the icon images to appear inverted. By removing this bit, it should appear as it normally does

This is a brand new board, it has no "normal", yet.

I don't have a complete icon set. I just want the graphic of our logo to run down the left side of the board. Like I've done on my other board with the flowers: weightlosssurgery.proboards.com

So, would I just remove the portion that I highlighted above?

Thanks for your help!

[CheatAreZee]

Correct. Removing the code I posted will make the icons appear as the usual white / blue / yellow like the image you provided in your first post, as the code above inverts the colors making them appear black. That isn't default code that we provide, so I assume that it was part of the theme you downloaded from the theme author

[goodkel]

I removed this:

.icon img[alt="No New Posts"], .legend img[alt="No New Posts"] {
-webkit-filter: invert(0.7); -moz-filter: invert(0.7); filter: invert(0.7); }
.icon img[alt="New Posts"], .legend img[alt="New Posts"] {
-webkit-filter: invert(0.4); -moz-filter: invert(0.4); filter: invert(0.4); }

And it is not working.

[CheatAreZee]

Can you remove the whole block that I provided, and see if that does it? It should clear it up, and then you can re-add in elements individually until the problem returns and you'll know then which specific part handles it.

[goodkel]

It worked! Thank you! Unfortunately, the images are the same size as my favicon. If I resize and upload a larger one to the button area, what is the approximate size in pixels that they need to be?

[CheatAreZee]

The images can be any size, really. But as a comparison, the size of the folder icons that were replaced are 32x32

Just to mention, though, there's a line in the CSS that's changing the icon size to be as small as it is. In the style sheet find the following on line 227:

.icon img { max-height: 20px; }

Change this number to something higher until the icon is the size that you like!

[goodkel]

Perfect! I love an easy fix. I doubled the size to 40 and it is just right.

Thank you SO much!

Kelly

[CheatAreZee]

You're welcome! Enjoy the rest of your day