Styling iFrames

Author Posts


Hey man,

Is there anyway to style an iFrame at all?

The code would be grabbed and then placed in the backend of the checkout builder, but it would be handy to target stuff via MT for styling. I usually use Chrome inspector, but a lot of the time it’s a pain to grab all the custom css I’ve written for it during that.

Thank you


Hey Dean,

Unfortunately Microthemer can’t access iframe content hosted on another domain for technical security reasons. Browsers just don’t let JavaScript interact with cross domain iframes. So MT can’t analyse the HTML in the iframe or create selectors for it.

Sorry dude!


No worries at all dude.

Thankfully, I rarely have to do it anyway (only for Thrivecart, and they’re about to release a cart builder)

I had one other question:

Is there a way/selector modifier to do “When this X is hovered do Y to this.”

I tried #code_block-119-37:hover + #previous-article-overlay but that didn’t work


Hey Dean,

Could you post a link to the page you’re working on? You can sometimes achieve what you’re after purely with CSS, but I would need to check the HTML markup to determine why your attempt didn’t work.




Here’s a link/video to explain it:

It’s the corner floating div that takes them to the next article and on hover, a text overlay should appear 🙂


Thanks Dean,

Instead of this:

#code_block-119-37:hover + #previous-article-overlay

Use this selector:

#code_block-119-37:hover #previous-article-overlay

The plus (+) is used for selecting adjacent elements, but the #previous-article-overlay element in inside the #code_block-119-37 element, so you can just use a space to separate them.

And regarding your question about using the CSS modifier menu to adjust existing selectors, that’s on the todo list!


P.S. deleting the .mt-123 part of any selector will make it global rather than page-specific.


That worked great!

This might be outside of your support/knowledge but do you have any idea when without the hover div it links to the previous article, but with it, it doesn’t?

I hired someone to help with the PHP but he doesn’t know anything about front end apparently/didn’t want to help me get this working as it “bored him” doing this stuff.

<div id="previous-article-overlay" class="ct-div-block"><div id="text_block-125-37" class="ct-text-block"><b>Woo</b>.<br>Next</div></div>

$prevPost = get_previous_post(); ?> 
<div class='image-next'><?php $prevThumbnail = get_the_post_thumbnail( $prevPost->ID , array( 80, 80));?> </div>
<?php previous_post_link( '%link', $prevThumbnail );?>

Thanks so much!


P.S Yep, I know about the global stuff, that’s what it was meant to be in this example 🙂


Also, something that’s been bugging me for so long (even with Oxygen) is how to make it so the buttons always fall at the bottom and line up with each other.

I’ve tried a tweak of this ( but that didn’t do the job (it made things worse with auto margin-top on the button)

What would be the best way to do this?


Hey Dean,

I’m not entirely sure why the margin-top auto trick doesn’t work in your case, but you can align the buttons using justify-content: flex-end

#link-272-275 {
    width: 100%;
    height: 100%;
    display: flex;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 40px;
    padding-right: 40px;
    justify-content: flex-end;

(Instead of justify-content: center)


You must login or register to reply to this topic.