Jump to content

Archived

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

jmad

Ibox Hover

Recommended Posts

jmad+    80
jmad

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
jmad+    80
jmad

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
Danny    1,327
Danny
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Rob    547
Rob

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.
 
 

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Rob    547
Rob

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

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

This part may be fixing the color:

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

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yogibear080    1
yogibear080

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____________
  • Like 1

_______________________________________________________________________________________________________________________Yogibear080. www.connaughtweb.com/home

West of Ireland

Share this post


Link to post
Share on other sites
James B    436
James B

Thank you for posting your solution


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • Steve Kayser
      By Steve Kayser+
      having trouble with iBoxes changing size and not saving entered content. Originally when I drag them in and enable them they look perfect. the moment I update the content or image - they then downsize and center left. I have disabled almost every plugin -- Suggestions? Screenshot attached.

      The first row of boxes is what it looks like when first dragged into the section. And what I want it tolook like.

      The second row is that happens as soon as anything is edited or changed. See the difference. Can't figure it out for some reason.

      Thanks folks!
    • BentleyD
      By BentleyD+
      http://forum.pagelines.com/topic/32275-iboxes-5-on-a-single-row/ I am having an issue that came from a previous solution on this post. I am working on http://freshjuiceglobal.com . @JamesB helped me figure out how to get them all on one row, which worked out perfectly. The only issue is the iboxes are no longer responsive. How can I fix this?
       
      I apologize If i shouldn't have started a new thread. I just didn't know if you'd see it if the question had already been answered.
    • BentleyD
      By BentleyD+
      Hey guys,
       
      I'm working on http://freshjuiceglobal.com . I am trying to figure out how i can format 5 icons on one row. When I switch from 3 to 2 columns it leaves awkward spacing. If I leave it on 3 it puts the 5th box on the row below. How can I format all 5 boxes on one row?
       
      I don't have the 5th box live on the site until i figure this out. It's on my test site http://bumarketing.com though. Thank you!
    • sethoof
      By sethoof
      While trying o redo my iboxes after the update, I am finding that they will not accept images from the media library.  If they do save them, it will not show up on the refresh.  In the few examples where they have shown up on the refresh, if I put any more iboxes into the same set, the other iboxes lose their images.  Am I doing something wrong here or is the system still buggy?
    • flourishdesignstudio
      By flourishdesignstudio
      I am having a problem with a site that we are developing using DMS. Part of the design features iBoxes which seem to work really well with what we are trying to achieve. The only hangup is that it is not easy to reorder the boxes in a custom order to to remove specific boxes. We are using them for a list of teachers and since they often rotate throughout the seasons it is imperative that we be able to easily add, move, or delete a teacher.
       
      In the previous versions of Pagelines iBoxes were created in sets and individual boxes could easily be added or removed from a specific set. If anyone knows of a way to make this process easier in DMS please let me know. In case you would like to see an example of the page with iBoxes it is located here: http://flourishdesignstudio.biz/wordpress3/hanover/whoweare/
       
      Thanks in advance for all your input! 
×