Styling iFrames

Author Posts

deanphillips1991 December 4, 2019 at 12:37 pm

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

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.

https://www.loom.com/share/68208441c8f343bd8fe60e3bb3c7a18a

Thank you

Sebastian December 4, 2019 at 5:22 pm

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!

deanphillips1991 December 4, 2019 at 5:35 pm

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

Sebastian December 5, 2019 at 11:57 am

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.

Thanks,
Sebastian

deanphillips1991 December 5, 2019 at 2:05 pm

Hey!

Here’s a link/video to explain it:

https://www.loom.com/share/224f0ecbe5dc46aeb32fccfccbbffe75

https://wordpress-250792-1003174.cloudwaysapps.com/working-out/dip-workout

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

Sebastian December 5, 2019 at 2:17 pm

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!

Cheers,
Sebastian

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

deanphillips1991 December 5, 2019 at 5:02 pm

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>

<?php 
$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!

Dean

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

deanphillips1991 December 6, 2019 at 12:36 am

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 (https://www.youtube.com/watch?v=gZTp1pLsfNc) but that didn’t do the job (it made things worse with auto margin-top on the button)

https://wordpress-250792-1003174.cloudwaysapps.com/articles/

What would be the best way to do this?

Sebastian December 6, 2019 at 1:35 pm

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)

Cheers,
Sebastian

You must login or register to reply to this topic.