Добавить свой виджет (в приветствие)

автор Valerie Июнь 20th 2009, 16:48

Подскажите, пожалуйста, как можно добавить виджет в приветствие. Сам виджет есть у меня на компе, ввиде файла html + css и кучи картинок, а вот как его разместить - для меня проблема scratch

автор Milena Июнь 20th 2009, 17:09

заходите в ПА-модули-конфигурация главной страницы-создать персональный виджет
Удачи!!

автор Valerie Июнь 20th 2009, 17:13

Я же написала, что виджет хранится у меня на компе.... а где находятся стандартные виджеты я знаю, только они мне не интересны сейчас. И да, в приветствии. Читайте, пожалуйста, а?

автор Milena Июнь 20th 2009, 17:19

вы тоже внимательно читайте!!

автор Valerie Июнь 20th 2009, 17:22

Я и говорю, мне не нужны виджеты типа "Партнеры", "Форум", "Навигация". Нужный мне виджет ввиде html-файла. И эта панель не позволяет добавить виджет в приветствие, а слева или справа мне не нужно

автор Irbis Июнь 20th 2009, 17:42

Содержимое файлов CSS добавить в CSS форума, картинки залить на радикал, в html отредактировать пути до картинок и CSS и вставить в приветствие.

автор Valerie Июнь 20th 2009, 17:52

А JavaScript мне куда деть?)) Он отдельным файлом и что-то уж очень большой...

автор Irbis Июнь 20th 2009, 17:53

залейте куда-нибудь unknown

автор Valerie Июнь 20th 2009, 17:56

АА! Куда, я не знаюТ____Т И там еще какие-то файлы странные, один с разрешением plist и два с названием .DS_Store

автор Antony Июнь 20th 2009, 17:59

два с названием .DS_Store

о_О mac os x? можеш выложить тут весь виджет в теге кода?

автор Antony Июнь 20th 2009, 18:02

или давай ты его архивом куда нибудь выложиш? (ifolder, например)

автор Valerie Июнь 20th 2009, 18:04

Ладно, тогда по порядку.
html

Код:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Moon Phase Widget</title>  <style type="text/css">@import url(moonphase.css);</style> <script type="text/javascript" src="moonphase.js"></script> </head> <body onload="updatePhase();"> <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);"> <div class="bevel"></div> <div class="border"></div> <div id="moon"> <div id="shadow"> </div> </div>  <div class="flip" id="fliprollie"></div> <div class="flip" id="flip" onclick="showPrefs(event);" onmouseover="enterflip(event);" onmouseout="exitflip(event);"></div> </div> <div id="back"> <div class="bevel"></div> <div class="border"></div> <div id="moonb"> <div id="shadowb"> </div> </div> <div id="donate"> <p> Enjoy<br />Moon Phase?<br />Donations appreciated!<br /> <a href="#" onclick="widget.openURL('http://www.jonwiley.com/widgets/moonphase/');"><img src="images/donate.gif" alt="Make payments with PayPal - it's fast, free and secure!" /></a><br /> <a href="#" onclick='hidePrefs();'>Flip ➪</a> </p> </div> </div> </body> </html>

css

Код:: /* Moon Phase Widget CSS by Jon Wiley */ html, body { margin: 0; padding: 0; } #back { display: none; } #front, #back, .border, #moon, #moonb, #shadow, #shadowb, .bevel { height: 125px; width: 125px; background-position: center center; background-repeat: no-repeat; } .bevel, .border { position: absolute; } .bevel { background-image: url(images/bevel.png); z-index: 100; } .border { background-image: url(images/border.png); } #shadow, #shadowb { background-image: none; padding-top: 0px; padding-left: 0px; } #moon { background-image: url(images/moon.png); } #moonb { background-image: url(images/moonb.png); } #donate { position: absolute; text-align: center; width: 100px; top: 8px; left: 13px; color: #fff; font-family: verdana; font-size: 10px; line-height: 11px; z-index: 1000; } #donate a { color: #fff; text-decoration: none; font-size: 12px; } #donate img { border: 0; } #donate a img:hover { opacity: 0.9; background-color: #99f; } /* For flip buttons */ .flip { position: absolute; top: 110px; left: 110px; width: 13px; height: 13px; } #flip { opacity: 0; background: url(images/black_i.png) no-repeat top left; z-index: 8000; } #fliprollie { display: none; opacity: 0.25; background: url(images/black_rollie.png) no-repeat top left; z-index: 7999; }

javascript

Код:: // specify the start time animation.firstElement = document.getElementById ('flip'); // specify the element to fade animation.timer = setInterval ("animate();", 13); // set the animation function animation.from = animation.now; // beginning opacity (not ness. 0) animation.to = 1.0; // final opacity animate(); // begin animation flipShown = true; // mark the flipper as animated } } // mouseexit() is the opposite of mousemove() in that it preps the preferences flipper // to disappear. It adds the appropriate values to the animation data structure and sets the animation in motion. function mouseexit (event) { if (flipShown) { // fade in the flip widget if (animation.timer != null) { clearInterval (animation.timer); animation.timer = null; } var starttime = (new Date).getTime() - 13; animation.duration = 500; animation.starttime = starttime; animation.firstElement = document.getElementById ('flip'); animation.timer = setInterval ("animate();", 13); animation.from = animation.now; animation.to = 0.0; animate(); flipShown = false; } } // animate() performs the fade animation for the preferences flipper. It uses the opacity CSS property to simulate a fade. function animate() { var T; var ease; var time = (new Date).getTime(); T = limit_3(time-animation.starttime, 0, animation.duration); if (T >= animation.duration) { clearInterval (animation.timer); animation.timer = null; animation.now = animation.to; } else { ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration)); animation.now = computeNextFloat (animation.from, animation.to, ease); } animation.firstElement.style.opacity = animation.now; } // these functions are utilities used by animate() function limit_3 (a, b, c) { return a < b ? b : (a > c ? c : a); } function computeNextFloat (from, to, ease) { return from + (to - from) * ease; } // these functions are called when the info button itself receives onmouseover and onmouseout events function enterflip(event) { document.getElementById('fliprollie').style.display = 'block'; } function exitflip(event) { document.getElementById('fliprollie').style.display = 'none'; }

В архиве есть и картинки еще, но если интересно, то вот ссылка, где я сама скачала http://freshmac.ru/?p=1782
Увидела название "Фазы луны на вашем Маке"Т____Т Но мне все равно нужно вставить этот виджет в форум...

автор Antony Июнь 20th 2009, 18:37

вобще то это не для форумов виджет, а для маковского dashboard -_- , но я так и быть попробую оптимизировать его для установки на форум и отпишу здесь результат

автор Antony Июнь 20th 2009, 18:47

вот оптимизированный код виджета, вставляете только его и все работает. Проверено

Код:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Moon Phase Widget</title>  <style type="text/css">@import url(http://firstucoz.ucoz.net/widjets/moonphase/moonphase.css);</style> <meta name="author" content="Antony-crazzy501@gmail.com"> <script type="text/javascript" src="http://firstucoz.ucoz.net/widjets/moonphase/moonphase.js"></script> </head> <body onload="updatePhase();"> <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);"> <div class="bevel"></div> <div class="border"></div> <div id="moon"> <div id="shadow"> </div> </div> </div> <div id="back"> <div class="bevel"></div> <div class="border"></div> <div id="moonb"> <div id="shadowb"> </div> </div> </div> </body> </html>