|
Joe Flynn
|
May 20, 2015 at 8:46 am
Hi Team,
I have been trying to add custom css to make the changes as per the requirements.
The issue is that I have used all the suggested plugins for CSS and no matter what I do it does not work.
here are the few CSS codes that I am adding in the child theme CSS file:
td {
padding: 0.1rem 0 !important;
}
.tkt-slctr-tbl {
margin-bottom: 2rem !important;
}
.tkt-slctr-tbl-wrap-dv {
font-size: 0.9em !important;
}
.tkt-slctr-tbl tr.ticket-sales-expired {
font-size: 0.7em !important;
}
this is the dev URL where I am working on: http://dev.towardsthedigitalwaterutility.org/sept-conference/
Thank you
|
|
Lorenzo Orlando Caum
|
May 20, 2015 at 10:34 am
Hi, the Custom CSS doesn’t apply to the embed feature as that is loading the ticket selector from another website through an iframe.
—
Lorenzo
|
|
Joe Flynn
|
May 20, 2015 at 11:46 pm
Thank you Lorenzo, so you have mentioned that the custom CSS will not work for embed feature, So whats my solution as I just need the embed part and nothing else.
I know I should not be editing the css files as another update will wipe out the changes made.
Appreciated if you could have provided me with alternate solutions/work around than just let me know that the css will not work for embed feature. I hope you understand the frustration that I am going through.
Thanks
|
|
Dean
|
May 21, 2015 at 3:17 am
Hi,
Iframes are limited like that unfortunately.
One option, and this will only work because the iframe content is located on your site, is to use JavaScript.
Create a site specific plugin (https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/) and add the following function.
function style_my_iframe() {
?>
<script>
jQuery('iframe').load( function() {
jQuery('iframe').contents().find("head")
.append(jQuery("<style type='text/css'>span.ee-icon.ee-icon-tickets { font-size: 50px; } </style>"));
});
</script>
<?php
}
add_action('wp_footer', 'style_my_iframe');
That function will insert the CSS styles into the HEAD section of the iframe, thus styling the content in the iframe (in this case it makes the icon huge).
NOTE: this is a very basic function, and really needs to be updated to be more specific to your site (e.g. in its current form, it will load on every single page!). It is intended as an example only.
That code was based on this by SimpleSam5: http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe
|
