ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• January 26, 2015 at 6:00 pm #144443
  olgaboca

  Member

  Post count: 41

  Hello,

  Need help to change the title colour of the icon box with custom code.

  Thanks a lot

  Attachments:

  You must be logged in to view attached files.
  January 27, 2015 at 7:58 am #144539
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  div.sf-icon-box h3{color:#ff0000 !important;}

  Thanks
  Mohammad

  January 28, 2015 at 5:54 pm #145243
  olgaboca

  Member

  Post count: 41

  This reply has been marked as private.
  January 29, 2015 at 1:50 am #145296
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .sf-icon-box-animated .front, .sf-icon-box-animated .back {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  .no-csstransforms3d .sf-icon-box-animated .back {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  .no-csstransforms .sf-icon-box-animated .back {
      -webkit-backface-visibility: visible;
      -moz-backface-visibility: visible;
      -o-backface-visibility: visible;
      backface-visibility: visible;
  }
  
  div.sf-icon-box-content-wrap h3{
  color:#ff0000 !important;
  }
  
  

  Thanks
  Mohammad

  January 29, 2015 at 7:05 pm #145565
  olgaboca

  Member

  Post count: 41

  This reply has been marked as private.
  January 30, 2015 at 10:06 am #145682
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  My colleague MR Kyle will assist you shortly. He can fix this issue easily.
  Thanks
  Mohammad

  January 30, 2015 at 10:13 am #145687
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  You can’t make the icon box bg transparent, without seeing the text. The text is at the back of the icon box, and flips to the front when you hover, so setting the bg to transparent you will see the content on the back

  – Kyle

  January 30, 2015 at 5:11 pm #145903
  olgaboca

  Member

  Post count: 41

  Hi Kyle,

  Thanks for helping me. It worked as a transparent front background in Explorer until yesterday. Finally I removed transparency to fix this problem in Explorer.

  I am trying to make front background in 4 different colours for my 4 icon boxes.
  Please let me know if there is a solution with custom code and extra classes for this.

  For now I will make front background as an image.
  .yourextraclass .sf-icon-box-animated .front {
  background: url(yourimage);
  background-size: cover;
  }

  Hope it will work.

  Thanks,
  Olga

  February 2, 2015 at 10:53 am #146207
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Looks like you managed it?

  – Kyle

  February 2, 2015 at 3:25 pm #146391
  olgaboca

  Member

  Post count: 41

  Hi Kyle,

  Yes, I did it, thanks.

  The only think left to do is to get rid of the white frames.
  Can you help me with custom code?

  Thanks a lot for your help,
  Olga

  February 2, 2015 at 3:47 pm #146417
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this:

  .sf-icon-box-animated .front {
    border: 0;
  }
  

  – Kyle

• Back to forum

  Posted in: Dante