Havenbreaker Posted January 12, 2016 Share Posted January 12, 2016 (edited) So I know we all have our own little tweaks and CSS magic that we may or may not perform on our Pineapples, but I welcome all that have their own interesting customizations to share. I am new to the community as a owner with the Nano being my first piece of hardware but have been following the Pineapple and it's community for years... \*Not Stalkerish at All*\...I posted a few pictures of my CSS trial by fire magic that I have been working on in another thread and would like to thank Darren for sorta spawning it's naming idea. ***New Update for Firmware 1.0.2/3*** Github Link Here If you have any questions please feel free to ask below or even share your own CSS schemes. A few images of what the CSS color scheme looks like in action through the different Module pages: (I have not loaded any of the HTML or Img files to the github only the CSS file for the color scheme.) Edited January 15, 2016 by Havenbreaker 1 Quote Link to comment Share on other sites More sharing options...
barry99705 Posted January 12, 2016 Share Posted January 12, 2016 Yea, that's cool! 2 Quote Link to comment Share on other sites More sharing options...
Havenbreaker Posted January 13, 2016 Author Share Posted January 13, 2016 Thanks @barry99705 if there are any major UI changes I'll try to keep this as up to date as possible just in case Seb tries to through me a curve ball again and hard codes in text color to the HTML lol... Quote Link to comment Share on other sites More sharing options...
Purrball Posted January 13, 2016 Share Posted January 13, 2016 This is awesome! Now if only there were some Evil Portal templates as flashy as this, or similar to an actual WiFi hotspot. (I'm sure there are, but I'm not able to find any) Quote Link to comment Share on other sites More sharing options...
Darren Kitchen Posted January 13, 2016 Share Posted January 13, 2016 1337 Mode should totally be a module! Love it! 2 Quote Link to comment Share on other sites More sharing options...
Havenbreaker Posted January 13, 2016 Author Share Posted January 13, 2016 (edited) 1337 Mode should totally be a module! Love it! That was a thought of mine however when it comes to code I can analyze and break stuff down but writing it myself is still a problem for me. This is awesome! Now if only there were some Evil Portal templates as flashy as this, or similar to an actual WiFi hotspot. (I'm sure there are, but I'm not able to find any) I think this could be arranged I have been looking in the possibilities of implementing reCaptcha into my EvilPortal page to allow for a timing buffer and give the page a more legitimate look. If I get it working I will be sure to post it up and let people take their turns breaking it down and making it better. Edited January 13, 2016 by Havenbreaker Quote Link to comment Share on other sites More sharing options...
telot Posted January 13, 2016 Share Posted January 13, 2016 Great stuff Havenbreaker! I can see a module that allows for these kind of "themes" to selectable from a dropdown. Select your theme and off you go! telot Quote Link to comment Share on other sites More sharing options...
Probie Posted January 13, 2016 Share Posted January 13, 2016 1337 Mode should totally be a module! Love it! +1! Great stuff Havenbreaker! I can see a module that allows for these kind of "themes" to selectable from a dropdown. Select your theme and off you go! telot +2! Awesome style! I'd be interested in adding a theme or two to the module! Quote Link to comment Share on other sites More sharing options...
telot Posted January 13, 2016 Share Posted January 13, 2016 Let's all join hands and summon the almighty WHISTLE MASTER! Ohhmmmm Ohmmmm Ohmmmmm Seriously WM, I'd throw you $10 of btc for this :) Who else is down to throw down? telot Quote Link to comment Share on other sites More sharing options...
Just_Another_Node Posted January 13, 2016 Share Posted January 13, 2016 Yea, that's cool! Barry How did you add that sweet logo ... ? I suck at CSS ... Quote Link to comment Share on other sites More sharing options...
barry99705 Posted January 13, 2016 Share Posted January 13, 2016 The location is in the main html file. When I get home I'll look it up and post, unless one of the other guys chime in. As for the logo, I copied it into the images folder. Quote Link to comment Share on other sites More sharing options...
Foxtrot Posted January 13, 2016 Share Posted January 13, 2016 (edited) Barry How did you add that sweet logo ... ? I suck at CSS ... The location is in the main html file. When I get home I'll look it up and post, unless one of the other guys chime in. As for the logo, I copied it into the images folder. This is the part of /pineapple/index.html you'll want to edit. Keep in mind, after you upgrade firmwares all these changes will be reverted. (Notice the <img> tag) <div class="modal-header"> <h4 class="modal-title">WiFi Pineapple Login</h4> </div> <div class="modal-body"> <div class="row"> <img class="img-responsive login-logo" src="img/logo.png"> </div> <form role="form" ng-submit="login()"> <fieldset> <div class="form-group"> <input class="form-control" value="root" type="text" ng-model="username" tabindex="2"> </div> Edited January 13, 2016 by Foxtrot 1 Quote Link to comment Share on other sites More sharing options...
Just_Another_Node Posted January 13, 2016 Share Posted January 13, 2016 Ty guys that seems to do the trick. Quote Link to comment Share on other sites More sharing options...
Just_Another_Node Posted January 14, 2016 Share Posted January 14, 2016 (edited) (I have not loaded any of the HTML or Img files to the github only the CSS file for the color scheme.) Haven breaker - Is it possible that something got changed? My client "#" is black .... as well as my "ssid" on dashboard but the time is still "white". Ive tried many browsers and cache refresh. As well as using it on my phone. Same thing. Edited January 14, 2016 by Just_Another_Node Quote Link to comment Share on other sites More sharing options...
Havenbreaker Posted January 15, 2016 Author Share Posted January 15, 2016 I will take a look at it and push an update as soon as I'm done and let you know Quote Link to comment Share on other sites More sharing options...
Havenbreaker Posted January 15, 2016 Author Share Posted January 15, 2016 Havenbreaker - Is it possible that something got changed? My client "#" is black .... as well as my "ssid" on dashboard but the time is still "white". Ive tried many browsers and cache refresh. As well as using it on my phone. Same thing. @Just_Another_Node I have pushed an update there was a small bit of the CSS that was being overtaken by the preset element.style functions in the base html file I have corrected that. Quote Link to comment Share on other sites More sharing options...
jermzz Posted January 15, 2016 Share Posted January 15, 2016 @Just_Another_Node I have pushed an update there was a small bit of the CSS that was being overtaken by the preset element.style functions in the base html file I have corrected that. Thanks, I was having this issue too. Love the theme, I was working on something very similar when you released yours. Made my life easier :) kudos! Quote Link to comment Share on other sites More sharing options...
Rainman_34 Posted January 27, 2016 Share Posted January 27, 2016 This gave me a great idea. Since the nano takes micro SD cards and you can get rather large micro SD cards now I don't see why this couldn't be possible. Make the wifi pineapple pages wordpress. (They are already in bootstrap and changing them to wordpress wouldn't be hard). Then users can create templates that change simple things such as colors, link colors, buttons, images, background images and such. Then the user runs wordpress from the SD card with a sym link to the files for the pineapple site. The user then chooses a template from an approved list from hak5 downloads it to their sd card. Logs into the wordpress part of the site chooses it as their new template and there you go. Customizable pineapple pages. I know I made that sound a lot more complicated than needed but what does everyone else think? Quote Link to comment Share on other sites More sharing options...
Foxtrot Posted January 27, 2016 Share Posted January 27, 2016 This gave me a great idea. Since the nano takes micro SD cards and you can get rather large micro SD cards now I don't see why this couldn't be possible. Make the wifi pineapple pages wordpress. (They are already in bootstrap and changing them to wordpress wouldn't be hard). Then users can create templates that change simple things such as colors, link colors, buttons, images, background images and such. Then the user runs wordpress from the SD card with a sym link to the files for the pineapple site. The user then chooses a template from an approved list from hak5 downloads it to their sd card. Logs into the wordpress part of the site chooses it as their new template and there you go. Customizable pineapple pages. I know I made that sound a lot more complicated than needed but what does everyone else think? Theres something in the works that will allow you to select CSS templates based on common pages and router pages. ;) 1 Quote Link to comment Share on other sites More sharing options...
Rainman_34 Posted January 27, 2016 Share Posted January 27, 2016 Theres something in the works that will allow you to select CSS templates based on common pages and router pages. ;) Awesome. I just watched the video posted by sebkinne on creating modules for the nano. As someone who does web development it has convinced me a good bit to order one. They release the ability to choose custom CSS files that will lead to others, (including myself), writing custom CSS files as well only making the customization options endless. At this rate if that comes out I will probably volunteer to write CSS for anyone that needs help with it and wants a custom one. Quote Link to comment Share on other sites More sharing options...
Rainman_34 Posted January 29, 2016 Share Posted January 29, 2016 Having a "Restore Default" button next to the "Save CSS" button would encourage people to experiment with the CSS more. Well, me anyway. A quick solution until a more extensive "theme" style add-on is added. I completely agree with you on the restore default button. However I know it's not as "sexy" as a button but you can always ssh into the pineapple move to the directory where the style.css file is and then cp style.css style2.css and anytime you want to restore the default css files do the same except reverse cp style2.css style.css Quote Link to comment Share on other sites More sharing options...
Just_Another_Node Posted February 21, 2016 Share Posted February 21, 2016 I use cyberduck (putty does the same) to ssh into the pineapple, then save the original files on my computer and replace what I want or what I want to test. IF something gets messed up Just replace the file back with the original file you saved on your computer. I know thats old school, but it works. If you get your layout how you want it, then just copy the NEW edited files over to your computer so you have a backup of your preferred layout. Then, when you do a firmware update, you can just drag the NEW edited files over to replace them from your computer. Hope that helps, and makes sense. Quote Link to comment Share on other sites More sharing options...
crashie Posted February 28, 2016 Share Posted February 28, 2016 Here's my new "light" NSA style theme :P 2 Quote Link to comment Share on other sites More sharing options...
crashie Posted February 28, 2016 Share Posted February 28, 2016 For anyone who want's my "NSA-style" themes you'll find them here now: https://github.com/crashieSWE/nanothemes Will upload any future themes there. Until we have a "theme module" in the NANO :P 3 Quote Link to comment Share on other sites More sharing options...
kingoddball Posted February 28, 2016 Share Posted February 28, 2016 Thanks! The green NSA theme is great - Can you show where to place these files in the nano? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.