Changing per-page background images

Tagged: , ,

Author Posts

aurelius November 30, 2016 at 8:42 pm

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

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 December 1, 2016 at 5:47 pm

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 December 2, 2016 at 1:32 am

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

Thanks!

Sebastian December 2, 2016 at 9:55 am

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 December 2, 2016 at 5:45 pm

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 December 4, 2016 at 5:30 pm

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 December 4, 2016 at 5:32 pm

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 December 5, 2016 at 11:31 pm

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

Best,

–matt

You must login or register to reply to this topic.