Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Hop je continue ici la discussion à propos de l'adaptation du thème original de Lolamarch.
(début du post: http://www.dotclear.net/forum/viewtopic.php?id=29707)
Je rappelle que le but est de transposer ma version modifiée du thème Chromz visible sur mon blog (d'ici mercredi): http://benjdark.free.fr/dotclear/ vers http://bendark.free.fr/dotclear/
Je vous tiens au courant de l'avancée du chantier, pour le moment j'ai suivi le conseil de Lolamarch qui était de remplacer mes #col-one par #blogextra et #sidebar par #blognav.
J'ai n'ai uploadé que les images et le css de mon thème DC1, et recopié les .html du fichier par défaut.
Si vous avez des idées (autre me dire que mon premier site ne marche pas, l'original est la:http://themes.dotaddict.org/galerie-dc1/details/Chromz) ne vous génez pas.
Je vous tiens au courant,
Benj
Hors ligne
ces 2 tutos peuvent t'aider je pense:
http://ateliers.klafoutis.org/post/2006 … 3A-etape-1
http://ateliers.klafoutis.org/post/2006 … 3A-etape-2
En gros, observe la structure des blocs du thème original et reproduis là sur dc2. Le truc embêtant c'est que sur dc1, pour changer la structure, dans la plupart des cas il suffit de modifier uniquement le template.php alors que dans dc2, il faut modifier tous les contextes (home, post, ...). A mon avis donc, concentre toi déjà sur le home, et attaque toi seulement aux autres quand ce sera bon.
Hors ligne
À mon avis, laisse tomber les .html (dans un premier temps) et essaie de faire du « full css ».
J’ai fait une tentative d’adaptation de la css ce soir et j’obtiens une page très jolie sous firefox et très moche dans ie6. J’affinerai si j’ai le temps la semaine prochaine ;-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
À mon avis, laisse tomber les .html (dans un premier temps) et essaie de faire du « full css ».
J’ai fait une tentative d’adaptation de la css ce soir et j’obtiens une page très jolie sous firefox et très moche dans ie6.
Ok c'est noté.
Haha trop bien, en même temps j'ai pas d'amis qui sont sous firefox :p
Benj
Hors ligne
Haha trop bien, en même temps j'ai pas d'amis qui sont sous firefox :p
Benj
Ou la la il faut faire une croisade...
http://www.amomp.com/recyclage-cartouche-encre.php Associez le geste écologique au geste solidaire, ne jetez plus vos cartouches d'encres
http://www.passion-tarn-et-garonne.info Ma p'tite galerie et blog DC
Hors ligne
benjdark a écrit :Haha trop bien, en même temps j'ai pas d'amis qui sont sous firefox :p
BenjOu la la il faut faire une croisade...
J'ai tapé trop vite ^^ (et on peut pas éditer -_-) Non je veux dire que j'ai pas d'amis qui son sous IE ;)
(excepté ma copine mais on va encore se facher)
Bref journée blog pour moi aujourd'hui =) J'essaierais de vous dire ou j'en suis. Lolamarch si tu avances tu pourrais me communiquer en mm tps ? (un lien ftp, une démo ou poster des bouts de code ^^)
Benj
Hors ligne
et hop, un style.css adapté à dc2 (mais pas à IE6) ;-)
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(images/img01.gif) repeat-x;
font: normal small Verdana, Arial, Helvetica, sans-serif;
color: #959595;
}
h1, h2, h3 {
}
h1 {
}
h2 {
}
h3 {
/*margin-bottom: 1em;*/
text-transform: uppercase;
letter-spacing: 1px;
font-size: x-small;
}
p, blockquote, ul, ol, pre {
margin-bottom: 2em;
line-height: 1.6em;
}
p {
}
blockquote {
margin-left: 2em;
margin-right: 2em;
padding: 1em 1em 0 1em;
text-align: center;
font-style: italic;
}
ul {
list-style: none;
}
ul li {
}
ol {
list-style-position: inside;
}
ol li {
}
pre, code {
font-size: 1.2em;
}
pre {
width: 100%;
overflow: auto;
padding-bottom: .8em;
}
a {
color: #666666;
}
a:hover {
text-decoration: none;
color: #000000;
}
img {
}
/* Logo */
#top {
width: 760px;
height: 70px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#top h1 {
float: left;
letter-spacing: -2px;
font-size: 3em;
}
#top h2 {
float: left;
font-size: 1em;
}
#top a {
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF
}
/* Menu */
#menu {
width: 760px;
height: 50px;
margin: -50px auto 0 auto;
}
#menu ul {
float: right;
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
position: relative;
margin-left: 1.6em;
text-decoration: none;
text-transform: uppercase;
border-bottom: 5px solid #CC6600;
font-size: xx-small;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover, #menu .active a {
border-bottom-color: #000000;
color: #CCCCCC;
}
/* Le prélude
-------------------------------------------------------- */
#prelude{
background: transparent;
color: #DFDFDF;
text-align: center;
position: absolute;
width: 780px;
top: 7px;
left: 50%;
margin: 0 0 0 -390px;
padding: 0 1ex;
}
#prelude a{
color: #DFDFDF;
background: transparent;
}
#prelude a:hover{
color: #666;
background: transparent;
}
/* Le contenu
-------------------------------------------------------- */
.day-date{
padding: 20px;
margin: 0 0 0 -25px;
width: 405px;
color: #888;
background: #fff url(images/img12.gif) no-repeat left center;
font-style: italic;
}
/* Wrapper */
#wrapper {
clear: both;
width: 760px;
margin: 0 auto;
}
/* Column One */
#blognav {
float: right;
width: 180px;
margin-top: 2px;
}
#blognav div {
margin-bottom: 10px;
}
#blognav div h2 {
height: 20px;
padding: 10px 0 0 10px;
margin: 0 -10px;
position: relative;
bottom: 2px;
background: url(images/img02.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
#blognav div {
padding: 0 9px 9px;
background: #E8EDE5 url(images/img03.gif) repeat-x;
border: 1px solid #648952;
border-top: none;
}
#blognav form {
}
#blognav fieldset {
border: none;
}
#blognav legend {
display: none;
}
#blognav label {
display: block;
font-size: xx-small;
font-weight: bold;
}
#blognav .textfield {
width: 148px;
margin: 0 0 5px 0;
padding: 3px 5px;
border: 1px solid #C8C8C8;
background: #FAFAFA url(images/img04.gif) repeat-x;
font: normal x-small Verdana, Arial, Helvetica, sans-serif;
color: #464646;
}
#blognav .button {
float: right;
width: 70px;
height: 18px;
margin: 0 0 5px 0;
padding: 0;
border: 1px solid #464646;
background: #FAFAFA url(images/img05.gif) repeat-x;
font: normal x-small Verdana, Arial, Helvetica, sans-serif;
color: #464646;
}
#blognav .tiny {
clear: both;
margin: 0;
font-size: x-small;
}
#blognav .tiny a {
padding: 0 0 0 11px;
background: url(images/img06.gif) no-repeat left bottom;
}
/* Column Two */
#main {
float: left;
width: 380px;
margin-top: 2px;
}
#main .post, #main #trackbacks, #main #comments {
margin-bottom: 10px;
}
#main .post.first .day-date {
display: none;
}
#main .post-title {
height: 20px;
margin: 0 -20px;
position: relative;
bottom: 2px;
padding: 10px 0 0 10px;
background: url(images/img07.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
#main .post {
padding: 0 19px;
background: #E5ECED url(images/img08.gif) repeat-x;
border: 1px solid #528489;
border-top: none;
}
#main blockquote {
background: #E5ECED url(images/img08.gif) repeat-x;
}
/* Column Three */
#blogextra {
float: right;
width: 180px;
margin: 2px 10px 0 0;
}
#blogextra div {
margin-bottom: 10px;
}
#blognav div#calendar {
font-size: x-small;
padding: 19px 7px 0 7px;
}
#blogextra div h2 {
height: 20px;
padding: 10px 0 0 10px;
margin: 0 -11px;
position: relative;
bottom: 2px;
background: url(images/img09.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
#blogextra div {
padding: 0 10px 0;
background: #EFEBE2 url(images/img10.gif) repeat-x;
border: 1px solid #977C44;
border-top: none;
}
#blogextra div li {
margin-left: 0;
padding-left: 1em;
background: url(images/img12.gif) no-repeat 0 9px;
letter-spacing: normal;
}
/* Footer */
#footer {
clear: both;
padding: 30px 0 50px 0;
background: #464646 url(images/img13.gif) repeat-x;
}
#footer p {
width: 760px;
margin: 0 auto;
font-size: x-small;
}RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Ok merci Lola, on peut voir le résultat ici: http://bendark.free.fr/dotclear/
Jvais essayer de verif pourquoi j'ai pas la deuxième sidebar, et normalement mon ancien blog devrait etre up sous peu... (ça fait deja 72h qu'il est bloqué :(
Benj
Hors ligne
la sidebar manquante correspond la barre #blogextra (ou bandeau d’extra) de Widgets. Tu as placé des éléments dedans ?
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Ok je commence a comprendre comment ça fonctionne, et ça me plait pas du tout... ça veut dire qu'on peut pas administrer "en dur" le contenu des sidebars ? :(
Du coup mon radioblog et mon lecteur de twitt jvais lutter pour les remettres je sens -_-
(Apparement je dois compter 24h de plus)
Sinon Lola t'inquiete pas pour la bordure supérieure bleue, sur mon blog adapté je l'avais élargi, donc l'image est de fait plus large, donc en théorie ça marche bien =)
Benj
Hors ligne
J’aimerais bien que tu arrêtes de déformer mon pseudo, quand tu auras cinq minutes O:-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Wow o_o je rentre de soirée il est 5h et demi (heure GMT) et je viens de voir pour la première fois que tu t'écris Lomalarch et que j'ai la honte. Pardon. ;)
Benj
ps: le fait que je t'ai écorché n'enlève rien au travail que tu fais, entendons nous :p
Hors ligne
Tu n’es pas le premier à te prendre les pieds dedans, je te rassure ;-)
En tout état de cause, si je veux « livrer » le thème pour dc2 il me faut intégrer :
- la compatibilité IE6 (le plus délicat)
- les tags
- le widgets « liens de navigation »
On n’est pas rendu…
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Bon mon blog est de nouveau sur pied, j'ai fermé l'accès aux commentaires le temps que l'autre soit prêt.
http://benjdark.free.fr/dotclear/ d'après ce que disais annso pour mon bloc de twitt, suffira de faire un widget texte (que je sais pas ce que ça veut dire mais ça a pas l'air bien compliqué :p)*
Pour les pbs de compatbilités je suis pas assez au point en CSS pour avoir la prétention de régler ce problème, je vais deja essayer de voir si je m'en sors pour refaire la mise en page que j'avais sous DC1. J'ai notamment un doute sur le bloc "rouge" que j'avais rajouté :-/
Benj
Hors ligne
Pour faire un widget texte, rien de plus simple:
- tu va sur le panel "widget de présentation"
- tu choisis le widget Texte
- tu le fait glisser là ou il doit aller
- tu cliques sur le petit plus
- et tu colles dans la boite le code twitter (ou radioblog ou n'importe quoi d'autre)
et voilà!
Hors ligne
J'ai épuré une partie du css qui n'était plus nécessaire avec les widgets modernes de DC2 et j'ai réorganisé pour que ça reprenne l'ordre du visuel.
Par contre j'ai un problème que je trouve pas pratique, c'est que lors de la mise en place des widget de présentation, le bandeau blognav est représenté a gauche et blog extra a droite, ce qui se trouve inversé dans le rendu.... pas très pratique tout ça ^^
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(images/img01.gif) repeat-x;
font: normal small Verdana, Arial, Helvetica, sans-serif;
color: #959595;
}
h1, h2, h3 {
}
h1 {
}
h2 {
}
h3 {
/*margin-bottom: 1em;*/
text-transform: uppercase;
letter-spacing: 1px;
font-size: x-small;
}
p, blockquote, ul, ol, pre {
margin-bottom: 2em;
line-height: 1.6em;
}
p {
}
blockquote {
margin-left: 2em;
margin-right: 2em;
padding: 1em 1em 0 1em;
text-align: center;
font-style: italic;
}
ul {
list-style: none;
}
ul li {
}
ol {
list-style-position: inside;
}
ol li {
}
pre, code {
font-size: 1.2em;
}
pre {
width: 100%;
overflow: auto;
padding-bottom: .8em;
}
a {
color: #666666;
}
a:hover {
text-decoration: none;
color: #000000;
}
img {
}
/* Logo */
#top {
width: 760px;
height: 70px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#top h1 {
float: left;
letter-spacing: -2px;
font-size: 3em;
}
#top h2 {
float: left;
font-size: 1em;
}
#top a {
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF
}
/* Menu */
#menu {
width: 760px;
height: 50px;
margin: -50px auto 0 auto;
}
#menu ul {
float: right;
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
position: relative;
margin-left: 1.6em;
text-decoration: none;
text-transform: uppercase;
border-bottom: 5px solid #CC6600;
font-size: xx-small;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover, #menu .active a {
border-bottom-color: #000000;
color: #CCCCCC;
}
/* Le prélude-------- */
#prelude{
background: transparent;
color: #DFDFDF;
text-align: center;
position: absolute;
width: 780px;
top: 7px;
left: 50%;
margin: 0 0 0 -390px;
padding: 0 1ex;
}
#prelude a{
color: #DFDFDF;
background: transparent;
}
#prelude a:hover{
color: #666;
background: transparent;
}
/* Le contenu
-------------------------------------------------------- */
.day-date{
padding: 20px;
margin: 0 0 0 -25px;
width: 405px;
color: #888;
background: #fff url(images/img12.gif) no-repeat left center;
font-style: italic;
}
/* Wrapper */
#wrapper {
clear: both;
width: 760px;
margin: 0 auto;
}
/* Column One */
#main {
float: left;
width: 380px;
margin-top: 2px;
}
#main .post, #main #trackbacks, #main #comments {
margin-bottom: 10px;
}
#main .post.first .day-date {
display: none;
}
#main .post-title {
height: 20px;
margin: 0 -20px;
position: relative;
bottom: 2px;
padding: 10px 0 0 10px;
background: url(images/img07.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
#main .post {
padding: 0 19px;
background: #E5ECED url(images/img08.gif) repeat-x;
border: 1px solid #528489;
border-top: none;
}
#main blockquote {
background: #E5ECED url(images/img08.gif) repeat-x;
}
/* Column Two */
#blogextra {
float: right;
width: 180px;
margin: 2px 10px 0 0;
}
#blogextra div {
margin-bottom: 10px;
}
#blogextra div h2 {
height: 20px;
padding: 10px 0 0 10px;
margin: 0 -11px;
position: relative;
bottom: 2px;
background: url(images/img09.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
#blogextra div {
padding: 0 10px 0;
background: #EFEBE2 url(images/img10.gif) repeat-x;
border: 1px solid #977C44;
border-top: none;
}
#blogextra div li{
margin-left: 0;
padding-left: 1em;
background: url(images/img12.gif) no-repeat 0 9px;
letter-spacing: normal;
}
/* Column Three */
#blognav {
float: right;
width: 180px;
margin-top: 2px;
}
#blognav div {
margin-bottom: 10px;
}
#blognav div h2 {
height: 20px;
padding: 10px 0 0 10px;
margin: 0 -10px;
position: relative;
bottom: 2px;
background: url(images/img02.gif) no-repeat;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
#blognav div {
padding: 0 9px 9px;
background: #E8EDE5 url(images/img03.gif) repeat-x;
border: 1px solid #648952;
border-top: none;
}
#blognav div li {
margin-left: 0;
padding-left: 1em;
background: url(images/img06.gif) no-repeat 0 9px;
letter-spacing: normal;
}
/* Footer */
#footer {
clear: both;
padding: 30px 0 50px 0;
background: #464646 url(images/img13.gif) repeat-x;
}
#footer p {
width: 760px;
margin: 0 auto;
font-size: x-small;
}Sinon Lomalarch je voulais savoir si tu trouvais les modifs que j'avais fait du thème étaient interressantes (genre colonne du milieu plus large et police plus foncée, et ajoue des puces dans les deux sidebars). Je ne considère que le "bloc" rouge comme une adaptation perso, le reste me paraissait juste de retouche visuelle qui me paraissait nécessaire a l'utilisation quotidienne.
Benj
Hors ligne
En vérité, j’ai assez peu d’avis sur ce design dont, rappelons-le, je ne suis pas l’auteur :-D
En effet, la colonne principale est très (trop) étroite à l’origine, mais cela s’explique par la volonté de l’auteur de d’origine de « rentrer » sur une largeur de 800px (ce qui, de mon point de vue, est limite contradictoire avec le fait d’avoir trois colonnes).
Le blognav et le blogextra apparaissent dans l’admin dans l’ordre dans lequel ils sont dans la page générée. C’est le css qui les « inverse », et je ne suis pas revenu sur cette structure qui est d’origine dans le thème (ne pas perdre de vue que j’ai « adapté ça » sur le pouce en une soirée au départ) ;-)
Le « bloc rouge » est une assez bonne idée à mon avis même si, bien sûr, c’est pas évident de l’adapter à dc2. Si tu souhaites ne l’avoir que sur la page d’accueil on peut rapidement éditer home.html pour l’y ajouter, mais pour tous les contextes, ça veut dire rajouter l’include dans tous les blocs (en tout état de cause, ça ne passe plus par les widgets). Quant aux puces je n’ai pas d’opinion. Sur la version pour dc1 il n’y en a que pour les blocs de la colonne centrale, mais pourquoi pas en ajouter sur la colonne de droite, c’est à chacun de voir, mais je ne pense pas le faire.
Pour finir l’adaptation dc2, il faut encore gérer les tags, les commentaires et trackbacks… c’est plus compliqué que pour la v1
Un dernier point : la licence du thème d’origine ne t’autorise pas à supprimer le lien vers freecsstemplates.org ;-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Oula plein de choses =)
Alors pour le lien vers freecsstemplates c'est une erreur il a du partir dans un copier-coller, je penserais a le remettre à la fin
Pour mon blog twitt oui, c'est pour la page d'accueil uniquement (je ny avait pas pensé mais c'est pas plus mal).
Est ce que selon la license que c'est tu peux livrer un thème modifié (justement sur 3 colonnes en 800px on est daccord sur le fait que ce soit à l'étroit, idem pour la présence, ou non, des puces, le format des dates entre les billets ect...) ou est ce que si tu fais une "adaptation" tu dois recopier au plus près le thème original (qui n'est donc pas le tien :p)
Benj
Hors ligne
On peut faire ce qu’on veut avec le design. Seule contrainte : ne pas virer le lien vers le site d’origine (licence cc by) ;-)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Chef, oui chef ! o7
Donc du coup je me lance dans l'équilibrage (entre autre) des colonnes et la police un pet plus foncé. Après a vous de l'utiliser si vous aimez ou pas :p (je mettrais ça a dispo qd ça sera fini évidement =)
Benj
Hors ligne
http://benjdark.free.fr/stock/chromz_3.1.zip
Voila le package actuellement visible chez moi.
J'ai rajouté le lien en bas, et édité le top, le footer ect... et dans les .html j'ai inversé nav et extra pour les widgets pour que ça correspondent dans le visuel.
Faut formater/supprimer la date entre les posts je trouve pas ça utile/joli. Je pige pas pourquoi IE fait autant la gueule , c'est une horreur...
Benj
Hors ligne
pour enlever la date entre les post, un simple .day-date {display: none} dans la css et tu es rendu ;-)
Pour IE, j’y travaille :D
Tiens moi au courant de tes avancées sur le bloc rouge… (je te dirai pour les miennes)
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Ben je comptais pas m'en occuper trop vite, vu que c'était pas dans le thème d'origine :-/
Mais pas de soucis, je fais ça dans la journée probablement.
(Pars de mon package si tu travailles la compatibilité :p)
Benj
ps: la license en bas c'est correct ?
Hors ligne
Non mais je parlais pour ton usage en ce qui concerne le bloc rouge ;-)
Je cherche (et j’ai d’autres fers au feu) comment l’inclure « proprement » dans le template… je ne suis donc pas sûr de pouvoir proposer une version « avec ».
Pour la compatibilité, le problème est justement qu’il faut totalement repenser l’agencement des boîtes, et il me sera donc difficile de partir de ta version ;-)
oui pour la license (encore que sur « powered by Dotclear », tu as deux liens qui se superposent, mais ça c’est un problème de html, pas de licence ;-) )
RTFM attitude : https://fr.dotclear.org/documentation/2.0
Le chantier tips, tutos et astuces : http://tips.dotaddict.org/
Rien nulle part??? une petite recherche sul’ forum, alors?: https://forum.dotclear.org/search.php ?
Hors ligne
Vous n'êtes pas identifié(e).