I have a page where I have tab panels and Accordian panels. I was able to get the page headers n these to do the background colors I want, however now I need to left align the title for the Accordian only.

I tried adding text-align:left; to the logic below and it does nothing. Is this something that can be done?

If it can be, how do I make it specific to the Accordian panel and not change all the page headers, which seems to be what my current logic would do.

.IBI_pageHeader {
border-radius: 8px;
color: rgb(196, 198, 200);
background-image: none;
background-color: rgb(95, 96, 98);


}
.IBI_pageHeader_Selected {
border-radius: 8px;
color: rgb(196, 198, 200);
font-size: inherit;
font-style: inherit;
background-color: rgb(0, 112, 60);


}


Thanks,
Kristi

This message has been edited. Last edited by: <Emily McAllister>,

I finally found something that allow me to text align.

.IBI_pageHeaderText {
text-align: left;


}

However it wants to do this for all the Tab and Accordian panels. I want to set this specific to just one of the Accordians on my page.

like something like this:
.IBI_pageHeaderText.MainWindowPanel {
text-align: left;
}

I know nothing about this type of coding at this point. I am sure it has to be something simple like that. I hope.

Thanks,
Kristi

You will need to first use the unique identifier (ID) of your accordion component, then also tell CSS to look for the "IBI_pageHeaderText" class. That class is present in the HTML DIV that wraps the page headers.

So, if my accordion has a unique identifier named "windowPanel2", it would be:

#windowPanel2 .IBI_pageHeaderText {
    text-align: left;

}

Adjust your ID accordingly (Accordion-ly?).

P.S. Forgot to mention that with CSS coding, a pound sign ("#") refers to a unique identifier, and a period (".") refers to a class. You seem to be able to understand what classes you need to make adjustments. If you know that, you just need to reference the ID of your component first to avoid changing other components on your HTML page. Spaces separate these CSS references as you go from left to right in the code.

By the way, I like your minty-chocolate color scheme you've got going there!

This message has been edited. Last edited by: Squatch,

This worked great. However I have one more thing involved that is making it still not work quite right for me.

The Accordian and Tab panels I have are incorporated within each other. I have an Accordian and whithin that Accordian on each page are Tab Panels within the pages.

So when I tell it to do the text align for the Accordian specific, it wants to do it for everything within it including the Tabs. Now if I take and split it out it will work for each specifically so I know it worked otherwise.

Any ideas on how to get it to work at that level?

Thanks,
Kristi

Sure. So if my accordion ID is "accordionPanel1" and the tab ID is "tabPanel1":

#accordionPanel1 .IBI_pageHeaderText {
    text-align: left;

}
#accordionPanel1 #tabPanel1 .IBI_pageHeaderText {
    text-align: center;

}

The first CSS code affects both the accordion and the tab components, but the second CSS overrides this because it is accessing the tab component specifically. And it shouldn't matter what order the code is in.

This worked great!
Thank You! Thank You! Thank You!