[SOLVED]How to left align specific Accordian and/or Tab Headers in HTML

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>,

WebFocus, App Studio 8.0.09

Posts: 21 | Registered: June 05, 2015

Kristi Carter

Member

posted

Hide Post

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

WebFocus, App Studio 8.0.09

Posts: 21 | Registered: June 05, 2015

Ignored post by Kristi Carter posted

Show Post

Squatch

Master

posted

Hide Post

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,

App Studio
WebFOCUS 8.1.05M
Windows, All Outputs

Posts: 594 | Location: Michigan | Registered: September 04, 2015

Ignored post by Squatch posted

Show Post

Kristi Carter

Member

posted

Hide Post

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

WebFocus, App Studio 8.0.09

Posts: 21 | Registered: June 05, 2015

Ignored post by Kristi Carter posted

Show Post

Squatch

Master

posted

Hide Post

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.

App Studio
WebFOCUS 8.1.05M
Windows, All Outputs

Posts: 594 | Location: Michigan | Registered: September 04, 2015

Ignored post by Squatch posted

Show Post

Kristi Carter

Member

posted

Hide Post

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

WebFocus, App Studio 8.0.09

Posts: 21 | Registered: June 05, 2015

Ignored post by Kristi Carter posted