Using cflayout and cflayout tabs

assuming you are on cf8:

1) to get rid of the border, add this css to your page:

.x-tabs-bottom .x-tabs-body, .x-tabs-bottom .x-tabs-wrap {
  border:none;
}

2) to get rid of the white bg behind the tab strip, add this css to your page:

.x-tabs-strip-wrap  {
  background-color:transparent !important;
}

however, you may notice that the actual tabs are image-based, and the images used have solid white background - thus on a darker body bg you will see white colour behind the rounded tab corners.

if you need that level of visual customization, consider using jquery ui tabs instead - http://jqueryui.com/demos/tabs/ 
with its theme roller you can create your own custom css theme to match your site's colours in a matter of minutes: http://jqueryui.com/themeroller/

Azadi

will check soon

i applied this on css file and how do i apply in cflayout tag..

there is no class attribute associated it

please tell me, i applied it but have not been able to see its results

when cf renders the layout on page, it applies those classes to the elements it creates. you do not need to "apply" it to cflayout in any way.
just make sure those styles are defined in <style> block in your page, not in an external stylesheet.

and, again, those styles are for cf8 cflayout - cf9 uses different classes, iirc.

Azadi

i have cf9 on my machine but have cf8 on my shared machine..

how will cf9 will render it. Please Guide me

cf9 uses ExtJS ver 3, which uses very different css classes. that's why you do not see any changes in your local dev environment.

to achieve a similar effect in cf9 you will need to add this style block into your page:

<style type="text/css">
.x-tab-panel-footer,
.x-tab-panel-body-bottom,
ul.x-tab-strip-bottom  {
  border:0 none;
}
.x-tab-panel-footer,
ul.x-tab-strip-bottom  {
  background-color:transparent !important;
  background-image:none;
}
</style>

keep in mind that the above is only for bottom-tabs cflayout.

Azadi

well that is for bottom tabs layout but how can i view for the tabs with top alignment. and also i cannot see any change in them while implementing

hoe do i change the inbetween middle color i mean the area of cflayout tab is showing a white background while it should be transparent too like here it is attched

Please tell the same in CF8 and CF9 too..

Regards
Untitled.png

>> hoe do i change the inbetween middle color i mean the area of cflayout tab is showing a white background
>> while it should be transparent too like here it is attched

i am not 100% sure i understand the above correctly, but the following css removes tab strip background and borders both on bottom- and top-located tabs:

on CF8:

.x-tabs-bottom .x-tabs-body, .x-tabs-bottom .x-tabs-wrap,
.x-tabs-top .x-tabs-body, .x-tabs-top .x-tabs-wrap {
  border:none;
}
.x-tabs-strip-wrap  {
  background-color:transparent !important;
}


and on CF9:

.x-tab-panel-header, .x-tab-panel-footer,
.x-tab-panel-body-bottom, .x-tab-panel-body-top,
ul.x-tab-strip-bottom, ul.x-tab-strip-top  {
  border:0 none;
}
.x-tab-panel-header, .x-tab-panel-footer,
ul.x-tab-strip-bottom, ul.x-tab-strip-top  {
  background-color:transparent !important;
  background-image:none;
}

Azadi

working great but the layout inside tab is of white coloured, how do i make that transparent

>> working great but the layout inside tab is of white coloured, how do i make that transparent

can you clarify exactly which part of the layout, and in which cf version, you are talking about?

Azadi

i am using coldfusion 9 and host is having coldfusion 8, so if u see my image, the middle part of the cflayout tab where i have defined the where the information like any textwill be displayed that past is appearing in white, i want that transaprent also

Awesome Thanks