New
Nov 17, 2023 1:38 AM
#1
Originally made by Kyouhansha. I've restored them after Imgur crashed them, and updated them for customization. Original Icon Style Bar (with original icons) The colors of the icons are not meant to be changed and use the original PNGs- you can replace the icon images though. @\import "https://shishiohub.github.io/Topbars/IconBar.css"; Backup code https://pastebin.com/raw/TDmQpLrw Icon Style Bar w/ custom color You can also add these codes and adjust the numbers in order to brighten/darken or change the opacity of the icon images. opacity: .9; filter:brightness(1.8); Code: https://pastebin.com/raw/q4iuECWP Example of Edited Code: Also uses the filter/opacity additions above for bright blue icons. https://pastebin.com/raw/K3YQ1DCP /* COLOR OF THE ICONS */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background-color:#424242; } /* COLOR OF SELECTED ICONS AND DROPDOWN MENUS ON HOVER */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a , #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before{ background-color: rgba(255, 255, 255, 0.6) !important; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: ; } #mal_cs_otherlinks strong a:hover { color: ; background-color: transparent !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* HEAD ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_listinfo { background-image: url() ; } #mal_cs_listinfo:hover { background-image: url(); } #mal_cs_listinfo:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny610CYyQDAnTevRADJjccEVlSIBT7Pkhsh_8u526gUVw) ; } #mal_cs_listinfo:hover:after { background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwnyxYslBpGh-Igokmk07m0BfnK-up84MnXPpeogujc9f7r); } /* HOME ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_links { background-image: url(); } #mal_cs_links:hover { background-image: url(); } #mal_cs_links:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny_VtbSJc_1XMnUckMLRFGHkQmyU7wMHITBca0slCQlJr); } #mal_cs_links:hover:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny5IEuVa49JXEZJ7IkdER514Ut1UMOGwtDnx1A7wBiHOs); } /* BARS ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_otherlinks { background-image: url(); } #mal_cs_otherlinks:hover { background-image: url(); } #mal_cs_otherlinks:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwnyyj4F5wT8QJOIUE9h8qperENfvImQRGaZ375P6OGFeUD); } #mal_cs_otherlinks:hover:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny1EvPUyi5ZEvkgRxW3JzrbbsPHn1W5UUQuDTOUK5tBkX); } /* MAGNIFIER ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_powered { background-image: url(); } #mal_cs_powered:hover { background-image: url(); } #mal_cs_powered:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny05w7X-LcE6Rak6Gvc5gUsa2vlY_niaf8n6_WZQ0MPnp); } #mal_cs_powered:hover:after{ background-image: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwnyxuYKbFiKr8ZjWKMTds45r0Scwpq1LYrymMEv8hvnumx) !important; } /* OTHER IMAGES */ #mal_cs_powered a img { background: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny2i0sWXwIyM-KR0QEwOqMADidf7Gum58IqV339I83BwA) no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); } #mal_cs_powered #search #searchListButton { background: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny6tBwtBw70BO1WsVpWvyDsSNn0HrLPJi7DocutwcouXz) no-repeat scroll 0 0 transparent !important; } #mal_control_strip { background-image: url(https://image.myanimelist.net/ui/uqwkn3zl0fMrMuaC28cB8Q) !important; } /* BORDER OF ICONS */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; } /* Unused Color of Icons This should cover the icons, and also has a square border. */ #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { background-color: transparent !important;; } /* Unused Color of Hover Icons */ #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { background-color: transparent !important;; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before{ border-bottom-left-radius:0px; border-bottom-right-radius:0px; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 220px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 3px; padding-right: 24px; vertical-align: top; width: 100%; width: 128px !important; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { right: 106px; } #mal_cs_links {right: 72px; z-index: 9; } #mal_cs_otherlinks { right: 38px; z-index: 8; } #mal_cs_otherlinks:hover { } #mal_cs_powered { right: 4px !important; z-index: 7; } #mal_cs_powered:hover { } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 2px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } } Icon Style with Category Menu @\import "https://shishiohub.github.io/Topbars/IconStyleCSSFixedwithCategory.css"; Backup code https://pastebin.com/raw/6awGZBMX Icon with Category Menu, custom color This can be difficult to edit without experience. https://pastebin.com/raw/ZGJXPSh1 Backup code /* COLOR OF THE ICONS */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background-color:#424242; } /* COLOR OF SELECTED ICONS AND DROPDOWN MENUS ON HOVER */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a , #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before{ background-color: rgba(255, 255, 255, 0.6) !important; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: ; } #mal_cs_otherlinks strong a:hover { color: ; background-color: transparent !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* HEAD ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_listinfo { background-image: url() ; } #mal_cs_listinfo:hover { background-image: url(); } #mal_cs_listinfo:after{ background-image: url(https://i.ibb.co/2c9LBfg/head-1.png) ; } #mal_cs_listinfo:hover:after { background-image: url(https://i.ibb.co/g76mdmv/headhover423-1.png); } /* HOME ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_links { background-image: url(); } #mal_cs_links:hover { background-image: url(); } #mal_cs_links:after{ background-image: url(https://i.ibb.co/9gnbShQ/home4423-1.png); } #mal_cs_links:hover:after{ background-image: url(https://i.ibb.co/bXTvtmy/homehover-1.png); } /* BARS ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_otherlinks { background-image: url(); } #mal_cs_otherlinks:hover { background-image: url(); } #mal_cs_otherlinks:after{ background-image: url(https://i.ibb.co/JjpnXB4/bars242-1.png); } #mal_cs_otherlinks:hover:after{ background-image: url(https://i.ibb.co/Dffjsry/brhover-1.png); } /* MAGNIFIER ICON The bottom two codes are the icon seen and icon seen on hover. The first two codes are the same but will cover the others. */ #mal_cs_powered { background-image: url(); } #mal_cs_powered:hover { background-image: url(); } #mal_cs_powered:after{ background-image: url(https://i.ibb.co/vs6vNNj/mag223-1.png); } #mal_cs_powered:hover:after{ background-image: url(https://i.ibb.co/D8N1XPv/magnihover-1.png) !important; } /* MENU ICON CONTROL These codes let you control the image and colors for the Menu icon and dropdown which is separate from the above. */ div > table:first-of-type { background-image: url(https://i.ibb.co/QfmkJLP/menusivleroer143-1.png); border-radius: 3px 3px 3px 3px !important;; } div > table:first-of-type { background-color:#424242; } div > table:first-of-type:hover { background-image: url(https://i.ibb.co/Hq7kxS7/menudarkover-1.png); } div > table:first-of-type:hover { background-color: rgba(255, 255, 255, 0.6) !important; } div > table:first-of-type tr { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6); } div > table:first-of-type a { background-color: rgba(64, 60, 90, 0.6); } div > table:first-of-type a:hover { background-color: #403C5A; color: white; } /* OTHER IMAGES */ #mal_cs_powered a img { background: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny2i0sWXwIyM-KR0QEwOqMADidf7Gum58IqV339I83BwA) no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); } #mal_cs_powered #search #searchListButton { background: url(https://image.myanimelist.net/ui/NMhxKjGdQ21NnPG4rzwny6tBwtBw70BO1WsVpWvyDsSNn0HrLPJi7DocutwcouXz) no-repeat scroll 0 0 transparent !important; } #mal_control_strip { background-image: url(https://image.myanimelist.net/ui/uqwkn3zl0fMrMuaC28cB8Q) !important; } /* BORDER OF ICONS */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; } /* Unused Color of Icons This should cover the icons, and also has a square border. */ #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { background-color: transparent !important;; } /* Unused Color of Hover Icons */ #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { background-color: transparent !important;; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before{ border-bottom-left-radius:0px; border-bottom-right-radius:0px; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 220px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 3px; padding-right: 24px; vertical-align: top; width: 100%; width: 128px !important; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { right: 175px; } #mal_cs_links { right: 140px; z-index: 9; } #mal_cs_otherlinks { right: 105px; z-index: 8; } #mal_cs_otherlinks:hover { } #mal_cs_powered { right: 70px !important; z-index: 7; } #mal_cs_powered:hover { } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 2px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } } #mal_control_strip{ z-index: 11 !important;} div > table:first-of-type { background-position: 100% 0 !important; background-attachment: scroll !important; background-repeat: no-repeat !important; display: block; height: 0 !important; overflow: hidden; padding-top: 32px !important; position: fixed; right: 4px; table-layout: fixed; text-align: center; top: 4px; width: 64px !important; z-index: 10 !important;; -moz-box-sizing: border-box; -moz-transition: all 0.1s ease 0s; -o-transition: all 0.1s ease 0s; transition: all 0.1s ease 0s; } div > table:first-of-type:hover { background-repeat: no-repeat; background-attachment: scroll ; background-position: 100% 0; height: 240px !important; width: auto !important; } div > table:first-of-type tbody { height: 32px !important; overflow: hidden; } div > table:first-of-type tr { border-radius: 3px 0 3px 3px; display: block; padding: 8px 0 4px; } div > table:first-of-type td { background: none repeat scroll 0 0 rgba(255, 255, 255, 0); display: block; width: 100%; } div > table:first-of-type a { border-radius: 3px 3px 3px 3px; color: #FFFFFF; display: block; font: 13px/17px 'Arial',sans-serif; margin: 0 12px 4px; padding: 3px 16px; text-decoration: none; } Touhou version @\import "https://shishiohub.github.io/Topbars/touhoumenuiconbar.css"; Backup code https://pastebin.com/raw/stvQqazH With no menu https://pastebin.com/raw/stvQqazH Sword Art Online topbar irrc this was reskinned by SylakentH. The bar works and I updated the images, but the rest is not as recently updated as the others. @\import "https://shishiohub.github.io/Topbars/SAObar.css"; Code: https://pastebin.com/46kgENhy #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 40px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; transition: all 0.4s ease 0s; width: 100px !important; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 220px !important; padding-right: 42px !important; top: 20px !important; width: 202px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: rgba(255,255,255,0.5); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; transition: opacity 0.4s ease-in-out 0s; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #f1a804 !important; border-radius: 3px 3px 3px 3px; border-style: solid; border-width: 1px !important; display: block; font: 13px/17px 'Arial',sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: rgba(255, 255, 255, 0.5) !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.5) !important; border: medium none; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url() no-repeat scroll 50% 6px #f1a804; border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; transition: all 0.25s ease-in-out 0s; width: 0; } #mal_cs_powered a img:hover { background-color: rgba(12, 46, 196, 0.3); } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url(https://i.ibb.co/54ZNXyY/fGTjBC3.png) no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 0px; top: -23px !important; width: 100px; } #mal_cs_listinfo { background-image: url(https://i.ibb.co/7z0M9fJ/03C6cf2.png); right: 178px; background-color: transparent; } #mal_cs_listinfo:hover { background-image: url(https://i.ibb.co/FhLc8C8/hcvERvF.png); background-color: transparent; } #mal_cs_listinfo:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_listinfo:hover:before { content: ""; position: fixed !important; top: -0px !Important; right: 175px !Important; height: 20px !important; width: 200px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_links { background-image: url(https://i.ibb.co/kH9PFdk/M3GjfgE.png); right: 122px !important; z-index: 9; } #mal_cs_links:hover { background-image: url(https://i.ibb.co/FqsqDLP/nOJvcx9.png); } #mal_cs_links:before { content: ""; position: fixed !important; top: -0px !Important; right: 105px !Important; height: 20px !important; width: 70px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_otherlinks { background-image: url(https://i.ibb.co/pJSJBSk/NYT1CRI.png); right: 66px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url(https://i.ibb.co/QdsZxsW/5knPHH5.png); } #mal_cs_otherlinks:before { content: ""; position: fixed !important; top: -0px !Important; right: 55px !Important; height: 20px !important; width: 50px !important; background-color: transparent; z-index: -10 !important; } #mal_cs_powered { background-image: url(https://i.ibb.co/wCnJ326/GfwXZ7O.png); position: fixed !important; right: 10px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url(https://i.ibb.co/jbd5QT1/SH8hLIA.png); } #mal_cs_powered:before { content: ""; position: fixed !important; top: -0px !Important; right: 0px !Important; height: 20px !important; width: 55px !important; background-color: transparent; z-index: -10 !important; } #mal_control_strip { background: url(https://i.ibb.co/YtGqqxL/8Ge8Cae.png) repeat scroll 0 0 transparent !important; position: fixed; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_control_strip td { height: 24px !important; } Images used Posted here for backup purposes- these are saved directly to the site. |
Shishio-kunSep 24, 2024 5:41 PM
Reply Disabled for Non-Club Members
Nov 19, 2023 3:22 AM
#2
All done 👀 |
Reply Disabled for Non-Club Members
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |