CSS et Template Joomla!

Bonjour à tous,

J'ai un petit problème pour la mise en place d'un site avec CMS Joomla!

En ce qui concerne la base du template, j'utilise le template RocketTheme Kinetic que je souhaite modifié pour être en cohérence avec la charte graphique du client.

Le problème en fait se situe au niveau des titres des différents bloc dans le template Kinetic:

Original: http://img840.imageshack.us/img840/4278/screencapturec.png

Ce que je voudrai au final: http://img825.imageshack.us/img825/9770/screencapture1g.png

Au niveau du CSS de base il y a ça:

.articletitle-color1 .rt-headline, .ribbon1 .module-title {background:url(../images/body/style8/ribbon-bg.png) 0 100% no-repeat;}

Au niveau de l'html:

<div class="rt-headline"><h1 class="rt-article-title">Joomla! Community Portal</h1></div>

En théorie ma bannière doit être en deux parties, ce qu'il faudrait c'est que mon image en forme de triangle se positionne à droite du ribbon-bg.png mais je n'ai pas trop d'idée pour mettre en pratique cela.

Si quelqu'un pourrait m'aider ce serait sympa, merci beaucoup!

C'est un peu une solution bidouille que je vais te proposer mais bon quelqu'un d'autre aura certainement une meilleure idée que moi sur ce coup là...

Je suppose que tu ne peux/veux pas toucher au template de base donc tu ne peux pas rajouter du html pour inclure un 2ème élément pour ta 2 ème image (le triangle qui finit ton ruban si j'ai bien tout suivi).
Il y a en css un pseudo sélecteur *:after sur lequel tu peux peut être jouer pour ça.

Par exemple ici tu pourrais mettre

.ribbon1 .module-title:after {content:" "; display:inline-block; background: url("triangle.png") no-repeat;width:40px; }

Après ça reste de la bidouille à adapter, le mieux serai quand même d'avoir un élément html pour mettre la fin de ton ruban. Et c'est à tester, pas sure que ça marche , Enfin si ça peut t'aider...

Salut,

Une image sur la div, une image sur le h1, avec les dimensions et les marges qui vont bien.

oliviadox a écrit :
C'est un peu une solution bidouille que je vais te proposer mais bon quelqu'un d'autre aura certainement une meilleure idée que moi sur ce coup là...

Je suppose que tu ne peux/veux pas toucher au template de base donc tu ne peux pas rajouter du html pour inclure un 2ème élément pour ta 2 ème image (le triangle qui finit ton ruban si j'ai bien tout suivi).

Je peux très bien rajouter une div si il faut, c'est juste que je voudrai que l'on puisse changer les couleurs facilement grâce aux suffixes de classe de module.

Oui une div a côté du H1 mais comment lui demander de ce positionner à côté de cet élément ?

Merci pour vos réponses,
Arzor

Pour positionner ta div juste après ton h1, un "display:inline" sur h1 et la div suivante (appelée par une class .inline par ex) devrait fonctionner.

Explication : inline = en ligne change l'élément de type bloc (comme une div) en élément de type en ligne (comme un span) donc pas de saut de ligne, les 2 éléments vont se mettre à la suite sur la même ligne.

Ou si tu as besoin d'avoir des propriétés de block (position,..) en plus du comportement inline remplace le "display:inline" par "display:inline-block"

voilà...

Bonjour à tous,

Je suis entrain d'essayer la méthode du :after qui pourrait normalement marché mais celui-ci ne se place pas en fait sur la même ligne que le bloc rt-headline de mon site.

.articletitle-color1 .rt-headline, .ribbon1 .module-title {background: url(../images/body/style8/ribbon-bg.png) 0 100% no-repeat;}
.rt-headline:after {content: url(../images/body/style8/ribbon-triangle-bg.png); display:inline-block; }

Je vous donne le lien direct vers celui-ci:

http://caad-v2.caad.fr

Merci beaucoup,
Arzor