Aide générale comment faire une image sprite ?
J'essaierai .. Il faudra bien.
À ce propos .. Je devrais créer un autre sujet (à diviser si besoin).
Comment faire comme la v4 dans l'attente pour mettre des images dans du css ? (Sprite c'est ça?).
Ce serai pour alléger mon thème surtout en temps d'affichage. Puis si je décide de le convertir en v4, faudra bien.
À ce propos .. Je devrais créer un autre sujet (à diviser si besoin).
Comment faire comme la v4 dans l'attente pour mettre des images dans du css ? (Sprite c'est ça?).
Ce serai pour alléger mon thème surtout en temps d'affichage. Puis si je décide de le convertir en v4, faudra bien.
Bonjour,
oui pour le coup faudra demande à notre gentil (et vénérée grande gourou de CsN, Swan) de diviser le sujet.
m-ickael:
Alors là y a différentes technique, le principe du sprite CSS est par exemple de regrouper toute les icones sont s'affiche toujours ensemble sur une même image (genre les icones "mon profil" "message privé" etc..), comme ça le navigateur ne charge qu'une seule image plutôt que X petite, après le positionnement ce fait via le CSS.
Perso je n'est jamais fait mis en pratique cette solution, je connais juste le principe.
m-ickael:
Hum, pas obligatoire d’utiliser le sprite CSS en V4.0 (d'ailleurs y a pas de sprite CSS en V4 de mémoire), et de toute façons il existe plein d'autre petite astuce pour réduire considérablement le poids et donc le temps de chargement.
Cordialement, janus57
oui pour le coup faudra demande à notre gentil (et vénérée grande gourou de CsN, Swan) de diviser le sujet.
m-ickael:
Comment faire comme la v4 dans l'attente pour mettre des images dans du css ? (Sprite c'est ça?).
Alors là y a différentes technique, le principe du sprite CSS est par exemple de regrouper toute les icones sont s'affiche toujours ensemble sur une même image (genre les icones "mon profil" "message privé" etc..), comme ça le navigateur ne charge qu'une seule image plutôt que X petite, après le positionnement ce fait via le CSS.
Perso je n'est jamais fait mis en pratique cette solution, je connais juste le principe.
m-ickael:
Ce serai pour alléger mon thème surtout en temps d'affichage. Puis si je décide de le convertir en v4, faudra bien.
Hum, pas obligatoire d’utiliser le sprite CSS en V4.0 (d'ailleurs y a pas de sprite CSS en V4 de mémoire), et de toute façons il existe plein d'autre petite astuce pour réduire considérablement le poids et donc le temps de chargement.
Cordialement, janus57
Le site phoboost officiel, toutes ses images sont dans un cache.css .. Je pensais que c'était pareil pour tout le monde en v4.1.
Bonjour,
m-ickael:
Là encore tout a été changé entre la V4.0 et la V4.1 (oui je sais cela peut rendre
)
Donc je vais résumé vite fait :
V4.0 (actuellement la dernière est la 4.0.6) : Peut de changent niveau images/css par rapport à la V3, juste une réduction du nombre de fichier et changement de quelque class CSS
V4.1 (actuellement encore en Bêta donc pas destiné a un site en production) : Changement radicale par rapport à la version 4.0, nettoyage des icônes, toutes les images ont été supprimés et remplacé par leur équivalent "Font Awesome" (sur le thème de base, sur le site officiel ils ont passé tous les logos face & cie en sprite, Cf : http://www.phpboost.com/templates/phpboost/theme/images/sprite-phpboost.png)
Les fichiers .tpl ainsi que .css ont été purgés façons régime de la mort (il ne reste que 2 fichiers .tpl et 3 .css), les JS sont inclus différemment, les indispensable au bon fonctionnement du site sont inclus en premier (top.js qui regroupe Prototype et anciennement global.js) et les moins important en fin de page (bottom.js) ce qui permet un meilleur chargement de la page car le JS ne bloque plus le chargement d'autres éléments.
Et enfin la version 4.1 est entièrement en HTML5 et compatible IE8 à IE11 (IE7 n'est plus supporté) et après bien sûr Firefox/Chrome/Opera sont compatible
Donc là pour le coup faut bien faire la différence entre la version V4.0 et la version V4.1
Et rien que pour le fun voici un petit GTmetrix de la version V4.1 : http://gtmetrix.com/reports/janus57.no-ip.org/KJ4TDuLy
Cordialement, janus57
m-ickael:
Le site phoboost officiel, toutes ses images sont dans un cache.css .. Je pensais que c'était pareil pour tout le monde en v4.1.
Là encore tout a été changé entre la V4.0 et la V4.1 (oui je sais cela peut rendre
)Donc je vais résumé vite fait :
V4.0 (actuellement la dernière est la 4.0.6) : Peut de changent niveau images/css par rapport à la V3, juste une réduction du nombre de fichier et changement de quelque class CSS
V4.1 (actuellement encore en Bêta donc pas destiné a un site en production) : Changement radicale par rapport à la version 4.0, nettoyage des icônes, toutes les images ont été supprimés et remplacé par leur équivalent "Font Awesome" (sur le thème de base, sur le site officiel ils ont passé tous les logos face & cie en sprite, Cf : http://www.phpboost.com/templates/phpboost/theme/images/sprite-phpboost.png)
Les fichiers .tpl ainsi que .css ont été purgés façons régime de la mort (il ne reste que 2 fichiers .tpl et 3 .css), les JS sont inclus différemment, les indispensable au bon fonctionnement du site sont inclus en premier (top.js qui regroupe Prototype et anciennement global.js) et les moins important en fin de page (bottom.js) ce qui permet un meilleur chargement de la page car le JS ne bloque plus le chargement d'autres éléments.
Et enfin la version 4.1 est entièrement en HTML5 et compatible IE8 à IE11 (IE7 n'est plus supporté) et après bien sûr Firefox/Chrome/Opera sont compatible
Donc là pour le coup faut bien faire la différence entre la version V4.0 et la version V4.1
Et rien que pour le fun voici un petit GTmetrix de la version V4.1 : http://gtmetrix.com/reports/janus57.no-ip.org/KJ4TDuLy
Cordialement, janus57
Je trouve que c'est bien la 4.1. Mais si j'ai bien compris ça limite énormément la personnalisation. C'est bien ça ?
m-ickael:
Bonjour,
euh je dirais que non, c'est toujours aussi personnalisable, juste que ils ont restructuré le tout.
Après je suppose que dans ta tête c'est moins personnalisable car y a moins de fichiers CSS/TPL.
Mais en réalité y a toujours autant de code CSS (voir plus peut être) et au niveau des TPL je trouve le nouveau système beaucoup mieux.
Voici les 2 fichiers TPL :
Cela peut effectivement paraitre déroutant pour tout ceux qui été habitué à la V3/V4.0, mais au final la nouvel structure semble beaucoup mieux pour faire un thème (plus de coupure entre header.tpl et footer.tpl, tout a été rassemblé dans 3 fichiers CSS qui ont chacun des rôles bien définit, c'était déjà le cas avant cependant).
Cordialement, janus57
Je trouve que c'est bien la 4.1. Mais si j'ai bien compris ça limite énormément la personnalisation. C'est bien ça ?
Bonjour,
euh je dirais que non, c'est toujours aussi personnalisable, juste que ils ont restructuré le tout.
Après je suppose que dans ta tête c'est moins personnalisable car y a moins de fichiers CSS/TPL.
Mais en réalité y a toujours autant de code CSS (voir plus peut être) et au niveau des TPL je trouve le nouveau système beaucoup mieux.
Voici les 2 fichiers TPL :
frame.tpl
Code TPL :
<!DOCTYPE html> <html lang="{L_XML_LANGUAGE}"> <head> <title>{TITLE}</title> <meta charset="iso-8859-1" /> <meta name="description" content="{SITE_DESCRIPTION}" /> <meta name="keywords" content="{SITE_KEYWORD}" /> <meta name="generator" content="PHPBoost {PHPBOOST_VERSION}" /> <!-- Theme CSS --> # IF C_CSS_CACHE_ENABLED # <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/content.css')}" type="text/css" media="screen, print, handheld" /> # ELSE # <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" /> # ENDIF # <!-- Modules CSS --> {MODULES_CSS} # IF C_FAVICON # <link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" /> # ENDIF # # INCLUDE JS_TOP # </head> <body itemscope="itemscope" itemtype="http://schema.org/WebPage"> # INCLUDE BODY # # INCLUDE JS_BOTTOM # </body> </html>
body.tpl
Code TPL :
# INCLUDE MAINTAIN # <header id="header"> <div id="site-infos"> <div id="site-logo" # IF C_HEADER_LOGO #style="background: url('{HEADER_LOGO}') no-repeat;"# ENDIF #></div> <div id="site-name-container"> <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a> <span id="site-slogan">{SITE_SLOGAN}</span> </div> </div> <div id="top-header"> # IF C_MENUS_HEADER_CONTENT # {MENUS_HEADER_CONTENT} # ENDIF # </div> <div id="sub-header"> # IF C_MENUS_SUB_HEADER_CONTENT # {MENUS_SUB_HEADER_CONTENT} # ENDIF # </div> <div class="spacer"></div> </header> <div id="global"> # IF C_COMPTEUR # <div id="compteur"> <span class="text-strong">{L_VISIT}:</span> {COMPTEUR_TOTAL} <br /> <span class="text-strong">{L_TODAY}:</span> {COMPTEUR_DAY} </div> # ENDIF # # IF C_MENUS_LEFT_CONTENT # <aside id="menu-left"> {MENUS_LEFT_CONTENT} </aside> # ENDIF # # IF C_MENUS_RIGHT_CONTENT # <aside id="menu-right"> {MENUS_RIGHT_CONTENT} </aside> # ENDIF # <div id="main" role="main"> # IF C_MENUS_TOPCENTRAL_CONTENT # <div id="top-content"> {MENUS_TOPCENTRAL_CONTENT} </div> <div class="spacer"></div> # ENDIF # <div id="main-content" itemprop="mainContentOfPage"> # INCLUDE ACTIONS_MENU # <nav id="breadcrumb" itemprop="breadcrumb"> <ol> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="{START_PAGE}" title="{L_INDEX}" itemprop="url"> <span itemprop="title">{L_INDEX}</span> </a> </li> # START link_bread_crumb # <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" # IF link_bread_crumb.C_CURRENT # class="current" # ENDIF #> # IF link_bread_crumb.C_CURRENT # <span itemprop="title">{link_bread_crumb.TITLE}</span> # ELSE # <a href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}" itemprop="url"> <span itemprop="title">{link_bread_crumb.TITLE}</span> </a> # ENDIF # </li> # END link_bread_crumb # </ol> </nav> {CONTENT} </div> # IF C_MENUS_BOTTOM_CENTRAL_CONTENT # <div id="bottom-content"> {MENUS_BOTTOMCENTRAL_CONTENT} </div> # ENDIF # </div> # IF C_MENUS_TOP_FOOTER_CONTENT # <div id="top-footer"> {MENUS_TOP_FOOTER_CONTENT} <div class="spacer"></div> </div> # ENDIF # </div> <footer id="footer"> # IF C_MENUS_FOOTER_CONTENT # <div class="footer-content"> {MENUS_FOOTER_CONTENT} </div> # ENDIF # <div class="footer-infos"> <span> {L_POWERED_BY} <a href="http://phpboost.com" title="PHPBoost">PHPBoost {PHPBOOST_VERSION}</a> {L_PHPBOOST_RIGHT} </span> # IF C_DISPLAY_BENCH # <span> | {L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} - {MEMORY_USED} </span> # ENDIF # # IF C_DISPLAY_AUTHOR_THEME # <span> | {L_THEME} {L_THEME_NAME} {L_BY} <a href="{U_THEME_AUTHOR_LINK}">{L_THEME_AUTHOR}</a> </span> # ENDIF # </div> </footer>
Cela peut effectivement paraitre déroutant pour tout ceux qui été habitué à la V3/V4.0, mais au final la nouvel structure semble beaucoup mieux pour faire un thème (plus de coupure entre header.tpl et footer.tpl, tout a été rassemblé dans 3 fichiers CSS qui ont chacun des rôles bien définit, c'était déjà le cas avant cependant).
Cordialement, janus57
Petite incrustation ...
La personnalisation n'est pas le soucis pour des personnes comme moi, que cela soit en html5 ou de base, le css peut être répercuté. Peu importe qu'il n'y ai qu'un seul fichiers ou 6 ..
Par contre pour un utilisateur lambda bah là Ça coince... Là ou nous on insérera une modification css et ou on sait faire une modification dans un htlml basique, le fait d'avoir épuré le code et les css pour privilégier la rapidité du cms , ils y perdent en compréhension et en simplicité de modifications / personnalisations du cms. Il faudra qu'ils apprennent ..
Janus petit défi ... en partant du thème base, de la v4.1 .. fait un thème complément différent des thèmes actuel de Pbt.. fait voir un peu en dehors du code Ce que cela vaut ..
Cela te dis ? car les performances certes c'est bien .. mais ensuite les sprites, il faut les placer en css et pour ceux qui sont novice se genre de chose ne s'apprends pas du jours au lendemain ..
Enfin bref , c'était mon petit passage sur le sujet ^^
Bonjour,
comme dit plus haut j'ai jamais utilisé les sprites CSS, de plus ils ne sont pas dans la version 4.1, mais uniquement sur le site officiel avec le thème du site officiel.
Swan:
Ce défi est déjà en cours, mais avant j'attend que la V4.1 passe en stable et surtout que la documentation soit présente pour galérer le moins possible (car y en a eu du changement).
Autrement personnellement je ne pourrais jamais faire un design qui sort des thèmes déjà existant.
Tout simplement parce que moi et le webdesign sa fait 2, je n'ai jamais fait de design, y a toujours minimum 1personne qui m'a aidé et/ou aiguillé dans un thème.
Je n'arrive à "imaginer" un thème original et surtout je n'arrive pas à utiliser convenablement des logiciel photo pour faire des images qui colle bien à un thème ou tout simplement pour créer un thème 100% original.
Swan:
Ça coince oui et non, car au finale le squelette HTML est très semblable à la V4.0, y a juste les class CSS qui sont subit un changement total dû en grande partie à l'intégration de "Font Awesome", mais autrement les fichiers CSS sont pratiquement les même entre la V4.0 et V4.1.
Si la documentation est très complète au niveau de la personnalisation et de la création des thèmes, ce ne sera pas plus compliqué que sur d'autre CMS
Cordialement, janus57
comme dit plus haut j'ai jamais utilisé les sprites CSS, de plus ils ne sont pas dans la version 4.1, mais uniquement sur le site officiel avec le thème du site officiel.
Swan:
Janus petit défi ... en partant du thème base, de la v4.1 .. fait un thème complément différent des thèmes actuel de Pbt.. fait voir un peu en dehors du code Ce que cela vaut ..
Ce défi est déjà en cours, mais avant j'attend que la V4.1 passe en stable et surtout que la documentation soit présente pour galérer le moins possible (car y en a eu du changement).
Autrement personnellement je ne pourrais jamais faire un design qui sort des thèmes déjà existant.
Pourquoi ?
Tout simplement parce que moi et le webdesign sa fait 2, je n'ai jamais fait de design, y a toujours minimum 1personne qui m'a aidé et/ou aiguillé dans un thème.
Je n'arrive à "imaginer" un thème original et surtout je n'arrive pas à utiliser convenablement des logiciel photo pour faire des images qui colle bien à un thème ou tout simplement pour créer un thème 100% original.
Swan:
Par contre pour un utilisateur lambda bah là Ça coince... Là ou nous on insérera une modification css et ou on sait faire une modification dans un htlml basique, le fait d'avoir épuré le code et les css pour privilégier la rapidité du cms , ils y perdent en compréhension et en simplicité de modifications / personnalisations du cms. Il faudra qu'ils apprennent ..
Ça coince oui et non, car au finale le squelette HTML est très semblable à la V4.0, y a juste les class CSS qui sont subit un changement total dû en grande partie à l'intégration de "Font Awesome", mais autrement les fichiers CSS sont pratiquement les même entre la V4.0 et V4.1.
Si la documentation est très complète au niveau de la personnalisation et de la création des thèmes, ce ne sera pas plus compliqué que sur d'autre CMS
Cordialement, janus57
Je sens que si je passe en 4.1 lorsque ça sortira, je vais galérer un très long moment :/
Moi qui commence tout juste à m'y retrouver dans les CSS / html (pas du tout php lol), ça va trop me changer je pense :/
Moi qui commence tout juste à m'y retrouver dans les CSS / html (pas du tout php lol), ça va trop me changer je pense :/
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie