Multiples modifications sur le bandeau d'annonce

[Momie0]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sacu.forumactif.com/

Description du problème

Bonsoir,
je souhaiterais si cela est possible faire de multiples modifications sur le bandeau du message d'annonce défilant.
Je précise que ce bandeau est déjà créé et activé.

- Créer un espace modifiable entre la barre de navigation et le bandeau, car trop collé entre eux et moyen côté visuel.
- Pouvoir ajuster le bandeau sur sa hauteur.
- Pouvoir ajuster le bandeau sur sa largeur(longueur).
- Pouvoir changer la couleur de fond du bandeau.
- Créer un cadre de couleur (différent du fond) autour du bandeau + ou - "épais".
- Centrer le bandeau.
- Créer un espace modifiable entre le bandeau et le dessous, pub pour l'instant.

Voilà, je sais que cela représente du travail et que je vous en demande beaucoup.
Si vous disposez d'un peu de temps à me consacrez ...
Par avance, Merci à vous pour l'aide que vous pourrez me fournir, même partielle ...

Bonne soirée.

Cordialement.

[Momie0]

Bonjour,

- Pouvoir ajuster le bandeau sur sa hauteur.

J'ai trouvé pour cette question, cela se trouve dans les options de : Panneau d'Administration => Général => Messages et Emails => Annonces
Sinon par défaut la hauteur est en mode auto-ajustement.

Par avance, Merci pour l'aide que vous pourriez me donner pour le reste.

Bonne journée.

Cordialement

[Momie0]

Re, j'ai trouvé pour ajuster la largeur du bandeau, j'ai ajouté ce code dans le CSS :

Code:

#fa_ticker_block
{
width:800px;
}

Par contre je ne sais pas faire pour centrer le bandeau, par défaut maintenant il est collé a gauche.

Par avance, Merci à vous.

... Cordialement

[Bipo]

Bonjour Momie0,

- Créer un espace modifiable entre la barre de navigation et le bandeau, car trop collé entre eux et moyen côté visuel.

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

#fa_ticker_block{
margin-top: 4px;
}

Changez le chiffre 4 par la taille de l'espacement souhaité.

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

- Pouvoir ajuster le bandeau sur sa hauteur.

Vu.

- Pouvoir ajuster le bandeau sur sa largeur(longueur).

Vu.

- Pouvoir changer la couleur de fond du bandeau.

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

#fa_ticker_container {
background-color: #D70000;
}

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

- Créer un cadre de couleur (différent du fond) autour du bandeau + ou - "épais".

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

#fa_ticker_container {
border: 2px solid #123456;
border-radius: 5px;
}

Le chiffre 2 peut être modifié pour épaissir le cadre. La valeur #123456 renvoie à la couleur du cadre. Enfin, l'élément border-radius permet d'arrondir les bords de l'encadrement. Je me suis proposé de vous ajouter cette modification afin de faire un rappel avec les bords arrondis de votre barre de navigation.

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

- Centrer le bandeau.

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

#fa_ticker_block{
margin: 0 auto;
}

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

- Créer un espace modifiable entre le bandeau et le dessous, pub pour l'instant.

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

#fa_ticker_block{
margin-top 4px:
}

Changez le chiffre 4 par la taille de l'espacement souhaité.

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

---

Bonne journée.
Bipo.

[Momie0]

Bonjour Bipo, Merci à vous pour toutes ces réponses.
C'est super sympa !
Bien vu pour les bords arrondis, je n'y avait pas pensé ...

Désolé de vous embêter encore un peu mais j'ai 2 petits soucis, je n'arrive pas à me débarrasser d'un cadre gris autour du bandeau
et l'espace au-dessus et au-dessous du bandeau ne semble pas fonctionner, je ne vois pas l'espace bouger même en changeant la valeur.



Je vous met mon code CSS intégral, peut-être que j'ai fait une erreur dedans :
Pour l'instant il n'y a que le code espace pour le dessus dedans.

Code:

/* Creation espace entre les boutons (menu) */
a.mainmenu{
margin: 0px 3px 0px 3px;
}

/* Supression du module recherche (menu) */
.search-box, #search-box {
  display: none;
}
 
/* Supression barre blanche (menu) */
ul.navlinks {
border-bottom: none;
}
 
/* Personnalisation du menu (index) */
#page-header .navbar{
  background-color: #FFFFFF;
  height : 40px;
  margin: 0 auto;
  width: max-content;
}

/* Personnalisation du bandeau - Espace + Centrer + Largeur */
#fa_ticker_block {
margin-top: 4px;
margin: 0 auto;
width:850px;
}

/* Personnalisation du bandeau - Couleur de fond + cadre */
#fa_ticker_container {
background-color: #F6E497;
border: 2px solid #BD8D46;
border-radius: 5px;
}

Merci à vous.

[Bipo]

Re,

En effet, j'ai oublié une consigne dans le CSS ! Je vous laisse supprimer /* Personnalisation du bandeau - Espace + Centrer + Largeur */ pour ce code :

Code:

/* Personnalisation du bandeau - Espace + Centrer + Largeur */
#fa_ticker_block {
margin-bottom: 45px !important;
margin-top: 45px !important;
margin: 0 auto;
width:850px;
}

Il faudrait modifier le nombre 45 par la largeur souhaitée

Ensuite, pour le contour, il faut ajouter ce code dans votre CSS :

Code:

/* Personnalisation du bandeau - (module) */
#fa_ticker_block .module {
background-color: transparent;
}

Normalement, tout devrait être bon
Bipo.

[Momie0]

Re, un grand Merci à vous Bipo.
C'est nickel et super propre.
Merci encore une fois pour le temps que vous avez passé sur mon post multiple.

Je vous souhaite une agréable soirée.

Cordialement.