Client Framework

Home » Client Framework » Forum » How to apply our own cutom CSS style in BB4

How to apply our own cutom CSS style in BB4

13 February, 2008 - 12:09 — AbhishekDubey

Hi

I am using BB4. Can you please help me further. I want to apply my own custom style to
accordion item, but it is applying our CSS style on the accordionItem label.

<b:accordion width="100%" height="80%">
   <b:accordionItem>
   <b:label>
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr valign="middle">
        <td width="1%" class="menu-text-blue"></td>
        <td width="86%" class="menu-text-blue">
        <div align="left" class="menu-text-small-black">
                Edit Profile
        </div>
        </td>
        <td width="11%" class="menu-text-blue">
        <div align="right">
            <img src="images/arrow-up.gif" width="7" height="8"></img>
        </div>
        </td>
        <td width="2%" class="menu-text-blue">&nbsp;</td>
    </tr>
    </table>
    </b:label>
    </b:accordionItem>

I have included the .css file which is having corressponding style class definition.

Can anyone help me about how to apply our own cutom CSS style in BB4?
It is also not picking the image file to be shown.

Thanks in Advance,
Abhishek

‹ Object null error when setting the value of the input. Info regarding dataProviderMysql ›

How to apply our own cutom CSS style in BB4

13 February, 2008 - 12:50 — yudi

Hi Abhishek,

If you want to change only the accordion item header style but not its content style , then you can add btl-accordionItem-head class that specify the accordion-item header style.

.btl-accordionItem-head {color:blue;}

.btl-accordionItem-head {color:blue;} Not working

13 February, 2008 - 14:04 — AbhishekDubey

Hi Yudi,

Thanks for quick reply.

I tried adding this class in my CSS but still it is not appearing on acccoridon Item header.

Can you please explain me it by giving some example.

One more thing, if I have to show some image in the header along with label then how I can go about it?

Thanks and Regards,
Abhishek

.btl-accordionItem-head {color:blue;} Not working

13 February, 2008 - 15:28 — yudi

Hi AbhishekDubey,

Did you add it into your main page css document otherwise it should work ? Actually btl-accordionItem-head class is already defined in accordion.xml and some of the style properties (border-color,width,height,etc) may been defined there. To overwrite this, you need to add important! for example border-width: 2px 2px 0 2px !important;

.btl-accordionItem-head {
   border-width: 2px 2px 0 2px !important;             
}

~Yudi

class attribute

13 February, 2008 - 23:21 — sbrenneis

I can't get the class attribute to work on any BTL element. I have to give them explicit style attributes. Maybe this is the problem AbhishekDubey is having.

class attribute

14 February, 2008 - 17:29 — yudi

Hi sbrenneis,

Well, you can also add explicit style attributes on BTL element but it sometimes won't give the precise change in the view node because the change is made in the model node. For instance, it is not possible to change only the accordion header by adding inline style attribute on b:accordionItem. To do it, you have to add .btl-accordionItem-head {color:blue;} in the default css document. This changes the accordion text-color header because in the view node , the accordion header has btl-accordionItem-head class.

~Yudi

.btl-accordionItem-head {color:blue;} Not working

18 February, 2008 - 17:51 — AbhishekDubey

Hi Yudi,

Yes I added it into my main page CSS document.

I did again what you mentioned. But it is not working. It is still taking the default style.

What if there are more than one accordins and we want seperate style for accorionItem header in each accordion.

Thanks,
Abhishek Dubey

How to apply our own cutom CSS style in BB4

19 February, 2008 - 11:36 — yudi

Hi AbhishekDubey,

If you want to have change for a certain accordion, then you just set an ID to that element and add #accordionOne.btl-accordionItem-head {color:blue;} in your main css. You can have a look some posts from other forum member about the overriding BTL css and many of them make it works.These are the links:
-http://bdn.backbase.com/node/477
-http://bdn.backbase.com/node/4199
-http://bdn.backbase.com/node/2536

~Yudi

Yes color scheme is working now.

21 February, 2008 - 13:12 — AbhishekDubey

Hi Yudi,

Thanks. I can see my color scheme reflecting there. I added background color scheme to
.btl-accordionItem-head-inner as given below and I can see the changes now-

.btl-accordionItem-head-inner {
border: 1px solid #15428b !important;
background-image: url(..images/middle-bg-1.gif) !important;
background-repeat: repeat-x;
background-position: top left;
background-color: #99CCFF !important;
height: 100%;
overflow: hidden;
}

Regarding the Label color, font style I had to add .btl-accordionItem-head with modified value in my main css file.

Thanks and Regards,
Abhishek