LJ Navstip Customizations
Jun. 24th, 2013 04:07 pm![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount Status: Free
Actions: Customizing the LJ Navstip
Theme: Flexible Squares (not sure if it works with other themes)
The idea behind this tutorial is to change the look of the LJ Navstip at the top which looks something like this...
Here is the coding I've pieced together.
1. First we find the DIV coding which can change the color of the entire navstrip. You'll want to make the background color transparent if you want to change the background color on the individual parts of the navstrip.
2. Here we are going to do a small explanation of the to coding. The LJ Navstrip is broken down into sections you can't always see. First we have the section that encompasses the Userinfo and the token information.
3. Then we have the links and the hover option for the entire LJ Navstrip. It is important as you can see that there is coding for both the link and the link B which is the user and community names.
4. Then we have the first and second groups which will change the background color for the other side of the navstrip
5. According to my customizations my bar now looks like this and is clearly not what we want.
The status P function should change that black bar. If you notice I made the background transparent.
It now looks like this:
6. But what if we want to change those white boxes to match the background color?
This code will change the first box which tells your token and message count. There is a little dividing bar between the Tokens and the Messages which can be controlled in the tokens coding below.
And here we want to change the color of the search bar and some of the white space around the search icon. The Text coding will change that and the search text coding below the text coding will change the some of the color around the icon.
And now we look like this:
Actions: Customizing the LJ Navstip
Theme: Flexible Squares (not sure if it works with other themes)
The idea behind this tutorial is to change the look of the LJ Navstip at the top which looks something like this...
Here is the coding I've pieced together.
1. First we find the DIV coding which can change the color of the entire navstrip. You'll want to make the background color transparent if you want to change the background color on the individual parts of the navstrip.
.w-cs DIV {
background: none repeat scroll 0 0 #23CCBC;
float: none;
}
2. Here we are going to do a small explanation of the to coding. The LJ Navstrip is broken down into sections you can't always see. First we have the section that encompasses the Userinfo and the token information.
.w-cs .w-cs-userinfo {
background: none repeat scroll 0 0 #23CCBC;
border-right: 1px solid #3A4449;
float: left;
height: 50px;
min-width: 405px;
width: 40%;
}
3. Then we have the links and the hover option for the entire LJ Navstrip. It is important as you can see that there is coding for both the link and the link B which is the user and community names.
.w-cs {
color: #000000;
font: 10px/10px 'Arial','Helvetica',sans-serif;
}
.w-cs A:link, .w-cs A:visited, .w-cs A:active, .w-cs A:link B, .w-cs A:visited B, .w-cs A:active B {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
color: #000000 !important;
font: 10px 'Arial','Helvetica',sans-serif !important;
text-decoration: none;
}
.w-cs A:hover, .w-cs A:hover B { color: #ffffff !important; }
4. Then we have the first and second groups which will change the background color for the other side of the navstrip
.w-cs .w-cs-user-controls .w-cs-group-first, .w-cs .w-cs-group-second {
background: none repeat scroll 0 0 #23CCBC;
}
5. According to my customizations my bar now looks like this and is clearly not what we want.
The status P function should change that black bar. If you notice I made the background transparent.
.w-cs .w-cs-status P {
background: none repeat scroll 0 0 transparent !important;
border: 0 none;
color: #000000;
float: none;
font: 12px/17px 'Arial','Helvetica',sans-serif;
margin: 0;
padding: 0;
}
It now looks like this:
6. But what if we want to change those white boxes to match the background color?
This code will change the first box which tells your token and message count. There is a little dividing bar between the Tokens and the Messages which can be controlled in the tokens coding below.
.w-cs .w-cs-summary {
background: none repeat scroll 0 0 #23CCBC;
border-radius: 2px 2px 2px 2px;
float: right;
margin: -1px 0 0;
padding: 1px 7px;
}
.w-cs .w-cs-summary LI.w-cs-i-tokens {
background-position: 0 -788px;
border-right: 1px solid #ffffff;
margin-right: 6px;
padding: 3px 6px 3px 0;
}
And here we want to change the color of the search bar and some of the white space around the search icon. The Text coding will change that and the search text coding below the text coding will change the some of the color around the icon.
.w-cs .w-cs-text {
background: none repeat scroll 0 0 #23CCBC;
border: medium none;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF !important;
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 2px 0 3px 5px;
vertical-align: top;
}
.w-cs .w-cs-search .w-cs-text {
border-right: 25px solid #23CCBC;
width: 150px;
}
And now we look like this:
layout_lounge
(no subject)
Date: 2013-06-25 02:39 am (UTC)(no subject)
Date: 2013-06-25 05:20 am (UTC)(no subject)
Date: 2013-06-25 03:45 am (UTC)(no subject)
Date: 2013-06-25 05:21 am (UTC)I really hope this works for you too. I really had to piece this coding together so I hope it remains successful.
(no subject)
Date: 2013-06-25 11:53 am (UTC)(no subject)
Date: 2013-06-25 06:48 pm (UTC)Hi, I need help.
Date: 2014-09-04 04:34 pm (UTC)Re: Hi, I need help.
Date: 2014-09-05 05:04 am (UTC)horizontal offset, vertical offset, blur.
Re: Hi, I need help.
Date: 2014-09-05 05:06 am (UTC)Re: Hi, I need help.
Date: 2014-09-05 05:10 am (UTC)In #2 above and #3 if you want it on hover. #5's coding too.
You'll want to add it where ever there is coding for color: or font-size because that is coding pertaining to text.
Does that make sense?
Re: Hi, I need help.
Date: 2014-09-05 05:16 am (UTC)Re: Hi, I need help.
Date: 2014-09-05 05:33 am (UTC)Re: Hi, I need help.
Date: 2014-09-05 05:29 am (UTC)Because of layout lounge my Journal is glorious.
Re: Hi, I need help.
Date: 2014-09-05 05:33 am (UTC)