Jump to content

Slider et autres blocs de la top column inversés

Santolinea
 Share

Recommended Posts

Santolinea Newbie

Santolinea

Posted
Posted

Suite à des modifs, le slider de ma page d'accueil se retrouve situé SOUS les autres contenus de la top column.
Voir screen shot en fichier joint.

 

En examinant le code sous Firefox je peux constater l'inversion :

    <div id="htmlcontent_top">
        <ul class="htmlcontent-home clearfix row">
            <li class="htmlcontent-item-1 col-xs-4">
                <a class="item-link" title="Real estate photography" href="photographie-immobiliere-services"></a>
                <div class="item-html"></div>
            </li>
        </ul>
    </div>
    <!--  Module HomeSlider -->
    <div id="homepage-slider"></div>
    <!--  /Module HomeSlider -->
 

Je n'arrive pas à remettre le slider à gauche et les autres contenants à droite, malgré ré-install des éléments concernés.

Je suppose que je dois toucher au code ou aux tables, mais comment ?

QQun pour m'aider ?

post-476478-0-76519400-1397551698_thumb.jpg

Link to comment
Share on other sites
ChDUP Newbie

ChDUP

Posted
Posted

ah d'accord.

 

plusieurs choses à modifier.

déjà, attribuer un float:left; et un width:350px; sur #htmlcontent_top

 

Le texte et le slide vont se retrouver sur la même "ligne"

Ensuite, inverser leur position dans modules/positions pour que le texte soit en second

 

Après il va falloir jouer sur tout ça pour garder le responsive, suivant les largeurs de votre affichage.

  • Like 1
Link to comment
Share on other sites
Santolinea Newbie

Santolinea

Posted
  • Author
Posted

Merci ChDUP, mais ... je ne m'en sors pas :

 

- je suis néophyte, je sais ce que signifie "float:left; et un width:350px", mais je ne sais pas dans quel fichier trouver #htmlcontent_top

 

- dans modules/positions, displayHeader, le module Diaporama/Slider se trouve en toute dernière position, mais le module "Configurateur de thème" qui m'a permis d'entrer le bloc de texte, ne figure pas dans DisplayHeader, mais dans displayHomeTab.

.Impossible donc de jouer sur sa position !

 

Et malheureusement je ne comprens pas "garder le responsive".

 

Bon alors si qqun a la patience de m'expliquer...

Link to comment
Share on other sites
ChDUP Newbie

ChDUP

Posted
Posted

vous pouvez ajouter en bas de themes/luminans/css/global.css

#htmlcontent_top {
float:left;
width:350px;
}

Pour les positions, il faudrait voir pour greffer Diaporama/Slider sur le hook displayHomeTab.

Mais ça va être difficile de vous expliquer tout ça ici.

 

ce que je veux dire par "garder le responsive", c'est que par exemple avec le code ci-dessous, je vous fait mettre une largeur fixe à htmlcontent_top. Cette largeur ne s'adaptera pas aux différentes resolutions des écrans : portable, tablette....

Et il faudrait d'ailleurs sur des petites écrans enlever le float:left pour que ces 2 blocs se retrouvent l'un en dessous de l'autre.

Je vous laisse vous renseigner sur les media queries pour comprendre tout cela.

  • Like 1
Link to comment
Share on other sites
  • 2 months later...
Guid Newbie

Guid

Posted
Posted

vous pouvez ajouter en bas de themes/luminans/css/global.css

#htmlcontent_top {
float:left;
width:350px;
}

Pour les positions, il faudrait voir pour greffer Diaporama/Slider sur le hook displayHomeTab.

Mais ça va être difficile de vous expliquer tout ça ici.

 

ce que je veux dire par "garder le responsive", c'est que par exemple avec le code ci-dessous, je vous fait mettre une largeur fixe à htmlcontent_top. Cette largeur ne s'adaptera pas aux différentes resolutions des écrans : portable, tablette....

Et il faudrait d'ailleurs sur des petites écrans enlever le float:left pour que ces 2 blocs se retrouvent l'un en dessous de l'autre.

Je vous laisse vous renseigner sur les media queries pour comprendre tout cela.

Bonsoir, aidez moi svp!

 

J'essai de placer une contentbox (contenb1) a droite du homeslider.

(antérieurment désactiver les 2 images via le back office, theme config.)

 

url: http://sitetest.esy.es/

 

Je tournes en rond... aidez moi svp!

Link to comment
Share on other sites
S-HAMMANI Newbie

S-HAMMANI

Posted
Posted (edited)

Bonjour

 

tu peux tester ces modifications:

/themes/default-bootstrap/css/modules/homeslider/homeslider.css

 

#homepage-slider{

       max-width: 75%;

}

 

et

 

dans global.css ajoute ce code en bas de fichier ou dans le fichier css du module contentb1

 

#contentb1{

       float:left;

       width: 25%;

}

 

après tu peux supprimer ces propriètés CSS du div qui suit le div#contentb1 (bloc principal du module)

 

min-width: 30%;
width: 200px;
left: 393px;
padding: 10px 15px;

Edited by S-HAMMANI (see edit history)
  • Like 1
Link to comment
Share on other sites
Guid Newbie

Guid

Posted
Posted

tu peux poster le code css du module (contentb1) ?

Bonjour S-HAMMANI!

 

Merci bien pour ton aide!

 

Je vais encore reessayer  et avec clear cache clear cookies et je reviendrais te le dire...

Link to comment
Share on other sites
Guid Newbie

Guid

Posted
Posted
Salut S-HAMMANI!

 

Alors aprés chercher sur forum et autres (avant de revenir t'embêter a nouveau...)

 

Aprés avoir fais ce que tu m'a dis... a plusieurs reprise j'avais toujours comme resultat l'image du haut (post#11).

 

Alors j'ai suivis ce que tu as dis et ajouter quelques modifications, c'est a dire:

 

ces modifications (comme tu m'a dis):

/themes/default-bootstrap/css/modules/homeslider/homeslider.css

 

#homepage-slider{

       max-width: 75%;

}

 

dans global.css ajouter ce code en bas de fichier (comme tu m'a dis):

 

#contentb1{

       float:left;

       width: 25%;

}

mais curieusement ça ne marche pas... je dois mettre float:left; dans le div du bloc principal du module pour que ça marche:

 

mon CSS du div#contentb1 (bloc principal du module):

<div style="float: left; max-width: 100%; width: 290px; height: px; min-height: 290px; margin-right: 0px; margin-left: 0px; margin-bottom: 10px; background-color: #c10a6a; text-align: center; border: 5px groove black; padding: 10px 15px 10px 15px;">

 

Ces modif. sont presente sur la version francaise du site.

 

J'aimerais encore deplacer le slider a gauche, et reduire l'espace existant entre le slider et le module contenb1? 

 

MERCI POUR TON AIDE

Link to comment
Share on other sites
S-HAMMANI Newbie

S-HAMMANI

Posted
Posted

Bonjour;

 

J'ai bien tester ton code sur la version française mais il manque quelques qlq modifications à corriger

 

pour le div principale il manque un float:left !important;

 

div#contentb1{

      float: left !important;

      width: 350px;

      margin-left: 30px;

}

et le premier div enfant

div#contentb1 > div:first-child{

      width: 350px;

}

 

Bonne chance !!

  • Like 1
Link to comment
Share on other sites
Guid Newbie

Guid

Posted
Posted

Bonjour;

 

J'ai bien tester ton code sur la version française mais il manque quelques qlq modifications à corriger

 

pour le div principale il manque un float:left !important;

 

div#contentb1{

      float: left !important;

      width: 350px;

      margin-left: 30px;

}

et le premier div enfant

div#contentb1 > div:first-child{

      width: 350px;

}

 

Bonne chance !!

Bonsoir S-HAMMANI!

Merci bien pour ton aide, vraiment!

 

Alors...

et le premier div enfant

div#contentb1 > div:first-child{

      width: 350px;

}

mais dans quel fichier, le global css du theme? et ajouter ou changer ceci (s'il y est déjà)?

Link to comment
Share on other sites
S-HAMMANI Newbie

S-HAMMANI

Posted
Posted

Re:

Dans le fichier {site}/modules/contentbox/contentbox.tpl

remplacer:

<!-- emotionLoop custom module : contentBox -->
<div id="contentBox" class="contentBox">
    {$content}
</div>
<!-- /emotionLoop custom module -->

Par:

 

<!-- emotionLoop custom module : contentBox -->

<div id="contentBox" class="contentBox" style="float: left; margin-left: 30px; width: 350px;">     

      {$content}

</div>

<!-- /emotionLoop custom module -->

  • Like 1
Link to comment
Share on other sites
S-HAMMANI Newbie

S-HAMMANI

Posted
Posted (edited)

Deuxième solution:

I - BO > modules

        1 - installer le module ContentBox

        2 - Dégriffer le module "ContentBox" du displayLeftColumn

        3 - Dégriffer le module "Configurateur de thème" du displayTopColumn

        4 - Greffer le module "ContentBox" au displayTopColumn

II - Edition des fichiers:

        1 - dans le fichier {SITE}/themes/default-bootstrap/css/modules/homeslider/homeslider.css

        modifier le max-width du homepage-slider:
        #homepage-slider{
                ...
                max-width: 66.6666%;
                ....
        }

        2 - {SITE}/modules/contentbox/contentbox.tpl
            ajouter la class col-xs-4 au bloc principale:

            <div id="contentBox" class="contentBox col-xs-4">
                {$content}
          </div>

Edited by S-HAMMANI (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 3 years later...
saluluch Newbie

saluluch

Posted
Posted

Bonjour,

 

je sais que ce post date un peu mais je rencontre une difficulté similaire. 

 

J'aimerais utiliser le CONFIGURATEUR DE THÈME (V.2.1.2) pour mon presta 1.6 avec defaultbootstrap afin d afficher des encarts de mes catégories

Je veux mettre deux blocs cotes à cotes qui font 580x142 px 

Mais lorsque je valide, mes deux blocs se mettent côte à côte mais leur taille diminue.

Je vois que lorsque je vais dans "inspecter" sous chrome, que je me mets sur la ligne #htmlcontent_home > ul > li.htmlcontent-item-1.col-xs-4  et que dans la console de droite je décoche la case:

.col-xs-4 {

    width: 33.33333%;
 
je suis parfait.
 
Mais impossible de savoir comment le faire dans le code.
 
J'aimerais malgré tout garder le responsive si possible...
 
Merci de votre aide
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...