Changing per-page background images

This topic contains 7 replies, has 2 voices, and was last updated by  aurelius 5 years, 9 months ago.

Author Posts

aurelius

Hi there. How can I accomplish this with microthemer? When I double-click on the page background (specifically on a page where the content is not full-width, so I’m clicking outside the content area) and create a selector, nothing seems to change.

What am I doing wrong? Thanks!


Sebastian

Hey,

Would you mind sending me a link to your site (here or privately) so I can see what’s going on?

Cheers!
Sebastian


aurelius

Sure, check out this page: http://dev.achaea.com/portal/

Thanks!


Sebastian

Thanks for that.

I’m just looking at the stylesheet Microthemer generates and trying to figure out which selector isn’t affecting the page. What’s the name of the selector you’re having trouble with?

Cheers,
Sebastian


aurelius

Well, I guess part of what i’m asking is – can Microthemer change the page background, or is that not a selectable element? I haven’t been able to figure out which selector would work.


Sebastian

Ah OK I’m with you now. Yes background images are absolutely selectable with Microthemer. I see why you had some trouble finding which element to target though. You have lots of nested elements tucked inside each other. Are you using Beaver Builder by any chance?

So in short, the selector you need to change the background-image is:

.fl-node-583fc7f47d7c0 > .fl-row-content-wrap

That’s the selector currently used by your theme to set the background-image. I found this using a browser inspector (right-click something then choose “Inspect”) because I don’t have access to your Microthemer interface. But here’s a handy trick for finding which element has a particular style you want to override:

  1. Double-click something which is your best guess at the right element, or a child element of it.
  2. The selector wizard will pop up. Go to the Inspector tab.
  3. Expand the relevant property group. So in your case you would expand the Background property group so you can see the computed background-image style for the element you are on.
  4. If you don’t see a value for background-image, click the up arrow on the directional controls to move up to the parent element. Repeat this process, until you see a defined background image. This will tell you that you are on the correct element.
  5. Go to the Targeting tab and choose your preferred selector from the list.
  6. Click the CREATE SELECTOR button (after naming your selector).
  7. Then you can set a different background-image via the Background style options.

I hope that helps. Please let me know if you need further assistance.

Cheers,
Sebastian


Sebastian

Oh and the background image for the header on that page is set using:

.fl-page-header

But perhaps you can try my method to find this yourself 🙂


aurelius

Thanks Sebastian! I am indeed using Beaver Builder, btw.

Best,

–matt

You must login or register to reply to this topic.