fredlamour a écrit : ↑31 juil. 2017, 15:12
Bonjour et merci pour ce thème à onglet, je suis fan.
Par contre je ne comprends pas comment ajouter de l'info dans la barre des onglets comme l'heure, la présence ...
Quelqu'un pour m'expliquer svp ?
Slt , tu crées un fichier php que tu nommes par ex horloge.php, que tu mets dans le dossier ressources des scripts ( lien plus bas) dedans tu lui mets
Code : Tout sélectionner
<?php
date_default_timezone_set('Europe/Paris');
echo date('H i') ;
ensuite tu crées un script type "info" "autre"
requête : /var/www/html/core/php/../../plugins/script/core/ressources/horloge.php
tu vas sur ton desgin et tu crées équipements voilà c'est tout.
edit: d'ailleurs il est sur le market des script je viens de penser
Sinon une autre forme d'horloge un peut différente par la forme et la façon de faire
tu crées tj un fichier mais par ex clock.html que tu mets dans un répertoire par ex en suivant le post dans /montheme/
Code : Tout sélectionner
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="robots" content="noindex,follow" />
<link rel="canonical" href="http://www.zeitverschiebung.net/fr/" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
html {
font-family: 'Ubuntu', Arial, sans-serif;
font-weight: normal;
}
div.clock {
width: 100%;
text-align: center;
}
div.clock {
color: white;
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
div.clock a:hover {
text-decoration: underline;
}
div.clock div.date {
color: white;
font-size: 1.5em;
margin: 8px 0;
}
div.clock div.time {
font-size: 3em;
font-weight: 200;
}
div.clock div.time span {
border-radius: 5px;
padding: 1px 4px 3px 4px;
color: #fff;
/* fallback */
background: #000;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #555, #000);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #555, #000);
/* IE 10 */
background: -ms-linear-gradient(top, #555, #000);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #555, #000);
}
div.clock div.time strong {
font-weight: 100;
font-size: 1em;
margin-left: 5px;
color: #666;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-378139-21']); _gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');ga.type = 'text/javascript';ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="clock" id="clock">
<div class="date"></div>
<div class="time"></div>
</div>
<script type="text/javascript"><!--
$(document).ready(function() {
$("div#clock").simpleClock(1);
});
//***** SIMPLECLOCK PLUGIN http://ticktoo.com/blog/35-simpleClock+-+jQuery+Plugin *****/
(function ($) {
$.fn.simpleClock = function ( utc_offset ) {
// Aktuelle Sprache ermitteln
var language = "fr";
// Tage & Monate in jeweiliger Landessprache
switch (language) {
case "de":
var weekdays = ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."];
var months = ["Jan.", "Feb.", "Mär.", "Apr.", "Mai", "Juni", "Juli", "Aug.", "Sep.", "Okt.", "Nov.", "Dez."];
break;
case "es":
var weekdays = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"];
var months = ["Ene", "Feb", "Mar", "Abr", "Mayo", "Jun", "Jul", "Ago", "Sept", "Oct", "Nov", "Dic"];
break;
case "fr":
var weekdays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
var months = ["Jan", "Fév", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc"];
break;
default: // "en" -> Standard: Englisch
var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
break;
}
var clock = this;
// getTime - Where the magic happens ...
function getTime() {
var date = new Date();
var nowUTC = date.getTime() + date.getTimezoneOffset()*60*1000;
// alert( nowUTC +' vs. '+ date.getTime() );
// Zeitverschiebung addieren/subtrahieren: X STD * 60 Min. * 60 Sek. * 1000 Millisek.
date.setTime( nowUTC + (utc_offset*60*60*1000) );
var hour = date.getHours();
///// AM, PM für Language "en"
if ( language == "en" ) {
//it is pm if hours from 12 onwards
suffix = (hour >= 12)? 'p.m.' : 'a.m.';
//only -12 from hours if it is greater than 12 (if not back at mid night)
hour = (hour > 12)? hour -12 : hour;
//if 00 then it is 12 am
hour = (hour == '00')? 12 : hour;
}
return {
day: weekdays[date.getDay()],
date: date.getDate(),
month: months[date.getMonth()],
year: date.getFullYear(),
hour: appendZero(hour),
minute: appendZero(date.getMinutes()),
second: appendZero(date.getSeconds())
};
}
// appendZero - If the number is less than 10, add a leading zero.
function appendZero(num) {
if (num < 10) {
return "0" + num;
}
return num;
}
// refreshTime - Build the clock.
function refreshTime(clock_id) {
var now = getTime();
clock = $.find('#'+clock_id);
$(clock).find('.date').html(now.day + ', ' + now.date + '. ' + now.month + ' ' + now.year);
$(clock).find('.time').html("<span class='hour'>" + now.hour + "</span>:<span class='minute'>" + now.minute + "</span>:<span class='second'>" + now.second + "</span>");
if ( typeof(suffix) != "undefined") { // am oder pm ?
$(clock).find('.time').append('<strong>'+ suffix +'</strong>');
}
}
// Get individual clock_id
var clock_id = $(this).attr('id');
// Tick tock - Run the clock.
refreshTime(clock_id);
setInterval( function() { refreshTime(clock_id) }, 1000);
};
})(jQuery);
//--></script>
</body>
</html>
tu crées un texte/html dedans tu colles
Code : Tout sélectionner
<!-- CADRE PRINCIPALE -->
<div style="width:100%;
box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5);
height:100%;
background-color: rgba(0,0,0,0.1)">
<!-- Horloge -->
<div align=center
>
<object data="montheme/clock.html" type="text/html" width="300" height="200">
<a href="montheme/clock.html"></a>
</object>
</div>
</div>
et il s'affichera , tu peux jouer sur les parametre width et height pour la largeur et la hauteur , et aussi dans box shadow ( contour de ta boite , voir style css ect )