By sol77 on

How do I change the arrows for collapsible fieldsets using css?

Didn't find anything on this so I am asking here.
I want to change the arrows that are used for collapsible fieldsets so they change with the theme.
My new theme is based on Bluemarine and uses the phptemplate engine. Here is a picture to illustrate what I mean.
I have managed to add my own arrows, the white ones, but I am unable to figure out how to get them to replace the old black ones. This is the css-code I am using for the arrows:

fieldset.collapsible.collapsed legend {
  background-image: url('/drupal/themes/elf/grfx/menu-collapsed.png');
  background-repeat: no-repeat;
  background-position: left center;
}
fieldset.collapsible legend {
  background-image: url('/drupal/themes/elf/grfx/menu-expanded.png');
  background-repeat: no-repeat;
  background-position: left center;
}

Here is the html:

<fieldset class="collapsible collapsed"><legend><a href="#">Theme configuration</a></legend>
/.../
</fieldset>

<fieldset class="collapsible"><legend><a href="#">Comment settings</a></legend>
/.../
</fieldset>

I would also like to know how I can add a border around the collapsed fieldset the same way.

I am most grateful for any help I can get.

⋅ Categories: Drupal 4.7.x

Comments

nevets’s picture

nevets commented

This fieldset.collapsible.collapsed will not work as expected since collapsible and collapsed are at the same level (there are both a class of fieldset). I think the following will work. I placed the rule for collapsible first since it applies to both cases, then the second rule with collapsed will override it if the class collapsed is used.

fieldset.collapsible legend {
background-image: url('/drupal/themes/elf/grfx/menu-expanded.png');
background-repeat: no-repeat;
background-position: left center;
}
fieldset.collapsed legend {
background-image: url('/drupal/themes/elf/grfx/menu-collapsed.png');
background-repeat: no-repeat;
background-position: left center;
}
sol77’s picture

sol77 commented

I appreciate the help but that unfortunatelly didn't help. My code is more correct now though.
Do you have any other ideas?

sol77’s picture

sol77 commented

oops

jessehs’s picture

jessehs
he/him
Primary language English
Location Taos, New Mexico
commented

...but I'll leave a comment here as I just came across this post via a major search engine.

The css selector that I targeted to get this working was:

html.js fieldset.collapsible span.fieldset-legend {
  background: url(...)
  ...
}

and

html.js fieldset.collapsible.collapsed span.fieldset-legend {
  background: url(...)
  ...
}