Oracle APEX theme CSS top left hamburger

1
votes

I have been asked to theme my APEX 19.2 app and the designer has come back with a fairly simple ask. The top left hamburger be white and purple like below:

enter image description here

I am using the theme roller to apply the settings and can't seem to get the active and inactive state to stay white and purple.

I have even tried my own CSS in the theme roller like below but only with limited success. Any ideas how I can achieve this?

CSS I am currently trying

t-Button--icon {
  color: #393093!important;
  background: #ffffff!important;
  border-color: #393093!important;

}

t-Button--header {
  color: #393093!important;
  background: #ffffff!important;
  border-color: #393093!important;
}
t-Button--headerTree  {
  color: #393093!important;
  background: #ffffff!important;
  border-color: #393093!important;
}

t-Header-controls {
  color: #393093!important;
  background: #ffffff!important;
  border-color: #393093!important;
}
is-active {
  color: #393093!important;
  background: #ffffff!important;
  border-color: #393093!important;
}

NavigationBar {
  color: #393093!important;
  background: #ffffff!important;
  border-color: #393093!important;
}

Even with all of this my button active and hover still looks like this:

enter image description here

I feel like I am close but after several hours of fiddling, I thought it was about time I consult the collective experts. Any help and advice would be greatly appreciated. If you can't already tell I am still learning CSS.

2
cssoracleoracle-apex

2 Answers

2
votes

You ought to use the CSS :hover selector which is used to select elements when one mouses over them.

Assuming the hamburguer menu has a class named burguer

.burguer:hover {
color: #393093;
background: #ffffff;
border-color: #393093;
}
0
votes

Then change the hover and active effects :)

.burguer:hover {}

.burguer:active {}

It might be worth checking if Apex does not use a selector that has "higher ponctuation" than something so simple. In such case, you might want to create a composite selector

button.t-Button--header .burguer:hover{}

Good Luck