Easy-Design.Net forum




Aides sur les thèmes PHPBoost modification design radio animes

Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 22/03/2014 à 20h06
bon voila je suis entrain de refaire un design un peu plus adapter j'ai fait la bannière qui ci joins en dessous mais le souci c'est qui me faut une barre de menu sur 1264X30 et j'ai pas d'idée.
Si swan ou tout autre web designer veux bien m'aider sa serais gentil de sa part .



Merci

en attendant je vais m'occuper du bg ..

Et je voudrais placer cette barre sous le header comment je fait cela ?

Edit : régler Edité par Tsuna-Fa Le 23/03/2014 à 23h10
Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 22/03/2014 à 22h17
Souci N°2 : Régler

je voudrais avoir le fond noir partout alors c'est pas le cas et pourtant j'ai pas changer les dimension de celui d'origine ..



Et je voudrais plpacer cette barre sous le header comment je fait cela ?

Edit : Réponse du N°2 : En cherchant un peu sur phpboost je suis tomber sur un topic très sympa ou tout es expliquer .
j'avais juste a virée repeat-x center top en repeat tout seul ..
http://www.phpboost.com/faq/faq.php?id=10&question=124#q124
 Edité par Tsuna-Fa Le 22/03/2014 à 23h44
Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 22/03/2014 à 23h18
Souci N°3 ( plus une demande)

Je voudrais rajouter les deux fléchés haut et bas en réduisent bien entendu leur tailles que tu dispose swan afin de facilité les internautes ^^ ( et oui c'est feignent un internautes) et surtout faut pas que sa gène a la navigation des petit écran

Edit : Souci régler Edité par Tsuna-Fa Le 23/03/2014 à 13h52
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/03/2014 à 12h02
Bonjour,

Pour le soucis n°1:

Citation:
Et je voudrais placer cette barre sous le header comment je fait cela?


Ouvre ton header.tpl et tu feras le placement dans le div id=sub_header.

Pour ton soucis n°3:

il te suffit de suivre le tuto : Les flèches "back" et "top" sur votre PBt et ensuite d'adapter le tuto à ton gout.

Swan :study

swan_signature

Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 13h26
bonjour ok .. mais le souci c'est que j'ai pas d'idée pour la barre quel couleur tu verais toi chaude ou froide ??

Ouvre ton header.tpl et tu feras le placement dans le div id=sub_header. ? euh je veux bien mais tu na pas un exemple que je puisse comprendre que je dois mettre ..

Surtout comment dois l' appeler Edité par Tsuna-Fa Le 23/03/2014 à 13h54
Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 14h06
Je l'ez appeler menu.png et c'est dimension : 1264X50 donc j'aimerais savoir que je dois mettre pour qui soie bien mis après si la couleur ne va pas je peux tjrs changer c'est juste pour le placer ..
Edité par Tsuna-Fa Le 23/03/2014 à 14h23
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/03/2014 à 15h50
Pour la couleur, passe dans les chaudes , vu que tes top de mini-modules sont marron : logique ..

Le plus simple est de passer par le css .. pas directement par le header.tpl ...

Donc pour ta barre, il faut que tu la places en css dans le design.css :
Code CSS :
 
div#sub_header {
    background: url("images/menu.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
   width:1264px;
    height: 50px;
}
 


Tu devras certainement faire quelques ajustements ..

Essaie cela ^^

swan_signature

Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 16h09
oui je vais avoir besoin d'ajustement et pour régler cela je regarde sa ou ?



dois-je rajouter :
les baliseS height , right etc.. ,, (margin)

Margin right ne semble pas fonctionner .. quelque que soie le chiffre je met .

Et
maintenant la bande de couleurs chevauche le menu donc faudrait je descende tous ceci mais comment -_- .. Edité par Tsuna-Fa Le 23/03/2014 à 16h27
Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 16h35
hum donc je met quel margin pour qui aille sur la gauche etant donner que margin left n'as pas l'ère de fonctionner ..

Et pour descendre les menu un peu plus bas je fait cela comment ??



comment tu peux le voir sur le scren les menu de droit et de gauche sont dans la barre du futur menu donc faudrais que je les descende et mon autre souci dit plus haut .. Edité par Tsuna-Fa Le 23/03/2014 à 16h53
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/03/2014 à 17h03
pour une question de placement, met moi le code de ton header.tpl je veux voir ou tu as placé ton div sub_header. car le placement en css c'est bien, mais il faut voir le placement complet dans le div contenair header..

Sinon essaie le :
Code CSS :
margin-right: 20px; /* modifie la valeur */

swan_signature

Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 17h23
euh .. pas tout comprit mais je vais te mettre en fichier le header.tpl et le design .css ..

http://www.partage-facile.com/9IEB3E3ZLD/header.tpl.html ==> header tpl

http://www.partage-facile.com/AMJ8VT7TK6/design.css.html ==> design css

ceux du thème .. Edité par Tsuna-Fa Le 23/03/2014 à 17h33
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/03/2014 à 18h48
Essaie avec celui là de design.css

ouvre ton fichier, vide le et remplace par :

Code CSS :
/* --------------------------------------
*design.css
* Contient les conteneur, fortement dépendant du design.
*
--------------------------------------
* Corps du site 
--------------------------------------*/
* {
 
margin:0;    
padding:0; 
font-size:100%;
}
 
body {
background:#888e96 url(images/fond.jpg) repeat;
  font-size:12px;
  font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, 'Bitstream Vera Sans', Times, serif;
  margin:auto;
  padding:auto;
}
 
/*--------------------------------------*/
div#contenue {
width:1260px; 
margin:auto;
background: url(images/contenue.png)repeat-y scroll center top tranparent;
}
/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
/* Extensible
margin:auto 5px;
margin-bottom:15px;
*/
width:1260px;
    margin:auto;
}
 
/* ##### Entète de la page ######*/
div#header_container {
height:320px; /* 280px+50px= 320px */
width:1260px;
}   
 
div#header {
background: url(images/header.jpg) no-repeat scroll center top transparent; 
margin-bottom:0px;
height:280px; 
width:auto;
}
 
/* #####  Conteneur en dessous de l'entète ###### */
 
/*
div#sub_header {
    color: #FFFFFF;
    margin-left: 53px;
    margin-top: -32px;
    text-align: right;
    text-decoration: none;
}*/
 
 
div#sub_header {
 background: url(images/menu.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
 width:1264px;
 height: 50px;
 color: #FFFFFF;
 margin:auto;
}
 
 
div#sub_header p a, .connect_align a{
    color:#000000;
}
div#sub_header p a:hover, .connect_align a:hover {
    color:#EEEEEE;
}
 
 
/* Lien du subheader */
div#header .dynamic_menu h5.links {
    background:none;
    border:none;
    color:#2a2a2a;
    padding:5px 0px;
    font-size:11px;
    margin-right:1px;
}
 
div#header .dynamic_menu h5.links:hover {
    color:#edfff0;
    cursor:default;
    background:url(images/button_click.png) no-repeat;
}
 
div#header .dynamic_menu h5 a {
    color:#FFFFFF;
    text-decoration:none;
}
/* =:=:=:=:=:=> Rajout CsN <=:=:=:=:=:=*/
div#connected {
    color:#FFFFFF;
    text-decoration:none;
margin-top:-40px;
}
/*=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=*/
 
/* ##### Compteur de visites  ###### */
div#compteur {
font-size:12px;
    height: 18px;
margin-left: 1px;
}
/* ##### Menu de gauche ###### */
div#left_menu {
    float:left;
    width:230px;
    margin:0;
    margin-top:20px;
    margin-right:55px !important;
    margin-left:5px ;
    padding:0;
}
 
/* ##### Menu droit ###### */
div#right_menu {
    float:right;
    width:240px;
    margin:2;
    margin-top:20px;
    margin-left:15px !important;
    margin-right:5px
}
 
 
/* #####  Contenu de la page ###### */
div#main {
    width:auto;
    min-width:450px;
    overflow:hidden !important;
    height:auto !important;
    overflow:visible;
    height:1%;
    padding:0;
    margin:0;
    float:none;
margin-top:40px;
 
 
}
 
/* ##### Contenu central ###### */
div#main_content {  
width:auto; 
margin-top:-5px;  
padding:0px 33px 0 0; 
-moz-border-radius:12px;   
-khtml-border-radius:12px;   
-webkit-border-radius:12px; 
 border-radius:12px;
}
 
.main_content_borderl{
background:url(images/left_left.png) repeat-y left;
padding-left:8px;
padding-right:8px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
}
.main_content_borderr{
background:url(images/right_right.png) repeat-y right;
padding-left:0px;
padding-right:0px;
overflow:hidden !important;
height:auto !important;
overflow:visible;
height:1%;
clear:both;
 
}
.main_top_l{
margin-right:22px !important;
 
width:22px;
height:41px;
background:url(images/top_l.png) no-repeat left;
float:left;
}
.main_top_r{
margin-left:0px !important;
margin-left:-3px;
width:21px;
height:41px;
background:url(images/news.png) no-repeat right;
float:right;
}
.main_top{
height:35px;
background: url(images/top_top.png) repeat-x;
padding-top:6px;
padding-left:6px;
margin-left:22px !important;
margin-left:0px;
margin-right:21px !important;
margin-right:0px;
}
.main_bottom_l{
 
width:22px;
height:25px;
background:url(images/bottom_l.png) no-repeat left;
float:left;
margin-top:-20px;
}
.main_bottom_r{
width:22px;
height:25px;
background:url(images/bottom_r.png) no-repeat right;
float:right;
margin-top:-20px;
margin-right:8px;
}
.main_bottom{
height:25px;
background: url(images/bottom_bottom.png) repeat-x bottom;
margin-right:5px;
margin-left:22px !important;
margin-left:0px;
margin-right:28px !important;
margin-right:0px;
margin-top:-20px;
}
.contenu { /* pour la couleur du contenu */
 
background: #f6f6f6;
margin-left:10px;
margin-right:10px;
}
/* ##### Barre de lien rapide ###### */
div#links { /*width:96%;*/
    text-indent:10px;
    margin-bottom:20px;
}
 
/* ##### Emplacement au dessus de contenu de la page ###### */
div#top_contents {
margin-top:8px;
    margin-bottom:8px;
}
 
/* ##### Emplacement en dessous de contenu de la page ###### */
div#bottom_contents {
margin-top:8px;
    margin-bottom:8px;
}
 
/* ##### Bloc au dessus du pied de page ###### 
div#top_footer {
    clear:both;
    padding:0;
 
*/
 
div#top_footer {
    clear: both;
    margin-left: 31px;
    padding: 0;
}
 
/* ##### Pied de page ######*/
 
div#footer {
    background: url("images/footer.png") no-repeat scroll center center #888E96;
    height: 250px;
    margin: 0 auto auto 0;
    min-width: 100%;
    padding: 0 0 0 0;
    text-align: center;
}
div#footer span {
    color:#FFFFFF;
    font-size:10px;
}
div#footer span a {
    color:#FFFFFF;
    font-size:10px;
}
/* ##### Liens réseaux sociaux ###### */
 
div#ftr {height: 40px; padding-top: 61px;}
#facebook            {float: left ;background:url('images/facebook.png');width:50px;height:50px;margin:0px 0 0 513px;padding:0} 
#facebook:hover      {background:url('images/facebook.png');width:50px;height:50px;}
#twitter          {float: left ;background:url('images/twitter.png');width:50px;height:50px;margin:0px 0 0 2px;padding:0}
#twitter:hover      {background:url('images/twitter.png');width:50px;height:50px;}
#rss          {float: left ;background:url('images/rss.png');width:50px;height:50px;margin:0px 0 0 2px;padding:0}
#rss:hover      {background:url('images/rss.png');width:50px;height:50px;}
#google             {float: left ;background:url('images/google.png');width:50px;height:50px;margin:0px 0 0 2px;padding:0}
#google:hover    {background:url('images/google.png');width:50px;height:50px;}
 
/* ##### Liens rapides ###### */
div#links_vertical {
    display:block !important;
    display:none;
    position:fixed;
    background:url(images/vertical_menu_repeat.png) repeat-y;
    top:45%;
    margin-left:989px;
    width:27px;
    text-align:center;
    padding-left:2px;
}
 
div#links_vertical_top {
    width:29px;
    background:url(images/vertical_menu_top.png) no-repeat;
    text-align:center;
    margin-left:-2px;
    padding-top:8px;
}
 
div#links_vertical_central {
    width:27px;
    text-align:center;
    margin-left:-2px;
    padding:4px 0px;
}
 
div#links_vertical_bottom {
    width:29px;
    background:url(images/vertical_menu_bottom.png) no-repeat;
    text-align:center;
    height:32px;
    margin-left:-2px;
}
 
.bglinks {
    background:url(images/bgmenu_links.jpg) no-repeat bottom right;
    margin:0px;
    padding:0px;
    list-style-type:none;
    padding-bottom:7px;
    margin-bottom:5px;
}
 
div#gotop {
    display: block;
    position: fixed;
    right: 60px; /* Positionnement sur la droite de l'image */
    top: 150px; /* Positionnement sur la hauteur de l'image */
    z-index: 150;  /* Priorité sur les couches inférieurs de code ou d'image */
}
div#gotop a {
    background: url("images/sprite_bigNav.png") no-repeat scroll center top transparent;
    float: left;
    height: 80px; /* Hauteur de l'image */
    opacity: 0.2;  /* Réglage de l'opacité de l'image */
    width: 80px; /* Largeur de l'image */
}
div#gobottom {
    display: block;
    position: fixed;
    right: 60px; /* Positionnement sur la droite de l'image */
    top: 238px; /* Positionnement sur la hauteur de l'image */
    z-index: 150;  /* Priorité sur les couches inférieurs de code ou d'image */
}
div#gobottom a {
    background: url("images/sprite_bigNav.png") no-repeat scroll center bottom transparent;
    float: left;
    height: 80px; /* Hauteur de l'image */
    opacity: 0.2;  /* Réglage de l'opacité de l'image */
    width: 80px; /* Largeur de l'image */
}


et n’oublie pas de rafraichir tes caches.

swan_signature

Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 19h00
euh ... sa me fait cela .. tout est en noir donc plus de fond blanc ??

cache vider .. Mais a barre c'est bien mise je vais pouvoir la travailler^^



Edit : Régler Edité par Tsuna-Fa Le 23/03/2014 à 23h09
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/03/2014 à 20h58
Arf .. Une erreur de ma part ..

Dans ton design.css ligne 27 mets le s dans le mot transparent..

*Une erreur de frappe :s

swan_signature

Site web    
Tsuna-Fa Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 23/03/2014 à 22h30
régler .. pour ce souci ..

Souci N°4 :

Sur cette même barre je suis entrain d’inclure des bouton qui peux être pas mal mais voila je souci a chaque fois j'en met sa me decalle tout du menu .. je t'ez fait deux screen pour tu comprenne :

Avant le placement du bouton qui est moins grand car fait 100X40 et pour rappelle la bande de couleurs fait tant qu'a elle 1264X50



Après :




Comme tu peux le voir sur la second images sa décalle ..

EDIT : Regler Edité par Tsuna-Fa Le 24/03/2014 à 16h29
Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie