Control Strip Overhaul [Text]

[tesscodes]

Information

Hey guys! Not everybody's about that icon nav life, so I thought I'd make an alternate control strip with text links and dropdown menus for those of you who prefer it! This one has all the same editing specs as the icon version, so should still be crazy easy to retool to your style preferences. 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

/* CONTROL STRIP ADD-ON [TEXT] - 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: 11px; --text-size2: 12px; /* login text & status text */ --case: uppercase; } /* 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;} /* OVERALL STYLING */ html body{padding:var(--height) 0 0 0;} #lj_controlstrip *{padding:0;border:none;font-family:var(--font)!important;font-weight:bold!important;font-size:var(--text-size1)!important;letter-spacing:1px!important;text-transform:var(--case);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']{padding:0 15px;background:transparent;} /* USER & ACTION LINKS */ #lj_controlstrip_userlinks, #lj_controlstrip_actionlinks{position:fixed;top:0;background:var(--bg);max-height:var(--height);overflow:hidden;display:inline-block;text-align:center;border-right:1px solid var(--borders);line-height:0!important;} #lj_controlstrip_userlinks{left:245px;width:125px!important;border-left:1px solid var(--borders);} #lj_controlstrip_actionlinks{right:10px;border-left:1px solid var(--borders);width:160px!important;} #lj_controlstrip_userlinks:hover, #lj_controlstrip_actionlinks:hover{max-height:99999px;border-bottom:1px solid var(--borders);} #lj_controlstrip_userlinks:before, #lj_controlstrip_actionlinks:before{display:block;height:var(--height);line-height:var(--height);color:var(--link);} #lj_controlstrip_userlinks:before{content:'Options';} #lj_controlstrip_actionlinks:before{content:'Actions';} #lj_controlstrip_userlinks a, #lj_controlstrip_actionlinks a{display:block;padding:10px 0;border-top:1px solid var(--borders);} #lj_controlstrip_statustext{position:fixed;top:0;right:172px;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{display:inline;font-size:var(--font-size2)!important;border:none;padding:0;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 [TEXT] 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: 11px; --text-size2: 12px; /* login text & status text */ --case: uppercase; } /* 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;} /* OVERALL STYLING */ #lj_controlstrip *{padding:0;border:none;font-family:var(--font);color:var(--text);} #lj_controlstrip *:focus{outline:none;} #lj_controlstrip *{padding:0;border:none;font-family:var(--font)!important;font-weight:bold!important;font-size:var(--text-size1)!important;letter-spacing:1px!important;text-transform:var(--case);color:var(--text);} #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{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!important;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']{padding:0 15px;background:transparent;border-right:1px solid var(--borders);margin:0 5px 0 0;} /* USER & ACTION LINKS */ #lj_controlstrip_user form ~ a{height:var(--height);display:flex;align-items:center;padding:0 10px 0 5px;border-right:1px solid var(--borders);} #lj_controlstrip_actionlinks{position:fixed;top:0;background:var(--bg);max-height:var(--height);overflow:hidden;display:inline-block;text-align:center;border-right:1px solid var(--borders);line-height:0!important;} #lj_controlstrip_actionlinks{right:10px;border-left:1px solid var(--borders);width:160px!important;} #lj_controlstrip_actionlinks:hover{max-height:99999px;border-bottom:1px solid var(--borders);} #lj_controlstrip_actionlinks:before{display:block;height:var(--height);line-height:var(--height);color:var(--link);} #lj_controlstrip_actionlinks:before{content:'Actions';} #lj_controlstrip_actionlinks a{display:block;padding:14px 0;border-top:1px solid var(--borders);} #lj_controlstrip_statustext{position:fixed;top:0;right:172px;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;margin:0 0 -4px 0;} #lj_controlstrip_statustext a{display:inline;font-size:var(--font-size2)!important;border:none;padding:0;letter-spacing:1px!important;} /* FILTER FORM */ #lj_controlstrip_search{display:flex!important;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!