Jump to content

rendre le block catégorie plus large et les liens en horizontale?


Recommended Posts

Bonjour

Je cherche a savoir comment faire pour rendre mon block catégorie pour large et les liens en longueur et non pas l'un au dessus de l'autre
en fait j'ai mis mon block catégorie dans le header et je lui ai mis une image d'arriere plan
je voudrais qu'il prenne toute la longueur de la page
et une hauteur assez suffisante pour qu'on puisse voir l'image d'arriere plan
et comment faire pour ne pas mettre les liens catégorie en ul li mais en align: inline

quelqu'un a surement pensé a ca?
sinon au pire des cas comment redirigé le css tu block catégorie dans un css a part le global.css
comme ca le css s'apliquera que a ce block
car dans glogal quand je fais des changement des les block ca s'applique a tout les autres block
merci

9560_U7gKncAP40CibdCIgFeb_t

Share this post


Link to post
Share on other sites

Bonjour

Pour élargir le block catégorie faut le faire dans le css.
Le menu lui est fait avec li et ul, pour mettre a l'horizontale utiliser autre balise que li ou ul
Le mieux est de mettre un module avec le menu horizontale, la longueur peut aussi se régler, pour occuper toute la largeur ou juste une partie de la largeur.

Dans la liste des modules il y a plusieurs menus horizontaux. Et les mêmes liens que dans le menu categorie classique seras repris dans l'horizontale.
Après pour le dessin ou couleur ou image de fond, hauteur, largeur sont modifiables au niveau du css.

Share this post


Link to post
Share on other sites

bonjour,

si tu veux modifier ton bloc catégories sans toucher aux autres blocs il suffit de lui affecter une class ou un div particulier

par exemple édite le fichier blockcategories.tpl du dossier blockcategories du dossier modules. tu y verras la ligne



son design est donc contrôlé par le div categories_block_left et la class block. or ce n'est pas le seul à utiliser la class block (d'où l'utilité d'une class) c'est pourquoi quand tu modifies les propriétés de cette class tous les blocs qui l'utilisent sont modifiés. tu peux par exemple enlever
class="block"
puis tout gérer grâce au div categories_block_left.

je sais pas si c'est très clair mais c'est toujours utile à comprendre

Share this post


Link to post
Share on other sites

Bonjour

Ce que dit Trolet peut-être une solution mais si t'y connais pas trop dans le css tpl et cie
je te propose la solution suivante, tu laisse ton header vide (le logo, devise, lien permanent, et recherche) si tu veux pas utiliser ces modules tu les désactives dans l'interface d'administration Module et désinstaller.

Puis dans le fichier css du thème (prestashop/theme/tontheme/global.css)
et là-dedans tu as l'IDs qui commence par un dièse #header (ligne 192 selon mon logiciel de css) tu as height:130px; à la place de 130 tu mets 50 si c'est trop haut tu peux toujours descendre, il faut modifier sauvegarder sans fermer le fichier, puis afficher via navigateur.

Share this post


Link to post
Share on other sites

non mais ce que je cherche a faire c est mettre mon bloc catégorie dans le top de ma page , pas dans le heaser
je l'ai greffer dans le top of pages ca me va par contre comme trolet la dis c'est c eque je veux faire
appliquer un css juste pour ce bloc catégorie sans affecter les autres
mais je vais tester sa solution et je vous dirais
merci

Share this post


Link to post
Share on other sites

bonjour Trolet
j'ai essayer de changer block par block1 et dans global css
jai écrit un nouveaux css pour block1
rien a faire tout le reste de ma page change aussi
ce que je voudrais arriver a faire c'est mettre un css juste pour ce block catégorie
normalement en changeant block par block1 il dois apeller le css de block1! mais ca marche pas
je devrais pas changer categories_block_left en le renommant aussi non?
j'ai pas trouver de solution

Share this post


Link to post
Share on other sites

bonjour,

ça ne sert à rien de changer categories_block_left puisque c'est un id donc c'est unique. Ainsi cela ne s'adresse qu'à ce bloc. Il faut que tu voies avec Fireburg notamment ce qui contrôle le design de ton bloc (cela vient peut-être de la class block_content)

mais je viens de jeter un œil la largeur des blocs est gérée par la ligne du global.css :

div.block {width:191px;}


donc si tu as mis
normalement avec
div.block1 {width:500px;}
ça devrait te donner une largeur de 500px (ou autre tu mets ce que tu veux).

Après il faut voir pour les images : l'image du haut du block est gérée par la ligne
div.block h4 {
background:transparent url(../img/block_header.gif) no-repeat scroll left top;
donc elle dépend de la class block,
celle de fond par :
div.block .block_content {background:#F1F2F4 url(../img/block_bg.jpg) repeat-x scroll left bottom;
donc elle dépend des class block et block_content
et celle du bas par
#left_column div.block, #right_column div.block {background:transparent url(../img/block_footer.gif) no-repeat scroll left bottom;
donc dépend de la class block

voili voilou

Share this post


Link to post
Share on other sites

j'ai presque terminer j'ai suivi ce que tu as dis
j'ai créer un css juste pour block je l'ai nommer block1 ca marche impec
par contre j'ai qu'une catégorie a afficher c nickel mais quand j'affiche le reste des catégories elles s'interpose c 'est normal
le block catégori est gérer avec des ul et il

mais pourtant j'ai mis dans block 1 un display inline ca marche pas

div.block1 li {
   padding: 90px;
   position:absolute;
   left:240px;
   list-style-position: outside;
                                                display: inline;

}



le resultat est que mes catégorie s'affiche en ligne
je n'ai pas de sous catégorie(pas encore du moins)
je sais que je dois faire un display:inline mais ou?
merci de m'aidez

9626_yX4VojFbj65WQs3wg4kQ_t

9627_UdebI6bs5B0lvqmFToLk_t

Share this post


Link to post
Share on other sites

j’ai suivi ce que tu as dis
ça fait plaisir (autosatisfaction mal réprimée)

ce qui serait pas mal c'est d'avoir un exemple en ligne est ce que tu travailles en local ?

en gros si j'ai compris tu veux mettre tes catégories sur une même ligne. c'est dur de t'aider sans support mais essaie peut-être un float:left sut les li mais pas convaincu

sinon il existe un module pour mettre les catégories en horizontale en css ça se passe sur le site de Cédric Girard ici tu peux peut-être l'adapter à ce que tu veux

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More