vigils

I've noticed quite a few people using dreamwidth layouts either imported from old livejournal code or newer insanejournal code. And one of the results of this is that the CSS that customizes the controlstrip navigation at the top of the page is either broken or non-existent. You can always disable the controlstrip to some degree using your account settings, and completely get rid of it with CSS, but I don't like to make that decision for the user. I personally use the controlstrip a lot when browsing dreamwidth!

So, I decided to whip up some basic controlstrip only CSS. It's at least slightly responsive (you can see the layout at kleptocratic for an example of how the code scales) and designed to be simple to customize to match a variety of layouts and aesthetics.

Light Controlstrip

Larger Preview

/* Controlstrip */

#lj_controlstrip {background: #fff;  padding: 1em 0; top: 0; left: 0; width: 100%; position: relative;}

#lj_controlstrip td {font: 13px/2 Adobe Garamond Pro, Garamond, Georgia, serif; color: #111; display: table-cell;}

#lj_controlstrip_statustext { font-size: 1.2em;  color: #111; font-weight: 700; margin-bottom: .5em; }

#lj_controlstrip a { color: #8a2a1b; font-weight: normal; }

#lj_controlstrip a:hover { text-decoration: underline;}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, .cuttag img { border: 0; }

#lj_controlstrip_user .ljuser {  padding: .25em; font-size: 1.2em;}

#lj_controlstrip_user img, #lj_controlstrip_actionlinks img { display: none; }

#lj_controlstrip_userpic { width: 60px; padding-left: 2em !important; }

#lj_controlstrip_userpic img  { border: 0 !important; padding: 6px !important; }

#lj_controlstrip_userpic a  { padding: 0; margin: 0; }

#lj_controlstrip input {     font: italic .88em/2 Adobe Garamond Pro, Garamond, Georgia, serif; background: #eee; color: #111; padding: .25em .5em 0 .5em; margin: 0; width: auto;text-transform: lowercase; letter-spacing: .05em; border: none;}

#lj_controlstrip input #search { padding: .125em .25em; margin: 0; border: none;}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember  { background-color: #eee; color: #111; border: none;}

#lj_controlstrip_login td,  {border-bottom: 0;}

#lj_controlstrip #lj_controlstrip_search { display: none; }

@media only screen and (min-width: 1000px) {
	
#lj_controlstrip td {font-size: 14px;}
	
#lj_controlstrip #lj_controlstrip_search { display: block; } }

Colors used (just ctrl+f and change them): #fff, #eee, #111, #8a2a1b

Font stack: Adobe Garamond Pro, Garamond, Georgia, serif

Dark Controlstrip

Larger Preview

/* Controlstrip */

#lj_controlstrip {background: #000;  padding: 1em 0; top: 0; left: 0; width: 100%; position: relative;}

#lj_controlstrip td {font: 12px/2 Arial, sans-serif; color: #eee; display: table-cell;}

#lj_controlstrip_statustext { font-size: 1.2em;  color: #eee; font-weight: 700; margin-bottom: .5em; }

#lj_controlstrip a { color: #df3535; font-weight: normal; }

#lj_controlstrip a:hover { text-decoration: underline;}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, .cuttag img { border: 0; }

#lj_controlstrip_user .ljuser {  padding: .25em; font-size: 1.2em;}

#lj_controlstrip_user img, #lj_controlstrip_actionlinks img { display: none; }

#lj_controlstrip_userpic { width: 60px; padding-left: 2em !important; }

#lj_controlstrip_userpic img  { border: 0 !important; padding: 6px !important; }

#lj_controlstrip_userpic a  { padding: 0; margin: 0; }

#lj_controlstrip input {     font:  .88em/2 Arial, sans-serif; background: #000; color: #eee; padding: .25em .5em 0 .5em; margin: 0; width: auto;text-transform: lowercase; letter-spacing: .05em; border: none; border-bottom: 1px solid #eee;}

#lj_controlstrip input #search { padding: .125em .25em; margin: 0; border: none;}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember  { background-color: #111; color: #ccc; border: none;}

#lj_controlstrip_login td,  {border-bottom: 0;}

#lj_controlstrip #lj_controlstrip_search { display: none; }

@media only screen and (min-width: 1000px) {
	
#lj_controlstrip td {font-size: 13px;}
	
#lj_controlstrip #lj_controlstrip_search { display: block; } }

Colors used (just ctrl+f to change them): #eee, #000, #df3535

Font stack: Arial, sans-serif