• 0

Better iBoxes Changing background color of Better iBoxes icons


Question

Posted · Report post

Hi Aleksander,

 

I wanted to know if you could shed light on the issue of how to change the background color of the Better iBoxes icons? I tried using the following code in the custom CSS section but it hasn't changed the background color nor can I change the color of the icons (from a previous answer, though to the original iboxes):

 

.ibox-icon-border {
background: #F00;
}

 

 

To change the color of the iBox icon, use the following code:


.ibox [class^="icon-"], .ibox [class*=" icon-"] {
color: #00F;
}

 

I greatly appreciate if you could point me in the right direction. Thanks in advance for your help.

1 person likes this

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

Do this

.better_iboxes_media {
  span {
    background-color:black;
    color:white;
  }
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

PS. I inspected the elements on your site and found: 

 

 
<div class="better_iboxes_media">
<span class="better_iboxes_icon-border media-type-icon hover pl-contrast pl-animation pl-appear animation-loaded" style=" border-radius: 10px; width:90px; height: 90px;">
<i class="icon icon-stop" style="font-size: 40px;"></i>
</span>
</div>
 
So I tried modifying the above code to the below but neither of them worked: 
 
1.
.better_iboxes_icon-border {
    background: none repeat scroll 0 0 #FF9900;
    color: #FF9900;
}
 
2. 
.media-type-icon hover .pl-contrast {
background: none repeat scroll 0 0 #FF9900;
    color: #FF9900;

 

}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm also interested in this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the speedy reply.

 

I still can't, however, change the color. Should this be inserted into the Custom CSS field or directly into the iBoxes CSS class field? I tried to modify the color to orange but it didn't change the colors: 

 

/*better iboxes color change */
.better_iboxes_media {
  span {
    background-color:#FF9900;
    color:DarkOrange;
  }
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Put it into Custom code-> LESS/CSS

DarkOrange is not a known html color as far as I know. Might be wrong about this, but use #000000 for testing then apply your correct color afterwards.

I tested the above code on a site so I know it is working. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks. I pasted it in but no luck; see the pics below for what I see. I tried a range of hex values but it didn't change. 

 

I'll pm you the site and password if you'd like to take a look at what I see.

 

Thanks again.

 

 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

:) my bad; it was because I thought it was Better iBoxes but I was using iBoxes; the change works! many thanks!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I would like the background of the images transparent, but can't seem to accomplish this... can you please help? Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I figured it out...

 

.pl-contrast {
background: none;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

There is an option for that called:

"Remove contrast?"

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Aleksander,

Thanks for posting the earlier answers to this query; I have found this really useful.

 

An additional question, which may also help others I hope, whats the code to change the colour of the background when the mouse is hovering over it please?  Mine always sticks to the standard light blue colour when hovering.

 

Many thanks  :thumbsu: 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I made this example in another forum post:

 

@betteriboxbase: yellow; //your base color
@betteriboxcontrast: red; // your contrast color

.better_iboxes{
   .better_iboxes_media {
     .better_iboxes_icon-border {
     &.media-type-icon {
         color:@betteriboxcontrast;
            &.hover { 
               &:hover{
                  background: @betteriboxcontrast;
                     i{
                        color:@betteriboxbase;
                     }
                   }
               }
               &.pl-contrast {
                  background: @betteriboxbase;
               }
           }
       }
    }
}

Change "red" and "yellow" to the colors of your choice

Share this post


Link to post
Share on other sites