Jump to content


Photo
Better iBoxes

Comparing iBox vs Better iBox need CSS help



Best Answer sheilahoff , 08 November 2013 - 02:15 AM

Thanks for these tips. I'll save them for future reference. I'm good-to-go on my site now. THANK YOU!

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 sheilahoff

sheilahoff

    Advocate

  • Members

  • 462 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 06 November 2013 - 04:35 PM

I have  Better iBoxes so tried using it on the homepage of my new makeover site not yet public at http://www.makeover....mangraphics.com.

 

You'll see below the quotes that I have two sets that are the same content. I don't like that the top one, which is using Better iBoxes has the entire content linked. That creates the text as purple which I want to be unlinked and gray. Note, I have NO link entered into the field for links. Rather I've added html link in the description. But when I had the link in the field the whole thing linked which is why I changed my strategry.

 

So I added the default iBoxes that comes with DMS below it. It handles the text and link exactly as I'd like, However for some reason, out of the box, the images are doing this very weird elongated distortion.

 

I've attempted CSS to make them circles and to make the headings purple to no avail. I've removed all the custom CSS for both in case I was causing the oddities.

 

Here's what I had. Can anyone help me to either remove the linking on the Better one OR to get the proper CSS so the circles are circles and the headings are purple in the second example? THANKS!

 
/* Better iBoxes*/
.better_iboxes .better_iboxes_desc {
    color: #707070 !important;
    margin-bottom: 30px;
}

.better_iboxes.top-aligned .better_iboxes_media {
    margin-top: 20px;
}

/*iBoxes*/
.ibox .ibox-media .ibox-icon-border {
border-radius: 50%;
    height: 100px;
    width: 100px;
}

.section-ibox .ibox .ibox-text h4 {
    color: #6c128d !important;}


#2 sheilahoff

sheilahoff

    Advocate

  • Members

  • 462 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 06 November 2013 - 05:43 PM

So while I'm still curious WHY I couldn't get the regular iBox images to be normal circles I'm moving on to fixing the Better iBoxes. I'll post directly over there. But you can see now that I've tried removing the links from within the text and that does turn the text back to gray. But now I'm having issues with getting the more link to position correctly.

 

UPDATE: What I learned is that you cannot have both iBox and Better iBox on the same page together. That was causing some of the issues. I now have just the stock iBox in place and the duplicate is gone. I'm happy with how it looks. Case closed. Thanks.



#3 Danny

Danny

    Is Awesome!

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

Posted 07 November 2013 - 09:26 AM

OK, thanks for informing us the issue has been resolved.

However, out of curiosity, can you go into greater detail regarding no being able to have both iBox and Better iBoxes on the same page please.



#4 sheilahoff

sheilahoff

    Advocate

  • Members

  • 462 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 November 2013 - 01:16 PM

I think the css for one was impacting the other. When I couldn't get Better to work the way I wanted I put iBoxes below it so I could copy out the content from all the boxes. The circles were not circles they were like giant pill capsules (elongated). I tried to impact via CSS and couldn't. Finally when I removed Better the circles returned and the headings took affect that were not working. I hope that helps it's the best I can do.



#5 Danny

Danny

    Is Awesome!

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

Posted 07 November 2013 - 01:25 PM

OK, I've moved your topic to the better iboxes forum and see what Aleks recommends.



#6 sheilahoff

sheilahoff

    Advocate

  • Members

  • 462 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 November 2013 - 01:34 PM

OK...but I'd already posted over there and he knows about both the conflict and my preference for iBox or Better. I don't like that on Better you have no choice but to have the entire text be a link.



#7 ahansson89

ahansson89

    Advocate

  • Members

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

Posted 08 November 2013 - 02:10 AM

Do you still have issues Sheila or did we resolve it in the other thread?

The reason that you cannot override the LESS/CSS is that you are not specific enough.

 
.section-better-iboxes {
    .better_iboxes .better_iboxes_desc {
        color: #707070 !important;
        margin-bottom: 30px;
    }

    .better_iboxes.top-aligned .better_iboxes_media {
        margin-top: 20px;
    }
}

is more specific than

.better_iboxes .better_iboxes_desc {
    color: #707070 !important;
    margin-bottom: 30px;
}

.better_iboxes.top-aligned .better_iboxes_media {
    margin-top: 20px;
}


#8 sheilahoff

sheilahoff

    Advocate

  • Members

  • 462 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 08 November 2013 - 02:15 AM   Best Answer

Thanks for these tips. I'll save them for future reference. I'm good-to-go on my site now. THANK YOU!


  • ahansson89 likes this

#9 bronwyn

bronwyn

    Newbie

  • Members

  • 1 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 06 July 2014 - 12:01 AM

Does iboxes have to create circles?  I'd rather them be squares.  Or a rectangle with rounded edges.  

 

Do I need to change this in CSS? 

Thanks in advance for your help.

Bronwyn







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