Place images on either side of a heading.

Tagged: , , ,

Author Posts

bluedognz February 1, 2018 at 8:39 am

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

Hi Seb

Is it possible to place images either side of a heading with MT?

Here’s an example: http://drops.bluedogwebdesign.com/302R0n2L2V2Y

I’m also using beaver builder if that helps.

Thanks!
Clark

Sebastian February 1, 2018 at 6:48 pm

Hey Clark,

Yes, this is possible with CSS, and therefore Microthemer. You just need to create two selectors, using pseudo elements ::before and ::after for the images. And one selector to set position:relative on the heading. You can do this by setting the relevant CSS modifier during targeting. The following video shows this in action:

http://somup.com/cFnVFEVx7E

Note, a position value of relative is set on the heading so that absolute positioning of the : :before and ::after elements is done relative to the heading.

Also note: many of the CSS styles applied to the pseudo elements in the video are necessary to make the pseudo elements appear (e.g. setting the content property with empty ‘ ‘, width/height, and position:absolute).

P.S. your message alerted me to the fact that there was a bug whereby pseudo elements weren’t updating the selector suggestions properly. I’ve fixed that now, but you will need to update to the latest version (5.1.4.4) in order for what’s shown in the video to work.

I hope that helps!

Cheers,
Sebastian

bluedognz February 4, 2018 at 6:08 am

Brilliant, that worked perfectly thank you!

Sebastian February 5, 2018 at 12:30 pm

Great!

You must login or register to reply to this topic.