• 0

Ibox Hover


Question

Posted · Report post

I have been successful in changing my iboxes to be more like the ones demonstrated on the PL homepage  using this CSS

 

/* my-ibox */
#page .edge-boxes .ibox-icon-border.media-type-icon {
    border-radius: 0px 10px 0px 10px;
}
#page .edge-boxes .pl-contrast {
    background: none repeat scroll 0 0 #53e9cc;
    color: #FFFFFF;
}
 
However, once I use this, I loose the inverted hover effect.  What do I need to do to correct?

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

Danny-

 

I used this code on the custom CSS and used ibox-icon-border and ibox as the styling classes on the iBox.  It gave me a red circle, blue icon but also the entire I box had a red hover background.  I used the code in my post above to successfully change the color and shape but all the icon hover effects stop.  I'd like the hover effect to be inverted but the circle not going completely white.  site is msdbuild.com

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not sure what you mean by inverted ? However, if you remove the background-color from the code on that link it should stop the box from having a red background. I gave you that link so that you could use it as an template for your own colors.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I understand using my own colors, I was just referencing those so we could be on the same page.  

 

On my playground site...msdbuild.com I have the colors changed but notice no hover effect.  I'm a designer and brand new to css, wp, html, and pl.  So sorry if I'm just being dense. 

 

I want the icons to show as they are but on hover change to the inverted scheme, white background and blue icon vs blue background and white icon.  Also, when I create a link how would I change the link color from the default to white?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I believe the hover effect only takes place when the icon is linked.  Without a link, DMS would perceive them as static images.

 

Try making one of the boxes linked.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm trying to accomplish what is on the Pagelines home page and those icons don't link.  They are orange fill/white icon on hover they turn white fill/orange icon.  Then if they are a link I would like for them to become the link color of the site.  

 

Surely, if PL is putting this on their home page it should be fairly easy for a PL user to duplicate.  I would even think a built in option.  I know about better iboxes and am exploring it as well but I had already made these changes and didn't think it would be this much trouble.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Someone removed or overrode the CSS for hover, and I assure it, it wasn't PageLines.

.ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
    background: none repeat scroll 0 0 #39434E;
}
 
 
This code appears with the line background: none repeat scroll 0 0 #39434E;  struck through. That means something else is overwriting it and that the hover action has no instruction.
 
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob-  Here is all the Code I have in as custom CSS. Nothing more.  I do have betteriboxes installed and activated but not in a section.  So how do I accomplish what I'm asking for?  Based on your avatar it says staff, so I'm a paying customer and would like to build this website in days not weeks.  Could I just get a straight answer with the code.  

 

/* green background, white text */
.my-green-area {
    background-color: #53E9DC;
    color: white;
}
 
/* white background, standard text */
.my-white-area {
    background-color: #ffffff;
  padding-bottom:0px;
}
 
/* gray background, standard text */
.my-gray-area {
  background-color: #3e4241;
}
 
 
/* menu padding */
.my-menu-area {
    padding-top:5px;
    font-size: 18px;
}
 
 
/* my-ibox */
#site .edge-boxes .ibox-icon-border.media-type-icon {
    border-radius: 0px 10px 0px 10px;
}
#site .edge-boxes .pl-contrast {
    background: none repeat scroll 0 0 #53E9DC;
    color: #FFFFFF;
}
 
/* my-ibox */
#page .edge-boxes-a .ibox-icon-border.media-type-icon {
    border-radius: 0px 10px 0px 10px;
}
#page .edge-boxes-a .pl-contrast {
    background: none repeat scroll 0 0 #ffffff;
    color: #53E9DC;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What happens if you add this code to your Custom Code?

.ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
    background: none repeat scroll 0 0 #1BB2E0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This part may be fixing the color:

#site .edge-boxes .pl-contrast {
    background: none repeat scroll 0 0 #53E9DC;
    color: #FFFFFF;
}
 
 
Try removing that.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hi,

 

Here is the code I used to change the icons color.

 

Main Part:

 

.section-ibox .media-type-icon {
color: #FFF;
background: #E60606;
-webkit-box-shadow: 0 0 5px #eaeaea;
-moz-box-shadow: 0 0 5px #eaeaea;
box-shadow: 0 0 5px #eaeaea;
}

 

For the secondary part I did this:

 

}
.section-ibox .ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
background: #227EDA;
}
.ibox .ibox-media .ibox-icon-border.media-type-icon:hover i {
color: #FFFFFF;
}
 
This will give you a red icon with a white picture inside it and it will change into a blue one with a black image so just input this and change the colors to suit your needs. I hope this is helpful for someone.
 
Cheers,
 
Yogibear080_________www.connaughtweb.com____________
Edited by yogibear080
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for posting your solution

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now