Jump to content


Photo
Better iBoxes

Better iBoxes - color and border



Best Answer ahansson89 , 19 September 2013 - 01:00 PM

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

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

Go to the full post


  • Please log in to reply
15 replies to this topic

#1 jmad

jmad

    Advocate

  • Members

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

Posted 19 September 2013 - 12:31 PM

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?



#2 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 September 2013 - 01:00 PM   Best Answer

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

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



#3 jmad

jmad

    Advocate

  • Members

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

Posted 19 September 2013 - 01:14 PM

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! 



#4 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 September 2013 - 04:47 PM

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


#5 jmad

jmad

    Advocate

  • Members

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

Posted 19 September 2013 - 08:04 PM

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. 



#6 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 September 2013 - 10:31 AM

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.



#7 jmad

jmad

    Advocate

  • Members

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

Posted 20 September 2013 - 12:46 PM

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.



#8 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 10:17 PM

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/



#9 jmad

jmad

    Advocate

  • Members

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

Posted 22 September 2013 - 10:32 PM

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



#10 jmad

jmad

    Advocate

  • Members

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

Posted 22 September 2013 - 10:55 PM

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 



#11 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 12:38 PM

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.



#12 jmad

jmad

    Advocate

  • Members

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

Posted 23 September 2013 - 12:41 PM

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.



#13 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 12:43 PM

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



#14 jmad

jmad

    Advocate

  • Members

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

Posted 23 September 2013 - 12:51 PM

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.  


  • porkeebear likes this

#15 ahansson89

ahansson89

    Advocate

  • Members

  • 522 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 05:07 PM

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/p...s/DMS/issues/26

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



#16 porkeebear

porkeebear

    Member

  • Members
  • 12 posts
  • LocationHonolulu, HI
  • Framework Version:PageLines DMS
  • Country: Country Flag

Posted 01 November 2013 - 02:59 AM

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







Also tagged with one or more of these keywords: Better iBoxes