Jump to content

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

bistoof

By bistoof
in PrestaShop pour les développeurs

 Share

Recommended Posts

bistoof Newbie

bistoof

Posted
Posted

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

Link to comment
Share on other sites
CharlyAes32 Newbie

CharlyAes32

Posted
Posted (edited)

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)
Link to comment
Share on other sites
CharlyAes32 Newbie

CharlyAes32

Posted
Posted

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.

Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

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? 
Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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

Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

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

Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted

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 ?
Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

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
Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

 

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

Link to comment
Share on other sites
CharlyAes32 Newbie

CharlyAes32

Posted
Posted

 

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;}
Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

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>
Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
bistoof Newbie

bistoof

Posted
  • Author
Posted

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
Link to comment
Share on other sites
CharlyAes32 Newbie

CharlyAes32

Posted
Posted

 

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...

Link to comment
Share on other sites
FMR Newbie

FMR

Posted
Posted (edited)

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)
Link to comment
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
Go to topic listing
×
×
  • Create New...