-2

At the moment, all buttons on my website have the same design (rounded, version 2 in screenshot). However, I have an iframe implemented on my website (data from external link), which contains buttons with a different style (square, version 1 in screenshot). Is there a way to change the style of the buttons from the iframe to the exact same style as my buttons? (through custom css for example?)

The only differences between the buttons are the following:

  • Rounded vs. square-ish
  • Thickness of text

*The hoover effect is the same.

Screenshot: https://i.stack.imgur.com/Tz4AX.jpg

Note: The website is built on Wordpress & Elementor (latest versions).

Giovanni Patruno
  • 651
  • 9
  • 15
TheRookie
  • 9
  • 5
  • As far as I'm aware, if you don't have access to the page the iframe is loading, you will have to use javascript to change its css: https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Austin Arnett Mar 07 '22 at 15:59

1 Answers1

0

If the iframe's source can't be modified, javascript is necessary to append your own style sheet:

<script>
  var yourCssFileWithRoundedButtons = "path/style.css";
  var yourIFrameId = "MyIFrame"


  var cssLink = document.createElement("link");
  cssLink.rel = "stylesheet"; 
  cssLink.type = "text/css"; 
  cssLink.href = yourCssFileWithRoundedButtons; 
  frames[yourIFrameId].document.head.appendChild(cssLink);
</script>

Keep in mind that you may be fighting with that external page's css, and you may have to be very specific in your selector to get your changes through

Austin Arnett
  • 117
  • 1
  • 10
  • The Iframe's source can't be modified indeed, I only got access to the external link and that's it. Do I have to change anything in the coding you provided? Or can I just copy paste it? – TheRookie Mar 07 '22 at 16:15
  • I modified the code portion to specify what values you would need to change. Wherever you're getting your rounded button styles would go in the first value, and the iFrame's id attribute in the second value – Austin Arnett Mar 07 '22 at 16:21
  • Unless you've found a solution, I can revisit this now and take a look at your situation. You had a link to the site you were working with. May I see that link again? – Austin Arnett Mar 07 '22 at 17:46
  • Yeah, if that iframe isn't the same website there isn't much you can do unfortunately – Austin Arnett Mar 07 '22 at 19:41