Mise en place loader [Réglé]
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Je voudrais savoir comment on peut mettre un loader sur un site ? Par exemple <a href="https://graphiste.com/blog/loader-css">https://graphiste.com/blog/loader-css</a>
Je suis actuellement sur le thème Blue Stone
Merci de votre aide
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
- soit on "remplace" l'affichage du contenu par l'affichage d'une page "vide" avec seulement le loader
- soit on "surcharge" l'affichage du contenu en le cachant avec la page loader qu'on fait disparaitre en fin de chargement
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Citation :
ça dépend de ce que l'on veut cacher
La page en chargement derrière
Citation :
de combien de temps on veut le cacher,
Jusqu'a se que la page soit charger
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Dans quelle fichier html ?
Dans quelle feuille Css?
Dans quelle fichier jquery ?
Édité par Lapoésie01600 Le 03/04/2021 à 20h03
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Pour commencer, je conseillerai un petit tour sur <a href="https://openclassrooms.com/fr/courses">openclassrooms</a>, puis pour les fichiers dans phpboost <a href="/wiki/design-et-interface">tout est là</a>
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Pour la partie html il faut les mettre dans les fichiers tpl mis dans le fichier body avec les autres div:
se qui donne :
Caché :
# INCLUDE MAINTAIN #
<header id="header">
<div id="top-header">
<div id="site-infos">
<div id="site-logo" # IF C_HEADER_LOGO #style="background-image: url('{HEADER_LOGO}');"# 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-content">
# IF C_MENUS_HEADER_CONTENT #
# START menus_header #
{menus_header.MENU}
# END menus_header #
# ENDIF #
</div>
</div>
<div id="sub-header" class="sticky">
<div id="sub-header-content">
# IF C_MENUS_SUB_HEADER_CONTENT #
# START menus_sub_header #
{menus_sub_header.MENU}
# END menus_sub_header #
# ENDIF #
</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
</header>
<div id="global">
# IF C_VISIT_COUNTER #
<div id="visit-counter">
<span class="text-strong">{L_VISIT} : </span>{VISIT_COUNTER_TOTAL}
<br />
<span class="text-strong">{L_TODAY} : </span>{VISIT_COUNTER_DAY}
</div>
# ENDIF #
# IF C_MENUS_LEFT_CONTENT #
<aside id="menu-left"# IF C_MENUS_RIGHT_CONTENT # class="disabled-column"# ENDIF #>
# START menus_left #
{menus_left.MENU}
# END menus_left #
</aside>
# ENDIF #
# IF C_MENUS_RIGHT_CONTENT #
<aside id="menu-right"# IF C_MENUS_LEFT_CONTENT # class="disabled-column"# ENDIF #>
# START menus_right #
{menus_right.MENU}
# END menus_right #
</aside>
# ENDIF #
<div id="main" class="# IF C_MENUS_LEFT_CONTENT #main-with-left# ENDIF ## IF C_MENUS_RIGHT_CONTENT #main-with-right# ENDIF #" role="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top-content">
# START menus_top_central #
{menus_top_central.MENU}
# END menus_top_central #
</div>
<div class="spacer"></div>
# ENDIF #
<div id="main-content" itemprop="mainContentOfPage">
# INCLUDE ACTIONS_MENU #
<nav id="breadcrumb" itemprop="breadcrumb">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://data-vocabulary.org/ListItem">
<a href="{START_PAGE}" itemprop="item">
<span itemprop="name">${LangLoader::get_message('home', 'main')}</span>
<meta itemprop="position" content="1" />
</a>
</li>
# START link_bread_crumb #
<li itemprop="itemListElement" itemscope itemtype="http://data-vocabulary.org/ListItem" # IF link_bread_crumb.C_CURRENT # class="current" # ENDIF #>
<a href="{link_bread_crumb.URL}" itemprop="item">
<span itemprop="name">{link_bread_crumb.TITLE}</span>
<meta itemprop="position" content="{link_bread_crumb.POSITION}" />
</a>
</li>
# END link_bread_crumb #
</ol>
</nav>
# INCLUDE KERNEL_MESSAGE #
{CONTENT}
</div>
# IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
<div id="bottom-content">
# START menus_bottom_central #
{menus_bottom_central.MENU}
# END menus_bottom_central #
</div>
# ENDIF #
</div>
<div class="spacer"></div>
</div>
# IF C_MENUS_TOP_FOOTER_CONTENT #
<div id="top-footer">
# START menus_top_footer #
{menus_top_footer.MENU}
# END menus_top_footer #
<div class="spacer"></div>
</div>
# ENDIF #
<footer id="footer">
# IF C_MENUS_FOOTER_CONTENT #
<div class="footer-content">
# START menus_footer #
{menus_footer.MENU}
# END menus_footer #
</div>
# ENDIF #
<div class="footer-infos">
<span>
{L_POWERED_BY}
<a href="https://www.phpboost.com" title="PHPBoost">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/logo-pbt-footer.png" alt="logo pbt" /> PHPBoost
</a>
</span>
# IF C_DISPLAY_AUTHOR_THEME #
<span class="footer-infos-separator"> | </span>
<span class="footer-infos-template-author">{L_THEME} {L_THEME_NAME} {L_BY} <i class="fa fa-sld-sld sld"></i> <a href="{U_THEME_AUTHOR_LINK}">{L_THEME_AUTHOR}</a></span>
# ENDIF #
# IF C_DISPLAY_BENCH #
<span>
|
{L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} - {MEMORY_USED}
</span>
# ENDIF
<div class="page_loader">
<div id="inner">
<img src="\templates\bluestones\images\Ellipsis-2-1s-277px.gif" alt="loader" />
</div>
</div>
</div>
</footer>
<span id="scroll-to-top" class="scroll-to" aria-label="${LangLoader::get_message('scroll-to.top', 'user-common')}"><i class="fa fa-chevron-up" aria-hidden="true" title="${LangLoader::get_message('scroll-to.top', 'user-common')}"></i></span>
<header id="header">
<div id="top-header">
<div id="site-infos">
<div id="site-logo" # IF C_HEADER_LOGO #style="background-image: url('{HEADER_LOGO}');"# 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-content">
# IF C_MENUS_HEADER_CONTENT #
# START menus_header #
{menus_header.MENU}
# END menus_header #
# ENDIF #
</div>
</div>
<div id="sub-header" class="sticky">
<div id="sub-header-content">
# IF C_MENUS_SUB_HEADER_CONTENT #
# START menus_sub_header #
{menus_sub_header.MENU}
# END menus_sub_header #
# ENDIF #
</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
</header>
<div id="global">
# IF C_VISIT_COUNTER #
<div id="visit-counter">
<span class="text-strong">{L_VISIT} : </span>{VISIT_COUNTER_TOTAL}
<br />
<span class="text-strong">{L_TODAY} : </span>{VISIT_COUNTER_DAY}
</div>
# ENDIF #
# IF C_MENUS_LEFT_CONTENT #
<aside id="menu-left"# IF C_MENUS_RIGHT_CONTENT # class="disabled-column"# ENDIF #>
# START menus_left #
{menus_left.MENU}
# END menus_left #
</aside>
# ENDIF #
# IF C_MENUS_RIGHT_CONTENT #
<aside id="menu-right"# IF C_MENUS_LEFT_CONTENT # class="disabled-column"# ENDIF #>
# START menus_right #
{menus_right.MENU}
# END menus_right #
</aside>
# ENDIF #
<div id="main" class="# IF C_MENUS_LEFT_CONTENT #main-with-left# ENDIF ## IF C_MENUS_RIGHT_CONTENT #main-with-right# ENDIF #" role="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top-content">
# START menus_top_central #
{menus_top_central.MENU}
# END menus_top_central #
</div>
<div class="spacer"></div>
# ENDIF #
<div id="main-content" itemprop="mainContentOfPage">
# INCLUDE ACTIONS_MENU #
<nav id="breadcrumb" itemprop="breadcrumb">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://data-vocabulary.org/ListItem">
<a href="{START_PAGE}" itemprop="item">
<span itemprop="name">${LangLoader::get_message('home', 'main')}</span>
<meta itemprop="position" content="1" />
</a>
</li>
# START link_bread_crumb #
<li itemprop="itemListElement" itemscope itemtype="http://data-vocabulary.org/ListItem" # IF link_bread_crumb.C_CURRENT # class="current" # ENDIF #>
<a href="{link_bread_crumb.URL}" itemprop="item">
<span itemprop="name">{link_bread_crumb.TITLE}</span>
<meta itemprop="position" content="{link_bread_crumb.POSITION}" />
</a>
</li>
# END link_bread_crumb #
</ol>
</nav>
# INCLUDE KERNEL_MESSAGE #
{CONTENT}
</div>
# IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
<div id="bottom-content">
# START menus_bottom_central #
{menus_bottom_central.MENU}
# END menus_bottom_central #
</div>
# ENDIF #
</div>
<div class="spacer"></div>
</div>
# IF C_MENUS_TOP_FOOTER_CONTENT #
<div id="top-footer">
# START menus_top_footer #
{menus_top_footer.MENU}
# END menus_top_footer #
<div class="spacer"></div>
</div>
# ENDIF #
<footer id="footer">
# IF C_MENUS_FOOTER_CONTENT #
<div class="footer-content">
# START menus_footer #
{menus_footer.MENU}
# END menus_footer #
</div>
# ENDIF #
<div class="footer-infos">
<span>
{L_POWERED_BY}
<a href="https://www.phpboost.com" title="PHPBoost">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/logo-pbt-footer.png" alt="logo pbt" /> PHPBoost
</a>
</span>
# IF C_DISPLAY_AUTHOR_THEME #
<span class="footer-infos-separator"> | </span>
<span class="footer-infos-template-author">{L_THEME} {L_THEME_NAME} {L_BY} <i class="fa fa-sld-sld sld"></i> <a href="{U_THEME_AUTHOR_LINK}">{L_THEME_AUTHOR}</a></span>
# ENDIF #
# IF C_DISPLAY_BENCH #
<span>
|
{L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} - {MEMORY_USED}
</span>
# ENDIF
<div class="page_loader">
<div id="inner">
<img src="\templates\bluestones\images\Ellipsis-2-1s-277px.gif" alt="loader" />
</div>
</div>
</div>
</footer>
<span id="scroll-to-top" class="scroll-to" aria-label="${LangLoader::get_message('scroll-to.top', 'user-common')}"><i class="fa fa-chevron-up" aria-hidden="true" title="${LangLoader::get_message('scroll-to.top', 'user-common')}"></i></span>
upload du gif dans le fichier images du thème + mise en place du chemin d'accées
Envoie des notif
Site en erreur Sorry, we encountered a problem and we cannot complete your request..
L'erreur vient du placement du code
J'arrête pour se soir je regarde sa demain
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
...
# ENDIF #
<div class="page_loader">
...
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Mettre dans le fichier js où dans les body tpl? Si body html comment faire l'appel du jQuery
Ajout dans le fichier js du thème (sticky-header.js) le code aucun résultat.
babsolune :
le # à la fin du ENDIF a été supprimé par mégarde
...
# ENDIF #
<div class="page_loader">
...
...
# ENDIF #
<div class="page_loader">
...
Mets le loader en bas du site normal.
Édité par Lapoésie01600 Le 04/04/2021 à 20h37
Héberger grâce à vous chez o2Switch
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Citation :
Si body html comment faire l'appel du jQuery
jQuery est appelé grâce à la variable # INCLUDE JS_TOP # du frame.tpl, il faut donc placer le script js après cette variable, et donc le body.tpl est un emplacement acceptable puisque déclaré après cette variable.
Édité par babsolune Le 05/04/2021 à 09h01
Lapoésie01600 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre Lapoésie01600
- Inscrit le : 22/09/2020
- Site internet
- Groupes :
Caché :
</div><div class="page_loader">
<div id="inner">
[img alt="loader"]\templates\bluestones\images\Ellipsis-2-1s-277px.gif[/img]
</div>
# INCLUDE JS_TOP #
<script type="text/javascript">
$(window).load(function() {
$(".page_loader").fadeOut("slow").animate({top:-1600},1200);
});
</script>
<div id="inner">
[img alt="loader"]\templates\bluestones\images\Ellipsis-2-1s-277px.gif[/img]
</div>
# INCLUDE JS_TOP #
<script type="text/javascript">
$(window).load(function() {
$(".page_loader").fadeOut("slow").animate({top:-1600},1200);
});
</script>
Sa ne marche pas ou peux etre le problème ?
Le gif se mets touen en bas du site, est-ce normal ?
Quand on rajoute ce code dans le body :
Caché :
<script type="text/javascript">
$(window).load(function() {
$(".page_loader").fadeOut("slow").animate({top:-1600},1200);
});
</script>
$(window).load(function() {
$(".page_loader").fadeOut("slow").animate({top:-1600},1200);
});
</script>
La pop-up pour la connexion disparais
Édité par Lapoésie01600 Le 05/04/2021 à 14h55
Héberger grâce à vous chez o2Switch
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie