Design F$B333 avec centralisation

Bonjour @Domotech,

Accepterais-tu de partager le code de tes cadres avec les coins arrondis (à moins que ce ne soit des tuiles?) car ils me plaisent beaucoup, j’imagine qu’il faut rajouter un « border-raduis: XXpx » dans le code du cadre mais au pif ça ne donne pas grand chose… :sweat_smile:

Merci d’avance.

Bonjour

La copie écran est celle d’origine du design de F$B333, mais je pense que c’est juste un icône avec action de retour arrière ou à la page d’accueil

Bonne continuation sur ton design, j’espère que tu ais sur la V4 :slight_smile:

Oui en CSS c’est pas compliqué, fait une recherche Google avec CSS cadre arrondie, il y a pleins de possibilités

merci @Spine grace à toi ca marche!
J’y avais passé du temps mais je n’avais pas compris qu’il fallait renseigner le champ « lien »

1 « J'aime »

Merci pour ta réponse,

J’avais bien fait une recherche Google qui avait abouti au « border-raduis » comme indiqué précédemment, le problème c’est que mes connaissances en CSS sont très limitées et je ne sais pas bien le placer ou l’utiliser. Il y a de l’idée mais ce n’est pas encore ça :grinning: :
Annotation%202020-01-06%20233023
Je continue à chercher.

C’est pourtant un bon début :slight_smile:

Tu fais la même chose sur les coins haut du bandeau avec le titre

Et une transparence à 100% sur le fond

Bonjour,

Merci pour tes conseilles qui m’ont permis de trouver la solution car je m’étais focalisé sur le cadre :
Annotation%202020-01-07%20123338
Voici le code pour ceux que ça intéressent :

<!--

CADRE
- Copiez les images dans montheme/images
- Dans le mode Design, ajoutez "Texte/html" puis copier/coller le code html
-->

<!-- PRINCIPALE -->
<div style="
width:100%;
border-radius: 30px 30px 30px 30px;            
box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5);">

<!-- Imagette  -->
<div style="
height:30px;
width:30px;
position:absolute;
margin-top:6px;
margin-left:5px;
opacity:0.8;
max-width:100%;
height:auto;">
<img src="montheme/images/icon_mini_volets.png" height=30px width=30px></div>

<!-- TITRE -->
<div align=center style="color:rgba(255,255,255,0.8);
font-size:16px;
height:40px;
background-color: rgba(0,0,0,0.6);
border-radius: 30px 30px 0px 0px;
padding-top:10px;
font-family:Arial;
font-weight:normal;"
>Réveil</div> <!-- Titre du CADRE -->

<!-- CONTENU -->
<div style="height:120px; border-radius: 0px 0px 30px 30px; background-color: rgba(0,0,0,0.5);"> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>

</div>

Et merci @Domotech pour l’idée. Il ne me reste plus qu’à refaire tous mes cadres et j’en ai un paquet :grinning: .

Désolé de ne pas avoir répondu directement mais j suis content qu’on t as aidé!

Moi j’avais utilisé la fonction overflow:hidden pour cacher ce qui dépasse!

Bon courage

Pas de soucis, c’est chouette aussi de trouver par soi-même plutôt que de bêtement faire du copier-coller, c’est d’ailleurs ce que je préfère dans Jeedom : apprendre!
Merci pour tes vidéos au passage, j’espère qu’après le niveau débutant on aura le droit au niveau intermédiaire voir expert :innocent: .

Bonne journée.

1 « J'aime »

C’est prévu! Mais je veux avoir une chaîne assez structurée pour le moment donc j Essaye un maximum de parler des bases avant de passer à le tape supérieure.

Mais j suis content de savoir quil y a cette attente comme ça ça me fait réfléchir.

Merci pour ton commentaire.

1 « J'aime »

Salut,

Pour la gestion du pellet, j’ai fait un tuto ici Pellets Jeedom : Un virtuel pour suivre la consommation au sac près

Si tu as des questions, nhesite pas.

Salut!

Bonne découverte ton site !
Et j’essaye ton tuto ce soir !

Merci :blush:

Ok nhesites pas si tu as besoin d’aide.

PS dans le bouton, va bien chercher la commande sacs utilisés pour lui ajouter + 1 car ça ne marche pas avec le copié collé vu qu’on a pas la même architecture.

Ok!
Ton site mérite d’être connu ! Il est au top, clair et précis !
Il ressort pas dans les recherches google.

Le site est récent donc il faut un peu de temps pour bien être classé, on travaille dessus.

Merci pour le compliment. Cependant, on n’en parle pas trop ici car je vois ça comme un manque de respect envers Jeedom de publier cela ici mais lorsque ça peut être dans le but communautaire comme ici, ça a sa place, je pense.

2 « J'aime »

Si les 4 angles ont le même radius, cela suffit : border-radius: 30px;

sinon

/* 1. coin en haut à gauche /
/
2. coin en haut à droite /
/
3. coin en bas à droite /
/
4. coin en bas à gauche */

Tout à fait mais je me suis dit que j’allais mettre la même chose partout pour m’y retrouver plus tard mais tu as raison.

Bonjour, Est ce que quelqu’un aurait en partage le dossier .zip du design F$B33, car l’ancien forum ne fonctionne plus.
Merci les jeedomeurs :slight_smile:

Bonjour,
Jette un œil sur le plug-in #plugin-designimgswitch si tu ne l’as pas encore fait :wink:

tu as tous les codes disponibles dans le 1er post