Theme création avec aide de Zoltatem

[Invité]

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.

Connexion avec identifiant et mot de passe

[krysto31]

  Je reposte ici le message pour satifaire tout le monde

Re krysto31

Malgré cette précision, je ne comprends pas ton design 

Je crois qu'il y a un mélange entre les 2 sites plus tes nouvelles images, etc...
Je n'arrive pas à structurer ton design, c'est possible pour toi de me produire un montage du résultat final ?
Je ne demande pas une perfection, fais moi seulement un montage grossièrement visible. J'ai simplement besoin d'un exemple.


@+

Re Zoltatem,
le thème qui si prêterait bien est celui par défaut de pragmaMx.org avec quelques modifs.

Voila ci-dessus la capture.
Infos en détail sur la capture.
Les titres des boites devant pas être plus gros bien entendu que ceux de la partie centrale (voir capure ou il est écrit "liens web".


En testant cet hébergeur d'images, il y a un problème dans leur code.
Capture du theme pour idée au final ici - en grand.

[krysto31]

Voila leur CSS actuellement.
Je crois bien qu'il faut y ajouter images milieux et bas des blocks.

Code:

/**
 * pragmaMx - Web Content Management System.
 * Copyright by pragmaMx Developer Team - http://www.pragmamx.org
 * $Id: layout.css,v 1.2 2009/04/18 18:46:30 tora60 Exp $
 */
#col1 .block {
   margin-bottom: 10px; /* Der Container für Blöcke und, Artikel und opentable */
}

form button, button,
form input.button,
form input.formbutton,
form input[type=button],
form input[type=submit],
form input[type=reset] {
   background-color: #f9feef;
   color: #333334;
}

form input,
form input[type=text],
form input[type=file],
form input[type=password],
form textarea,
form select {
   background-color: #fafef1;
   color: #333334;
}

#col1 .block .block-caption {
   background-image: url(../images/blocks/centerblock_title_back.png);
   background-repeat: repeat-x;
}

#col1 .block .block-caption,
#col1 .block .block-caption-1,
#col1 .block .block-caption-2,
#col1 .block .block-caption-3 {
   background-color: transparent;
   color: #ffffff;
   font-size: 14px;
   font-weight: bold;
   height: 34px;
   letter-spacing: 2px;
   line-height: 34px;
}

#col1 .block .block-caption-1 {
   background-image: url(../images/blocks/centerblock_corner_left.png);
   background-repeat: no-repeat;
   float: left;
   width: 12px;
}

#col1 .block .block-caption-3 {
   background-image: url(../images/blocks/centerblock_corner_right.png);
   background-repeat: no-repeat;
   float: right;
   width: 8px;
}

#col1 .block .block-content {
   padding: 0 5px;
}

#col1 .block-hide-caption .block-caption,
#col3 .block-hide-caption .block-caption {
   display: none; /* Blocktitel ausblenden, wenn kein Titel vorhanden */
}

#col1 .openclosetable {
   border: 1px solid #fdfdfd;
   padding: 5px;
}

#col1 .openclosetable2 {
   background-color: #f3f9e8;
   border: 1px solid #b6d59a;
   color: inherit;
   margin: auto;
   padding: 5px;
   width: 80%;
}

#col1 .openclosetableal {
   background-color: #f3f9e8;
   border: 3px double #ff0000;
   color: inherit;
   margin: auto;
   width: 85%;
}

#col2 .block .block-bottom {
   background-image: url(../images/blocks/leftblock_bottom.jpg);
   background-repeat: repeat-x;
   overflow: hidden;
}

#col2 .block .block-bottom,
#col2 .block .block-bottom-1,
#col2 .block .block-bottom-3 {
   border: none;
   height: 16px;
   margin: 0;
}

#col2 .block .block-bottom-1 {
   background-image: url(../images/blocks/leftblock_bottom_corner_left.jpg);
   background-repeat: no-repeat;
   float: left;
   width: 8px;
}

#col2 .block .block-bottom-3 {
   background-image: url(../images/blocks/leftblock_bottom_corner_right.jpg);
   background-repeat: no-repeat;
   float: right;
   width: 7px;
}

#col2 .block .block-caption {
   background-image: url(../images/blocks/leftblock_title.jpg);
   background-repeat: repeat-x;
}

#col2 .block .block-caption,
#col2 .block .block-caption-1,
#col2 .block .block-caption-3 {
   background-color: inherit;
   border: none;
   color: #999999;
   font-size: 15px;
   font-weight: bold;
   height: 34px;
   letter-spacing: 1px;
   line-height: 34px;
   margin: 0;
   overflow: hidden;
   padding: 0;
   text-align: center;
}

#col2 .block .block-caption-1 {
   background-image: url(../images/blocks/leftblock_title_corner_left.jpg);
   background-repeat: no-repeat;
   float: left;
   width: 9px;
}

#col2 .block .block-caption-3 {
   background-image: url(../images/blocks/leftblock_title_corner_right.jpg);
   background-repeat: no-repeat;
   float: right;
   width: 9px;
}

#col2 .block .block-content {
   margin-bottom: -2px;
   padding: 3px 5px 1px 5px;
}

#col2 .block .block-content-border {
   background-color: #ffffff;
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
   color: inherit;
   margin-left: 1px; /* die linken Grafiken haben nen weissen Rand :( */
}

#col2 .block, #col3 .block {
   margin-bottom: 7px;
}

#col2 .block-hide-caption .block-caption {
   height: 10px; /* Blocktitel verkleinern, wenn kein Titel vorhanden */
   overflow: hidden;
}

#col2 .block-hide-caption .block-caption-3 * {
   display: none; /* Blocktitel ausblenden, wenn kein Titel vorhanden, Inhalte unsichtbar machen */
}

#col3 .block .block-caption {
   background-color: transparent;
   border: none;
   color: #999999;
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 2px;
   margin: 0;
   overflow: hidden;
   padding: 8px 0;
}

#col3 .block .block-content {
   padding: 3px;
}

/* footerbereich */
#footer {
   background-color: transparent;
   background-image: url(../images/header/pragmaMxfresh_r5_c1.jpg);
   background-repeat: repeat-x;
   color: #333334;
   overflow: hidden;
}

#footer p {
   font-size: 9px;
   line-height: 1.4em;
   margin: 0;
}

#footer-bottom-1 {
   background-image: url(../images/header/pragmaMxfresh_r7_c3.jpg);
   background-position: right;
   background-repeat: no-repeat;
   float: right;
   height: 13px;
   width: 13px;
}

#footer-bottom-2 {
   background-image: url(../images/header/pragmaMxfresh_r7_c1.jpg);
   background-position: left;
   background-repeat: no-repeat;
   float: left;
   height: 13px;
   width: 13px;
}

#footer-main {
   margin: 15px 4em 0 4em;
   text-align: center;
}

/* header bereich */
#header {
   background-image: url(../images/header/pragmaMxfresh_r1_c2.jpg);
   background-repeat: repeat-x;
   height: 210px;
   overflow: hidden;
}

#head-left {
   background-image: url(../images/header/pragmaMxfresh_r1_c1.jpg);
   background-repeat: no-repeat;
   float: left;
   height: 196px;
   overflow: hidden;
   width: 640px;
}

#head-left-buttons {
   background-image: url(../images/header/pragmaMxfresh_r3_c1.jpg);
   background-repeat: no-repeat;
   height: 38px;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: 158px;
   width: 640px;
}

#head-left-buttons li {
   display: inline;
   margin: 0;
   padding: 0;
}

#head-left-buttons li a {
   background-color: transparent;
   background-image: url(../images/menu/button.jpg);
   background-position: left top;
   background-repeat: no-repeat;
   color: #333334;
   display: block;
   float: left;
   font-weight: bold;
   height: 38px;
   padding-top: 12px;
   text-align: center;
   text-decoration: none;
   width: 105px;
}

#head-left-buttons li a:hover {
   background-image: url(../images/menu/button_active.jpg);
}

#head-left-buttons li#navcurrent a {
   background-image: url(../images/menu/button_active.jpg);
}

#head-left-buttons li#navcurrent a:hover {
   background-image: url(../images/menu/button_active.jpg);
   background-position: 0 -2px;
}

#head-left-buttons ul {
   font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
   font-size: 11px;
   list-style: none;
   margin: 0;
   padding: 0;
}

#head-left-home {
   border: none;
   display: block;
   height: 21px;
   left: 16px;
   position: absolute;
   text-decoration: none;
   top: 20px;
   width: 130px;
}

#head-left-slogan {
   background-color: transparent;
   background-image: url(../images/header/defaultphoto.jpg);
   background-repeat: no-repeat;
   color: #f3f9e8;
   font-style: italic;
   height: 90px;
   left: 0;
   letter-spacing: 1px;
   overflow: hidden;
   padding-left: 5px;
   position: relative;
   top: 68px;
   width: 640px;
}

#head-left-sublinks {
   left: 0;
   padding-left: 5px;
   position: absolute;
   top: 139px;
}

#head-left-sublinks, #head-left-sublinks * {
   background-color: transparent;
   color: #f3f9e8;
   font-size: 11px;
   text-decoration: none;
}

#head-right {
   background-image: url(../images/header/pragmaMxfresh_r1_c3.jpg);
   background-position: top right;
   background-repeat: no-repeat;
   float: right;
   font-size: 10px;
   height: 196px;
   overflow: hidden;
   width: 155px;
}

#head-right form fieldset {
   background-color: transparent;
   border-color: #e7e7e7 #bbbbbb #bbbbbb #e7e7e7;
   border-style: solid;
   border-width: 1px;
   color: #799d24;
   display: block;
   margin: 0;
   padding: 5px;
   text-align: left;
   white-space: normal;
   width: 90px;
}

#head-right form input {
   background-color: #fafef1;
   border-color: #bbbbbb #e7e7e7 #e7e7e7 #bbbbbb;
   border-style: solid;
   border-width: 1px;
   color: #767676;
   font-size: 9px;
   margin: 0;
   padding: 0 3px 1px 3px;
   width: 82px;
}

#head-right form input.button {
   border: none;
   height: 16px;
   left: 4px;
   margin: 0 0 0 0;
   padding: 0;
   position: relative;
   top: 4px;
   width: 16px;
}

#head-right form input.pass {
   background-color: #fafef1;
   background-image: url(../images/icon-key.gif);
   background-position: 1% 50%;
   background-repeat: no-repeat;
   color: #d1d1d1;
   width: 62px;
}

#head-right form legend {
   background-color: transparent;
   border: none;
   color: #799d24;
   font-size: 10px;
   margin: 0;
   padding: 0 2px;
}

#head-right form p {
   clear: both;
   line-height: 22px;
}

#head-right-contact {
   border: none;
   display: block;
   height: 17px;
   position: absolute;
   right: 67px;
   text-decoration: none;
   top: 46px;
   width: 46px;
}

#head-right-container {
   height: 80px;
   line-height: 19px;
   position: absolute;
   right: 0px;
   top: 72px;
   width: 155px;
}

#head-right-container h3 {
   border: none;
}

#head-right-impres {
   border: none;
   display: block;
   height: 17px;
   position: absolute;
   right: 2px;
   text-decoration: none;
   top: 46px;
   width: 63px;
}

#head-right-language {
   height: 11px;
   position: absolute;
   right: 0px;
   text-align: center;
   top: 167px;
   width: 155px;
}

#service .debugservice * {
   background-color: inherit;
   color: #ff0000;
   margin: 0;
}

#service .debugservice pre {
   background-color: #fdfdfd;
   color: #333334;
}

#service .debugservice,
#service .siteservice {
   margin: 0 1em 0.5em 1em;
}

#service .siteservice {
   font-size: 1.2em;
   font-weight: bold;
}

[Zoltatem]

Re krysto31

Ton nouveau thème devrait être dispo demain

@++

[krysto31]

  c'est du rapide 

[Zoltatem]

Le thème a débuté hier, 3 jours c'est raisonnable, il restera que quelque code de colleurs a modifier pour le peaufinage, mais ce sera simple pour toi, je vais t'expliquer comment le finaliser.

Petite question, on garde le menu en java-scripts ? Car dans ta capture il n’est pas visible !


@++

[krysto31]

Petite question, on garde le menu en java-scripts ? Car dans ta capture il n’est pas visible !

Ah oui si c'est possible sans bug, alors oui sur fond marron

[Zoltatem]

Re

Voila ton thème, il reste un peut de peaufinage  
http://rapidshare.com/files/435678067/html.zip
Pour télécharger le thème, clique sur le gros bouton: Slow Download

Je dois te dire que le menu entre en conflit avec le bouton compte, le menu ne répond plus lorsque l'on clique sur compte, par contre ce bouton est inutile, car le module compte est visible dans le header.

Sinon, je voulais te remettre ce thème avec une vidéo pour t'expliquer le peaufinage, mais aussi son fonctionnement (son codage), je vais te faire une vidéo demain, ou peut être ce soir très tard.

@++

PS: Ne t'inquiète pas, ton thème n'est pas finalisé et l'on peut toujours le modifier  
J'attends ton verdict et tes modifications que tu aimerais lui apporter.

[krysto31]

Bonjour Zoltatem,
Teste en local pas mal encore mieux qu'à ce que je pouvais m'attendre. Juste bug bandeau, liens à gauche les uns en desous des autres.

Teste en direct c'est vraiment   juste la barre carrousel qui fait des siennes  
Sinon c'est trop beau  

Tien regarde bon enfin je le laisse en ligne quoi qu'il en soit.


Edit. Après sinon si vraiment on peut mettre les liens comme sur pragmaMx.org avec le même effet roll over (sauf qu'ici les images barre marron) ça résolura tout je pense puis tempi pour carrousel si ça fait que des siennes.

[Zoltatem]

Re

Dit moi, tu as bien remplacé le my_header.php ? qui est présent dans l'archive ?
Et il ne faut pas renommer le thème,  nom par défaut mx-default

Chez moi ton thème fonctionne correctement:
http://www.hebergementimages.com/image-fb2e81f222d628332cd443667e06e804_Sans-titre-1.jpg.html

@++

[krysto31]

J'avais renomé, du coup j'ai remis le nom, mais supprimé l'ancien theme.
Par contre la c'est page blanche  puis j'avais éditer mon poste précédent.

[Zoltatem]

Page blanche ? là je suis inquiet ! 
Je me demande si j'ai utilisé la version du thème pragmaMx 0.1.11.2. 

@++

[krysto31]

Bonne question, pourtant il passé en renommé. Serait-ce du au fait que j'ai supprimé l'ancien thème mx-default ? Pourtant l'ancien theme passe, je pige pas trop la.

[Zoltatem]

Peut être qu'il faut le choisir dans l'admin, si le thème a été renommé et qu'il était déjà utilisé par ton pragma alors ça coince, pragmaMx devrait en choisir un autre par défaut.

Pour purger le cash manuellement, va dans ton FTP, dossier: dynadata / cache / et supprime les fichiers qui ce termine par main.php

Et réactualise ta page 

@++

[krysto31]

J'ai eu peur, mais pas peur, j'ai supprimé, rien page blanche, j'ai supprimé un peut plus, j'ai récupe un fichier template, renommé localhost par le domaine, re balancé le config.php et sa revient ouf 

  Bon est bien toujours pareil   

[Zoltatem]

J'ai trouvé le problème, mais je n'est pas la solution 

Dans le poste de Algebre :
http://www.pragmamx.fr/Forum-topic-3178-start-msg20112.html#msg20112

Il dit:

Citation
pmxHeader::add_jquery();
ici on insert jquiry.js (valable que pour v 0.1.12)

Il faut lui demander un patch pour la version pragmaMx 0.1.11 pour le fichier my_header.php