?
Solved

Using cflayout and cflayout tabs

Posted on 2010-01-12
14
Medium Priority
?
1,543 Views
Last Modified: 2013-12-20
I use cflayout tag to list some listings in tabs..

i have few troubles with the code:

1. I want to match the tab color with the background color right now it is coming as white..
2. I also want to remove the border line of the cflayout-tab. i am unable to do that.

I am attaching the image to show what i need to do..
Untitled.png
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
14 Comments
 
LVL 27

Expert Comment

by:azadisaryev
ID: 26301336
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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 26424652
will check soon
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 27649984
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
0
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 
LVL 27

Expert Comment

by:azadisaryev
ID: 27650909
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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 27651525
i have cf9 on my machine but have cf8 on my shared machine..

how will cf9 will render it. Please Guide me
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 27653780
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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 27663195
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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 27663214
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
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 27666654
>> 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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 27933357
working great but the layout inside tab is of white coloured, how do i make that transparent
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 27935863
>> 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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 27993420
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

0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 2000 total points
ID: 27994847
on CF8 you do not need to change anything - the tab body background should be transparent already.
on CF9 just add this to the styles in your page:

.x-panel-body, .x-tab-panel-body  {background-color:transparent !important;}

Azadi
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 31676519
Awesome Thanks
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
What You Need to Know when Searching for a Webhost Provider
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question