You can style any element of the C1SuperPanel using CSS styles to make its appearance truly unique. ComponentOne includes CSS selectors for each of its six built-in themes.
You can apply general CSS properties such as background, text, font, border, outline, margin, padding, list, and table to applicable CSS selectors.
For a list of common individual CSS selectors and grouped CSS selectors, select the C1SuperPanel control in your project, and view the drop-down list next to the CssClass property in the C1SuperPanel Visual Studio Properties window.
The following table details the common individual CSS selectors and grouped CSS selectors. You can combine the individual CSS selectors as a group to make the CSS selector more specific and strong. The grouped CSS selectors define styles for more than one element of the C1SuperPanel.
| CSS Selectors | Description |
|---|---|
| .wijmo-wijsuperpanel | Applies the style to the wijsuperpanel control. |
| .wijmo-wijsuperpanel-button | Applies the style to the button element of the wijsuperpanel. |
| .wijmo-wijsuperpanel-contentwrapper | Applies the style to the contentwrapper of the wijsuperpanel. |
| .wijmo-wijsuperpanel-handle | Applies the style to the handle element of the wijsuperpanel. |
| .wijmo-wijsuperpanel-hbar-buttonleft | Applies the style to the left button in the horizontal bar of the wijsuperpanel. |
| .wijmo-wijsuperpanel-hbar-buttonleft-ui-state-hover | Applies the style to the left button in the horizontal bar when it is in the hover state of the wijsuperpanel. |
| .wijmo-wijsuperpanel-hbar-buttonright | Applies the style to the right button in the horizontal bar of the wijsuperpanel.. |
| .wijmo-wijsuperpanel-hbar-buttonright ui state-hover | Applies the style to the right button in the horizontal bar when it is in the hover state of the wijsuperpanel. |
| .wijmo-wijsuperpanel-hbarcontainer | Applies the style to the horizontal bar container of the wijsuperpanel. |
| .wijmo-wijsuperpanel-helper | Applies the style to the helper of the wijsuperpanel. |
| .wijmo-wijsuperpanel-statecontainer | Applies the style to the statecontainer of the wijsuperpanel. |
| .wijmo-wijsuperpanel-templateouterwrapper | Applies the style to the templateouterwrapper of the wijsuperpanel. |
| .wijmo-wijsuperpanel-vbar-buttonbottom | Applies the style to the bottom button in the vertical bar of the wijsuperpanel. |
| .wijmo-wijsuperpanel-vbar-buttonbottom ui-state-hover | Applies the style to bottom button in the vertical bar when it is in the hover state of the wijsuperpanel. |
| .wijmo-wijsuperpanel-vbar-buttontop | Applies the style to the top button in the vertical bar of the wijsuperpanel. |
| .wijmo-wijsuperpanel-vbar-buttontop ui-state-hover | Applies the top button in the vertical bar when it is in the hover state of the wijsuperpanel. |
| .wijmo-wijsuperpanel-vbarcontainer | Applies the vertical bar container of the wijsuperpanel. |
