Artisteer pour Blogger - Ajouter espace sous Top Menu

Artisteer pour Blogger - Ajouter espace sous Top Menu - Web design - Graphisme

Marsh Posté le 11-04-2010 à 15:10:33    

Bonjour,
 
Tout est dans le titre.
 
J'utilise Artisteer pour créer mes templates Blogger et j'aime utiliser le Top Menu avec sous menus déroulants. Comme sur mon site par exemple:
http://verminedesombre.blogspot.com/
 
J'aimerais par contre ajouter de l'espace entre la barre de menu (BACK To The FRONT Bio/Contact ► - CATEGORIES - ◄ Q/A Links) et le premier article, les trouvant trop rapprochés l'un de l'autre. Je ne trouve bien spur pas cette fonction paramétrable dans le logiciel.
 
N'étant pas très pointu et le code généré par Artisteer m'ayant l'air d'une usine à gaz, quelqu'un pourrait-il m'éclairer quant à la manière de rajouter un peu d'espace entre ces deux éléments?
 
Merci d'avance.

Reply

Marsh Posté le 11-04-2010 à 15:10:33   

Reply

Marsh Posté le 11-04-2010 à 20:40:41    

Quand je vois ça :  
 
http://uppix.net/b/1/b/afd4b61ffc997c3faeb0400bd1406.jpg
 
Je me dis que tu as déjà essayé quelques trucs :D
 
Alors clairement c'est dégueulasse comme méthode mais il suffit de modifier ton 46 en ce que tu veux pour augmenter cet espace.


---------------
BnetTs3 HFR
Reply

Marsh Posté le 11-04-2010 à 20:54:55    

Heeks a écrit :

Quand je vois ça :  
 
http://uppix.net/b/1/b/afd4b61ffc9 [...] bd1406.jpg
 
Je me dis que tu as déjà essayé quelques trucs :D
 
Alors clairement c'est dégueulasse comme méthode mais il suffit de modifier ton 46 en ce que tu veux pour augmenter cet espace.


 
Sakut Heeks,
 
Ouais on a fait un peu de popotte, c'est ennuyeux l'Internet par contre, tout le monde peut venir reluquer dans nos casseroles...
 
Plus sérieusement, c'est pour l'instant ce que j'ai trouvé de plus simple et puis ma foi ça fait exactement ce que je voulais, donc...
 
Cela dit, pour l'Honneur et la préservation de l'Ordre dans l'Univers tout le monde notera bien que j'ai tout de même COMMENCE par demander s'il n'y aurait pas moyen de coder propre. Je tiens à le rappeler.
 
Bon, maintenant me reste une autre question existentielle à résoudre. J'ai un blogspot noir (http://asatura.blogspot.com/) et je n'arrive pas à savoir comment customiser la couleur de la navbar autre qu'avec les couleurs que Google propose par défaut (et bien sûr ils ne proposent pas de VRAI noir, on se demande bien pourquoi d'ailleurs).
 
En tous cas, merci de ta réponse Heeks et bonne soirée.

Reply

Marsh Posté le 11-04-2010 à 20:59:51    

c'est quoi que tu appelles la navbar ?
 
ton menu  :     * ► BlACK HOME ► - categories - ◄ about...  links
 
ou le truc blogger en haut ?
 
Edit : et faut arréter avec imageshack, c'est de la merde

Message cité 1 fois
Message édité par Heeks le 11-04-2010 à 21:00:19

---------------
BnetTs3 HFR
Reply

Marsh Posté le 11-04-2010 à 21:02:48    

Heeks a écrit :

c'est quoi que tu appelles la navbar ?
 
ton menu  :     * ► BlACK HOME ► - categories - ◄ about...  links
 
ou le truc blogger en haut ?
 
Edit : et faut arréter avec imageshack, c'est de la merde


 
 
Oui le machin en haut (Follow Share Report Abuse Next Blog») qui est certes laid mais bien pratique, raison pour laquelle j'aimerais quand même continuer à l'afficher. Mais en noir. VRAI noir. (Et si il y a de l'espoir.)

Reply

Marsh Posté le 11-04-2010 à 21:19:36    

Vermine de Sombre a écrit :


 
 
Oui le machin en haut (Follow Share Report Abuse Next Blog») qui est certes laid mais bien pratique, raison pour laquelle j'aimerais quand même continuer à l'afficher. Mais en noir. VRAI noir. (Et si il y a de l'espoir.)


 
Je suis un imbécile... Il n'y avait qu'à choisir "transparent dark" comme modèle par défaut.
 
Cela dit si un jour l'envie me prend de créer un blog rose (si c'est le cas et que vous me connaissez, tuez-moi s'il vous plaît) je me retrouverai confronté au même problème.
Donc j'imagine que la question reste ouverte...

Reply

Marsh Posté le 12-04-2010 à 09:30:45    

Vermine de Sombre a écrit :

 

Sakut Heeks,

 

Ouais on a fait un peu de popotte, c'est ennuyeux l'Internet par contre, tout le monde peut venir reluquer dans nos casseroles...

 

Plus sérieusement, c'est pour l'instant ce que j'ai trouvé de plus simple et puis ma foi ça fait exactement ce que je voulais, donc...

 

Cela dit, pour l'Honneur et la préservation de l'Ordre dans l'Univers tout le monde notera bien que j'ai tout de même COMMENCE par demander s'il n'y aurait pas moyen de coder propre. Je tiens à le rappeler.

 

Bon, maintenant me reste une autre question existentielle à résoudre. J'ai un blogspot noir (http://asatura.blogspot.com/) et je n'arrive pas à savoir comment customiser la couleur de la navbar autre qu'avec les couleurs que Google propose par défaut (et bien sûr ils ne proposent pas de VRAI noir, on se demande bien pourquoi d'ailleurs).

 

En tous cas, merci de ta réponse Heeks et bonne soirée.


Salut,
Dans http://www.blogger.com/static/v1/w [...] bundle.css tu trouves :
.art-Post {margin: 0;}
et tu remplaces par :
.art-Post {margin: 30px 0 0;}
Ca va rajouter 30px d'espace en haut de chaque post.

 

Pour la barre de nav, il suffit de la cibler et de créer/modifier sa couleur de fond:
#b-navbar {background-color: #faa;}

 

Au lieu d'aller modifier les fichier CSS, tu peux ajouter ces règles dans une nouvelle feuille que tu charges après toutes les autres. C'est pas optimisé mais vu que le code de base ne l'est pas non plus :spamafote:

 

Je te conseille d'installer firebug pour firefox  et de faire un tour sur alsacreations.com ou le site du zéro, pour apprendre un minimum de CSS/html :)

 

Message cité 1 fois
Message édité par Skopos le 12-04-2010 à 18:28:22

---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
Reply

Marsh Posté le 12-04-2010 à 19:20:24    

Skopos a écrit :


Salut,
Dans http://www.blogger.com/static/v1/w [...] bundle.css tu trouves :
.art-Post {margin: 0;}
et tu remplaces par :
.art-Post {margin: 30px 0 0;}
Ca va rajouter 30px d'espace en haut de chaque post.
 
Pour la barre de nav, il suffit de la cibler et de créer/modifier sa couleur de fond:
#b-navbar {background-color: #faa;}
 
Au lieu d'aller modifier les fichier CSS, tu peux ajouter ces règles dans une nouvelle feuille que tu charges après toutes les autres. C'est pas optimisé mais vu que le code de base ne l'est pas non plus :spamafote:
 
Je te conseille d'installer firebug pour firefox  et de faire un tour sur alsacreations.com ou le site du zéro, pour apprendre un minimum de CSS/html :)
 


 
 
Salut Skopos,
 
Désolé pour la latence, j'ai lu ton message ce matin mais n'ai pas eu une minute à moi depuis pour répondre.
 
Cela dit, j'aurais au fond pu répondre tout de suite car l'essentiel tient en 2 mots:
 
MERCI BEAUCOUP.
 
Toutes tes modifs marchent parfaitement et le padding en haut de l'article enlève même un petit caillou dans ma godasse dont je n'étais pas même sûr de l'existence. En effet quelque chose me dérangeait dans le fait que les articles soient un peu trop rapprochés les uns des autres mais je ne pensais même pas à remédier à ce problème que je faisais semblant d'ignorer.
 
Que du bon donc.
 
J'irai aussi faire un tour sur les sites que tu proposes, merci pour ces liens. Je ne garantis pas le résultat par contre... Ni mon assiduité à les fréquenter... Mais je vais essayer, promis.
 
Merci encore et excellente soirée.
 
 
 

Reply

Marsh Posté le 13-04-2010 à 14:31:40    

De rien :)

 

Le plug-in firefox (firebug) permet de voir (entre autres choses) les CSS associés à des éléments de la page simplement en cliquant dessus.
Tu peux même modifier les propriétés temporairement, c'est très pratique pour tester des changements.

Message cité 1 fois
Message édité par Skopos le 13-04-2010 à 14:32:03

---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
Reply

Marsh Posté le 13-04-2010 à 15:07:26    

Skopos a écrit :

De rien :)
 
Le plug-in firefox (firebug) permet de voir (entre autres choses) les CSS associés à des éléments de la page simplement en cliquant dessus.
Tu peux même modifier les propriétés temporairement, c'est très pratique pour tester des changements.


 
 
Hé on apprend plein de petits trucs très intéressants avec toi dis donc. Mais c'est vicieux parce que maintenant je crois que je commence à choper la customisationite aigüe.
Là tu vois par exemple, je veux rendre mon header clickable (c'est quand même un peu une honte, sur Artisteer, qui est un logiciel sympathique mais vraiment pour débutants (dit par le mec qui vient de découvrir la veille deux trois bidouilles CSS... oui je ne me sens plus) ils ne proposent même pas cette option de base, simplement rendre le header clickable... Va comprendre Charles...)
 
J'ai bien sûr cherché un peu et beaucoup de réponses concernent les thèmes sous Wordpress, pas sous Blogger comme cela m'intéresserait.
Sous Wordpress il faudrait faire ça:
 
Il faut changer le header.php de ça:  
 
<div class="art-Header">  
<div class="art-Header-jpeg"></div>  
 
--
en ça:
--
 
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">  
<div class="art-Header-jpeg"></div>  
 
 
 
Ok.  
 
Sauf que dans mon blogger template, la ligne de code du header ressemble plutôt à ce bazar:  
 
<b:section class='art-Header' id='header' maxwidgets='1' showaddelement='no'>  
<b:widget id='Header1' locked='true' title='Leangains (Header)' type='Header'>  
<b:includable id='title'>  
<a expr:href='data:blog.homepageUrl'><data:title/></a>  
</b:includable>  
<b:includable id='description'>  
<data:description/>  
</b:includable>  
<b:includable id='main'>  
<div class='art-Header-jpeg'/>  
 
 
Et comment dirais-je, je suis un peu paumé quant à où exactement coller la ligne de href...
 
 
Bref, plus on apprend de trucs, plus on a besoin d'en apprendre j'ai l'impression.
 
Mais cette dynamique n'est pas faite pour me déplaire au fond, elle tient assez du cercle vertueux.  
 
Enfin donc, merci Skopos de m'avoir refilé la maladie.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed