• 0

Better iBoxes Better iBoxes - color and border

Question

Posted · Report post

In better iboxes how do I change the color and hover color of the icon?  How do I change the color of the background?  Lastly is it possible to have the background transparent with just a border?

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

The hover color is the same as your link color set in Global Options.

The background can be removed with the "Remove contrast?" option.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the quick response.  I'm brand new to Pagelines and more designer than developer.  Are there animation options (fade, popup, etc) is so how and where would I change it?  

 

Also, is it possible to change the hover color from something other than global options?

 

I'd love to see more options built in to you plugin but this helps a lot! 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the global option is creating more simplicity to the plugin.

But yes, you can change it with LESS/CSS.

Something like this should do it:
 

.better_iboxes .better_iboxes_media .better_iboxes_icon-border.media-type-icon.hover:hover {
  brackground:#444444;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't think I asked the correct question.

 

What I'm actually wanting to do is have the fill background be transparent but have outline around the shape.   So I just want the outline of a circle with the Icon in the center.

 

Also, can the animation effect be changed to some other animation other than the default?  If so how?

 

Thanks for your help. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, then just set a border in css and remove the contrast.

border: 1px solid black;

 

The background can be removed with the "Remove contrast?" option.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ahansson89 Thanks for your patience with my questions.  I managed to completely confuse myself with this yesterday...mainly because I was working on too many things at once.  Also, I'm a complete newbie to any sort of coding.  Yesterday, I posted the question below  to the forums and they really directed me back to you.  I'm still working on how to do this. Questions below.

 

"Currently the iboxes default to the base text color (icon), and the global base color then invert on hover and have the animation.  

 

I would like to know how to change all the formatting for the iboxes and have looked at the Pagelines site but I'm not a coder and couldn't follow (not yet at least).  I would like to know how to make the icons more like the ones on the PL homepage.  

 

Specifically,

 

change size and color of icon (but not text) - normal, hover and link color

change size, radius, and color(opacity) of background - normal, hover and link

change color of text or leave it system

change the animation style (what animations are available in pagelines?)

 

Icing on the cake would be how to make the icon background transparent except for a border (open circle)"

 

I see lots of CSS about iboxes including specific code for webkit, moz, and ms.  I want to make sure all the changes I make are cross browser compatible.

 

I'm trying to do two things.  

Have iboxes similar to the ones on the Pagelines homepage.  They are a color and then either transparent% or a different color on hover, my icons may not be links.

 

I am also interested in the background with just a border and no fill color but that the icon and border both change on hover.  

 

You have given me pieces of code but I'm not sure what todo with it...I have managed to change some CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I cannot help everyone to customize their iBoxes to do exactly what they want.

If you need it to be customized in some specific way, you should reach out to one of the pros.

Ellen http://www.elsue.com/
Nick http://nickhaskins.com/
Sabrina http://mobilenowmarketing.com
Mike http://tunatraffic.com/
Enrique http://tmeister.net/
Evan http://forum.pagelin...1-evan-mattson/
Adam http://adammunns.com/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Problem is... the customizations I'm asking for you chimed in on a post I made and said your product did but it doesn't exactly do what I was asking.  It's cool though, I'll keep working with it

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just as a point of reference to my above comment.  I hope to see your product develop more options.  

 

Topic: iboxes and how to change

 

 

Posted 18 September 2013 - 09:31 AM

I would like to know how to change the ibox formatting.  Specifically, how do you change the shape, size, color of the background or even eliminate the background.  How do you change the color (hover, normal) and how do you change the animation effect.

 

I was looking at the Better iBoxes section but the developers demo and site are not working.

 

I have been really disappointed in this launch and canceled my Pro membership but will reconsider if things improve.

 

Posted 18 September 2013 - 10:49 AM

My dns manegement company screwed up my domain and forgot to renew it.

The demo should be up and running again tomorrow.

But it does everything you are asking for 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can change the shape, size and color of the background with options and eliminate the background.

The animation effect can be turned off if you dont want it.

So by that it does all of what you are asking for.

In time I will add more options to Better iBoxes, but I do not want to add options that only a few people are using.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry man but it doesn't do all of what asked about specifically color, which was one of the main things I was looking for in this situation.  It's fine though, I'll still rate your product an 3 or 4 and it's helpful to have it in my tool box.  You have been responsive to my questions and that helps as well.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can change the color by changing your link color in the dms global options.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No it doesn't as far as I can tell.  It changes the hover color only.  I want the boxes to look similar too those on the Pagelines homepage...they start a color and then change to a reverse.  

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It is linked to the base color and link color.

Right now there is not a way to put in custom LESS vars from sections and thereby I cannot make a color picker to change the hover color.

We already asked for a fix, but PageLines havnt been able to fix the bug yet. You can comment on the github issue here: https://github.com/pagelines/DMS/issues/26

Until then we are stucked with the way things are now.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Adam, is it possible to enable the color background and make it permanent - instead of using the mouse to hover over it?

Share this post


Link to post
Share on other sites