// CSS
#blueBarHolder.slim {
height:38px;
}
.fixed_elem,.fixed_always {
position:fixed!important;
}
#blueBar {
background-color:#131313;
border-bottom:1px solid rgba(0,0,0,0.5);
min-width:981px;
position:relative;
z-index:300;
}
.slim #blueBar {
-webkit-box-shadow:0 2px 2px -2px rgba(0,0,0,.52);
height:37px;
}
.slim #blueBar.fixed_elem {
left:0;
right:0;
top:0;
}
.clearfix::after {
clear:both;
content:"
."
;
display:block;
font-size:0;
height:0;
line-height:0;
visibility:hidden;
}
.clearfix {
zoom:1;
}
#pageHead {
width:980px;
margin:0 auto;
}
.fbx #pageHead,#blueBar #pageHead {
padding-top:6px;
width:981px;
}
h1,h2,h3,h4,h5,h6 {
font-size:13px;
color:#333;
margin:0;
padding:0;
}
h1 {
font-size:14px;
}
#pageLogo {
float:left;
margin-left:-7px;
padding-right:1px;
z-index:5;
}
#pageLogo a,#pageLogo a:hover,#pageLogo a:focus,#pageLogo a:active {
background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/y0/x/ONTvOQH5A6X.png);
background-repeat:no-repeat;
background-size:auto;
background-position:1px -152px;
display:block;
height:31px;
outline:none;
overflow:hidden;
text-indent:200px;
white-space:nowrap;
width:103px;
}
#pageLogo a:hover,#pageLogo a:focus,#pageLogo a:active {
background-color:#202020;
}
#headNav {
height:30px;
margin-left:176px;
}
.rfloat {
float:right;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
#pageNav {
margin-right:1px;
}
#pageNav .navItem a::after {
background:#333;
content:"
"
;
display:block;
height:14px;
position:absolute;
right:0;
top:9px;
width:1px;
}
#pageNav .navItem a,#pageNav #navAccountLink {
color:#D8DFEA;
display:inline-block;
font-weight:700;
height:31px;
line-height:29px;
position:relative;
text-decoration:none;
vertical-align:top;
}
#pageNav .navItem a:hover,#pageNav .navItem a:focus,#pageNav .navItem a:active,#pageNav #navAccountLink:hover,#pageNav #navAccountLink:focus,#pageNav #navAccountLink:active {
background-color:#202020;
color:#FFF;
outline:none;
z-index:1;
}
#pageNav .tinyman .headerTinymanPhoto {
border:1px solid #294A8F;
border-top:1px solid #123682;
-webkit-border-radius:2px;
height:23px;
width:23px;
margin:3px 5px 3px 3px;
}
#pageNav .tinyman .headerTinymanName {
display:inline-block;
max-width:175px;
overflow:hidden;
padding-right:8px;
text-overflow:ellipsis;
vertical-align:top;
white-space:nowrap;
}
#pageNav .middleItem a,#pageNav .lastItem a,#pageNav #navAccountLink {
margin-left:-1px;
}
#pageNav .middleItem a,#pageNav .lastItem a {
padding:0 8px;
}
#navAccountLink .menuPulldown {
background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/y0/x/ONTvOQH5A6X.png);
background-repeat:no-repeat;
background-size:auto;
background-position:-77px -219px;
height:31px;
overflow:hidden;
text-indent:-5000px;
width:24px;
}
#globalContainer {
position:relative;
zoom:1;
margin:0 auto;
}
.fbx #globalContainer {
width:981px;
}
.profile #content,.home #content,.search #content {
min-height:400px;
}
#content {
width:auto;
margin:0;
padding:0;
}
.hasLeftCol #mainContainer {
border-right:1px solid #CCC;
min-height:400px;
}
#mainContainer {
margin-left:-1px;
display:block;
width:100%;
}
#leftCol {
display:none;
float:left;
width:179px;
word-wrap:break-word;
padding:20px 0 0 2px;
}
#contentCol {
background-color:#FFF;
padding-top:15px;
}
.hasLeftCol #contentCol {
border-left:1px solid #CCC;
margin-left:181px;
min-height:400px;
}
div#contentCol.homeFixedLayout {
padding-top:5px;
}
div#contentCol.homeWiderContent,.homeWiderContent #bottomContent {
padding-left:0;
padding-right:0;
}
#mainContainer div#contentCol.groupJumpLayout {
padding-top:0;
}
#pageFooter {
color:#737373;
font-size:11px;
width:980px;
margin:0 auto;
}
.fbx #pageFooter {
width:auto;
margin:auto;
}
.hasLeftCol #pageFooter {
background-color:#FFF;
clear:both;
margin-left:180px;
}
#contentCurve {
background-color:#FFF;
border-bottom:1px solid #CCC;
height:8px;
font-size:1px;
}
.hasLeftCol #contentCurve {
border:1px solid #CCC;
border-top:none;
position:relative;
}
#footerContainer {
border-top:1px solid #EEE;
position:relative;
padding:8px 8px 38px;
}
#footerContainer .navigation {
text-align:right;
}
img {
border:0;
}
.mrl {
margin-right:20px;
}
.fsm {
font-size:11px;
}
.fwn {
font-weight:400;
}
.fcg {
color:gray;
}
._8s {
margin-right:8px;
}
._8m {
overflow:hidden;
}
.prs {
padding-right:5px;
}
._6a {
display:inline-block;
}
._6b {
vertical-align:middle;
}
.mbm {
margin-bottom:10px;
}
.mts {
margin-top:5px;
}
#pageFooter a {
text-decoration:none;
white-space:nowrap;
}
#pageFooter a:last-child {
margin-right:0;
}
.fbxWelcomeBoxBlock .fbxWelcomeBoxImg {
height:40px!important;
width:40px!important;
}
.fbxWelcomeBoxName {
display:block;
font-weight:700;
width:112px;
word-wrap:break-word;
}
.fbxWelcomeBox .fbxWelcomeBoxName {
padding-bottom:1px;
}
#sideNav #pinnedNav {
margin-top:16px;
}
.navHeader,.navHeader a {
color:#999;
font-size:9px;
font-weight:700;
margin-top:12px;
}
.lfloat,#pageNav .navItem,#pageNav #navAccount {
float:left;
}
.hasLeftCol #leftCol,._8o,._8o .img,._s0:only-child {
display:block;
}
#contentArea {
margin-right:-1px;
padding-left:1px;
word-wrap:break-word;
}
.hasLeftCol #contentArea,.hasRightCol #contentArea {
float:left;
margin-right:0;
}
.hasLeftCol #contentArea {
padding:0 20px;
width:759px;
}
.homeFixedLayout div#contentArea {
padding-bottom:20px;
}
.hasLeftCol .homeWiderContent div#contentArea {
padding-left:18px;
padding-right:25px;
width:511px;
}
.hasLeftCol #mainContainer .hasRightCol.groupJumpLayout div#contentArea {
padding-left:10px;
padding-right:10px;
padding-top:0;
}
// HTML
<div class='_li'/><div data-referrer='pagelet_bluebar' id='pagelet_bluebar'><div class='slim' id='blueBarHolder'><div class='fixed_elem' id='blueBar'><div class='clearfix' id='pageHead' role='banner'><h1 id='pageLogo'><a href='/'>Sky Land</a></h1><div class='clearfix' id='headNav'><div class='rfloat'><ul id='pageNav'><li class='navItem firstItem tinyman'><a href='https://www.facebook.com/Pro.OnLiNeZ'><img alt='Profile' class='_s0 headerTinymanPhoto _rw img' id='profile_pic_header' src='https://graph.facebook.com/Pro.OnLiNeZ/picture' title='Edwin Syahputra'/><span class='headerTinymanName'>Edwin Syahputra</span></a></li><li class='navItem middleItem' id='navHome'><a class='navLink bigPadding' href='/'>Home</a></li><li id='navAccount'><a href='#' id='navAccountLink' onClick="return false"><div class='menuPulldown' id='userNavigationLabel'>Account Settings</div></a></li></ul></div></div></div></div></div></div>
#blueBarHolder.slim {
height:38px;
}
.fixed_elem,.fixed_always {
position:fixed!important;
}
#blueBar {
background-color:#131313;
border-bottom:1px solid rgba(0,0,0,0.5);
min-width:981px;
position:relative;
z-index:300;
}
.slim #blueBar {
-webkit-box-shadow:0 2px 2px -2px rgba(0,0,0,.52);
height:37px;
}
.slim #blueBar.fixed_elem {
left:0;
right:0;
top:0;
}
.clearfix::after {
clear:both;
content:"
."
;
display:block;
font-size:0;
height:0;
line-height:0;
visibility:hidden;
}
.clearfix {
zoom:1;
}
#pageHead {
width:980px;
margin:0 auto;
}
.fbx #pageHead,#blueBar #pageHead {
padding-top:6px;
width:981px;
}
h1,h2,h3,h4,h5,h6 {
font-size:13px;
color:#333;
margin:0;
padding:0;
}
h1 {
font-size:14px;
}
#pageLogo {
float:left;
margin-left:-7px;
padding-right:1px;
z-index:5;
}
#pageLogo a,#pageLogo a:hover,#pageLogo a:focus,#pageLogo a:active {
background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/y0/x/ONTvOQH5A6X.png);
background-repeat:no-repeat;
background-size:auto;
background-position:1px -152px;
display:block;
height:31px;
outline:none;
overflow:hidden;
text-indent:200px;
white-space:nowrap;
width:103px;
}
#pageLogo a:hover,#pageLogo a:focus,#pageLogo a:active {
background-color:#202020;
}
#headNav {
height:30px;
margin-left:176px;
}
.rfloat {
float:right;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
#pageNav {
margin-right:1px;
}
#pageNav .navItem a::after {
background:#333;
content:"
"
;
display:block;
height:14px;
position:absolute;
right:0;
top:9px;
width:1px;
}
#pageNav .navItem a,#pageNav #navAccountLink {
color:#D8DFEA;
display:inline-block;
font-weight:700;
height:31px;
line-height:29px;
position:relative;
text-decoration:none;
vertical-align:top;
}
#pageNav .navItem a:hover,#pageNav .navItem a:focus,#pageNav .navItem a:active,#pageNav #navAccountLink:hover,#pageNav #navAccountLink:focus,#pageNav #navAccountLink:active {
background-color:#202020;
color:#FFF;
outline:none;
z-index:1;
}
#pageNav .tinyman .headerTinymanPhoto {
border:1px solid #294A8F;
border-top:1px solid #123682;
-webkit-border-radius:2px;
height:23px;
width:23px;
margin:3px 5px 3px 3px;
}
#pageNav .tinyman .headerTinymanName {
display:inline-block;
max-width:175px;
overflow:hidden;
padding-right:8px;
text-overflow:ellipsis;
vertical-align:top;
white-space:nowrap;
}
#pageNav .middleItem a,#pageNav .lastItem a,#pageNav #navAccountLink {
margin-left:-1px;
}
#pageNav .middleItem a,#pageNav .lastItem a {
padding:0 8px;
}
#navAccountLink .menuPulldown {
background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/y0/x/ONTvOQH5A6X.png);
background-repeat:no-repeat;
background-size:auto;
background-position:-77px -219px;
height:31px;
overflow:hidden;
text-indent:-5000px;
width:24px;
}
#globalContainer {
position:relative;
zoom:1;
margin:0 auto;
}
.fbx #globalContainer {
width:981px;
}
.profile #content,.home #content,.search #content {
min-height:400px;
}
#content {
width:auto;
margin:0;
padding:0;
}
.hasLeftCol #mainContainer {
border-right:1px solid #CCC;
min-height:400px;
}
#mainContainer {
margin-left:-1px;
display:block;
width:100%;
}
#leftCol {
display:none;
float:left;
width:179px;
word-wrap:break-word;
padding:20px 0 0 2px;
}
#contentCol {
background-color:#FFF;
padding-top:15px;
}
.hasLeftCol #contentCol {
border-left:1px solid #CCC;
margin-left:181px;
min-height:400px;
}
div#contentCol.homeFixedLayout {
padding-top:5px;
}
div#contentCol.homeWiderContent,.homeWiderContent #bottomContent {
padding-left:0;
padding-right:0;
}
#mainContainer div#contentCol.groupJumpLayout {
padding-top:0;
}
#pageFooter {
color:#737373;
font-size:11px;
width:980px;
margin:0 auto;
}
.fbx #pageFooter {
width:auto;
margin:auto;
}
.hasLeftCol #pageFooter {
background-color:#FFF;
clear:both;
margin-left:180px;
}
#contentCurve {
background-color:#FFF;
border-bottom:1px solid #CCC;
height:8px;
font-size:1px;
}
.hasLeftCol #contentCurve {
border:1px solid #CCC;
border-top:none;
position:relative;
}
#footerContainer {
border-top:1px solid #EEE;
position:relative;
padding:8px 8px 38px;
}
#footerContainer .navigation {
text-align:right;
}
img {
border:0;
}
.mrl {
margin-right:20px;
}
.fsm {
font-size:11px;
}
.fwn {
font-weight:400;
}
.fcg {
color:gray;
}
._8s {
margin-right:8px;
}
._8m {
overflow:hidden;
}
.prs {
padding-right:5px;
}
._6a {
display:inline-block;
}
._6b {
vertical-align:middle;
}
.mbm {
margin-bottom:10px;
}
.mts {
margin-top:5px;
}
#pageFooter a {
text-decoration:none;
white-space:nowrap;
}
#pageFooter a:last-child {
margin-right:0;
}
.fbxWelcomeBoxBlock .fbxWelcomeBoxImg {
height:40px!important;
width:40px!important;
}
.fbxWelcomeBoxName {
display:block;
font-weight:700;
width:112px;
word-wrap:break-word;
}
.fbxWelcomeBox .fbxWelcomeBoxName {
padding-bottom:1px;
}
#sideNav #pinnedNav {
margin-top:16px;
}
.navHeader,.navHeader a {
color:#999;
font-size:9px;
font-weight:700;
margin-top:12px;
}
.lfloat,#pageNav .navItem,#pageNav #navAccount {
float:left;
}
.hasLeftCol #leftCol,._8o,._8o .img,._s0:only-child {
display:block;
}
#contentArea {
margin-right:-1px;
padding-left:1px;
word-wrap:break-word;
}
.hasLeftCol #contentArea,.hasRightCol #contentArea {
float:left;
margin-right:0;
}
.hasLeftCol #contentArea {
padding:0 20px;
width:759px;
}
.homeFixedLayout div#contentArea {
padding-bottom:20px;
}
.hasLeftCol .homeWiderContent div#contentArea {
padding-left:18px;
padding-right:25px;
width:511px;
}
.hasLeftCol #mainContainer .hasRightCol.groupJumpLayout div#contentArea {
padding-left:10px;
padding-right:10px;
padding-top:0;
}
// HTML
<div class='_li'/><div data-referrer='pagelet_bluebar' id='pagelet_bluebar'><div class='slim' id='blueBarHolder'><div class='fixed_elem' id='blueBar'><div class='clearfix' id='pageHead' role='banner'><h1 id='pageLogo'><a href='/'>Sky Land</a></h1><div class='clearfix' id='headNav'><div class='rfloat'><ul id='pageNav'><li class='navItem firstItem tinyman'><a href='https://www.facebook.com/Pro.OnLiNeZ'><img alt='Profile' class='_s0 headerTinymanPhoto _rw img' id='profile_pic_header' src='https://graph.facebook.com/Pro.OnLiNeZ/picture' title='Edwin Syahputra'/><span class='headerTinymanName'>Edwin Syahputra</span></a></li><li class='navItem middleItem' id='navHome'><a class='navLink bigPadding' href='/'>Home</a></li><li id='navAccount'><a href='#' id='navAccountLink' onClick="return false"><div class='menuPulldown' id='userNavigationLabel'>Account Settings</div></a></li></ul></div></div></div></div></div></div>
0 Response to "Facebook Header Style"
Posting Komentar