{"id":662,"date":"2017-10-09T10:58:38","date_gmt":"2017-10-09T15:58:38","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=662"},"modified":"2021-01-07T23:26:18","modified_gmt":"2021-01-08T04:26:18","slug":"wordpress-use-css-to-create-borders-around-an-iframe","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/wordpress-use-css-to-create-borders-around-an-iframe\/","title":{"rendered":"WordPress: Inject custom CSS to create borders around iframes and images"},"content":{"rendered":"\n<p>CSS can be used to style an iframe to give it a border with a drop shadow. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#iframe_drop_shadow {\n  -moz-box-shadow: 4px 4px 14px #000;\n  -webkit-box-shadow: 4px 4px 14px #000;\n  box-shadow: 4px 4px 14px #000;\n}<\/pre>\n\n\n\n<p>Then, in the tag that creates the iframe, reference this CSS using the tag <code class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">id=\"iframe_drop_shadow\"<\/code>. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;iframe src=\"http:\/\/www.bluegalaxy.info\/webshopsolution\/demo.html\" scrolling=\"no\" width=\"640\" height=\"480\" id=\"iframe_drop_shadow\"><\/pre>\n\n\n\n<p>Here is a real working example:<\/p>\n\n\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.bluegalaxy.info\/webshopsolution\" scrolling=\"no\" width=\"640\" height=\"480\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n\n\n\n<p><br><\/p>\n\n\n\n<p>An easy way to add the above custom CSS to WordPress is to use the admin area and go to Appearance &#8211;> Customize &#8211;> Additional CSS. Paste the CSS into the box and click the &#8220;Save &amp; Publish&#8221; button at the top.<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"323\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/new_css1.png\" alt=\"\" class=\"wp-image-679\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/new_css1.png 298w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/new_css1-277x300.png 277w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p>Voila! Now the new style should show up on affected pages immediately.<\/p>\n\n\n\n<p>Update: This same technique can be used to add drop shadows around selected images.&nbsp; Just add the following CSS to the Additional CSS tab:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#img_ds {\n    box-shadow: 5px 5px 5px #888888;\n}<\/pre>\n\n\n\n<p>And then add <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">id=\"img_ds\"<\/code> to an img tag. For example, I added this to the image shown above.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img class=\"alignnone wp-image-679 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/new_css1.png\" alt=\"\" width=\"298\" height=\"323\" id=\"img_ds\"\/><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS can be used to style an iframe to give it a border with a drop shadow. For example: Then, in the tag that creates the iframe, reference this CSS using the tag id=&#8221;iframe_drop_shadow&#8221;. For example: Here is a real working example: An easy way to add the above custom CSS to WordPress is to &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/09\/wordpress-use-css-to-create-borders-around-an-iframe\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">WordPress: Inject custom CSS to create borders around iframes and images<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[42,9],"class_list":["post-662","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-iframe","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":18,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/662\/revisions"}],"predecessor-version":[{"id":3312,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/662\/revisions\/3312"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}