Jump to content

Archived

This topic is now archived and is closed to further replies.

canadiangazelles

Changing background color of Better iBoxes icons

Recommended Posts

canadiangazelles    6
canadiangazelles

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.

  • Like 1

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

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
illinimatt81    21
illinimatt81

I'm also interested in this

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

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
ahansson89    57
ahansson89

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
canadiangazelles    6
canadiangazelles

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.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

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

  • Like 1

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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
flourishdesignstudio    9
flourishdesignstudio

I figured it out...

 

.pl-contrast {
background: none;
}

Share this post


Link to post
Share on other sites
lighthouserich    1
lighthouserich

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
ahansson89    57
ahansson89

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

  • Similar Content

    • jagipson
      By jagipson+
      Should be a simple answer but not sure why its not doing this.  I have a child theme installed on pagelines 5 that has a hook so it will write over the theme css. Strange is that when I am on the frontend the code works but in the dashboard your theme takes over my code and its no where to be found. See examples attachments
      @Andrew @Danny


    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
       
      For the life of me I cannot figure it out.
    • jacobtippett
      By jacobtippett+
      Hi,
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?
×