Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

Pages: 1

 

#1 12-02-2015 08:22:38

CrownRoyal
Member
Registered: 01-10-2009
Posts: 716

how to make size of tabs content space larger?

We embed our product youtube videos on the tabs content section. The embed code YT provides

<iframe width="560" height="315" src="https://www.youtube.com/embed/#######" frameborder="0" allowfullscreen></iframe>

is a good width but the height of the content section is not ideal. I can make the embed code smaller but that loses presentation value.

So how can I heighten the content section? pixels? rows?

Thanks in advance.

Offline

 

#2 12-03-2015 07:52:26

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: how to make size of tabs content space larger?

Add this to your skin's CSS file:

Code:

.tabscontent {height: 350px;}
Nick Hendler

Online

 

#3 12-03-2015 08:00:25

west4
Member
From: UK
Registered: 04-16-2008
Posts: 645
Website

Re: how to make size of tabs content space larger?

Hi,

In the overrides.css there is a Required Classes: Tabs section and in that is a .tabscontent and in that there is height: 240px; or something like that, change the height: 320px; and that should do the height, the width is auto and will fit the frame area in which you want the tab to appear.

Cheers,
Bruce.

I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#4 12-03-2015 08:19:05

CrownRoyal
Member
Registered: 01-10-2009
Posts: 716

Re: how to make size of tabs content space larger?

I was in System Dashboard > System > Displays > Display Skins and looked both Desktop Skin and Ecom.  I couldn't find a height reference for tabscontent.

Offline

 

#5 12-03-2015 10:05:24

west4
Member
From: UK
Registered: 04-16-2008
Posts: 645
Website

Re: how to make size of tabs content space larger?

Should be in....

Desktop skin - overrides.css

If there is not a height reference just add one in

Code:

.tabscontent {
        padding-top: 4px;
     padding-right: 6px;
     padding-bottom: 12px;
     padding-left: 6px;
     height: 240px;
     background-color: #f7f8fc;
     }

it should look a little like this....

Code:

/* +------------------------------------------------------------+ */
/* | Required Classes: Tabs                                     | */
/* +------------------------------------------------------------+ */

.tabsheaderwrap {
     margin: 10px 0px 0px 0px;
     }

.tabsheaderitem_off {
     -moz-border-radius: 6px 6px 0px 0px;
     -webkit-border-radius: 6px 6px 0px 0px;
     border-radius: 6px 6px 0px 0px;
     }

.tabsheaderitem_off a {
     -moz-border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
     border-radius: 4px 4px 0px 0px;
     }

.tabsheaderitem_on {
     -moz-border-radius: 6px 6px 0px 0px;
     -webkit-border-radius: 6px 6px 0px 0px;
     border-radius: 6px 6px 0px 0px;
     background-color: #f7f8fc;
     }

.tabsheaderitem_on a {
     -moz-border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
     border-radius: 4px 4px 0px 0px;
     }

.tabsheaderitem_on a:hover {
     color: #000000;
     }

.tabscontentwrap {
     -moz-border-radius: 0px 6px 6px 6px;
     -webkit-border-radius: 0px 6px 6px 6px;
     border-radius: 0px 6px 6px 6px;
     padding: 4px;
     background-image: url('../media/gradientup-blue.png');
     background-color: #f7f8fc;
     background-position: bottom left;
     background-repeat: repeat-x;
     margin: 0px 0px 8px 0px;
     }

.tabscontent {
        padding-top: 4px;
     padding-right: 6px;
     padding-bottom: 12px;
     padding-left: 6px;
     height: 240px;
     background-color: #f7f8fc;
     }

.tabscontent h2.defaultheading {
     color: #162648;
     font-weight: bold;
     font-size: 14px;
     padding: 0px;
     margin: 0px 0px 10px 0px;
     border: none;
     background-color: #f7f8fc;
     background-image: none;
     -moz-border-radius: none;
     -webkit-border-radius: none;
     border-radius: none;
     }

But not exactly as mine is tweaked...

Cheers,
Bruce

Last edited by west4 (12-03-2015 10:10:48)

I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#6 12-03-2015 10:47:01

CrownRoyal
Member
Registered: 01-10-2009
Posts: 716

Re: how to make size of tabs content space larger?

Mine is

Code:

.tabscontent {
     padding: 6px;
     }

so II'll add it in there. Thanks.

Offline

 

#7 12-03-2015 10:49:57

CrownRoyal
Member
Registered: 01-10-2009
Posts: 716

Re: how to make size of tabs content space larger?

I got it to 325 for a perfect fit. Thanks everybody.

Offline

 

 

Pages: 1

Board footer