Customizing Horizon with user stylesheets
From No LJ Ads Wiki
[edit] Known Issues
The following bit of code is required in Firefox and Safari and doesn't seem to work in IE. In Firefox, it will override the code for the Navigation SubMenu Item on mouseover.
/* Needed for Safari and Firefox to keep hover color correct */
#NavMenu li:hover > a {
background: #3662AC !important; /* Nav Menu Item Hover Background */
color: #9EC8FF !important; /* Nav Menu Item Hover Color */
}
The easiest solution to this is to have matching colors for the Nav Menu Item hover and the Nav SubMenu Item hover.
/* Navigation SubMenu Item */
.NavMenuSubNav li a:hover {
background-image: none !important;
background: #3662AC !important; /* Nav SubMenu Item Hover Background */
color: #9EC8FF !important; /* Nav SubMenu Item Hover Color */
}
[edit] Main Styling: Colors and Fonts
[edit] Main Navigation Area
/*This is the area where you have the blue gradient*/
#navigation {
/* This navigation has the background-image disabled, but you can
add it and use background-repeat and other fun stuffs.
*/
background-image: none !important;
background-color: #123E6A !important; /* Main Navigation Color */
font-family: Arial, Verdana, Helvetica, sans-serif !important;
}
/* Background Color for the Userpic*/
#Userpic {
background-color: #123E6A !important;
}
[edit] Top Links
/* Start Top Links */
/* Controls the color of the wee line bar between links */
#welcome {
color: #5A84BB !important;
}
/* Top Links Color */
#welcome a {
text-decoration: none !important;
color: #7CA6DD !important;
}
/* Font Size of the Username */
#welcome h2 {
font-size: 18px !important;
}
/* Color of the Username*/
#welcome h2 .ljuser a {
color: #fff !important;
}
/* First and Second Rows of Links */
#WelcomeLinks, #WelcomeLinks a {
font-size: 14px !important; /* Can make this bigger for better visibility */
}
#WelcomeLinks a, #WelcomeViewLinks a {
text-decoration: none !important; /* Text decorations for welcome links */
}
#WelcomeLinks a:hover, #WelcomeViewLinks a:hover {
color: #fff !important; /* Color for welcome links on hover */
text-decoration: underline !important; /* Text decorations for welcome links on hover */
}
/* Second Row of Links */
#WelcomeViewLinks li {
font-size: 14px !important; /* Can make this bigger for better visibility */
}
/* End Top Links */
[edit] Login Box
/* Start Login Box */
#Login {
background-color: #292940 !important; /* Login Box Background Color */
color: #fff !important; /* Login Box Color */
}
#Login a {
color: #fff !important; /* Login Box Link Color */
}
/* End Login box */
[edit] Navigation Bar
/* Start Navigation Bar */
#NavBar {
background: #292940 !important; /* Navigation Bar Background Color */
font-size: 14px !important;
}
#NavMenu {
color: #fff !important; /* Nav Bar Link Color */
}
.NavMenuItem {
color: #fff; /* Nav Bar Link Color */
cursor: pointer !important;
}
.NavMenuItem a, .NavMenuItem a:visited {
color: #fff !important; /* Nav Bar Link Color */
font-weight: bold !important;
text-decoration: none !important;
font-size: 13px !important !important;
}
/* Needed for Safari and Firefox to keep hover color correct */
#NavMenu li:hover > a {
background: #3662AC !important; /* Nav Menu Item Hover Background */
color: #9EC8FF !important; /* Nav Menu Item Hover Color */
}
.NavMenuItem:hover {
background-color: #3662AC !important; /* Nav Menu Item Hover Background */
color: #9EC8FF !important; /* Nav Menu Item Hover Color */
}
.NavMenuItem a:hover, #Alpha {
background-color: #3662AC !important; /* Nav Menu Item Hover Background */
color: #9EC8FF !important; /* Nav Menu Item Hover Color */
}
/* End Navigation Bar */
[edit] Navigation SubMenus
/* Start Navigation SubMenus */
.NavMenuSubNav {
background: #3662AC !important; /* Nav SubMenu Box Background */
color: #fff !important; /* Nav SubMenu Box Color */
}
.NavMenuSubNav a, .NavMenuSubNav a:visited {
color: #9EC8FF;
font-weight: normal !important;
text-decoration: underline !important;
}
.NavMenuSubNav li {
background: #3662AC !important; /* Nav SubMenu Item Background */
}
.NavMenuSubNav li a, .NavMenuSubNav li a:visited {
color: #9EC8FF !important; /* Nav SubMenu Item Color */
font-weight: bold !important;
text-decoration: none !important;
}
.NavMenuSubNav li a:hover {
background-image: none !important;
font-weight: bold !important;
background: #3662AC !important; /* Nav SubMenu Item Hover Background */
color: #FFFFFF !important; /* Nav SubMenu Item Hover Color */
}
.NavMenuSubNav li.disabled {
background-color: #3662AC !important; /* Nav SubMenu Item Disabled Background */
}
.NavMenuSubNav li.disabled a {
color: #999 !important; /* Nav SubMenu Item Disabled Color */
}
.NavMenuSubNav li.disabled a:hover {
color: #000 !important; /* Nav SubMenu Item Disabled Hover Color */
}
/* End Navigation SubMenus */
[edit] Search Boxes
#NavMenuSearch input, #NavMenuSearch select {
font: normal 11px arial, helvetica, sans-serif !important;
}
[edit] Graphics and Images
[edit] Changing the Logo
Chances are the logo is going to clash with what you want, but you can put whatever you want as the logo! Here was the v-day logo, to give you a good idea of the kind of size you're looking for.
Note: this bit assumes you aren't using a background image for the navigation already. If you are, you'll have to integrate the logo in with the Navigation background image you made.
/* REPLACE TOP RIGHT NAVIGATION LOGO */
#navigation {
background-image: url("http://stat.livejournal.com/horizon/logo-vday.gif") !important;
background-position: top right !important;
background-repeat: no-repeat !important;
}
[edit] Replacing the Userinfo Head Guy
Let's say you don't like the icon and would like to use your own or another picture entirely, well, that's possible.
Note: the new image will not link to your profile of course.
/* REPLACE LJ USERINFO ICON */
#welcome .ljuser img {
display: none !important;
}
#welcome .ljuser b {
background-image: url("http://stat.livejournal.com/img/paid.gif") !important;
background-repeat: no-repeat !important;
background-position: 0% 70% !important;
padding-left: 17px !important;
}
[edit] Changing the Userpic from Your Default
Maybe you don't want your default userpic to be the one up in that navigation bar, for whatever reason. Never fear! (The one used in the example is just one of mine.)
#defaultpic {
background-image: url("http://www.livejournal.com/userpic/38504628/522024") !important;
}
Or you may want to display another image entirely:
#defaultpic {
background-image: url("http://stat.livejournal.com/img/vgift/supafrank-large.gif") !important;
width: 150px !important;
height: 300px !important;
}
Make sure to move things over if the image is too big.
[edit] Killing Things Dead With Fire
Sometimes, you just want a particular part of Horizon not to display, whether it's a menu you don't use often, your own userpic staring you in the face, or the eleven upward arrows reminding Basic accounts they can upgrade. That can be accomplished, too.
[edit] Removing the Logo Entirely
/* KILLING THE LOGO! */
#Logo img {
display: none !important;
}
[edit] Removing the Userinfo Head Guy Entirely
Maybe he clashes with your colors. He can go away, too--you get a link to your profile in the menus, so he's not really necessary anyway.
/* DISABLE LJ USERINFO ICON ON MAIN NAV */
#welcome .ljuser img {
/* Will keep the LJ Userinfo icon from displaying next to the username */
display: none !important;
}
[edit] Removing the Userpic Entirely
Maybe you feel the userpic in the left of Horizon should just die completely.
/* IM IN UR HORIZON, KILLIN UR USERPIC */
#Userpic {
display: none !important;
}
#welcome {
left: 0px !important;
}
#NavMenu {
margin: 0 0 0 10px !important;
}
* html #NavMenu {
left: 0px !important;
}
[edit] Removing Upgrade Arrows, Paid Stars and the Vertigo Beta star
Yellow might not groove with your colors, so this is how to get rid of all the upgrade arrows or the yellow paid/perm account star.
/* DISABLE UPGRADE ARROWS OR YELLOW STARS */
.NavMenuSubNav li.disabled, .NavMenuSubNav li.disabled a:hover {
background-image: none !important;
}
#WelcomeLinks a img {
display: none !important;
}
#WelcomeViewLinks a img {
display: none !important;
}
[edit] Do Not Display Disabled Items in the Menu
Some items on the menus are grayed out because they're not available to your account level. That's great if you didn't know what kinds of stuff you can do when you upgrade, but if you do, maybe you don't want to see them anymore.
/* DO NOT DISPLAY DISABLED MENU OPTIONS */
.NavMenuSubNav li.disabled {
display: none !important;
}
[edit] Killing the Search Boxes
Sure, you might want to prettify the search, but as far as I know select boxes are really BAD at being styled with CSS. So if it's ruining your effect, just kill it.
/* KILL THE SEARCH BOXES */
#NavMenuSearch {
display: none !important;
}
There's a second, option, too: killing only the select bar and styling the input items. You'll be able to search, but not select anything other than the default.
Note: these colors go with the ones in the color example above.
/* PRETTIFY THE SEARCH BOXES */
#NavMenuSearch form select {
display: none !important;
}
#NavMenuSearch form input {
border: 2px solid #9EC8FF !important;
background-color: #123E6A !important;
color: #F1FBFF !important;
padding: 2px !important;
margin-top: -2px !important;
}
[edit] Disabling Entire Menu Items
There might be sections of menus on Horizon that you never use, and maybe you just don't want them there at all. They, too, can be individually targetted and hidden. I've included ALL of them, even if I can't imagine why you'd want some of them gone, because this is all about what YOU might want.
/* DISABLE HOME ON NAV BAR */
#NavMenuItem1
{
display: none !important;
}
/* DISABLE JOURNAL ON NAV BAR */
#NavMenuItem2
{
display: none !important;
}
/* DISABLE PROFILE ON NAV BAR */
#NavMenuItem3
{
display: none !important;
}
/* DISABLE FRIENDS ON NAV BAR */
#NavMenuItem4
{
display: none !important;
}
/* DISABLE COMMUNITIES ON NAV BAR */
#NavMenuItem5
{
display: none !important;
}
/* DISABLE SCRAPBOOK ON NAV BAR */
#NavMenuItem6
{
display: none !important;
}
/* DISABLE FIND ON NAV BAR */
#NavMenuItem7
{
display: none !important;
}
[edit] Hiding the Vertigo Beta! Link
Note: the values for width and height may need to be adapted, depending on your font size.
/* HIDE VERTIGO BETA LINK */
#WelcomeViewLinks {
width: 368px !important;
height: 25px !important;
overflow: hidden !important;
}
[edit] Shifting Things Over
[edit] Moving the Userpic
/* Moving the Userpic */
#Userpic {
margin-top: 6px !important;
margin-left: 6px !important;
}
[edit] Moving the Top Links
/* Moving the Top Links */
#welcome {
left: 120px !important; /* Increase to push to the right */
top: -5px !important; /* Increase the value to push upwards */
}
/* Moving the Second Row of Links */
#WelcomeViewLinks {
padding-left: 50px !important; /* Increase to push to the right */
padding-top: 10px !important; /* Increase to push downwards */
}
[edit] Moving the Navigation Menus
/* Moving the Navigation Menus */
#NavMenu {
margin: 0 0 0 150px !important; /* Increase to push to the right */
}
[edit] Moving the Search Boxes
/* Moving the Search Boxes */
#NavMenuSearch {
right: 30px !important; /* Increase to push to the left */
}
[edit] Moving the Navigation SubMenus
Depending on your font size, the SubMenus may not open directly below the navigation menu item. They may also overlap the nav bar. You can correct this by changing the position of the SubMenus.
/* Moving the Navigation SubMenus */
.NavMenuSubNav {
/* Increase the first number to push the menu downwards */
/* Increase the value of the second number to push the menu to the left */
margin: 9px 0px 0px -10px !important;
}
[edit] Reordering the Navigation Menus
You can also move one item independently and therefore change the order in which the menus are displayed. In the example given below, the 'Journal' menu has been moved between 'Profile' and 'Friends'.
Note: the example given below works for a specific screen resolution, window size, font size, etc. You will probably need to find what works with your settings.
/* Moving the Journal Menu */
#NavMenuItem2
{
position: absolute !important;
left: 175px !important;
}
/* Moving the Friends Menu */
#NavMenuItem4
{
position: absolute !important;
left: 275px !important;
}
/* Moving the Communities Menu */
#NavMenuItem5
{
position: absolute !important;
left: 375px !important;
}
/* Moving the ScrapBook Menu */
#NavMenuItem6
{
position: absolute !important;
left: 530px !important;
}
[edit] Changing the Height of the Top Area
If you use a big font size, the top area may be higher than your userpic. Or, on the contrary, if you have a big background image, the top area may not be high enough. You can fix this by changing the height of the top area elements.
Note: after you've done this, you may need to move things over.
[edit] Changing the Height of the Navigation Area
This is your total height. If you want it to be smaller than 100px, you need to edit min-height.
/* Changing the Height of the Navigation area*/
#navigation {
height: 100px !important;
min-height: 100px !important;
}
[edit] Changing the Height of the Welcome Area
/* Changing the Height of the Welcome Area*/
#NavigationWelcomeLogo {
height: 65px !important;
}
[edit] Changing the Height of the Navigation Bar
Because Menu Items have top padding by default, you need to:
- either have the line-height be smaller than the final height you want to have
- or set padding-top to 0.
/* Changing the Height of the Navigation Bar */
.NavMenuItem {
line-height: 15px !important;
padding: .5em .6em !importat;
}
[edit] Just Displaying the Navigation Bar
So let's say you think the top area is a waste of space but you still want to be able to navigate the site, you can simply display the Navigation Bar.
Note: this version will kill the logout link so you should only use it if you always stay logged in or have bookmarked the logout page.
/* Changing the Height of the Navigation area*/
#navigation {
height: 35px !important;
background-image: none !important;
background-color: #3e5a8b !important;
min-height: 35px !important;
}
/* KILLING THE TOP LINKS! */
#NavigationWelcomeLogo {
display: none !important;
}
/* KILLING THE LOGO! */
#Logo img {
display: none !important;
}
/* IM IN UR HORIZON, KILLIN UR USERPIC */
#Userpic {
display: none !important;
}
/* Changing the Height of the Navigation Bar*/
#NavBar {
height: 35px !important;
}
/* Pushing the Content of the page Upwards*/
#Content {
top: 60px !important;
}
[edit] Matching the Content of your Pages with your Horizon Theme
Putting this here till we find a better place for it.
[edit] MyLJ
CSS reference: http://stat.livejournal.com/portal/XColibur.css
/* Customize MyLJ */
/* Add Content Module button */
#AddPortalMenuButton {
background: #6699cc url(http://pics.livejournal.com/veroz/pic/00051xwq) no-repeat 4% 50% !important;
}
#AddPortalMenuButton:hover {
background-color: #003366 !important;
}
/* Box Headers */
.PortalBoxTitleBar {
background-color: #6699cc !important;
color: #fff !important;
}
/* First Line in Tables (where you have the Column Titles) */
.PortalTableHeader td {
background-color: #79b7f6 !important;
color: #fff !important;
}
/* Rows */
.PortalRow2 td {
border: 1px solid #dfecfa !important;
}
.PortalRow1 td {
border: 1px solid #dfecfa !important;
}
.PortalRow1:hover, .PortalRow2:hover {
background-color: #dfecfa !important; /* Cell Background Color on Hover */
}
[edit] Profile, Entry/Comment, and Edit Journal Style
CSS reference: http://stat.livejournal.com/horizon/screen.css
/* Customize Profile, Entry/Comment, and Edit Journal Style */
/* Top Box with All the Little Icons and other 'Standout' boxes */
.standout .container {
color: #000 !important;
background-color: #c5dff9 !important;
border: 1px solid #8fc3f7 !important;
}
[edit] Edit Profile
CSS reference: http://stat.livejournal.com/lj_settings.css
/* Customize Edit Profile */
/* Section Headers */
.section_head {
color: #036 !important;
background-color: #c5dff9 !important;
border: 1px solid #8fc3f7 !important;
}
[edit] Edit Userpics
CSS reference: http://stat.livejournal.com/lj_base-app.css, http://stat.livejournal.com/editpics.css
/* Customize Edit Userpics */
/* Upload Box */
#uploadBox {
background-color: #c5dff9 !important;
border: 1px solid #8fc3f7 !important;
}
/* Line Between Each Userpic */
hr.hr {
color: #8FC3F7 !important;
background-color: #8FC3F7 !important;
}
[edit] Edit Journal Style
CSS reference: http://stat.livejournal.com/customize.css
/* Customize Edit Journal Style */
/* Main Bar */
#Tabs {
border-bottom: 2em solid #69c !important;
}
/* Unselected Tabs */
#Tabs li {
border: 2px solid #69c !important;
background: #ddd;
}
#Tabs li a {
color: #000 !important;
}
/* Selected Tabs */
#Tabs li.SelectedTab {
background-color: #69c !important;
color: #fff !important;
}
/* Box Border*/
#CurrentTab {
border: 1px solid #69c !important;
}
[edit] Community Management
CSS reference: http://stat.livejournal.com/lj_base-app.css
/* Customize Community Management */
/* Main Bar */
table.alternating-rows th {
border-top: 1px solid #8FC3F7 !important;
border-bottom: 1px solid #8FC3F7 !important;
background-color: #C5DFF9 !important;
}
/* First Row*/
table.alternating-rows tr.altrow1 {
background-color: #fff !important;
}
/* Second Row */
table.alternating-rows tr.altrow2 {
background-color: #eee !important;
}
/* Border for Each Row */
table.alternating-rows td {
border-bottom: 1px solid #ccc !important;
}
[edit] Width Issues
Don't know about you but I have a wide screen resolution (1280x800) and some pages have so much wasted white space it's not even funny. Let's make that better.
CSS References: http://stat.livejournal.com/entry.css, http://stat.livejournal.com/horizon/screen.css
[edit] Wide and Centered Update Page
/* Wide and Centered Update Page */
#updateForm {
max-width: 1000px !important;
margin-left: 100px !important; /*Needs to be adjusted */
}
* html #updateForm {
width: 1000px !important; /*Same as above */
}
#Content h1 {
margin-left: 100px !important; /*Same as above */
}
[edit] Wide and Centered Mini-SiteMap
/* Wide and Centered Mini-SiteMap */
#MiniSiteMapWrapper {
width: 1000px !important;
}
[edit] References for Stylers
[edit] CSS References
http://stat.livejournal.com/horizon/screen.css
http://stat.livejournal.com/horizon/layout.css
http://stat.livejournal.com/horizon/horizontal.css
http://stat.livejournal.com/horizon/loggedout.css
[edit] Images References
http://stat.livejournal.com/stc/horizon/topbar-bg.png (Background Gradient)
http://stat.livejournal.com/stc/horizon/toplevel-bg.png (Background for the menus)
http://stat.livejournal.com/horizon/logo.gif (LJ Logo when logged in)
