Jump to content


Photo
- - - - -

Ibox Hover

iboxes

  • Please log in to reply
12 replies to this topic

#1 jmad

jmad

    Advocate

  • Members

  • 492 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 01:12 AM

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?


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 September 2013 - 09:22 AM

Hi, See my posts on this topic - http://forum.pagelin...s-styling-ibox/

#3 jmad

jmad

    Advocate

  • Members

  • 492 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 02:12 PM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 September 2013 - 03:21 PM

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.

#5 jmad

jmad

    Advocate

  • Members

  • 492 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 07:42 PM

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?



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 September 2013 - 07:52 PM

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.



#7 jmad

jmad

    Advocate

  • Members

  • 492 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 08:38 PM

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.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 September 2013 - 09:10 PM

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.
 
 


#9 jmad

jmad

    Advocate

  • Members

  • 492 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 10:05 PM

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


#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 September 2013 - 10:14 PM

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


#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 September 2013 - 10:26 PM

This part may be fixing the color:

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


#12 yogibear080

yogibear080

    Newbie

  • Members

  • 6 posts
  • LocationIreland
  • Country: Country Flag

Posted 10 January 2014 - 08:07 PM

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, 10 January 2014 - 08:08 PM.

  • James B likes this

#13 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 January 2014 - 12:31 AM

Thank you for posting your solution







Also tagged with one or more of these keywords: iboxes