{"id":5613,"date":"2021-07-16T17:18:54","date_gmt":"2021-07-16T12:18:54","guid":{"rendered":"https:\/\/webplover.com\/hosting\/?p=5613"},"modified":"2022-03-16T11:56:17","modified_gmt":"2022-03-16T06:56:17","slug":"remove-photopea-ads-sidebar","status":"publish","type":"post","link":"https:\/\/webplover.com\/hosting\/remove-photopea-ads-sidebar\/","title":{"rendered":"How to Remove Photopea Ads Sidebar and Make it Full Width"},"content":{"rendered":"\n

In this article, I will share a trick to remove advertisement banners and the sidebar containing ads completely from photopea.com<\/a>, a web-based solution to to edit your photos in real time like Photoshop<\/a>.<\/p>\n\n\n\n

In short, you will be able to use photopea.com<\/a> without ads sidebar with full-width edit screen experience<\/p>\n\n\n\n

We will use this trick and implement it on these three major web browsers:<\/p>\n\n\n\n

  1. Google Chrome<\/strong><\/li>
  2. Microsoft Edge<\/strong><\/li>
  3. Mozilla Firefox<\/strong><\/li><\/ol>\n\n\n\n

    Let’s get started\u2026<\/em><\/p>\n\n\n\n

    Google Chrome & Microsoft Edge<\/strong><\/h2>\n\n\n\n

    Step 1 :<\/strong> Go to photopea.com<\/a> right click and select inspect<\/p>\n\n\n\n


    Step 2:<\/strong> Go to Sources<\/strong><\/em> \u279c Snippets<\/strong><\/em> \u279c create a New snippet<\/strong><\/em> and name it photopea (You can name it anything)<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n


    Step 3<\/strong>: Copy this code snippet and paste it over there and sava the snippet using CTRL + S<\/kbd> (in windows) or Command + S<\/kbd> (in Mac)<\/p>\n\n\n\n

    document.head.insertAdjacentHTML(\n  \"beforeend\",\n  \"<style>.app > :first-child,.panelblock.mainblock{flex: 1 !important}body > div.flexrow.app > div:nth-child(1) > div:nth-child(3){width:100% !important}<\/style>\"\n);\n\ndocument.querySelector(\".app > :last-child\").remove();\n\nconst hk_canvas_body = document.querySelector(\n  \".panelblock.mainblock > .block > .body\"\n);\n\nconst hk_panelhead = document.querySelector(\".panelblock.mainblock .panelhead\");\n\nconst hk_canvas = document.querySelector(\".panelblock.mainblock .pbody canvas\");\n\nfunction hk_photopea() {\n  hk_canvas_body.style.width = \"100%\";\n  hk_canvas.style.width = \"100%\";\n  hk_panelhead.style.maxWidth = \"100%\";\n}\n\nhk_photopea();\n\nnew MutationObserver((x) => {\n  for (let y of x) {\n    if (y.type === \"attributes\") {\n      hk_photopea();\n    }\n  }\n}).observe(hk_canvas_body, {\n  attributes: true,\n});<\/code><\/pre>\n\n\n\n
    Step 4:<\/strong> Right click on your snippet and click on Run<\/strong>. Boom, that’s all.<\/p>\n\n\n\n

    Note:<\/em><\/strong> Your snippet will save in your browser but you will have to re-run it every time you refresh your current browser window.<\/p><\/blockquote>\n\n\n\n
    Mozilla Firefox<\/h2>\n\n\n\n
    Step 1 :<\/strong>  Go to photopea.com<\/a> right click and select inspect<\/p>\n\n\n\n

    Step 2:<\/strong> Go to Console<\/strong><\/em> click on book icon to switch to multi line editor<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 3<\/strong>: Copy this code snippet and paste it over there, then click on Run<\/strong> <\/p>\n\n\n\n
    document.head.insertAdjacentHTML(\n  \"beforeend\",\n  \"<style>.app > :first-child,.panelblock.mainblock{flex: 1 !important}body > div.flexrow.app > div:nth-child(1) > div:nth-child(3){width:100% !important}<\/style>\"\n);\n\ndocument.querySelector(\".app > :last-child\").remove();\n\nconst hk_canvas_body = document.querySelector(\n  \".panelblock.mainblock > .block > .body\"\n);\n\nconst hk_panelhead = document.querySelector(\".panelblock.mainblock .panelhead\");\n\nconst hk_canvas = document.querySelector(\".panelblock.mainblock .pbody canvas\");\n\nfunction hk_photopea() {\n  hk_canvas_body.style.width = \"100%\";\n  hk_canvas.style.width = \"100%\";\n  hk_panelhead.style.maxWidth = \"100%\";\n}\n\nhk_photopea();\n\nnew MutationObserver((x) => {\n  for (let y of x) {\n    if (y.type === \"attributes\") {\n      hk_photopea();\n    }\n  }\n}).observe(hk_canvas_body, {\n  attributes: true,\n});<\/code><\/pre>\n\n\n\n
    Note:<\/em><\/strong> Unlike Google Chrome and Microsoft Edge, there is no option in Mozilla Firefox to save your snippet and use it later. So you will have to paste this code every time you refresh your page.<\/p><\/blockquote>\n\n\n\n
    Watch out this video tutorial to have a visual grasp on the topic\u2026<\/strong><\/p>\n\n\n\n
    \n