Jump to content
Havenbreaker

Custom CSS and Other Customizations of Your Pineapple Interface

Recommended Posts

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.)

a50e63a506.png

c162bf6528.pngab49378889.png2285f15ba4.png

Edited by Havenbreaker
  • Upvote 1

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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 by Havenbreaker

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Foxtrot
  • Upvote 1

Share this post


Link to post
Share on other sites

(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 by Just_Another_Node

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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. ;)

  • Upvote 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...