Jump to content


Photo
Better iBoxes

Changing background color of Better iBoxes icons

color background icon

Best Answer ahansson89 , 15 September 2013 - 09:24 AM

Do this

.better_iboxes_media {
  span {
    background-color:black;
    color:white;
  }
}
Go to the full post


  • Please log in to reply
12 replies to this topic

#1 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 14 September 2013 - 07:32 PM

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.


  • Tibag3wv likes this

#2 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 14 September 2013 - 07:49 PM

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;

 

}



#3 illinimatt81

illinimatt81

    Super Member

  • Members

  • 211 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 15 September 2013 - 02:37 AM

I'm also interested in this



#4 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 September 2013 - 09:24 AM   Best Answer

Do this

.better_iboxes_media {
  span {
    background-color:black;
    color:white;
  }
}

  • lighthouserich likes this

#5 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 15 September 2013 - 09:34 AM

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;
  }
}


#6 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 September 2013 - 08:35 PM

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. :)



#7 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 15 September 2013 - 08:57 PM

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.

 

 

Attached Files


  • ahansson89 likes this

#8 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 15 September 2013 - 08:59 PM

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


  • ahansson89 likes this

#9 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 256 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 18 September 2013 - 09:38 PM

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



#10 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 256 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 18 September 2013 - 09:48 PM

I figured it out...

 

.pl-contrast {
background: none;
}


#11 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 September 2013 - 10:04 PM

There is an option for that called:

"Remove contrast?"



#12 lighthouserich

lighthouserich

    Newbie

  • Members

  • 8 posts
  • LocationUnited Kingdom
  • Framework Version:DMS
  • Country: Country Flag

Posted 03 October 2013 - 11:32 PM

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: 



#13 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 October 2013 - 12:52 PM

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







Also tagged with one or more of these keywords: Better iBoxes, color, background, icon