How-To enhance Firefox with plugin - Stylish

From Krm
(Difference between revisions)
Jump to: navigation, search
(Stylish for Google MapMaker)
(Stylish for RS)
 
(12 intermediate revisions by one user not shown)
Line 1: Line 1:
 
Stylish allows you to enhance web interfaces by allowing you to change/override css styles used in web pages.
 
Stylish allows you to enhance web interfaces by allowing you to change/override css styles used in web pages.
  
=Stylish for Google MapMaker=
+
__TOC__
  
  
=Stylish for Google MapMaker=
+
==Stylish for Google MapMaker==
  
=Stylish for UBNT AirControl=
+
Use this script for Stylish to enlarge the Google MapMaker window size.
  
Have you wished that UBNT would let us maximize the window size so that we could view more info on the AirControl window ?  Here's my Stylish script which does the job.
 
  
 
  @namespace url(http://www.w3.org/1999/xhtml);
 
  @namespace url(http://www.w3.org/1999/xhtml);
 
   
 
   
  @-moz-document domain("ums.wlink.com.np"), url-prefix("http://ums.wlink.com.np") {
+
  @-moz-document domain('www.google.com'), url-prefix("http://www.google.com/mapmaker") {
 
   
 
   
  /* whole doc box */
+
/*
+
  /* Let the search bar overlap top bar */
  #document {
+
  #topbar {
height:100%;
+
  margin-bottom:-1.5em !important;
  margin:25px auto 0;
+
min-width:940px;
+
text-align:left;
+
width:90%;
+
 
  }
 
  }
  */
+
   
  /* **** **** **** **** **** **** **** **** **** **** */
+
/* search bar */
 +
  /* Reduce margin */
 +
#search {
 +
margin-bottom:0px !important;
 +
}
 +
/* Hide search example */
 +
#search .box .form .labels td {
 +
display: none;
 +
}
 +
/* Adjust padding for overlapped search box  */
 +
#search .box .form .input .ipt {
 +
padding-bottom:1px !important;
 +
padding-top:4px !important;
 +
}
 +
/* created to hide logo */
 +
#search .logo {
 +
display:none;
 +
}
 +
 +
/* My MapMaker | Search Results | Directions */
 +
/* Reduce margins */
 +
#tabs {
 +
margin-bottom:-2px;
 +
margin-top:-4px;
 +
}
 +
/* Space bet'n My MapMaker | Search Results | Directions  and Print | Link to this page */
 +
#tabs td {
 +
padding:2px 2px !important;
 +
}
 +
 +
 +
/* Change rectangular vertex markers to circle,
 +
  Change hand selector to crosshair - by Manuel*/
 +
  div[id^='cp'] {
 +
    width:5px !important;
 +
    height:5px !important;
 +
    margin-top:1px !important;
 +
    margin-left:71px !important;
 +
    -moz-border-radius:5px;
 +
    cursor:crosshair !important;
 +
}
 +
 +
 +
}
 +
 
 +
 
 +
 
 +
==Stylish for UBNT AirControl==
 +
 
 +
Have you wished that UBNT would let us maximize the window size so that we could view more info on the AirControl window ?  Here's my Stylish script which does the job.
 +
 
 +
@namespace url(http://www.w3.org/1999/xhtml);
 +
 +
@-moz-document domain("aircontrol.keshav.com.np"), url-prefix("http://aircontrol.keshav.com.np") {
 +
 
  /* Reclaim realestate on both sides of the window */
 
  /* Reclaim realestate on both sides of the window */
 
  #document {
 
  #document {
 
  margin:5px auto 0 !important;
 
  margin:5px auto 0 !important;
 
  width:99% !important;
 
  width:99% !important;
/*height:90% !important;*/
 
 
  }
 
  }
 
   
 
   
/* airControl Welcome .. box ... */
+
/* Move up the Devices | Firmware | System Log */
/*
+
#tabsDiv {
#header {
+
padding:0px 0 0;
clear:both;
+
}
height:36px;
+
 
width:100%;
+
/* add horiz scrollbar to sidebar */
}
+
.rich-tree {
*/
+
overflow-x:auto !important;
 +
}
 +
 +
/* adjust main window size */
 +
#contentarea {
 +
width:100% !important;
 +
}
 +
 +
}
  
/* airControl logo */
 
/*
 
#title {
 
float:left;
 
margin-left:0;
 
width:48%;
 
}
 
*/
 
/* **** **** **** **** **** **** **** **** **** ****  */
 
/* airControl height - no response*/
 
/*
 
#title {
 
height: 35px !important;
 
}
 
*/
 
  
/* Welcome ... Settings ... Logout */
+
==Stylish for eSupport==
/*
+
.welcomeNav {
+
color:#CCCCCC;
+
font-family:Verdana,Arial,sans-serif;
+
margin-bottom:10px;
+
margin-left:12px;
+
size:10px;
+
}
+
*/
+
  
/* ... Device .... Firmware ... System Log */
+
eSupport unnecessarily globbles up valuable space on left by duplicating menu and calls status. Here's my Stylish script which wipes them off.
/*
+
#tabsDiv {
+
float:right;
+
height:26px;
+
margin:0;
+
padding:20px 0 0;
+
width:48%;
+
}
+
*/
+
/* **** **** **** **** **** **** **** **** **** ****  */
+
/* Move up the Devices | Firmware | System Log */
+
#tabsDiv {
+
padding:0px 0 0;
+
}
+
  
/* Tabs Devices | Firmware | System Log */
+
@namespace url(http://www.w3.org/1999/xhtml);
/*
+
   
#tabs {
+
@-moz-document domain("esupport.keshav.com.np"), url-prefix("http://esupport.keshav.com.np") {
float:right;
+
height:26px;
+
/* Throw out left panel cause its taking valuable estate */
list-style-type:none;
+
td[width="180"] {
margin:0 -5px;
+
display:none;
position:relative;
+
}
width:243px;
+
z-index:4;
+
/**/
}
+
br {
*/
+
/*display:none;*/
 +
height:1px !important;
 +
font-size:0px;
 +
}
 +
 +
/* */
 +
/*
 +
td[width="108"] > td:first-child {
 +
font-size:12px !important;
 +
}
 +
td[align="center"] {
 +
display:none;
 +
font-size:12px !important;
 +
}
 +
*/
 +
 +
}
  
  
/* black box that holds Scan ...Total, sidebar and main box- with ? */
+
==Stylish for eBill==
/*
+
#container{
+
clear: both;
+
float: left;
+
height: 100%;
+
}
+
*/
+
/* **** **** **** **** **** **** **** **** **** ****  */
+
/* adjust main window size - not used */
+
/*
+
#container{
+
width: 100% !important;
+
}
+
*/
+
  
 +
eBill unnessariy takes up spaces, heres Stylish script to reclaim them.
  
/* Scan .. Total... box */
+
@namespace url(http://www.w3.org/1999/xhtml);
/*
+
#controlarea {
+
@-moz-document domain("ebill.keshav.com.np"), url-prefix("http://ebill.keshav.com.np") {
float:left;
+
min-width:892px;
+
/* Reduce height of banner and shift it up */
padding-bottom:3px;
+
.bannerBack {
vertical-align:top;
+
height:80px !important;
width:100%;
+
margin-top:-20px;
}
+
margin-bottom:-10px;
#controlarea {
+
}
width:100% !important;
+
}
+
/* Remove br before Log Out */
*/
+
br {
 +
display:none;
 +
}
 +
 +
/*
 +
td[width="113"] {
 +
height:80px !important;
 +
}
 +
img[border="0"] {
 +
height:80px !important;
 +
}
 +
*/
 +
 +
}
  
/* sidebar box */
 
/*
 
#sidebar {
 
float:left;
 
height:100%;
 
width:100%;
 
}
 
*/
 
  
/* sidebar - horiz scroll */
+
==Stylish for RS ==
/*
+
.rich-tree {
+
overflow-x:hidden;
+
overflow-y:auto;
+
}
+
*/
+
/* **** **** **** **** **** **** **** **** **** ****  */
+
/* add horiz scrollbar to sidebar */
+
.rich-tree {
+
overflow-x:auto !important;
+
}
+
  
/* */
+
Hide ad bar for RS
/* sidebar + centerarea
+
#contentarea {
+
float:left;
+
margin-bottom:0;
+
white-space:nowrap;
+
width:81%;
+
}
+
*/
+
/* **** **** **** **** **** **** **** **** **** ****  */
+
/* adjust main window size */
+
#contentarea {
+
width:100% !important;
+
}
+
  
}
+
/* Hide top bar */
</code>
+
#top {
 +
display:none !important;
 +
}
 +
}

Latest revision as of 06:54, 4 September 2013

Stylish allows you to enhance web interfaces by allowing you to change/override css styles used in web pages.

Contents


[edit] Stylish for Google MapMaker

Use this script for Stylish to enlarge the Google MapMaker window size.


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain('www.google.com'), url-prefix("http://www.google.com/mapmaker") {


/* Let the search bar overlap top bar */
#topbar {
margin-bottom:-1.5em !important;
}

/* search bar */
/* Reduce margin */
#search {
margin-bottom:0px !important;
}
/* Hide search example */
#search .box .form .labels td {
display: none;
}
/* Adjust padding for overlapped search box  */
#search .box .form .input .ipt {
padding-bottom:1px !important;
padding-top:4px !important;
}
/* created to hide logo */
#search .logo {
display:none;
}

/* My MapMaker | Search Results | Directions */
/* Reduce margins */
#tabs {
margin-bottom:-2px;
margin-top:-4px;
}
/* Space bet'n My MapMaker | Search Results | Directions  and Print | Link to this page */
#tabs td {
padding:2px 2px !important;
}


/* Change rectangular vertex markers to circle,
  Change hand selector to crosshair - by Manuel*/
div[id^='cp'] {
   width:5px !important;
   height:5px !important;
   margin-top:1px !important;
   margin-left:71px !important;
   -moz-border-radius:5px;
   cursor:crosshair !important;
}


}


[edit] Stylish for UBNT AirControl

Have you wished that UBNT would let us maximize the window size so that we could view more info on the AirControl window ? Here's my Stylish script which does the job.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("aircontrol.keshav.com.np"), url-prefix("http://aircontrol.keshav.com.np") {

/* Reclaim realestate on both sides of the window */
#document {
margin:5px auto 0 !important;
width:99% !important;
}

/* Move up the Devices | Firmware | System Log */
#tabsDiv {
padding:0px 0 0;
}
  
/* add horiz scrollbar to sidebar */
.rich-tree {
overflow-x:auto !important;
}

/* adjust main window size */
#contentarea {
width:100% !important;
}

}


[edit] Stylish for eSupport

eSupport unnecessarily globbles up valuable space on left by duplicating menu and calls status. Here's my Stylish script which wipes them off.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("esupport.keshav.com.np"), url-prefix("http://esupport.keshav.com.np") {

/* Throw out left panel cause its taking valuable estate */
td[width="180"] {
display:none;
}

/**/
br {
/*display:none;*/
height:1px !important;
font-size:0px;
}

/* */
/*
td[width="108"] > td:first-child {
font-size:12px !important;
}
td[align="center"] {
display:none;
font-size:12px !important;
}
*/

}


[edit] Stylish for eBill

eBill unnessariy takes up spaces, heres Stylish script to reclaim them.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ebill.keshav.com.np"), url-prefix("http://ebill.keshav.com.np") {

/* Reduce height of banner and shift it up */
.bannerBack {
height:80px !important;
margin-top:-20px;
margin-bottom:-10px;
}

/* Remove br before Log Out */
br {
display:none;
}

/*
td[width="113"] {
height:80px !important;
}
img[border="0"] {
height:80px !important;
}
*/

}


[edit] Stylish for RS

Hide ad bar for RS

/* Hide top bar */
#top {
display:none !important;
}
}
Personal tools