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: Cardinal
• December 10, 2015 at 2:47 pm #234624
  Dataminds

  Member

  Post count: 44

  Hi There,

  I’ve purchased your theme a couple of weeks ago. I really like it. I’m making an onepage and i’m trying to reduce text. So I am opting for ‘Tour Section’ or a ‘Tabs section’, however.

  Tour Section doesn’t display quite right. I named a tab ‘Clientsegmentation’ but is doesn’t fit in the left box and an arrow is also display through the text. And I want to change the background colour without using a colomn (and set colorbackground). It doesnt look very nice that way

  Tabs section: it’s looking good, but I want to change the background color. I’ve got a light grey picture a background, so it’s hard to read the text. Also, I want to do this without adding a colomn (cause it overlaps the Tabs section).

  Can you help me out?

  Thanks in Advance!

  Wkr, Datamind 1

  Attachments:

  You must be logged in to view attached files.
  December 10, 2015 at 2:57 pm #234630
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  What is the URL?

  Thanks.

  December 11, 2015 at 2:19 pm #234907
  Dataminds

  Member

  Post count: 44

  This reply has been marked as private.
  December 11, 2015 at 2:48 pm #234914
  David Martin – Support

  Moderator

  Post count: 20834

  1) Please add this CSS:

  .bright-design .spb_tour .nav-tabs {
      width: 220px;
  }
  
  .bright-design .spb_tour .tab-content {
      padding-left: 250px;
  }

  2) To change the tab background color, please use this CSS and replace the color hex with your own.

  .tab-content {
      background-color: #cccccc;
      padding: 15px 0 0;
  }

  Thanks.

  December 11, 2015 at 3:40 pm #234932
  Dataminds

  Member

  Post count: 44

  Hi There,

  Thanks, but it is not really as nice if I like it to be.

  1. The tabs (the ones that are not selected) are transparant and text is grey, so you can’t read it cause of the grey background. Is it possible to make the tabheader text red?

  2. The text within the tab is readable, however it’s to close to the left. I think it need padding?

  3. Is it possible to give the tab box (with explanation) a colored line?

  Hope you can help me out.

  Thanks in advance!

  Attachments:

  You must be logged in to view attached files.
  December 11, 2015 at 3:47 pm #234934
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Please use this:

  .tab-content {
      background-color: #f7f7f7;
      padding: 15px;
  }
  
  .spb_tabs .ui-tabs .ui-tabs-panel, 
  .spb_content_element .ui-tabs .ui-tabs-nav, 
  .ui-tabs .ui-tabs-nav li, 
  .spb_tabs .nav-tabs li a {
      color: red;
  }

  3) Where do you want the line? Please add a screenshot.

  Thanks.

  December 11, 2015 at 3:54 pm #234939
  Dataminds

  Member

  Post count: 44

  Hi,

  See screenshot..

  Off topic. I include my Css. On mobile the headers are to big and not aligned. Can you help me out? Or do I need to open a new topic?

  Attachments:

  You must be logged in to view attached files.
  December 11, 2015 at 3:59 pm #234942
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  For the red border, please use:

  .tab-content {
      border: 2px red solid;
  }

  Regarding the mobile issue, I can help you here. Are you viewing on iPad or iPhone. Please add a screenshot illustration of what you are looking to change.

  Thanks.

  December 11, 2015 at 4:06 pm #234945
  Dataminds

  Member

  Post count: 44

  Thanks,

  Can I change the color in #bb1111? Colored line and tabheader text?

  .spb_tabs .ui-tabs .ui-tabs-panel,
  .spb_content_element .ui-tabs .ui-tabs-nav,
  .ui-tabs .ui-tabs-nav li,
  .spb_tabs .nav-tabs li a {
  color: red;
  }

  .tab-content {
  border: 2px red solid;
  }

  It’s on the IPhone. On iPad I haven’t tested it.

  Attachments:

  You must be logged in to view attached files.
  December 11, 2015 at 4:15 pm #234953
  Dataminds

  Member

  Post count: 44

  Hi,

  The tabs alignment on iPhone isn’t quite right. I attached the screenshot.

  Attachments:

  You must be logged in to view attached files.
  December 11, 2015 at 4:39 pm #234958
  David Martin – Support

  Moderator

  Post count: 20834

  Due to the size off the tabs, they will need to be 1 per line on iPhone size.

  Please test this for the iPhone:

  @media only screen and (max-width: 479px) {
  .nav-tabs > li {
      width: 100%;
  }
  .spb_tabs .nav-tabs li a {
      border-left-width: 1px!important;
  }
  }

  Thanks.

  December 12, 2015 at 11:35 am #235088
  Dataminds

  Member

  Post count: 44

  Hi David,

  It works a bit. Lines of the tab boxes are oke, but the text isn’t quite right.

  It’s not 1 per line though. So could you have a look?

  Besides that, I tried different CSS for mobile text, but it isn’t resizing.

  Hope to hear from you.

  Thanks!

  Attachments:

  You must be logged in to view attached files.
  December 14, 2015 at 3:46 pm #235286
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  @media only screen and (max-width: 479px) {
  .spb_tabs .nav-tabs li a {
      font-size: 8px !important;
  }
  }

  Thanks
  Mohammad

  December 14, 2015 at 4:02 pm #235295
  Dataminds

  Member

  Post count: 44

  Hi Mohammed,

  It worked! The only thing now is that the font size (h1/ h2) of the one page isn’t neetly responsive as mentioned before.

  Can you help me out?

  Thanks!

  Attachments:

  You must be logged in to view attached files.
  December 15, 2015 at 6:15 pm #235660
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Is that on the same page, I no longer see that?

  Thanks.

• Back to forum

  Posted in: Cardinal