Design and CSS styles
Version 7.x > Design and CSS styles > HELP!! Header CSS for Accordion Layout View modes: 
User avatar
Member
Member
sjhan - 12/17/2013 4:33:37 PM
   
HELP!! Header CSS for Accordion Layout
Hello,

Can anyone please help me to customize the Pane Headers for my Accordion Layout? I created a CSS style called 'pgh' in the style sheet and wanted to apply that style to the header. I just want the font to be larger (18px and want to add a color to the font).

User avatar
Member
Member
kentico_sandroj - 12/17/2013 5:11:36 PM
   
RE:HELP!! Header CSS for Accordion Layout
Hello,

The CSS class for the according Web part header is being set on line ~271 of ~\CMSWebParts\Layouts\Accordion.ascx.cs:

acc.HeaderCssClass = HeaderCSSClass;

Please feel free to replace this with your own class as needed.

Best Regards,
Sandro

User avatar
Member
Member
sjhan - 12/18/2013 9:55:52 AM
   
RE:HELP!! Header CSS for Accordion Layout
Hi Sandro,

Thank you for your response. I looked for the CSS Class 'HeaderCSSClass' in our style sheet but was unable to find it. Could that be the problem?

I created a style in our main style sheet called 'pmg' that I wanted to use. Is there a way to update the information in 'Pane Design' under the Accoridion layout web part properties? If so, how would it be done? Thanks in advance for all of your help!

User avatar
Member
Member
kentico_sandroj - 12/20/2013 4:39:58 PM
   
RE:HELP!! Header CSS for Accordion Layout
Hello,

I am sorry if my instructions were incomplete. If you change the line to the following example:

acc.HeaderCssClass = "myClass";

You can add myClass to your CSS and style it as needed. HeaderCSSClass is just a variable and its value may be different in your case so using the static approach (myClass) would be the easy approach for targeting the class. Please let me know if I can help clarify anything else.

Thanks,
Sandro

User avatar
Kentico MVP
Kentico MVP
Brenden Kehren - 12/23/2013 8:20:02 AM
   
RE:HELP!! Header CSS for Accordion Layout
If you don't want to modify any source code, simply add the HeaderCssClass class name to your style sheet and style it accordingly. One of the things I've learned to embrace is that Kentico has assigned CSS class names to nearly every element I can think of. So as a developer it allows me to get in and style something without having to do a lot of work because I can copy some base css from one project to another.