Ajouter un url au logo

Personnaliser SCENARIstyler
1

N’étant pas un programmeur, je procède par mimétisme pour modifier les skins. Cela a ses limites et donc j’aurais besoin d’un peu d’aide.

Je travaille sous myScenari.

Je désire associer mon logo dans le skin d’Opale au site d’accueil que j’ai généré avec OptimOffice, pour qu’en cliquant sur le logo, je retour à la page d’accueil dans la même fenêtre.

La page d’Opale est : Introduction [Turbines hydrauliques - Capsules théoriques]

Voici le code css que j’utilise :

body.default::before {
content: "";
background: #ffffff url("../img/tpl/logoSimTurb90.svg") no-repeat scroll 30px 3px / auto 60px;
height: 65px;
position: absolute;
left: 0;
right: 0;
top: 5px;
}

Présentement le logo n’est pas cliquable.

En cliquant j’aimerais que la page www.simturb.com apparaisse (il s’agit d’un renvoi vers : Accueil [Turbines hydrauliques] )

Quel est le code que je dois ajouter?

Vous remerciant à l’avance pour votre expertise.

Michel

2

Bonjour
Pour créer un logo cliquable cela ne me parait pas possible en css. Le mieux serait de passer par ScenariBuilder.
Une autre solution consisterait à ajouter le logo en javascript il serait ainsi possible de créer ce lien.
Sans avoir tester à mettre dans le skin.js :

scOnLoads[scOnLoads.length] = {
    onLoad: function () {
        const bd = dom.newBd(document.createDocumentFragment())
        bd.elt('img', 'logo').listen('click', () => {
            location.href = 'http://www.simturb.com/'
        }).att('src', '../skin/img/tpl/logoSimTurb90.svg').up()
        document.body.insertBefore(bd.current(), document.body.firstChild)
    }
}

et dans skin.css remplacer la déclaration

body.default::before {
content: "";
background: #ffffff url("../img/tpl/logoSimTurb90.svg") no-repeat scroll 30px 3px / auto 60px;
height: 65px;
position: absolute;
left: 0;
right: 0;
top: 5px;
}

par

img.logo {
height: 65px;
position: absolute;
left: 0;
right: 0;
top: 5px;
}

Cordialement,
Nicolas

2 « J'aime »
3

Ouf!! Je vais tester.
Merci beaucoup,
Michel

4

Bon. Dans Chrome, j’ai apporté les corrections de façon temporaire ainsi

image
image1920×1080 398 KB

et
image
image1920×1080 413 KB

Résultat, le logo est disparu et évidemment n’est pas cliquable.
Vous avez un avis?

5

Vous devez modifier et tester votre skin en local.
Le code JavaScript sera exécuté au chargement de la page pas une fois que la page est stabilisée.

6

Bonjour,
Merci, cela fonctionne avec une petite correction pour le js, que je laisse ici pour référence:

scOnLoads[scOnLoads.length] = {
onLoad: function () {
    const bd = dom.newBd(document.createDocumentFragment())
    bd.elt('img', 'logo').listen('click', () => {
        location.href = 'http://www.simturb.com/'
    }).att('src', '../skin/img/tpl/logoSimTurb90.svg').up()
    document.body.insertBefore(bd.current(), document.body.firstChild)
}

Il manquait le /skin.

Problème résolu!!

1 « J'aime »
7

Ok merci, j’ai édité le post de @nicolas.boyer pour ajouter /skin car il est tagué comme solution.

9

je n’ai pas compris à quoi tu fais référence :sweat_smile: