At MagLoft, we provied simple ways to run your digital magazine web-app. You can either host it with us (e.g. https://www.magloft.com/app/examplemagazine), or hook up your own domain name using a CNAME DNS record (e.g. http://read.examplemagazine.com).
But what if you want to further customize your Web-App? Let's say you woud like to ...
Use your own SSL certificate to run your web-app on a HTTPS website.
Customize the look and feel of your web-app.
Add custom elements to the web-app, like feedback forms, additional links, etc...
Good News: With MagLoft you can download and customize the Web-App to solve all of the above. Let's walk through it step by step.
Download your Web-App index.html
Follow the instructions here to download the index.html file of your web-app. This file contains everything you need to run your web-app on your own server.
For now, just save it to your desktop.
Preparations
Before we start making changes to your Web-App, let's make sure we're all set up:
1. Open the index.html file in your Browser, preferrably Google Chrome. If your Web-App shows up, everything's good.
2. Open the index.html file in your Text Editor, preferrably VS Code, Sublime Text, or Notepad++.
3. Find the closing body tag </body>, and add some lines just before. This is where we can add all of our changes:
Once you're all set, let's go though some Examples.
Examples
Change Shelf Background
In this example, we'll change the Background Color of the Shelf to a dark gray tone.
<style>
issue-shelf { background: #444444 !important; }
</style>
Change Subscribe Button
We can customize the Subscribe button that is shown on the top-right of the screen. Note that this button only shows up if you have Subscriptions set up.
<style>
paper-button.btn-subscribe { background: #386cb1 !important; }
paper-button.btn-subscribe span.issue-shelf { display: block !important; }
</style>
Change Sidebar Background and Text Color
We can customize the Sidebar to use a dark-gray background color, and show all text in White color.
<style>
#contentContainer.app-drawer { background: #444444 !important; }
.app-drawer-button, .category-list li { color: #FFFFFF !important; }
</style>
Change Issue Preview Bar Color
You also have full control over the issue preview cards. In this example, let's change the bottom bar to a blue background with white text.
<style>
.bottom-bar.issue-shelf-item { background: #386cb1 !important; color: #FFFFFF !important; }
</style>
Add a custom Link Button
Finally, you can add any additional HTML to your website. There's a lot of great services out there that allow you to embed custom code, like social media links, Live-Chat, Feedback Forms and other great goodies.
<a class="custom-link" href="https://www.magloft.com/" target="_blank">VISIT WEBSITE</a>
<style>
a.custom-link { display: block; position: fixed; bottom: 0; left: 0; z-index: 1000; padding: 8px; background: #386cb1; color: #FFFFFF; }
</style>
Go Live
Once you've customized your Web-App and are happy with the results, all that's left to do is to upload the index.html file to your server. This is also an easy way to run your web-app via HTTPS, if your website already supports that.
Need Help?
Note that we're happy to help you with any customization or technical issues. We've got a splendid Team of developers that can get the job done for you. Just send us your customization needs and we'll get back to you with a Quotation.
Pssst: Thanks for reading all the way to the end! As a reward, feel free to copy/paste the following snippet to add fancy social media buttons to the page:
<!--from https://www.buttons.social-->
<style>.buttons-social { position: fixed; bottom: 0; right: 0; z-index: 1000; padding: 8px; text-align: right; width: 64px; } .buttons-social > a { display: inline-block !important; width: 48px !important; height: 48px !important; margin-top: 8px; } </style>
<div class="buttons-social"><script>document.write('<a href="https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(document.URL)+'"target="_blank"title="Facebook"style="display:inline-block;vertical-align:middle;width:2em;height:2em;border-radius:10%;background:#3b5998;"><svg style="display:block;fill:#fff;height:44%;margin:28% auto;" viewBox="0 -256 864 1664"><path transform="matrix(1,0,0,-1,-95,1280)" d="M 959,1524 V 1260 H 802 q -86,0 -116,-36 -30,-36 -30,-108 V 927 H 949 L 910,631 H 656 V -128 H 350 V 631 H 95 v 296 h 255 v 218 q 0,186 104,288.5 104,102.5 277,102.5 147,0 228,-12 z" /></svg></a> <a href="https://twitter.com/share?url='+encodeURIComponent(document.URL)+'&text='+encodeURIComponent(document.title)+'"target="_blank"title="Twitter"style="display:inline-block;vertical-align:middle;width:2em;height:2em;border-radius:10%;background:#1b95e0;"><svg style="display:block;fill:#fff;height:36%;margin:32% auto;" viewBox="0 -256 1576 1280"><path transform="matrix(1,0,0,-1,-44,1024)" d="m 1620,1128 q -67,-98 -162,-167 1,-14 1,-42 0,-130 -38,-259.5 Q 1383,530 1305.5,411 1228,292 1121,200.5 1014,109 863,54.5 712,0 540,0 269,0 44,145 q 35,-4 78,-4 225,0 401,138 -105,2 -188,64.5 -83,62.5 -114,159.5 33,-5 61,-5 43,0 85,11 Q 255,532 181.5,620.5 108,709 108,826 v 4 q 68,-38 146,-41 -66,44 -105,115 -39,71 -39,154 0,88 44,163 Q 275,1072 448.5,982.5 622,893 820,883 q -8,38 -8,74 0,134 94.5,228.5 94.5,94.5 228.5,94.5 140,0 236,-102 109,21 205,78 -37,-115 -142,-178 93,10 186,50 z" /></svg></a> '+(/mobile|android|blackberry/i.test(navigator.userAgent)?'<a href="whatsapp://send?text='+encodeURIComponent(document.URL)+'"title="WhatsApp"style="display:inline-block;vertical-align:middle;width:2em;height:2em;border-radius:10%;background:#43d854;"><svg style="display:block;fill:#fff;height:44%;margin:28% auto;" viewBox="0 -256 1536 1548"><path transform="matrix(1,0,0,-1,0,1158)" d="m 985,562 q 13,0 98,-44 84,-44 89,-53 2,-5 2,-15 0,-33 -17,-76 -16,-39 -71,-65.5 -55,-26.5 -102,-26.5 -57,0 -190,62 -98,45 -170,118 -72,73 -148,185 -72,107 -71,194 v 8 q 3,91 74,158 24,22 52,22 6,0 18,-1 12,-2 19,-2 19,0 26.5,-6 7.5,-7 15.5,-28 8,-20 33,-88 25,-68 25,-75 0,-21 -34.5,-57.5 Q 599,735 599,725 q 0,-7 5,-15 34,-73 102,-137 56,-53 151,-101 12,-7 22,-7 15,0 54,48.5 39,48.5 52,48.5 z M 782,32 q 127,0 244,50 116,50 200,134 84,84 134,200.5 50,116.5 50,243.5 0,127 -50,243.5 -50,116.5 -134,200.5 -84,84 -200,134 -117,50 -244,50 -127,0 -243.5,-50 Q 422,1188 338,1104 254,1020 204,903.5 154,787 154,660 154,457 274,292 L 195,59 437,136 Q 595,32 782,32 z m 0,1382 q 153,0 293,-60 139,-60 240,-161 101,-101 161,-240.5 Q 1536,813 1536,660 1536,507 1476,367.5 1416,228 1315,127 1214,26 1075,-34 935,-94 782,-94 587,-94 417,0 L 0,-134 136,271 Q 28,449 28,660 q 0,153 60,292.5 60,139.5 161,240.5 101,101 240.5,161 139.5,60 292.5,60 z" /></svg></a> ':'')+'<a href="https://plus.google.com/share?url='+encodeURIComponent(document.URL)+'"target="_blank"title="Google+"style="display:inline-block;vertical-align:middle;width:2em;height:2em;border-radius:10%;background:#dd4b39;"><svg style="display:block;fill:#fff;height:38%;margin:31% auto;" viewBox="0 -256 2304 1466"><path transform="matrix(1,0,0,-1,0,1117)" d="M 1437,623 Q 1437,415 1350,252.5 1263,90 1102,-1.5 941,-93 733,-93 584,-93 448,-35 312,23 214,121 116,219 58,355 0,491 0,640 q 0,149 58,285 58,136 156,234 98,98 234,156 136,58 285,58 286,0 491,-192 L 1025,990 Q 908,1103 733,1103 610,1103 505.5,1041 401,979 340,872.5 279,766 279,640 279,514 340,407.5 401,301 505.5,239 610,177 733,177 q 83,0 152.5,23 69.5,23 114.5,57.5 45,34.5 78.5,78.5 33.5,44 49,83 15.5,39 21.5,74 H 733 v 252 h 692 q 12,-63 12,-122 z m 867,122 V 535 H 2095 V 326 h -210 v 209 h -209 v 210 h 209 v 209 h 210 V 745 h 209 z" /></svg></a>');</script></div><!--end buttons.social-->