?
Solved

Using cflayout and cflayout tabs

Posted on 2010-01-12
14
Medium Priority
?
1,566 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
  • 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
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone 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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Media Temple is proud to announce our partnership with the Society of Digital Agencies (SoDA) as their exclusive hosting partner.
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
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
Course of the Month4 days, 2 hours left to enroll

601 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