CSS override question

I’m brand new to working with CSS, so this may be a trivial question…

I have just added a Panel object to my page, and I want to override the caption style settings. I tried setting the style on the Panel, but that didn’t work. In my styles.css file, I made a copy of .v-panel-caption from the default styles file and just placed that in my personal styles file, changed the values I needed and it does seem to work. But that means ALL my panels will get this caption style. If I only want to change it for one panel, I need to be able to customize it, but I can’t figure out what argument needs to be passed to the setStyleName() function. I tried myPanel.getCaption(), but that returns the string, and setStyleName is not valid on that…

Can someone tell me how to do this? Thanks,

nbc

I’m not an expert but I’ve been doing a bit of custom css just now. You need to call .setStyleName(X) on the panel you want to style where X is a string representing the name of the style.

e.g. if you have in your styles.css


.redpanel {
	color: red;
}

You just call myRedPanel.setStyleName(“redpanel”).

CSS is hierarchical though so you may instead want to use .addStyleName which keeps all inherited styling and adds / overwrites any you put in the style.

Hi Stewart,

I think that is exactly what I did - but it did not change the color of the panel caption. That appears to be nested in the panel definition. I’ll take another look - maybe I missed something…

Thanks,

nbc

Hi,

CSS can be tricky when beginning. Here’s how it’s done:

As you already both did, you need to add a new style name to the panel. Use either setStyleName or addStyleName, depending if you have other style names defined as well for the same panel (otherwise they do both the same thing).

This will add the style to the root element in the DOM. You can then use this style as a selector for all the elements inside that root element.

.v-panel-red .v-panel-caption {
    ...
    }

.v-panel-red .v-panel-content {
   ...
   }

This will not style the specific elements inside the panel. Using the selectors like this, you will effectively change every panels styles, if you nest other panels inside your “red” panel.

You can circumvent this by using the postfixed classnames for the panel, e.g.:

.v-panel-caption-red {
   ...
   }

.v-panel-content-red {
   ...
   }

Now those selectors will only affect that individual panel, which has the style name “red” added on the server. You can nest other panels inside it, and they will remain unstyled.

To get a good understanding how style names affect the generated DOM, I strongly encourage you to take a look at the generated source using Firebug (Firefox addon), Web Inspector (Safari/Chrome) or Developer Tools (IE8/9).

I hope this helps you get started!