Jump to content
bistoof

Besoin d'aide pour modification design de mon thème

Recommended Posts

Bonjour, j'ai chercher un peu partout mais je n'ai pas trouvé les réponses exactes à mes questions concernant le design de ma boutique prestashop.

 

 

Pour infos:

 

je travail sur MAC

Ma boutique est en locale

 

Je vous joint les images de ma boutique (ce que j'ai actuellement, et ce que je veux)

 

Je souhaite faire 2 modifications, dans un premier temps agrandir l'image spider homepage (qu'il prenne toute la largeur de la barre du menu haut horizontal)

 

dans un second temps, intégrer en fond de ma boutique un design que je créerai sous photoshop.

 

En rouge les modifications que j'espère pouvoir faire.

 

Si vous avez également des infos sur la taille exacte pour le design de la page du thème je suis preneur.

Merci par avance, bien cordialement.

 

Bistoof

 

 

post-738514-0-26980200-1388068952_thumb.jpg

post-738514-0-21927500-1388068964_thumb.jpg

Share this post


Link to post
Share on other sites

Suite du message...

 

Je souhaite également faire une modification dans le même style pour le bas de la page.

Je vous transfert les fichiers en PJ.

 

Toujours en rouge les modifications.

Merci.

post-738514-0-73846700-1388069863_thumb.png

post-738514-0-13075700-1388069872_thumb.jpg

Share this post


Link to post
Share on other sites

A les deux, faites des recherches avec les mots clé "header tpl" et "footer tpl" sur le forum, il me semble avoir vu plusieurs posts à ces deux sujets

Edited by CharlyAes32 (see edit history)

Share this post


Link to post
Share on other sites

Après quelques recherche, rien ne correspond à ma question.

Donnez moi l'adresse de votre site, je regarde ça rapidement si vous voulez.

Share this post


Link to post
Share on other sites

Donnez moi l'adresse de votre site, je regarde ça rapidement si vous voulez.

Mon site est en local pour le moment. Ce que je souhaite faire est en screen sur les 2 premiers topics

Share this post


Link to post
Share on other sites

Mon site est en local pour le moment. Ce que je souhaite faire est en screen sur les 2 premiers topics

Dans ce cas, utilisez Firebug (addon de Firefox) pour touver les propriétés css et les modifier. Une fois fait, vous pourrez faire les modifications dans le .css concerné et conserver vos changements.

Edited by CharlyAes32 (see edit history)

Share this post


Link to post
Share on other sites

Je vais telecharger firefox et firebug mais comment faut il faire pour obtenir le résultat que je souhaite?

Share this post


Link to post
Share on other sites

Je vais telecharger firefox et firebug mais comment faut il faire pour obtenir le résultat que je souhaite?

Dans firebug, vous pourrez selectionner des zonnes de la page que vous consultez. Une fois cliqué sur la zonne, vous verrez sur la droite, les .css avec les propriétés que vous pouvez modifier. Vous aurez même le numéro de la ligne du fichier css à modifier. Très facile donc.

Share this post


Link to post
Share on other sites

Lorsque je clique sur le head de ma page j'ai dans le css

 

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
audio, canvas, video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden] {
    display: none;
}
html {
    font-family: sans-serif;
}
body {
    margin: 0;
}
a:focus {
    outline: thin dotted;
}
a:active, a:hover {
    outline: 0 none;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
hr {
    -moz-box-sizing: content-box;
    height: 0;
}
mark {
    background: none repeat scroll 0 0 #FFFF00;
    color: #000000;
}
code, kbd, pre, samp {
    font-family: monospace,serif;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}
q {
    quotes: "“" "”" "‘" "’";
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0 none;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0;
}
fieldset {
    border: 1px solid #C0C0C0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0 none;
    padding: 0;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}
button, input {
    line-height: normal;
}
button, select {
    text-transform: none;
}
button, html input[type=button], input[type=reset], input[type=submit] {
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
input[type=checkbox], input[type=radio] {
    padding: 0;
}
input[type=search] {
    -moz-box-sizing: content-box;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}
textarea {
    overflow: auto;
    vertical-align: top;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
que faire? 

Share this post


Link to post
Share on other sites

Si vous faites pas ça sérieusement aussi... comment pouvez espérer arriver à quoique ce soit de bien ?
La première chose à faire, c'est d'apprendre comment modifier un design par css. Y a des centaines de tutos sur le net et c'est vraiment pas compliqué en utilisant firebug. Ca vous prendra 1 ou 2 jours mais une fois maitrisé, vous gagnerez un temps fou.

Dans votre cas, il s'agit simplement de jouer sur la largeur du 'slider' (et non spider) en augmentant la hauteur ("height") et la largeur ("width"). Et pour l'image de fond ("background") du header, il faut faire un background-image dessus.

Très bon tuto pour les images : http://css.mammouthland.net/image-de-fond-background-css.php

Share this post


Link to post
Share on other sites

Si vous faites pas ça sérieusement aussi... comment pouvez espérer arriver à quoique ce soit de bien ?

La première chose à faire, c'est d'apprendre comment modifier un design par css. Y a des centaines de tutos sur le net et c'est vraiment pas compliqué en utilisant firebug. Ca vous prendra 1 ou 2 jours mais une fois maitrisé, vous gagnerez un temps fou.

 

Dans votre cas, il s'agit simplement de jouer sur la largeur du 'slider' (et non spider) en augmentant la hauteur ("height") et la largeur ("width"). Et pour l'image de fond ("background") du header, il faut faire un background-image dessus.

 

Très bon tuto pour les images : http://css.mammouthland.net/image-de-fond-background-css.php

 

En effet, c'est le slider et non spider (correction automatique de safari) Je vais regarder des vidéos sur la toile ainsi que le lien que vous m'avez transmis. Merci encore.

Contactez moi en MP pour qu'on puisse se joindre par téléphone

Merci, je vais essayer seul et si je n'y arrive pas je vous envoi un MP

Share this post


Link to post
Share on other sites

Bon, grace au thème, je peux être plus précis.
Donc....

Si vous ne voulez une image que dans le header, dans le global.css; il faut rajouter à #header-inner l'attribut "background-image" (juste background marche aussi).

On passe de :

#header-inner {
    padding: 169px 0 0;
    position: relative;
}

à

#header-inner {
    background-image: url("http://www.nom-votre-site.com/themes/nom-votre-thème/css/../img/header_bg.jpg");
    padding: 169px 0 0;
    position: relative;
}

L'image appelée se trouvant dans le dossier 'img' de votre thème utilisé.

Ce qu'il faut comprendre, c'est que les noms des 'id' et des 'class' utilisés dans les fichiers.tpl, c'est qui permet de créer un code css et de l'attribuer à un endroit précis du site. (une zone)

Maintenant, pour l'image que vous nous avez montré, ce code n'ira pas. Pourquoi ?
Parce que ce #header-inner concerne seulement le header sans le menu, et de ce que j'en vois sur votre exemple, cela dépasse de ce dernier. Il faut donc choisir un id ou une class appelé avant pour englober le header.

En regardant via Firefox, je vois que le tpl de la page d'accueil est appelé comme ca (body étant l'ensemble du site) :

<body id="index" class=" ">

<div id="wrapp">
<div id="wrapp_2">
<header id="header" class="container ">
<div id="header-inner">

Cela signifie donc que header-inner est posé sur 'header', qui lui-même est posé sur wrapp_2, etc...
Pour notre image, il faudra donc l'ajouter à  #wrapp, dans le global.css de la même manière que je l'ai expliqué plus haut pour #header-inner, en ajoutant un background.

Est-ce assez clair ?

Share this post


Link to post
Share on other sites

J'ai maintenant  ce code dans mon global.css

 

/* ************************************************************************************************
HEADER
************************************************************************************************ */
#header {position:relative;z-index:101;padding:0px 0px 30px 0px;}
#header_logo {display:block;position:absolute;left:0px;top:41px;}
#header-inner{ background-image: url("http://localhost:8888/prestashop/themes/theme593/img/header_bg.png"); padding:169px 0px 0px 0px; position:relative;}
 
mais rien ne s'affiche, j'ai bien mis l'image dans img de mon thème

Share this post


Link to post
Share on other sites

 

J'ai maintenant  ce code dans mon global.css

 

/* ************************************************************************************************
HEADER
************************************************************************************************ */
#header {position:relative;z-index:101;padding:0px 0px 30px 0px;}
#header_logo {display:block;position:absolute;left:0px;top:41px;}
#header-inner{ background-image: url("http://localhost:8888/prestashop/themes/theme593/img/header_bg.png"); padding:169px 0px 0px 0px; position:relative;}
 
mais rien ne s'affiche, j'ai bien mis l'image dans img de mon thème

 

alors que le lien est viable avec l'image que j'ai choisi lorsque je clique dessus

Share this post


Link to post
Share on other sites

 

J'ai maintenant  ce code dans mon global.css

 

/* ************************************************************************************************
HEADER
************************************************************************************************ */
#header {position:relative;z-index:101;padding:0px 0px 30px 0px;}
#header_logo {display:block;position:absolute;left:0px;top:41px;}
#header-inner{ background-image: url("http://localhost:8888/prestashop/themes/theme593/img/header_bg.png"); padding:169px 0px 0px 0px; position:relative;}
 
mais rien ne s'affiche, j'ai bien mis l'image dans img de mon thème

 

Essayez avec

#header-inner{ background-image: url("../img/header_bg.png"); padding:169px 0px 0px 0px; position:relative;}

Share this post


Link to post
Share on other sites

 

Essayez avec

#header-inner{ background-image: url("../img/header_bg.png"); padding:169px 0px 0px 0px; position:relative;}

J'ai toujours la même chose, c a d aucun affichage

Share this post


Link to post
Share on other sites

En fonction du chemin de vos images, les "../img" peuvent varier. Essayez sous firebug le chemin le plus adapté.

Par ex: ../../img/header.png

Vous aurez de toute façon un aperçu pendant les modifications sous firebug

Share this post


Link to post
Share on other sites

Quand le clique sur le header avec firebug j'ai

 

<head>
 
<body id="index" class=" ">
 
<div id="wrapp">
 
<div id="wrapp_2">
 
<header id="header" class="container ">
 
<div id="header-inner">
 
<a id="header_logo" title="monlogo" href="http://localhost:8888/prestashop/">
<img class="logo" width="583" height="120" alt="monlogo" src="/prestashop/img/monlogo.jpg?1388077610">
</a>
 
<section id="search_block_top" class="header-box">
 
<script type="text/javascript">
 
<section class="blockuserinfo header-box">
 
<section id="header_user" class="blockuserinfo-cart header-box">
 
<div id="menu-wrap">
 
<script type="text/javascript">
 
<script type="text/javascript">
 
<section id="cart_block" class="block column_box exclusive">
</div>
</header>
 
<div id="columns" class="container ">
 
<div class="footer-bg-mob">
</div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

lorsque je clique sur le lien :http://localhost:8888/prestashop/ le header est transformé avec mon image mais lors du refresh de ma page classique je n'ai rien.

 

En gros, je vois le changement uniquement en cliquant sur le lien que je viens d'inscrire


C'est résolu pour le HEADER (pour l'instant) il fallait que je supprime mon historique de navigation.

Share this post


Link to post
Share on other sites

il me reste juste a trouver la solution pour faire la meme chose dans FOOTER, est ce la meme manipulation?

Share this post


Link to post
Share on other sites

il me reste juste a trouver la solution pour faire la meme chose dans FOOTER, est ce la meme manipulation?

oui

Share this post


Link to post
Share on other sites

mon FOOTER se présente de la sorte

 

************************************************************************************************
FOOTER
************************************************************************************************ */
.block.blockcms_footer{ margin-left:0;}
footer .modules{ position:relative; padding-bottom:70px;border-top:6px solid #000000; margin:0;}
footer .block h4{ font-size:17px; color:#1c1c1c; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; padding:0; margin:25px 0 15px 0; border-bottom:3px solid #000000}
footer .block h4 a{color:#1c1c1c; font-weight:bold;}
footer .block a{color:#7a7a7a;}
footer .block a:hover{color:#ff5b44;}
footer .block .list-footer li{padding:0px 0 4px 0; width:50%; float:left;}
footer .block .list-footer li a {font-size:13px; font-weight:bold; text-transform:uppercase; padding-right:5px;}
footer .block .list-footer li img{ display:none;}
footer .footer-text{ padding:0px 0 0 0;}
.bottom_footer {color:#7a7a7a;position:absolute;bottom:22px;left:0px; font-size:13px; font-weight:bold; border-top:1px solid #cccccc; width:100%; padding-top:15px;}
.bottom_footer a {color:#494949;}
.bottom_footer a:hover{color:#ff553d;}
.block.block_category_footer{ clear:both;}
.block.block_category_footer ul ul{ margin-left:20px;}
 
ou dois-je intégrer le code? et quel code? 
 
Merci

Share this post


Link to post
Share on other sites

 

mon FOOTER se présente de la sorte

 

************************************************************************************************
FOOTER
************************************************************************************************ */
.block.blockcms_footer{ margin-left:0;}
footer .modules{ position:relative; padding-bottom:70px;border-top:6px solid #000000; margin:0;}
footer .block h4{ font-size:17px; color:#1c1c1c; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; padding:0; margin:25px 0 15px 0; border-bottom:3px solid #000000}
footer .block h4 a{color:#1c1c1c; font-weight:bold;}
footer .block a{color:#7a7a7a;}
footer .block a:hover{color:#ff5b44;}
footer .block .list-footer li{padding:0px 0 4px 0; width:50%; float:left;}
footer .block .list-footer li a {font-size:13px; font-weight:bold; text-transform:uppercase; padding-right:5px;}
footer .block .list-footer li img{ display:none;}
footer .footer-text{ padding:0px 0 0 0;}
.bottom_footer {color:#7a7a7a;position:absolute;bottom:22px;left:0px; font-size:13px; font-weight:bold; border-top:1px solid #cccccc; width:100%; padding-top:15px;}
.bottom_footer a {color:#494949;}
.bottom_footer a:hover{color:#ff553d;}
.block.block_category_footer{ clear:both;}
.block.block_category_footer ul ul{ margin-left:20px;}
 
ou dois-je intégrer le code? et quel code? 
 
Merci

 

C'est un copié/collé du global.css ça?

Il sera plus simple de faire comme pour le Header, modifié en live avec Firebug et appliquer les modifications (soit à la main, soit avec CssUpdater (qui est payant mais très efficace)).

Donc c'est pas facile par posts interposés de vous expliquer en fonction de ce que vous voulez avoir...

Share this post


Link to post
Share on other sites

Alors, pour que vous compreniez où mettre l'image, c'est très simple :

1°) ouvrir la page sous firefox avec firebug
2°) dans firefug, utilisez l'outil de 'sélection' (un rectangle avec une flèche dessus)
3°) passez la souris sur la page pour voir comment elle est structurée et choisir quel 'partie' vous allez modifier par css. Ce qui est bleu au survol, c'est la zone concernée.

Vous pouvez cliquer dessus pour qu'elle soit sélectionné dans firebug.
Pour votre thème, le footer est codé ainsi (visible partie gauche firebug) :

<div class="footer-bg-mob">

<footer class="container ">
<div class="row modules">
</footer>

.footer-bg-mob {} n'existe pas dans votre .css et, .container est une 'class'.
Pourquoi . et pas # ? Parce que c'est une 'class' et pas un 'id'

Quand on regarde, il est impossible de juste ajouter une ligne.
Il faut soit ajouter dans global.css :

.footer-bg-mob {background-image : url(votreimage); width: ?px (la largeur); height: ?px (la hauteur) ;}

soit créer un 'Id' spécifique et l'ajouter au footer.tpl, ici :

<div class="footer-bg-mob">

<footer id="votre-id" class="container ">
<div class="row modules">
</footer>

puis lui donner forme par .css en l'ajoutant dans le global.css :
#votre-id {background-image : url(votreimage); width: ?px (la largeur); height: ?px (la hauteur) ;}

Les deux sont très facile à mettre en place mais avec la seconde, vous comprenez que l'on peut cumuler deux appels de .css en ayant un 'id et une 'class'.

Du coup, si on veut, par exemple, utiliser à plusieurs endroits une même image, pas besoin d'ajouter du .css à chaque fois, suffit de faire une 'class' et de l'ajouter là ou on veut dans les fichiers .tpl en plus des 'id'.
Edited by FMR (see edit history)

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

×
×
  • Create New...

Important Information

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