0

I bought a Joomla template but I don't have a support subscription anymore so I need to modify the styling myself.

  1. I want to change the background of the highlighted "violet" on the left side, with an image background.
  2. On the left side of the image are the codes.
  3. I want to put a CSS override putting an image background.

enter image description here

mickmackusa
  • 43,625
  • 12
  • 83
  • 136
dok grin
  • 1

1 Answers1

0

The "violet" div has no id; but its parent does. You do not need an Id to match an element; a unique class / class combination will be enough. To be on the safe side you could select by parent id followed by the child classes:

#gkHeader > .box.mediumspaces.greybg {
  background-image:url(someimage.jpg);
  background-repeat: no-repeat;
}
  • #gkHeader : the item whose id is gkHeader;
  • > : the immediate children (direct children of the previous selector)
  • .box.mediumspaces.greybg : with all the classes separated by dots

Should your child divs have no distinctive class combinations that will allow you to select one, you could still achieve this with a positional selector:

#gkHeader > div:nth-child(3)

where:

  • #gkHeader > div selects all direct descendants of <div id="gkheader">
  • :nth-child(3) selects the third item in the collection

please mind the spaces,

  • .class1 .class2 is selecting an item with class="class2" contained in another with class="class1";
  • .class1.class2 is selecting an item with class="class1 class2"

If your rule does not work, but you see it in the browser inspector, there may be a rule with a more relevant selector; if so, be more specific in your selector (add more parents, or use ids instead of classes), or add !important after the style

Riccardo Zorn
  • 5,590
  • 1
  • 20
  • 36