Tessisamess

Information

Hey guys! Still working on the Big Project for y'all, but I decided to take a break and use today to dig into the IJ control strip to completely overhaul it for anyone who uses it (or wishes they could use it, but can't get past the appearance of it.) This overhaul gives you full control of colors, fonts, and sizes, so no matter what your aesthetic, you'll be able to adapt this in no time at all!

Use this control strip override in a layout (S1 or S2 will both work!) by adding it to your existing layout's CSS, or use it in a restyling extention like Stylish if preferred!

Let me know if you'd like this to be imported into Sanity, guys! If so, I'll make light and dark skins to override the site skins sitewide. Enjoy! ♥

UPDATE! This code was updated on June 24, 2019!

Viewing your journal


Viewing your community


Viewing someone else's journal


Logged out

Updated Control Strip: IJ

/* CONTROL STRIP ADD-ON [ICONS] - TESSISAMESS - 2019 */ :root #lj_controlstrip{ /* COLORS */ --bg: #eee; --text: #000; --link: #000; --hover: #68B9B9; --borders: rgba(0,0,0,0.1); --shadow: rgba(0,0,0,0.1); /* DIMENSIONS */ --height: 45px; /* TEXT */ --font: Open Sans Condensed,helvetica,arial,sans-serif!important; --text-size1: 10px; --text-size2: 12px; /* login text & status text */ --case: uppercase; --icons: Material Icons!important; --icon-size: 18px; } /* FONTS */ @font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:300;src:local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v13/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMRw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} /* OVERALL STYLING */ html body{padding:var(--height) 0 0 0;} #lj_controlstrip *{padding:0;border:none;font-family:var(--font);color:var(--text);} #lj_controlstrip{background:var(--bg);position:fixed;top:0;left:0;right:0;box-shadow:0 0 1px 3px var(--shadow);height:var(--height);z-index:999;} #lj_controlstrip tr{display:flex;text-align:center;} #lj_controlstrip td{width:auto;} #lj_controlstrip a{text-decoration:none;color:var(--link);} #lj_controlstrip a:hover{color:var(--hover)!important;} #lj_controlstrip input[type='submit']{text-transform:var(--case);font-family:var(--font);font-weight:bold;font-size:var(--text-size1);letter-spacing:1px;color:var(--link);} #lj_controlstrip input[type='submit']:hover{cursor:pointer;background:var(--hover);} #lj_controlstrip input:focus{outline:none;} #lj_controlstrip_poweredby{display:none;} /* USERPIC */ #lj_controlstrip_userpic img{box-sizing:border-box;width:var(--height);height:var(--height);padding:3px!important;border-right:1px solid var(--borders)!important;} /* USERNAME */ #lj_controlstrip_user{display:flex;align-items:center;} #lj_controlstrip_user #Greeting div{display:flex;} #lj_controlstrip_user a{font-size:var(--text-size1)!important;letter-spacing:1px;} #lj_controlstrip_user .ljuser{height:var(--height);width:130px;border-right:1px solid var(--borders);display:flex;align-items:center;justify-content:center;text-transform:var(--case);} #lj_controlstrip .ljuser a[href*='profile'] img{display:none;} #lj_controlstrip .ljuser a[href*='profile']:before{content:'@';} #lj_controlstrip .ljuser a[href*='asylum'][href*='profile']:before{content:'#';} /* LOGOUT BUTTON */ #lj_controlstrip_user input[type='submit']{border-right:1px solid var(--borders);padding:0 15px;background:transparent;} /* USER & ACTION LINKS */ #lj_controlstrip_userlinks, #lj_controlstrip_actionlinks{display:flex;} #lj_controlstrip_userlinks a, #lj_controlstrip_actionlinks a{font-size:0;} #lj_controlstrip_userlinks a:after, #lj_controlstrip_actionlinks a:after{display:inline-block;height:var(--height);width:var(--height);line-height:var(--height);font-family:var(--icons);font-size:var(--icon-size);text-align:center;border-right:1px solid var(--borders);} #lj_controlstrip_userlinks a[href*='update']:after{content:'note_add';} #lj_controlstrip_userlinks a[href$='com/']:after{content:'home';} #lj_controlstrip_userlinks a[href*='friends']:after{content:'group';} #lj_controlstrip_actionlinks a[href*='comments']:after{content:'comment';} #lj_controlstrip_actionlinks a[href*='edit']:after{content:'edit';} #lj_controlstrip_actionlinks a[href*='invite']:after{content:'send';} #lj_controlstrip_actionlinks a[href*='add']:after{content:'person_add';} #lj_controlstrip_actionlinks a[href*='manage/profile']:after{content:'build';} #lj_controlstrip_actionlinks a[href*='members']:after{content:'group_add';} #lj_controlstrip_actionlinks a[href*='join']:after{content:'visibility';} #lj_controlstrip_actionlinks a[href*='leave']:after{content:'visibility_off';} #lj_controlstrip_statustext{position:absolute;right:0;height:var(--height);display:flex;align-items:center;padding:0 20px;border-left:1px solid var(--borders);letter-spacing:1px;} #lj_controlstrip_statustext .ljuser{padding:0 3px;} #lj_controlstrip_statustext a{font-size:var(--font-size2)!important;letter-spacing:1px!important;} /* LOGGED OUT */ #lj_controlstrip_login tbody{display:flex;} #lj_controlstrip_login td{border-right:1px solid var(--borders);padding:0 15px;display:flex;height:var(--height);align-items:center;font-size:var(--text-size2)!important;} #lj_controlstrip_login label{font-weight:bold;font-size:var(--text-size1);letter-spacing:1px;text-transform:var(--case);padding:0 5px 0 0;} #lj_controlstrip_login input[type='checkbox']{margin:0 5px 0 0!important;} #lj_controlstrip_login input[type='submit']{margin:0 0 0 7px;padding:0 7px;}

Updated Control Strip: DW

/* CONTROL STRIP ADD-ON [ICONS] DREAMWIDTH - TESSISAMESS - 2019 */ :root #lj_controlstrip{ /* COLORS */ --bg: #eee; --text: #000; --link: #000; --hover: #68B9B9; --borders: rgba(0,0,0,0.1); --shadow: rgba(0,0,0,0.1); /* DIMENSIONS */ --height: 45px; /* TEXT */ --font: Open Sans Condensed,helvetica,arial,sans-serif!important; --text-size1: 10px; --text-size2: 12px; /* login text & status text */ --case: uppercase; --icons: Material Icons!important; --icon-size: 18px; } /* FONTS */ @font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:300;src:local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v13/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMRw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} /* OVERALL STYLING */ #lj_controlstrip *{padding:0;border:none;font-family:var(--font);color:var(--text);} #lj_controlstrip *:focus{outline:none;} #lj_controlstrip{background:var(--bg);position:sticky;top:0;box-shadow:0 0 1px 3px var(--shadow);height:var(--height);z-index:999;} #lj_controlstrip a{font-family:var(--font);font-size:var(--text-size1);text-decoration:none;color:var(--link);} #lj_controlstrip a:hover{color:var(--hover)!important;} #lj_controlstrip>div{font-family:var(--font);font-size:var(--text-size1);line-height:1;letter-spacing:inherit;padding:0;flex-grow:0;} #lj_controlstrip div{display:flex;text-align:center;width:auto;} #lj_controlstrip input[type='submit']{text-transform:var(--case);font-family:var(--font);font-weight:bold;font-size:var(--text-size1);letter-spacing:1px;color:var(--link);} #lj_controlstrip input[type='submit']:hover{cursor:pointer;background:var(--hover);} #lj_controlstrip_poweredby{display:none;} /* USERPIC */ #lj_controlstrip_userpic img{box-sizing:border-box;width:var(--height);height:var(--height);padding:3px!important;border-right:1px solid var(--borders)!important;} /* USERNAME */ #lj_controlstrip_user{display:flex;align-items:center;} #lj_controlstrip_user #Greeting div{display:flex;} #lj_controlstrip_user a{font-size:var(--text-size1)!important;letter-spacing:1px;} #lj_controlstrip_user .ljuser{height:var(--height);width:130px;border-right:1px solid var(--borders);display:flex;align-items:center;justify-content:center;text-transform:var(--case);} #lj_controlstrip .ljuser a[href*='profile'] img{display:none;} #lj_controlstrip .ljuser a[href*='profile']:before{content:'@';} #lj_controlstrip .ljuser a[href*='asylum'][href*='profile']:before{content:'#';} /* LOGOUT BUTTON */ #lj_controlstrip_user input[type='submit']{border-right:1px solid var(--borders);padding:0 15px;background:transparent;} /* USER & ACTION LINKS */ #lj_controlstrip_user, #lj_controlstrip_actionlinks{display:flex;align-items:center;} #lj_controlstrip_user form ~ a, #lj_controlstrip_actionlinks a{font-size:0!important;} #lj_controlstrip_user form ~ a:after, #lj_controlstrip_actionlinks a:after{display:inline-block;height:var(--height);width:var(--height);line-height:var(--height);font-family:var(--icons);font-size:var(--icon-size);text-align:center;border-right:1px solid var(--borders);} #lj_controlstrip_user form ~ a + a{margin:0 0 0 -5px;} #lj_controlstrip_user a[href*='update']:after{content:'note_add';} #lj_controlstrip_user form ~ a[href$='org/']:after{content:'home';} #lj_controlstrip_user a[href*='inbox']:after{content:'mail';} #lj_controlstrip_user a[href*='settings']:after{content:'settings';} #lj_controlstrip_user a[href*='read']:after{content:'library_books';} #lj_controlstrip_actionlinks a[href*='comments']:after{content:'comment';} #lj_controlstrip_actionlinks a[href*='edit']:after{content:'edit';} #lj_controlstrip_actionlinks a[href*='invite']:after{content:'send';} #lj_controlstrip_actionlinks a[href*='add']:after{content:'person_add';} #lj_controlstrip_actionlinks a[href*='manage/profile']:after{content:'build';} #lj_controlstrip_actionlinks a[href*='members/new']:after{content:'group_add';} #lj_controlstrip_actionlinks a[href*='members/edit']:after{content:'group';} #lj_controlstrip_actionlinks a[href*='join']:after{content:'visibility';} #lj_controlstrip_actionlinks a[href*='leave']:after{content:'visibility_off';} #lj_controlstrip_actionlinks a[href*='circle']:after{content:'supervised_user_circle';} #lj_controlstrip_actionlinks a[href*='update?usejournal']:after{content:'edit';} #lj_controlstrip_actionlinks a[href*='tracking']:after{content:'track_changes';} #lj_controlstrip_actionlinks{font-size:var(--text-size2)!important;} #lj_controlstrip_readfilter input[type=submit]{padding:0 5px;margin:0 5px;} #lj_controlstrip_statustext{position:absolute;right:0;top:0;height:var(--height);display:flex;align-items:center;padding:0 20px;border-left:1px solid var(--borders);letter-spacing:1px;} #lj_controlstrip_statustext .ljuser{padding:0 3px;} #lj_controlstrip_statustext a{font-size:var(--font-size2)!important;letter-spacing:1px!important;} /* FILTER FORM */ #lj_controlstrip_search{align-items:center;height:var(--height);border-right:1px solid var(--borders);padding:0 15px!important;text-transform:var(--case);font-size:var(--text-size2)!important;font-weight:bold;} #lj_controlstrip_search a{font-size:var(--text-size2)!important;font-weight:bold;} #lj_controlstrip_search form *{font-size:var(--text-size2);} #lj_controlstrip_search input[type=submit]{padding:0 5px;margin:0 5px;} /* LOGGED OUT */ #lj_controlstrip_login{display:flex!important;align-items:center;border-right:1px solid var(--borders);padding:0 15px!important;height:var(--height);font-size:var(--text-size2)!important;} #lj_controlstrip_login form{display:flex!important;align-items:center;} #lj_controlstrip_login form *{padding:0 4px;} #lj_controlstrip_login label{font-weight:bold;font-size:var(--text-size1);letter-spacing:1px;text-transform:var(--case);padding:0 5px 0 0;} #lj_controlstrip_login input[type='checkbox']{margin:0 5px 0 0!important;} #lj_controlstrip_login input[type='submit']{margin:0 0 0 7px;padding:0 7px;}

Terms of Use

♡ Do not remove credit.
♡ You may add this to your layouts with the intent to redistribute them as long as you leave my credit header in the CSS.
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!