Google Web Designer - Themes HML5 - ZSPIN

Some tutorials for starting with zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 13:28

@Playmobil

Test ça et il te faut ça aussi : JQUERY à mettre dans le assets


sous le </body>

Code : Tout sélectionner

<script>
   setTimeout(function(){
        $('.info_bandeau').css({'background-color':  $('.zspin-submenu').text() });
    }, 350);
</script>
et avant </html>
------------------------------------------------------------------------------------------------------------------


dans le xml

<submenu>couleur en RGB ou #11111</submenu>
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
babamimi262626
Connaisseur
Connaisseur
Messages : 271
Inscription : 21 juil. 2017 - 13:20
Localisation : sud-est
A remercié : 129 fois
A été remercié : 52 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par babamimi262626 » 28 oct. 2017 - 13:40

dans l’aperçu de GWD ma vidéo rentre niquel dans ma télé, mais sur zspin sa ne prend que la moitier de la télé (en hauteur) j'ai essayé plein de manip je suis perdu
par contre je viens de m'apercevoir qui si je supprime la vidéo de mon zip et que je la met dans le dossier vidéo (comme dans ton tuto) la vidéo ne se déclenche pas

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 14:01

@babamimi262626 : pour que cela fonctionne, il faut que tu édites ton code en changeant la source en Video.mp4 directement (j'ai juste rayé ce que tu ne dois pas changer)

<video src="Video.mp4" class="gwd-video-1czy" loop="loop" id="video_demo" autoplay="autoplay"></video>

Concernant l'histoire du cadre

Envoie une capture d'écran svp et vas sur https://pastebin.com/" onclick="window.open(this.href);return false; pour fournir ton index.html please

Vraiment @Playmobil aussi, https://pastebin.com/" onclick="window.open(this.href);return false; c'est plus pratique pour tout voir, car juste avec un morceau c'est pas évident
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
Playmobil
Guide
Guide
Messages : 1849
Inscription : 11 janv. 2013 - 00:00
Localisation : Trou perdu sur la frontière Belge !
A remercié : 86 fois
A été remercié : 177 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Playmobil » 28 oct. 2017 - 14:26

camarade35 a écrit :@Playmobil

Test ça et il te faut ça aussi : JQUERY à mettre dans le assets


sous le </body>

Code : Tout sélectionner

<script>
   setTimeout(function(){
        $('.info_bandeau').css({'background-color':  $('.zspin-submenu').text() });
    }, 350);
</script>
et avant </html>
------------------------------------------------------------------------------------------------------------------


dans le xml

<submenu>couleur en RGB ou #11111</submenu>

Heuuu @camarade35, pas testé encore, mais rien qu'a la lecture ça va pas ! :mrgreen:
Je ne veux pas renseigner la couleur dans le .XML, mais selon <submenu> qui contient par exemple CPS1, CPS2 etc etc ;)

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 14:27

voilà pourquoi faut tout partager, boulet :twisted:

dans ce cas

Code : Tout sélectionner

<script>
setTimeout(function(){
        $('.info_bandeau').css({'background-color':  themeColors[$('.zspin-name').text()] });
    }, 450);
</script>
et tu fais un colors.js que tu renseigne dans ton html

Code : Tout sélectionner

<script src="assets/colors.js" type="text/javascript"></script>
et le colors.js en gros

Code : Tout sélectionner

var themeColors = {
	// System Colors;
'CPS': '#E6B0FA',
'CPS2': '#B0EEFA',
'CPS3': '#0076B3',
'NEO GEO': '#6DC8BF',
'SAMERE': '#960C0A',	
}
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
babamimi262626
Connaisseur
Connaisseur
Messages : 271
Inscription : 21 juil. 2017 - 13:20
Localisation : sud-est
A remercié : 129 fois
A été remercié : 52 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par babamimi262626 » 28 oct. 2017 - 14:44

voila la capture du theme, vous moquer pas c'est mon premier :? c' est style hyperspin pour le main menu. J'aimerer que la vidéo soit dans toute la télé.
Image

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 14:46

euh on voit pas grand chose en fait.. et le PASTEBIN !!!!!!
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
Playmobil
Guide
Guide
Messages : 1849
Inscription : 11 janv. 2013 - 00:00
Localisation : Trou perdu sur la frontière Belge !
A remercié : 86 fois
A été remercié : 177 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Playmobil » 28 oct. 2017 - 14:49

camarade35 a écrit :voilà pourquoi faut tout partager, boulet :twisted:

dans ce cas

Code : Tout sélectionner

<script>
setTimeout(function(){
        $('.info_bandeau').css({'background-color':  themeColors[$('.zspin-name').text()] });
    }, 450);
</script>
et tu fais un colors.js que tu renseigne dans ton html

Code : Tout sélectionner

<script src="assets/colors.js" type="text/javascript"></script>
et le colors.js en gros

Code : Tout sélectionner

var themeColors = {
	// System Colors;
'CPS': '#E6B0FA',
'CPS2': '#B0EEFA',
'CPS3': '#0076B3',
'NEO GEO': '#6DC8BF',
'SAMERE': '#960C0A',	
}

Ca me parait correct maintenant ! :D Je va tester ça après ! :lol:

Par contre mes recherches google sur le systeme SAMERE ne donne rien de probant ! :lol: :mrgreen: :lol:

Avatar de l’utilisateur
babamimi262626
Connaisseur
Connaisseur
Messages : 271
Inscription : 21 juil. 2017 - 13:20
Localisation : sud-est
A remercié : 129 fois
A été remercié : 52 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par babamimi262626 » 28 oct. 2017 - 14:54

" onclick="window.open(this.href);return false; voila. tu peut pas cliquer sur l'image de la capture ?

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 14:55

Playmobil a écrit :
camarade35 a écrit :voilà pourquoi faut tout partager, boulet :twisted:

dans ce cas

Code : Tout sélectionner

<script>
setTimeout(function(){
        $('.info_bandeau').css({'background-color':  themeColors[$('.zspin-name').text()] });
    }, 450);
</script>
et tu fais un colors.js que tu renseigne dans ton html

Code : Tout sélectionner

<script src="assets/colors.js" type="text/javascript"></script>
et le colors.js en gros

Code : Tout sélectionner

var themeColors = {
	// System Colors;
'CPS': '#E6B0FA',
'CPS2': '#B0EEFA',
'CPS3': '#0076B3',
'NEO GEO': '#6DC8BF',
'SAMERE': '#960C0A',	
}

Ca me parait correct maintenant ! :D Je va tester ça après ! :lol:

Par contre mes recherches google sur le systeme SAMERE ne donne rien de probant ! :lol: :mrgreen: :lol:
dit pas merci vilain :evil: :mrgreen:
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 15:01

babamimi262626 a écrit : voila. tu peut pas cliquer sur l'image de la capture ?
Si mais tu as oublié de faire rogner après avoir collé dans paint, du coup on a tout le blanc et le zoom est déguelasse.

Sinon, ton souci vient que tu n'as pas mis la vidéo et le cadre dans la même DIV

Code : Tout sélectionner

  <div id="cadre">
    <video src="Video.mp4" class="gwd-video-1s85 gwd-gen-5hv1gwdanimation" id="video" loop="loop" autoplay="autoplay"></video>
  </div>

Fais plus comme cela

Code : Tout sélectionner

    #cadre {
      position: absolute;
      left: 19%;
      top: 40%;
      width: 17%;
      height: 24%;
    }

    .gwd-img-p1b5 {
      position: relative;
      width: 23%;
      height: 26.09%;
      left: 18%;
      top: 39%;
    }
    .gwd-video-1s85 {
      position: absolute;
      left: 0%;
      width: 100%;
      transform-style: preserve-3d;
      opacity: 0;
      transform: translate3d(-2px, 9px, 0px);
      height: 100%;
    }

Code : Tout sélectionner

 <div id="cadre">
    <video src="Video.mp4" class="gwd-video-1s85 gwd-gen-5hv1gwdanimation" id="video" loop="loop" autoplay="autoplay"></video>
    <img src="assets/tv1_3.png" class="gwd-img-p1b5" id="tv" data-gwd-tl-locked="">
  </div>
Je te conseille de commencer à caler ta vidéo avec la TV dans un premier temps ( tout en mettre en position 0%-0% et ensuite bouger la vidéo)
Une fois les deux éléments calé, il te suffira de jouer sur la position et la taille de la DIV #cadre
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
Playmobil
Guide
Guide
Messages : 1849
Inscription : 11 janv. 2013 - 00:00
Localisation : Trou perdu sur la frontière Belge !
A remercié : 86 fois
A été remercié : 177 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Playmobil » 28 oct. 2017 - 15:30

camarade35 a écrit :
dit pas merci vilain :evil: :mrgreen:
J'aurais dit Merci après test ! :D

MERCI Ô grand maitre du HTML5 @camarade35 !!

Image

:mrgreen:

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 15:39

Playmobil a écrit :
camarade35 a écrit :
dit pas merci vilain :evil: :mrgreen:
J'aurais dit Merci après test ! :D

MERCI Ô grand maitre du HTML5 @camarade35 !!

Image

:mrgreen:
LoL donc c'est bon ?
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
Playmobil
Guide
Guide
Messages : 1849
Inscription : 11 janv. 2013 - 00:00
Localisation : Trou perdu sur la frontière Belge !
A remercié : 86 fois
A été remercié : 177 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Playmobil » 28 oct. 2017 - 16:19

camarade35 a écrit : LoL donc c'est bon ?
Je ne sais pas encore @camarade35 :lol:

Pas encore testé, c'est les vacances et ma femme squatte mon PC pour jouer à Planet Coaster du matin au soir, du coup je suis relégué sur un vieux laptop ! :mrgreen:

Avec mon ordinosaure, j'arrive à travailler, mais faut suivre le rythme du PC à savoir LENT ! :lol:

Avatar de l’utilisateur
babamimi262626
Connaisseur
Connaisseur
Messages : 271
Inscription : 21 juil. 2017 - 13:20
Localisation : sud-est
A remercié : 129 fois
A été remercié : 52 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par babamimi262626 » 28 oct. 2017 - 19:52

merci, j'ai remit la capture plus grande normalement. je testerai tes lignes se soir si je suis en etat ;)
Image

Avatar de l’utilisateur
Playmobil
Guide
Guide
Messages : 1849
Inscription : 11 janv. 2013 - 00:00
Localisation : Trou perdu sur la frontière Belge !
A remercié : 86 fois
A été remercié : 177 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Playmobil » 28 oct. 2017 - 20:43

babamimi262626 a écrit :merci, j'ai remit la capture plus grande normalement. je testerai tes lignes se soir si je suis en etat ;)
Toi aussi tu aimes la bière et le Whisky ? :lol: :lol:

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par camarade35 » 28 oct. 2017 - 21:11

Playmobil a écrit :
babamimi262626 a écrit :merci, j'ai remit la capture plus grande normalement. je testerai tes lignes se soir si je suis en etat ;)
Toi aussi tu aimes la bière et le Whisky ? :lol: :lol:
Du coup je me demande si c'est le PC ou le mec qui est lent chez @Playmobil :mrgreen:
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
babamimi262626
Connaisseur
Connaisseur
Messages : 271
Inscription : 21 juil. 2017 - 13:20
Localisation : sud-est
A remercié : 129 fois
A été remercié : 52 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par babamimi262626 » 28 oct. 2017 - 22:54

on va dire que j'aime tout ce qui dépasse 5° :-)

Avatar de l’utilisateur
Playmobil
Guide
Guide
Messages : 1849
Inscription : 11 janv. 2013 - 00:00
Localisation : Trou perdu sur la frontière Belge !
A remercié : 86 fois
A été remercié : 177 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par Playmobil » 28 oct. 2017 - 23:20

Bande de crétins ! :D

Bière pas en dessous de 7°

Whisky, oui mais avec 2 glaçons ! :P

Avatar de l’utilisateur
babamimi262626
Connaisseur
Connaisseur
Messages : 271
Inscription : 21 juil. 2017 - 13:20
Localisation : sud-est
A remercié : 129 fois
A été remercié : 52 fois

Re: Google Web Designer - Themes HML5 - ZSPIN

Message par babamimi262626 » 28 oct. 2017 - 23:58

après l' été j'ai trop d'abkro, du coup pour moi c'est pastis et rhum :lol:

bon decidement j'ai copier tes codes corriger les grandeurs en partant de 0 etc... et resulatat pareil sur zspin :?
voila se que j'ais sur apercu GWD

Image

je n'aurrai pas zapper un reglage sur zspin? j'arrete pour se soir je verrai demain bonne nuit !

Répondre

Revenir à « Tutorials »