Customizer Script

[Foxtrot]

Customizer Script.
This script allows you to completely edit your Web UI CSS for 3.0. Edit the main and the background colors, Link and text colors, allows you to round corners off of the Notification bar, aswell as round corners off of tiles, change border pixel sizes and border styles, aswell as change the color of the Entropy Bunny, With lots and lots of more features to come soon.

When you enter numbers for border sizes, YOU HAVE TO APPEND PX TO THE INPUT!, ie : 3px, not just 3. A fix should be on the way very soon.


Changelog :

Version 1.0:
Initial Release

Version 1.1:
Added Background Image Support.

Code :

#!/bin/bash


mkdir .customizer
clear
echo "                                                    "
echo "  _____          _                  _               "
echo " / ____|        | |                (_)              "
echo "| |    _   _ ___| |_ ___  _ __ ___  _ _______ _ __  "
echo "| |   | | | / __| __/ _ \|  _ - _ \| |_  / _ \  __| "
echo "| |___| |_| \__ \ || (_) | | | | | | |/ /  __/ |    "
echo " \_____\____|___/\__\___/|_| |_| |_|_/___\___|_|    "  
echo "                                                    "
echo " Version 1.0    -------By Foxtrot------    Dynamite "
echo "                                                    "
echo "                                                    "


echo -n "Main Color [Red, Blue, etc] : " & read maincolor
echo -n "Background [Red, Blue, etc] : " & read bgcolor
echo -n "Background Image [/path/to/image.png, None] : " & read bgimage
echo -n "Link Color [Red, Blue, etc] : " & read linkcolors
echo -n "Text Color [Red, Blue, etc] : " & read textcolors
echo -n "Rounded Corners [0px-60px] : " & read roundcorners
echo -n "Rounded Tiles [0px-60px] : " & read roundtiles
echo -n "Border Pixel Sizes [1px-100px] : " & read borderpixels #Thanks Deathdealer!
echo -n "Border Style [None, Dotted, Dashed, Solid] : " & read borderstyle
echo -n "Entropy Bunny Color [Red, Blue, etc] : " & read entropybunnycolor
echo "                                                   "

echo "If these are correct, then wait 5 Seconds, else Ctrl+C now."
sleep 5
echo "                                                   "

echo "Creating backup file of original CSS in [~]"
sleep 1
cp -r /pineapple/includes/css/styles_main.css .customizer/css.backup

echo "Generating customized CSS file"
sleep 2
echo ".statusBar {
  text-align: center;

  margin: 0 auto;
  padding: 2px;
  width: 95%;

  border: $borderpixels $borderstyle $maincolor;
 
  border-radius: $roundcorners;
}

.tiles {
  text-align: center;
  width: 100%;
  margin-top: 2%;
  height: 90%;

}

.tiles_wrapper {
  margin: 0 auto;
  overflow-y: auto;
  height: 100%;
  text-align: center;
}

.tile {
  text-align: left;
  margin: 1%;

  vertical-align: top;
  display: inline-block;

  width: 22%;
  min-width: 250px;
  height: 250px;
  height: 30%;
  overflow: hidden;

  border: $borderpixels $borderstyle $maincolor;
 
  border-radius: $roundcorners;
}

.tile_title {
  text-align: center;
  text-decoration: underline;
  padding-bottom: 5px;
  padding-left:4px;
  padding-right:4px;
  cursor: pointer;
  background: $maincolor ;
  color: $linkcolors ;

  border: $borderpixels $borderstyle $maincolor;

}

.tile_expanded {
  margin: auto;
  text-align: left;
  color: white;
  background: black;

  position: absolute;
  right: -50%;
  left: -50%;  
  border: $borderpixels $borderstyle $maincolor;
  border-radius: $roundcorners;
  width: 93.25%;
  height: 85%;
  /*padding: 10px;*/

  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
}

.tile_content {
  padding: 10px;
}

.tile_content a{
  color: white;
}

.tile_stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

#close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  text-decoration: none;
  color: white;
}

.popup {
  visibility: hidden;
  position: absolute;
  top: 7%;
  left: 50%;
  min-height: 15em;
  width: 50em;
  ;
  background-color: $bgcolor ;
  border-style: $borderstyle ;
  padding: 1em;
  z-index: 99;

  border: $borderpixels $borderstyle $maincolor;
  border-radius: $roundcorners;
}

.entropy {
  color: $entropybunnycolor ;
}

input[type=text], textarea, input[type=password] {
  border: 1px;
  background-color:black;
  color:white;
  border-style:dotted;
  resize: none;
}

a {
  color: $linkcolors ;
}

body {
  background: $bgcolor ;
  background-image:url('$bgimage') ;
  color: $textcolors ;
  font-family: monospace;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 8px;
  padding-right: 10px;
  visibility: visible;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  padding-right: 10px;
  visibility: visible;

}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: green;
  padding-right: 10px;
  visibility: visible;
}" >> styles_main.css

echo "Replacing old CSS with newly generated CSS."
mv styles_main.css /pineapple/includes/css/styles_main.css

sleep 3

echo "Script completed, please refresh your Pineapples UI for changes."

Transformed : ;)

Cheers,

-Foxtrot

Edited August 20, 2013 by Foxtrot

[Foxtrot]

Version 1.1 Released. Original Post updated.

[Status_Fugged]

Very cool...Nice work FT!

[newbi3]

Are you making a front end infusion for this? (Looking at the bottom right corner)

[Foxtrot]

It might be a work in progress. Why? ;)

[HairClog]

I love it. It makes it easy to try many color combos! Thanks Foxtrot

[raz0r]

Very cool thanks :)

[SpokedVictor]

is this just for the MKIV ? Or can the MKV use it too? I'm looking to theme the ui.. and this is the closest thing i can find lol

[Foxtrot]

I guess i could make it for the MK5 :P