Lineaments:
-Helix is 3 Column Blogger Templete ,
-It's Simple Blogger Template, with awesome Layout . It's Free Template.
-Compatible with All Major Browsers
-Best for Personal Blog , For Travelers Blog
-Author Name given Inside Template
---------------------------------------------------------------------------------------------------
Body design code of template you can make changes in color , style font , width , hight
body {
background: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
ol, ul {
list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
outline: 0;
}
a img {
border: 0;
}
Global
-----------------------------------------------
body,
button,
input,
select,
textarea {
color: #888;
font-family: Open sans,sans-serif;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.5;
}
body{
background:#fff;
}
/* Headings */
h1,h2,h3,h4,h5,h6 {
clear: both;
margin:0px 0px 10px 0px;
}
-----------------------------------------------------------------------------------------------
Header and social icon part
#masthead{
background: #EA5546;
width: 180px;
margin: 30px 10px 0px 50px;
position: fixed;
z-index: 100;
border-top:3px solid #E6473B;
}
.top{
}
.logo{
margin: 0px 0px 0px 0px;
padding: 20px 0px 15px 20px;
font-family: Lato, sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZGDsxlYgwU1WxbsepGADKMGQGvWiNetyyLwpccPG0K2pSPjDOuAAuvpKYLzZWbptGLe2IwUyJlZXxKEMF8sfyfjmtNK0SiRGiw00mNhLvx-Gnb1LXLevCyhUZkb15naTA3pK7WCdKpff/s0/edge.png) bottom repeat-x;
}
.logo h1{
font-size:24px;
text-transform: uppercase;
margin: 5px 0px 0px 0px;
padding: 0px;
font-weight: 600;
color: #fff;
}
.logo h1 a:link, .logo h1 a:visited{
color: #fff;
}
.logo h2{
font-size:14px;
margin: 5px 0px 0px 0px;
padding: 0px;
font-weight: 400;
color: #fff;
}
.social-links{
padding: 5px 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2K5i1WY4l-2rkq0bLTZ230XA0ShBddvtKa2jxca1hRLJtOxetlnKPJOMgdkqqM9LGJYGnFvlska_aXqUzBw8GxXGE-GC9095ZIBNP7lSLsHbSe_2E5Avd7K2ryGTor_9Z3459-HdmUDZp/s0/edger.png) top repeat-x;)
}
.social-links ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}
.social-links ul li{
height: 24px;
width: 24px;
float: left;
list-style: none;
margin: 10px 5px 10px 0px
}
.social-links ul li a{
width: 24px;
height: 24px;
display: block;
}
#submenu ul {
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
}
li.twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLpzzZads6gtdiUE_NM1EzzXxGGz8JbwlSvNsb59rJ_e3tZ4Ymuvpz0MA0QiKw8sDLbgpQOim81634YSUhmJfCBP0rih5oWWsEObCJaPI3UTXO-R4P9vrXVwJtAHOphzA-jJi5KIKymcW/s0/twitter.png);
}
li.facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhxfk0oxH8pe21hCNwpTEkDaEfPQMqzr1OJPnKajlqb51ydgkDFmODxvcYgK8OsEk4YDQSYBSimROvaJGt9Fa3A1RVLwBNXLXuBUVGfydm2ZT-Kdj5CjdV5MzLCTSdaPDxzSkMxI-cuXO/s0/facebook.png);
}
li.gplus{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyKm-EIpw66ijSbrLhnuA9qU9aHLQph427ie88rmelQ5fQanp-jP-Y5MZZep-NAk-3YEI-w3IDPW-21QCyIXMkLjhnR1xpPBsDqjFjs__UmlMEl1ui218oLfvye9KwnRWy-GkQ11s8ybcg/s0/gplus.png);
}
li.feed{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsVI8J-QSEatRxlaEB033DQ5pahpQzpdZ4yMe7r1Ej05foGTTHxvOtjbB_sdtGjLsN2lAbEjomtb1X7q5NG6VW90gOw4jEu0s-3e1PyvwvsaHw_Bh9XtOoxpe345AfUJIWFuy1JWjK2x3/s0/feed.png);
}
li.in{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIItgHIsfvKldk5Ozox1l7BZokeyMJEc23jkdHMrcf-1J18TSnzQDcikJ2i3DZDAaP4gRaujkfH1R5pkfBuQifAKtdBUgl0KH4GRggomuVVJi_9nGvONmMw11LSKNc5nkAnI2NYD_F7U3m/s0/in.png);
}
/* Searchform */
#searchform #s{
background:#fff;
border: 1px solid #ddd;
color: #777;
width:220px!important;
padding: 10px 10px;
font-size: 13px;
margin: 10px 0px 30px 0px;
border-radius: 0;
}
------------------------------------------------------------------------------------------------
Menu design , you can make changes in style
Menu */
#submenu {
padding:10px 0px;
margin: 0px 0px;
background: #fff;
}
#submenu > ul {
width: 180px;
float:left;
list-style: none;
margin: 0 ;
padding: 0 0px;
font-size: 12px;
}
#submenu > ul > li {
border-bottom: 1px solid #f2f2f2;
list-style: none; margin: 0;
padding: 0;
color: #222;
font-weight:700;
text-transform: uppercase;
}
#submenu > ul > li:last-child{
border: none;
}
#submenu li{
list-style: none;
}
#submenu li a {
color: #444;
display: block;
margin: 0;
padding: 10px 20px 10px 20px;
text-decoration: none;
position: relative;
font-weight:bold;
}
#submenu li a:hover, #submenu li a:active, #submenu .current_page_item a {
color: #F7584A;
}
#submenu li a.sf-with-ul {
padding-right: 10px;
}
-----------------------------------------------------------------------------------------
Sub menu part
#submenu li ul li a, #submenu li ul li a:link, #submenu li ul li a:visited,
#submenu li ul li ul li a, #submenu li ul li ul li a:link, #submenu li ul li ul li a:visited,
#submenu li ul li ul li ul li a, #submenu li ul li ul li ul li a:link, #submenu li ul li ul li ul li a:visited {
color:#58535F;
width: 148px;
margin: 0;
padding: 10px 10px;
border-top:1px solid #f4f4f4;
position: relative;
font-weight:400;
}
#submenu ul li ul li:first-child a,#submenu ul li ul li ul li:first-child a,#submenu ul li ul li ul li ul li:first-child a {
border-top:none;
}
#submenu li ul li a:hover ,#submenu li ul li ul li a:hover ,#submenu li ul li ul li ul li a:hover {
color: #4d4854;
background: #fff;
}
#submenu li ul {
font-size: 10px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: -41px 0px 0px 170px;
padding: 5px 5px;
background:#fcfcfc;
}
#submenu li ul a {
width: 150px;
}
#submenu li ul a:hover, #submenu li ul a:active {
}
#submenu li ul ul {
margin: -40px 0 0 175px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
left: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}
