[stephan53]

#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS : 1.6.6
#~ Version du MLE si existante :
#~ Informations Système :
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonsoir à vous,


Je tripatouille dans les CSS du thème NCleanBlue de CMSMS depuis le début de l'après-midi, et je ne parviens pas à faire bouger un logo (que j'ai mis en remplacement du logo CMSMS).


Le code est, je pense, ici (CSS "layout : NCleanBlue") :

#logo a {
/* adjust according your image size */
height: 32px;
width: 283px;

/* forces full link size */
display: block;
/* this hides the text */
text-indent: -9999em;
margin-top: 50;
margin-left: 50;
/* you can set your own image here, note size adjustments */
background: url(uploads/NCleanBlue/logo_01B.gif) no-repeat left top;
}




Je mets des margin (left, top) mais cela reste sans effet. Je me disais qu'il y avait peut-être ue histoire de positionnement (absolu ?) qq part ? Mais je ne vois pas...


Il y a aussi ce bout de code lié au logo, dans la feuille CSS NCleanBlue :

{* Start Header, with logo image that links to the default start page *}
<div id="header" class="util-clearfix">
{* logo image that links to the default start page. Logo image is changed in the style sheet "Layout: NCleanBlue" *}
<div id="logo" class="core-float-left">
{cms_selflink lang='fr' dir="start" text="$sitename"}
</div>



Remarque : j'ai le même problème (mais pour des raisons sûrement différentes ), avec mon contenu général des pages : ce contenu peut bouger en largeur, mais reste "scotché" à environ 300 px de la bordure gauche de l'écran... (me donne l'impression suite à la lecture du code qu'il est en fait à côté d'un menu à sa gauche, mais invisible - ?)


Merci de votre coup de main

[bess]

le logo dans ton cas est représenté par une image en fond de la div nommée "logo"

faire bouger ton logo reviens donc
-> à modifier la taille de la div pour l'adapter à la taille de l'image logo_01B.gif dans un premier temps
-> à jouer sur les propriétés de la div "logo" pour la déplacer dans son espace.

Pour bien faire ca facilement, suis le tuto que j'ai fait sur Firebug si tu ne la pas déjà installé sur firefox. Ca t'aidera beaucoup.

http://www.cmsmadesimple.fr/forum/viewtopic.php?id=1411

[stephan53]

Salut.

Je suis ok sur la méthode (firebug - que j'ai déjà, même si par défaut je bosse avec IE), et ok pour le redimensionnement que j'ai déjà effectué hier et qui ne pose pas de problème particulier.

Mais mon soucis est que ce logo reste fixé, comme s'il avait un attribut de positionnement qui l'empêche de bouger (mais attribut que je ne trouve pas).

Ma piste reste toujours ça :
<div id="logo" class="core-float-left">
{cms_selflink lang='fr' dir="start" text="$sitename"}
</div>

Cette classe class="core-float-left" peut donner une indication comme quoi cet élément "logo" est flottant à gauche (float left), non ?



Ca se passe à ce niveau je pense, mais je n'arrive pas à aller plus loin dans mon analyse...

[bess]

ouais il y a un float left qui peut être vérifié par firebug justement.

Pour l'enlever je te conseil de retirer carrement l'appel à la classe et la remplacer par ta propre classe personnalisé

<div id="logo" class="maclasse">
{cms_selflink lang='fr' dir="start" text="$sitename"}
</div>

[Jean le Chauve]

Il y a surtout ceci : background: url(uploads/NCleanBlue/logo_01B.gif) no-repeat left top;
Le left et le top indiquent que le logo sera inséré en haut à gauche.

[bess]

oui Jean le Chauve mais en haut a gauche de la div.

Si tu déplace la div ....

les deux méthodes restent donc valable

[stephan53]

Merci à vous 2.



Bien vu pour le left top, mais pour le moment l'ôter ne change pas l'emplacement du logo. Par contre si je bidouille avec la class, j'obtiens des trucs. Donc je pense comme Bess que la priorité reste le traitement de cette Div.

Ceci dit ce n 'est pas simple de toucher au classes. En créant ma propre classe du coup le menu sous le logo descend d'environ 100 px tandis que le logo ne bouge pas.
-> L'attribut class="core-float-left" est appliqué sur le logo mais aussi 3 autres endroits dans le CSS :

{* first foot menu *}
<div class="block core-float-left">
{menu template='minimal_menu.tpl' number_of_levels='1'}
</div>

{* second foot menu if active page has children *}
<div class="block core-float-left">
{menu template='minimal_menu.tpl' start_level="2"}
</div>

{* edit the footer in the Global Content Block called "footer" *}
<div class="block cms core-float-left">
{global_content name='footer'}
</div>

D'où sans doute ce menu qui du coup bouge ?



Je me suis amusé à remplacer aussi class="core-float-left" par class="core-float-right" et évidemment là le logo se bloque en haut... à droite !



Bref pour le moment je patauge encore pas mal en fait

[stephan53]

Ca fait 3 mois que je potasse les CSS, mais c'est vrai qu'avec les class, je ne suis pas trop à l'aise...

Le truc que je comprends mal : le développeur a créé ses class, qu'il a appelé "noyau flotte à gauche" et "noyau flotte à droite". Ok... Mais il y a bien un endroit où il a été obligé d'écrire les paramètres qui font que ça flotte à droite ou à gauche, non ? C'est ça que je ne parviens pas à retrouver dans les feuilles de style...

[bess]

oui, il aurait même pu les appeler "connerieDeClasse" et "SuperMan", ca aurait fait la même chose car ce n'est pas le nom qui importe mais bien sa déclaration dans le fichier de CSS.

Pour trouver cette déclaration tu peux aller voir dans les feuilles de style de cmsms, elles s'y trouvent. Mais je te conseil pas de modifier ces déclarations, elles sont très bien comme ca.

Si l'appel à la classe core-float-left ne te plais pas, tu la vire et la remplace par la tienne (sa déclaration sera vide à la base évidement)

Après cela il va te falloir spécifier toi même les attribut de ta nouvelle classe : height / width / margin / padding /...

Si tu t'en sors pas sur ce point, je ne pourrais hélas que te conseiller de continuer à te former et à utiliser Firebug car on ne distribue pas de cours CSS à qui que ce soit

[stephan53]

"Après cela il va te falloir spécifier toi même les attribut de ta nouvelle classe : height / width / margin / padding /..."
Oui, pas de problème pour ça...

Juste une question pour terminer là-dessus :

Comme je disais plus haut en mettant ma propre classe, cela avait contribué à déplacer le menu principal. Est-ce que par conséquent c'est en fait sa "réelle" place dans le flux qu'il trouve là (et que c'est bien la classe créée par le designer qui l'avait déplacé - ou plutôt poussé vers le haut) ?

[bess]

sans boule de cristal je peux rien dire, firebug oui

relis le tuto que j'avais fait, de mémoire je fais mention à la hiérarchie des classes et l'implication en cascade qu'une classe peut avoir sur une autre ... et surtout comment le repérer avec Firebug

[Jean le Chauve]

Bien vu pour le left top, mais pour le moment l'ôter ne change pas l'emplacement du logo.

Rien de plus logique puisque ce sont les valeurs par défaut :lol:
Essaie ceci :
background-image : url(uploads/NCleanBlue/logo_01B.gif);
background-repeat:no-repeat;
background-attachement:fixed; (c'est pour FF et Opéra)
background-position : 50px 100px;// c'est ici que tu modifies

[stephan53]

J'y ai cru, mais malheureusement rien à faire quoique je tente :

backround-position : 50px 100px;
ou backround-position : 150px 300px;
ou backround-position : 50% 50%;

... ce damné logo reste fiché en haut à gauche ! Tout comme pas mal d'éléments de ce style...

[Jean le Chauve]

backround ou background ?

[stephan53]

Mais oui... :o


Du coup il faut que je joue avec les paramètres height et width


Ce qui me donne au final (avec un background-position : 22px 13px :


#logo a {
/* adjust according your image size */
height: 45px;
width: 383px;

/* forces full link size */
display: block;
/* this hides the text */
text-indent: -9999em;
margin-top: 50;
margin-left: 50;

/* you can set your own image here, note size adjustments */
background: url(uploads/images/logo_01B.gif) no-repeat;
background-attachement:fixed;
background-position : 22px 13px;
}



Un grand merci à vous 2

[Jean le Chauve]

Content pour toi. Je te conseille vivement de toujours utiliser FF et son firebug pour développer un site. Tu aurais immédiatement remarqué que FireBug ne prenait pas en compte backround, ce qui t'aurait immanquablement mit la puce à l'oreille.
N'oublie pas de TOUJOURS vérifier la validité de ta structure html avant de travailler sur les css. Tu économiseras beaucoup de temps, une balise mal fermée causant des erreurs en cascade dans la mise en page.

[stephan53]

Oui je retiens le conseil, merci.

Il va falloir aussi que je revoie les propriétés CSS :
height
width
text-indent
margin-top
margin-left
...parce que leurs comportements sont à des kilomètres de ce que j'en avais compris, en tous cas sur ce cas pratique-là...

[stephan53]

J'en reviens malgré tout à une question que je me posais au départ du topic :
il me semble qu'il y a des feuilles de style que je ne parviens pas à retrouver dans le gestionnaire des styles et/ou feuilles de styles de CMSMS.

Avec firebug, j'arrive à les voir. Elles ont des url de ce type :

http://localhost/cms_made_simple/monsite...ype=screen
( xx = nombre à 2 chiffres)

C'est dans ces feuilles que je vois les "blocs", les flottants, les choix des polices, etc... Mais comment y avoir accès dans le tableau de CMSMS ?

[Jean le Chauve]

Elles se trouvent physiquement ici : ton domaine/admin/themes/NCleanGrey/css
Et pour savoir comment utiliser les css : http://www.w3schools.com/css/css_background.asp
Site officiel et très pratique, il y a même un bac à sable (try it out). A garder dans tes favoris.

[stephan53]

Merci pour le lien. Effectivement, très pratique pour se remémorer certaines choses



Pour en revenir aux CSS :

Ces 3 fichiers (style.css, style-rtl.css et ie6.css) sont bien non-modifiables via le panneau de controle de CMSMS, et seulement manuellement (et à ses risques et périls) ?

Ce qui limite les possibilités d'édition via un template existant en fait. Le mieux étant de créer soi-même son template... Non ?