Ajouter une bannière

**winser** · 30/03/2013, 20h29

Bonjour, je voudrai savoir s'il était possible de mettre une bannière prenant tout le bloc blanc du header sur ce thème fait pour un CMS. Car pour l'instant, l'image que l'on peut mettre s'arrête obligatoirement au milieu du bloc

Voici la démo du thème : http://demo.onedesigns.com/pinboard/

Et le Code HTML/PHP où le header est présent :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body <?php body_class() ?>>
	<div id="wrapper">
		<header id="header">
			<<?php pinboard_title_tag( 'site' ); ?> id="site-title">
				<?php if ( ( '' != get_header_image() ) &&  ( false != get_header_image() ) ) : ?>
					<a href="<?php echo home_url( '/' ); ?>" rel="home">
						<img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->width / 2 ) : get_custom_header()->width ); ?>" height="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->height / 2 ) : get_custom_header()->height ); ?>" />
					</a>
				<?php endif; ?>
				<a class="home" href="<?php echo home_url( '/' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
			</<?php pinboard_title_tag( 'site' ); ?>>
			<?php if( ! is_active_sidebar( 1 ) ) : ?>
				<<?php pinboard_title_tag( 'desc' ); ?> id="site-description"><?php bloginfo( 'description' ); ?></<?php pinboard_title_tag( 'desc' ); ?>>
			<?php endif; ?>
			<?php get_sidebar( 'header' ); ?>
			<div class="clear"></div>
			<nav id="access">
				<a class="nav-show" href="#access">Show Navigation</a>
				<a class="nav-hide" href="#nogo">Hide Navigation</a>
				<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
				<div class="clear"></div>
			</nav><!-- #access -->
		</header><!-- #header -->

Et la partie CSS en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
#wrapper {
    position:relative;
    max-width:1140px;
    margin:0 auto;
    box-shadow:0 0 18px rgba(0, 0, 0, .4);
    background:#f8f8f8;
    overflow:hidden;
}
 
.page-template-template-no-sidebars-php #wrapper,
.page-template-template-blog-no-sidebars-php #wrapper,
.page-template-template-portfolio-no-sidebars-php #wrapper {
    max-width:760px;
}
 
#header {
    border-top:#111 3px solid;
}
 
#site-title a,
#site-description {
    color:#333;
}
 
#site-title,
#site-description {
    margin:0;
    font-weight:300;
    float:left;
    line-height:150px;
}
 
#site-title {
    margin: 0 3.4%;
    font-family:"Oswald", sans-serif;
    font-size:32px;
    letter-spacing:1px;
}
 
#site-title img {
    margin: 38px 0;
    vertical-align:middle;
}
 
#site-description {
    margin-left:20px;
    font-size:12px;
    font-weight:normal;
}
 
#sidebar-header {
    float:right;
    width:728px;
    height:90px;
    margin:15px 0;
    overflow:hidden;
}
 
.page-template-template-no-sidebars-php #sidebar-header {
    width:468px;
    height:60px;
    margin-top:20px;
}
 
#sidebar-header .widget {
    margin:0;
}
 
#sidebar-header .widget-title {
    margin-top:0;
}
 
#sidebar-header img {
    display:block;
    margin:0;
}
 
#header #searchform {
    float:right;
    margin:60px 3.4% 0 3px;
}
 
#header input#s {
    width: 0;
    height: 16px;
    padding:8px 16px;
    margin-right:0;
    background:#dedede url(images/search.png) right center no-repeat;
    background:rgba(0, 0, 0, .1) url(images/search.png) right center no-repeat;
    border:none;
    border-radius:24px;
    box-shadow: none;
    color:#999;
    font-size:12px;
    font-family:"Open Sans", sans-serif;
    text-indent: 16px;
    -moz-transition: width .25s ease, margin .25s ease;
    -webkit-transition: width .25s ease, margin .25s ease;
    -o-transition: width .25s ease, margin .25s ease;
    -ms-transition: width .25s ease, margin .25s ease;
    transition: width .25s ease, margin .25s ease;
}
 
#header input#s:focus {
    width:180px;
    background:#ececec url(images/search.png) right center no-repeat;
    box-shadow:inset 1px 1px 5px 1px rgba(0, 0, 0, .1);
    color:#333;
    text-indent: 0;
}
 
.widget-area #s {
    padding: 3%;
    margin: 0;
    width: 94%;
}
 
#sidebar-left #s,
#sidebar-right #s {
    max-width:88%;
    width: auto;
    padding: 6%;
}
 
input#searchsubmit {
    display:none;
    width:30px;
    padding:2px;
    margin-right:10px;
    background:#a8a8a8;
    background:-moz-linear-gradient(#CCC,#999);
    background:-webkit-linear-gradient(#CCC,#999);
    background:-o-linear-gradient(#CCC,#999);
    background:-ms-linear-gradient(#CCC,#999);
    background:linear-gradient(#CCC,#999);
    border:#999 1px solid;
    color:#333;
    text-align:center;
}
 
#social-media-icons {
    float: right;
    margin-top: 60px;
}
 
a.social-media-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    background-position: 0 0;
    overflow: hidden;
    text-indent: -1000px;
    -moz-transition: background-position .25s ease;
    -webkit-transition: background-position .25s ease;
    -o-transition: background-position .25s ease;
    -ms-transition: background-position .25s ease;
    transition: background-position .25s ease;
}
 
a.social-media-icon:hover {
    background-position: 0 -32px;
}
 
.facebook {
    background-image: url(images/facebook.png);
}
 
.twitter {
    background-image: url(images/twitter.png);
}
 
.pinterest {
    background-image: url(images/pinterest.png);
}
 
.flickr {
    background-image: url(images/flickr.png);
}
 
.vimeo {
    background-image: url(images/vimeo.png);
}
 
.youtube {
    background-image: url(images/youtube.png);
}
 
.google-plus {
    background-image: url(images/google-plus.png);
}
 
.dribble {
    background-image: url(images/dribble.png);
}
 
.linkedin {
    background-image: url(images/linkedin.png);
}
 
#header-image {
    display:block;
    max-width:99.1%;
    padding:0.45%;
    margin-bottom:1.76%;
    box-shadow:0 0 3px #999;
    background:#fff;
}

Merci

**rodolphebrd** · 30/03/2013, 20h37

Bonjour,

Déjà à première vue:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#header {
    border-top:#111 3px solid;
}

est à remplacer par

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#header {
    border-top:3px solid #111;
}

Je continue de lire.....

**winser** · 30/03/2013, 20h47

Pour vous donner un exemple concret, je voudrais que ce soit comme ça (c'est le même thème) :

http://www.vhg-cykelsport.dk/

Merci.

**rodolphebrd** · 30/03/2013, 20h57

Je ne vois pas le problème (la fatigue du Week-End?)

Essayez d'isoler le problème petit à petit en créant une bordure temporaire sur les éléments qui posent problème. Header, header-image.

Avez vous un lien vers votre site?

**winser** · 30/03/2013, 21h23

Le site est actuellement sur un serveur Local.

En fait, j'aimerai que le bloc blanc qui se trouve tout en haut où il y a écrit "Pinboard" http://demo.onedesigns.com/pinboard/

accueille une image qui fait la taille du bloc en largeur soit 1140 px comme ici : http://www.vhg-cykelsport.dk/

car pour l'instant on ne peut peut pas mette une image plus grande que 392*96, sinon la barre se déforme.

**rodolphebrd** · 30/03/2013, 21h48

Si votre "bloc blanc" ne comporte pas d'autres DIV votre image remplira naturellement l'espace.
Sinon testez en positionnant l'image en absolute.

**winser** · 31/03/2013, 13h45

J'ai réussi à mettre la bannière mais deux blocs blancs subsistent au haut de la bannière et en bas.

J'ai hébérgé le site sur un hebergeur provisoire pour vous le montrer :

http://tolkiendrim.hebergratuit.com/

**rodolphebrd** · 31/03/2013, 14h04

Enlevez les margin pour n'avoir que:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#site-title img {
vertical-align: middle;
}

**winser** · 31/03/2013, 14h24

Ca marche parfaitement ! Merci pour ton professionnalisme !

**rodolphebrd** · 31/03/2013, 14h29

De rien, je ne suis qu'un humble amateur et par la même occasion vous pouvez passez votre message en résolu.

Bon Week-end.

Ajouter une bannière

CSS

Discussions similaires

Partager

Partager