CSS question

Hello - I am really sorry to ask this, as this is probably a basic question. However, I am having difficulty with changing the background colour on the list style on the "Navigators > Interactive List" page. I have put in what I think it should be, (see attached screenshot), having used at the Web Developer Tools in Firefox and nothing appears to be working. I have also tried other variations, and still no joy .

I am sure this is probably a really straightforward answer, but it is eluding me, which is really frustrating. I would be really grateful, if someone would be able to put me straight.

Many thanks in advance. K/regs. Rachel O'Callaghan

Hi
to change this via a styles optional property rather than a theme you probably need to use !important. e.g. try the following and you can use this at the LO styles level rather than the individual list page but it will only change list page because of the .x_list_page

.x_list_page a.listItem {
background: red !important;
color:white !important;
}
.x_list_page a.listItem.highlight {
color: blue !important;
background: orange !important;
}
.x_list_page a.listItem:hover {
background: yellow !important;
color: green !important;
}
HTH
Ron

Sorry I meant to add that any css you apply in this way will prevent the built-in accessibility themes from working e.g. apply your styles and then when viewing the page use the accessibility controls to switch to Invert, High Contrast or Black on Yellow, - you'll see those options can't then change your custom changes. The only way to do this properly is to create a separate theme that is then added to the install.
HTH
Ron

Many thanks Ron for your help and additional advice, that really useful. K/regs. Rachel.