Tweaking Worksafe --> Sidebar
 
branchandroot is working hard to work out the kinks of the new IJ sitescheme, but I thought it might be useful to provide a Firefox css 'fix' for right now to deal with common complaints (and some of my own aesthetic nit-picks - like Verdanaizing everything) that may not be fixable in the long run.

As always, if you find it particularly useful, it's nice of you to link :>

"Worksafe" (sidebar) in Firefox 2.0.0.* - Apparently works on Mac!Firefox, hurrah! Compatible with "Dramatic" if you alter the colors appropriately (see the comment in .sidebar #IJ-sitepage-nav)

**** NOTE **** The css for the site scheme is still being worked out, so if you see any weird screw ups, come back and re-copy/paste the code - chances are I've already changed the code to keep up with the site-scheme's evolving css (why, yes I DO spend more time on IJ than is healthy).


Major things that have been fixed
• Verdana!
• Font sizes more normalized
• Colors more consistent on all pages
• Horizontal scroll gone (now fixed in IJ site scheme)
• Removes <hr> for cleaner borders
• changes em ~> px (limits text size to normal +/- a size but cleans up hovers)

Fixes I'm working on
• Centering the userinfo menubox (with add, nudge, to-do etc) above the bio box

**PLEASE NOTE -- some of this code may be defunct as site code gets updated. Defunct code won't harm your layout (and if it does, I'll notice and update accordingly)**


If you'd like to use it, you need to do the following:


1) Install the add-on "stylish"
https://addons.mozilla.org/en-US/firefox/addon/2108


2) Right click the stylish icon --> write style --> 'blank style'




3) Copy and paste the following code into the blank space, name it, hit save. Everything is commented so you can decide if you don't like or want to change any of the changes.

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

@-moz-document domain("insanejournal.com") {

.sidebar #IJ-smallfont {
font-size: 100% !important;
}/* fixes their attempt to fix the font size */

.sidebar #IJ-sitepage-login a{
font-family:verdana !important;
font-size:9pt !important;
}/* login link text */

.sidebar #IJ-sitepage-userpic {
width: 150px !important;
}/* makes the width correct */

.sidebar #IJ-sitepage-tweak {
width: 400px !important;
}/* moves tweak back over to the right */

.sidebar #tweak-says {
font-family:verdana !important;
font-size:8pt !important;
}/* tweak says text */

.sidebar #freqlinks a{
font-family:verdana !important;
font-weight:bold !important;
text-decoration:none !important;
}/* makes My IJ, Post, etc. Verdana, bold, no underline */

.sidebar #top-search {
font-family:verdana !important;
font-size: 8pt !important;
}/* makes the search by: verdana */

.sidebar #IJ-sitepage-content, #IJ-sitepage-content td{
font-family:verdana !important;
font-size:10pt !important;
}/* makes the page content 10pt verdana (including userinfo) and
fixes the 'font in tables is weirdly bigger' issue */

.sidebar #IJ-sitepage-content {
margin: 0 0 0 150px !important;
padding-right: 50px !important;
}/* gives the sidebar room and adds padding on the right */

.sidebar #IJ-sitepage-nav {
border-right: 1px solid #333 !important;
background:#edebd5 !important;
font-family:verdana !important;
font-size:8pt !important;
width: 150px !important;
float: none !important;
position: absolute !important;
left: 0px !important;
top: 0px !important;
}/* sidebar font to verdana and right width; also gives the sidebar
a background and border so it doesn't look bleh during load time;
for Dramatic use -- background #DA7125 !important; -- */

.sidebar #IJ-sitepage-nav a{
width:130px !important;
padding-right: 0 !important;
margin-right: 0 !important;
font-size:8pt !important;
}/* makes links in sidebar the right width */

.sidebar #IJ-sitepage-nav ul ul li{
padding-left: 10px !important;
padding-right: 0 !important;
margin-right: 0 !important;
width: 130px !important;
}/* replaces em with px for more accurate spacing */

.sidebar #IJ-sitepage-nav li {
width: 130px !important;
padding-right: 0 !important;
margin-right: 0 !important;
}/* replaces em with px for more accurate spacing */

.sidebar #IJ-sitepage-nav ul ul li:hover a{
width: 130px !important;
padding-right: 0 !important;
margin-right: 0 !important;
background: transparent!important;
}/* turns em into px for more accurate spacing */

.sidebar #IJ-sitepage-nav ul ul li:hover {
width: 140px !important;
padding-right: 0 !important;
margin-right: 0 !important;
}/* turns em into px for more accurate spacing */

.sidebar #IJ-sitepage-content-inner .lesstop{
border-top: 2px solid #edebd5 !important;
border-bottom: 2px solid #edebd5 !important;
font-size:10pt !important;
padding: 15px 0 !important;
}/* puts the comment dividers back but prettier and not screwing up the horiz rule */

.sidebar #IJ-sitepage-content hr, .sidebar #IJ-sitepage-footer-inner hr{
display:none !important;
}/* removes hr - why? because they're ugly */

.sidebar #IJ-sitepage-footer-inner a{
font-family:verdana !important;
font-size:9pt !important;
}/* resizes home | site map | etc. text and sets verdana */

.sidebar #IJ-sitepage-footer {
margin-left: 150px !important;
padding-top: 50px !important;
}/* makes the margin of the footer conform to the sidebar */

.sidebar #EntryForm #infobox table {
background-color: #fff !important;
border: 1px solid #dbd5b7 !important;
padding: 10px !important;
}/* makes the info box (update page) slightly less hideous */

.sidebar #EntryForm #infobox table td {
border: none !important;
}/* gets rid of that random dashed line on the infobox (update page) */

.sidebar #EntryForm #MetaInfo th{
font-size: 11pt !important;
}/* makes the headers (poster, date, subject) a normalish size */

.sidebar .section_head {
background: #dbd5b7 !important;
}/* changes the orange on the various manage pages
(REMOVE THIS if you are using dramatic) */

.appwidget-gettingstarted {
display: none !important;
}/* gets rid of the appwidget which does not
exist on IJ and leaves a funky box*/


}/* <-- this is the last bracket */

MAC USERS
(add this before the last bracket)

html {
overflow-x: hidden !important;
}/* removes the horizontal scroll */

Other things you can change (make sure to put them before the last bracket):

#tweak-pic {
  background: none !important;
}/* removes tweak picture (tweak says)*/

#IJ-sitepage-tweak #tweak-says {
  display: none !important;
}/* removes quote (tweak says)*/

#IJ-sitepage-tweak {
  display: none !important;
}/* removes entire tweak says section*/