dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// header markup retake

Browse Source
This commit is contained in:
Kevin Granger
2013-12-11 16:55:53 +01:00
parent a2340079c1
commit 36968d76b6
3 changed files with 338 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default-bootstrap/css/global.css
+163 -171
View File
@@ -3816,6 +3816,169 @@ textarea {
position: relative;
padding-bottom: 50px; }
header {
z-index: 1;
position: relative;
background: white; }
header #banner-row {
background: black; }
header #nav-row {
background: #333333; }
header #nav-row nav {
float: right; }
header #header-row {
position: relative; }
@media (min-width: 768px) and (max-width: 991px) {
header #header-row {
width: 250px;
top: 35px; } }
@media (min-width: 480px) and (max-width: 767px) {
header #header-row {
width: 174px;
left: 15px;
top: 48px; } }
@media (max-width: 479px) {
header #header-row {
width: 200px;
left: 50%;
margin-left: -100px;
top: 20px; } }
header .header_user_info {
float: left;
border-left: 1px solid #515151;
border-right: 1px solid #515151; }
@media (max-width: 479px) {
header .header_user_info {
width: 25%;
text-align: center; } }
header .header_user_info a {
color: white;
font-weight: bold;
display: block;
padding: 8px 9px 11px 8px; }
@media (max-width: 479px) {
header .header_user_info a {
font-size: 11px; } }
header .shop-phone {
display: block;
padding: 5px 0 10px; }
@media (max-width: 767px) {
header .shop-phone {
display: none; } }
header .shop-phone i {
font-size: 21px;
line-height: 21px;
color: white;
padding-right: 7px; }
header .shop-phone strong {
color: white; }
header #currencies-block-top,
header #languages-block-top {
float: right;
border-left: 1px solid #515151;
position: relative; }
@media (max-width: 479px) {
header #currencies-block-top,
header #languages-block-top {
width: 25%; } }
header #currencies-block-top span.firstWord,
header #languages-block-top span.firstWord {
display: none; }
header #currencies-block-top div.current,
header #languages-block-top div.current {
font-weight: bold;
padding: 8px 10px 10px 10px;
color: white;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
@media (max-width: 479px) {
header #currencies-block-top div.current,
header #languages-block-top div.current {
text-align: center;
padding: 9px 5px 10px;
font-size: 11px; } }
header #currencies-block-top div.current strong,
header #languages-block-top div.current strong {
color: #777777; }
header #currencies-block-top div.current:after,
header #languages-block-top div.current:after {
content: "\f0d7";
font-family: "FontAwesome";
font-size: 18px;
line-height: 18px;
color: #686666;
vertical-align: -2px;
padding-left: 12px; }
@media (max-width: 479px) {
header #currencies-block-top div.current:after,
header #languages-block-top div.current:after {
padding-left: 2px;
font-size: 13px;
line-height: 13px;
vertical-align: 0; } }
@media (max-width: 479px) {
header #currencies-block-top div.current .cur-label,
header #languages-block-top div.current .cur-label {
display: none; } }
header #currencies-block-top ul,
header #languages-block-top ul {
display: none;
position: absolute;
top: 37px;
left: 0;
width: 157px;
background: #333333;
z-index: 2; }
header #currencies-block-top ul li,
header #languages-block-top ul li {
color: white;
line-height: 35px;
font-size: 13px; }
header #currencies-block-top ul li a,
header #currencies-block-top ul li > span,
header #languages-block-top ul li a,
header #languages-block-top ul li > span {
padding: 0 10px 0 12px;
display: block;
color: white; }
header #currencies-block-top ul li.selected, header #currencies-block-top ul li:hover a,
header #languages-block-top ul li.selected,
header #languages-block-top ul li:hover a {
background: #484848; }
header #contact-link {
float: right;
border-left: 1px solid #515151; }
@media (max-width: 479px) {
header #contact-link {
width: 25%;
text-align: center; } }
header #contact-link a {
display: block;
color: white;
font-weight: bold;
padding: 8px 10px 11px 10px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
@media (max-width: 479px) {
header #contact-link a {
font-size: 11px;
padding-left: 5px;
padding-right: 5px; } }
header #contact-link a,
header #header-row .header_user_info a,
header #currencies-block-top div.current,
header #languages-block-top div.current {
cursor: pointer; }
header #contact-link a:hover, header #contact-link a.active,
header #header-row .header_user_info a:hover,
header #header-row .header_user_info a.active,
header #currencies-block-top div.current:hover,
header #currencies-block-top div.current.active,
header #languages-block-top div.current:hover,
header #languages-block-top div.current.active {
background: #2b2b2b; }
.ie8 #header #header_logo {
width: 350px; }
#center_column .page_product_box h3 {
color: #555454;
text-transform: uppercase;
@@ -5283,180 +5446,9 @@ div.star a:hover {
padding: 5px 0;
color: #333333; }
.banner-top {
background: black; }
.header-container {
background: white; }
#header {
padding-bottom: 21px;
position: relative;
background: white; }
#header .header-row {
position: relative; }
#header .header-row:first-child {
background-color: #333333; }
#header .header-row > .container {
position: relative; }
#header .header-row .shop-phone {
display: block;
padding: 5px 0 10px; }
@media (max-width: 767px) {
#header .header-row .shop-phone {
display: none; } }
#header .header-row .shop-phone i {
font-size: 21px;
line-height: 21px;
color: white;
padding-right: 7px; }
#header .header-row .shop-phone strong {
color: white; }
#header .header-row nav {
float: right; }
#header .header-row .header_user_info {
float: left;
border-left: 1px solid #515151;
border-right: 1px solid #515151; }
@media (max-width: 479px) {
#header .header-row .header_user_info {
width: 25%;
text-align: center; } }
#header .header-row .header_user_info a {
color: white;
font-weight: bold;
display: block;
padding: 8px 9px 11px 8px; }
@media (max-width: 479px) {
#header .header-row .header_user_info a {
font-size: 11px; } }
#header #header_logo {
position: absolute;
left: 0;
top: 27px;
z-index: 1; }
@media (min-width: 768px) and (max-width: 991px) {
#header #header_logo {
width: 250px;
top: 35px; } }
@media (min-width: 480px) and (max-width: 767px) {
#header #header_logo {
width: 174px;
left: 15px;
top: 48px; } }
@media (max-width: 479px) {
#header #header_logo {
width: 200px;
left: 50%;
margin-left: -100px;
top: 20px; } }
#header #currencies-block-top,
#header #languages-block-top {
float: right;
border-left: 1px solid #515151;
position: relative; }
@media (max-width: 479px) {
#header #currencies-block-top,
#header #languages-block-top {
width: 25%; } }
#header #currencies-block-top span.firstWord,
#header #languages-block-top span.firstWord {
display: none; }
#header #currencies-block-top div.current,
#header #languages-block-top div.current {
font-weight: bold;
padding: 8px 10px 10px 10px;
color: white;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
@media (max-width: 479px) {
#header #currencies-block-top div.current,
#header #languages-block-top div.current {
text-align: center;
padding: 9px 5px 10px;
font-size: 11px; } }
#header #currencies-block-top div.current strong,
#header #languages-block-top div.current strong {
color: #777777; }
#header #currencies-block-top div.current:after,
#header #languages-block-top div.current:after {
content: "\f0d7";
font-family: "FontAwesome";
font-size: 18px;
line-height: 18px;
color: #686666;
vertical-align: -2px;
padding-left: 12px; }
@media (max-width: 479px) {
#header #currencies-block-top div.current:after,
#header #languages-block-top div.current:after {
padding-left: 2px;
font-size: 13px;
line-height: 13px;
vertical-align: 0; } }
@media (max-width: 479px) {
#header #currencies-block-top div.current .cur-label,
#header #languages-block-top div.current .cur-label {
display: none; } }
#header #currencies-block-top ul,
#header #languages-block-top ul {
display: none;
position: absolute;
top: 37px;
left: 0;
width: 157px;
background: #333333;
z-index: 2; }
#header #currencies-block-top ul li,
#header #languages-block-top ul li {
color: white;
line-height: 35px;
font-size: 13px; }
#header #currencies-block-top ul li a,
#header #currencies-block-top ul li > span,
#header #languages-block-top ul li a,
#header #languages-block-top ul li > span {
padding: 0 10px 0 12px;
display: block;
color: white; }
#header #currencies-block-top ul li.selected, #header #currencies-block-top ul li:hover a,
#header #languages-block-top ul li.selected,
#header #languages-block-top ul li:hover a {
background: #484848; }
#header #contact-link {
float: right;
border-left: 1px solid #515151; }
@media (max-width: 479px) {
#header #contact-link {
width: 25%;
text-align: center; } }
#header #contact-link a {
display: block;
color: white;
font-weight: bold;
padding: 8px 10px 11px 10px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
@media (max-width: 479px) {
#header #contact-link a {
font-size: 11px;
padding-left: 5px;
padding-right: 5px; } }
#header #contact-link a,
#header .header-row .header_user_info a,
#header #currencies-block-top div.current,
#header #languages-block-top div.current {
cursor: pointer; }
#header #contact-link a:hover, #header #contact-link a.active,
#header .header-row .header_user_info a:hover,
#header .header-row .header_user_info a.active,
#header #currencies-block-top div.current:hover,
#header #currencies-block-top div.current.active,
#header #languages-block-top div.current:hover,
#header #languages-block-top div.current.active {
background: #2b2b2b; }
.ie8 #header #header_logo {
width: 350px; }
.breadcrumb {
display: inline-block;
padding: 0 11px 0 0;
themes/default-bootstrap/header.tpl
+23 -18
View File
@@ -100,26 +100,31 @@
</div>
{/if}
<div id="page">
<div class="header-container">
<header id="header">
<div class="header-row">
{hook h="displayBanner"}
<div class="container">
<nav>
{hook h="displayNav"}
</nav>
</div>
<header id="header">
<div id="banner-row">
{hook h="displayBanner"}
</div>
<div id="nav-row">
<div class="container">
<nav>
{hook h="displayNav"}
</nav>
</div>
<div class="header-row">
<div class="container">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>
</div>
<div id="header-row">
<div class="container">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>
</header>
</div>
</div>
</header>
<div class="columns-container">
<div id="columns" class="container">
{if $page_name !='index' && $page_name !='pagenotfound'}
themes/default-bootstrap/sass/global.sass
+152 -153
View File
@@ -42,6 +42,158 @@ textarea
#right_column
#footer
header
z-index: 1
position: relative
background: $light-background
#banner-row
background: black
#nav-row
background: $dark-background
nav
float: right
#header-row
position: relative
#header_logo
// min 768px max 991px
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
width: 250px
top: 35px
// min 480px max 767px
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
width: 174px
left: 15px
top: 48px
// max 479px
@media (max-width: $screen-xs - 1)
width: 200px
left: 50%
margin-left: -100px
top: 20px
.header_user_info
float: left
border-left: 1px solid #515151
border-right: 1px solid #515151
// max 479px
@media (max-width: $screen-xs - 1)
width: 25%
text-align: center
a
color: $light-text-color
font-weight: bold
display: block
padding: 8px 9px 11px 8px
// max 479px
@media (max-width: $screen-xs - 1)
font-size: 11px
.shop-phone
display: block
padding: 5px 0 10px
// max 767px
@media (max-width: $screen-xs-max)
display: none
i
font-size: 21px
line-height: 21px
color: $light-text-color
padding-right: 7px
strong
color: $light-text-color
//languages/currencies
#currencies-block-top,
#languages-block-top
float: right
border-left: 1px solid #515151
position: relative
// max 479px
@media (max-width: $screen-xs - 1)
width: 25%
span.firstWord
display: none
div.current
font-weight: bold
padding: 8px 10px 10px 10px
color: $light-text-color
text-shadow: 1px 1px rgba(0,0,0,0.2)
// max 479px
@media (max-width: $screen-xs - 1)
text-align: center
padding: 9px 5px 10px
font-size: 11px
strong
color: #777777
&:after
content: "\f0d7"
font-family: $font-icon
font-size: 18px
line-height: 18px
color: #686666
vertical-align: -2px
padding-left: 12px
// max 479px
@media (max-width: $screen-xs - 1)
padding-left: 2px
font-size: 13px
line-height: 13px
vertical-align: 0
.cur-label
// max 479px
@media (max-width: $screen-xs - 1)
display: none
ul
display: none
position: absolute
top: 37px
left: 0
width: 157px
background: $dark-background
z-index: 2
li
color: $light-text-color
line-height: 35px
font-size: 13px
a,
> span
padding: 0 10px 0 12px
display: block
color: $light-text-color
&.selected, &:hover a
background: #484848
#contact-link
float: right
border-left: 1px solid #515151
// max 479px
@media (max-width: $screen-xs - 1)
width: 25%
text-align: center
a
display: block
color: $light-text-color
font-weight: bold
padding: 8px 10px 11px 10px
text-shadow: 1px 1px rgba(0,0,0,0.2)
// max 479px
@media (max-width: $screen-xs - 1)
font-size: 11px
padding-left: 5px
padding-right: 5px
#contact-link a,
#header-row .header_user_info a,
#currencies-block-top div.current,
#languages-block-top div.current
cursor: pointer
&:hover, &.active
background: #2b2b2b
.ie8 #header #header_logo
width: 350px
//title
#center_column
.page_product_box
@@ -1449,163 +1601,10 @@ div.star a:hover
.listcomment .authorcomment
//HEADER
.banner-top
background: #000
.header-container
background: $light-background
#header
padding-bottom: 21px
position: relative
background: $light-background
.header-row
position: relative
&:first-child
background-color: $dark-background
> .container
position: relative
.shop-phone
display: block
padding: 5px 0 10px
// max 767px
@media (max-width: $screen-xs-max)
display: none
i
font-size: 21px
line-height: 21px
color: $light-text-color
padding-right: 7px
strong
color: $light-text-color
nav
float: right
.header_user_info
float: left
border-left: 1px solid #515151
border-right: 1px solid #515151
// max 479px
@media (max-width: $screen-xs - 1)
width: 25%
text-align: center
a
color: $light-text-color
font-weight: bold
display: block
padding: 8px 9px 11px 8px
// max 479px
@media (max-width: $screen-xs - 1)
font-size: 11px
#header_logo
position: absolute
left: 0
top: 27px
z-index: 1
// min 768px max 991px
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
width: 250px
top: 35px
// min 480px max 767px
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
width: 174px
left: 15px
top: 48px
// max 479px
@media (max-width: $screen-xs - 1)
width: 200px
left: 50%
margin-left: -100px
top: 20px
//languages/currencies
#currencies-block-top,
#languages-block-top
float: right
border-left: 1px solid #515151
position: relative
// max 479px
@media (max-width: $screen-xs - 1)
width: 25%
span.firstWord
display: none
div.current
font-weight: bold
padding: 8px 10px 10px 10px
color: $light-text-color
text-shadow: 1px 1px rgba(0,0,0,0.2)
// max 479px
@media (max-width: $screen-xs - 1)
text-align: center
padding: 9px 5px 10px
font-size: 11px
strong
color: #777777
&:after
content: "\f0d7"
font-family: $font-icon
font-size: 18px
line-height: 18px
color: #686666
vertical-align: -2px
padding-left: 12px
// max 479px
@media (max-width: $screen-xs - 1)
padding-left: 2px
font-size: 13px
line-height: 13px
vertical-align: 0
.cur-label
// max 479px
@media (max-width: $screen-xs - 1)
display: none
ul
display: none
position: absolute
top: 37px
left: 0
width: 157px
background: $dark-background
z-index: 2
li
color: $light-text-color
line-height: 35px
font-size: 13px
a,
> span
padding: 0 10px 0 12px
display: block
color: $light-text-color
&.selected, &:hover a
background: #484848
#contact-link
float: right
border-left: 1px solid #515151
// max 479px
@media (max-width: $screen-xs - 1)
width: 25%
text-align: center
a
display: block
color: $light-text-color
font-weight: bold
padding: 8px 10px 11px 10px
text-shadow: 1px 1px rgba(0,0,0,0.2)
// max 479px
@media (max-width: $screen-xs - 1)
font-size: 11px
padding-left: 5px
padding-right: 5px
#contact-link a,
.header-row .header_user_info a,
#currencies-block-top div.current,
#languages-block-top div.current
cursor: pointer
&:hover, &.active
background: #2b2b2b
.ie8 #header #header_logo
width: 350px
// BREADCRUMB
.breadcrumb