• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Полезные советы по дизайну (Готовые рецепты и хитрости)
Полезные советы по дизайну
Piterski
Сообщений: 386
Репутация: 195

Сообщение # 1 | 12:11:07 10 Ноя 2007
  • Как изменить размер картинки\таблицы\прочих объектов?

    Размер картинок таблиц и пр. изменяется атрибутами
    Code
    width="" height=""
    Где height - Высота
    Размер может быть фиксирован, тоесть указан в пикселях, или же плавающий, указан в процентах.

  • Как изменить фон?

    //forum.ucoz.ru/forum/24-6187-1

  • Как сделать ссылку?

    Тег ссылки
    Code
    <a></a>

    Атрибут href отвечат за адрес ссылки

    Code
    <a href="http://ucoz.ru/">Создай свой сайт</a>


  • Как сделать бегущую строку?

    Бегущая строка добовляеться тегами
    Code
    <marquee></marquee>


    Например
    Code
    <marquee>Ucoz Web Service</marquee>


    Есть еще атрибуты такие как
    scrolldelay="" - задержка
    direction="" - направление движения

    Code
    <marquee scrolldelay="80" direction="left">Ucoz Web Service</marquee>


    Если хотим чтобы она остонавливалась при наведении мыши добовляем

    Code
    <marquee scrolldelay="80" direction="left" onmouseover='this.stop()' onmouseout='this.start()' >Ucoz Web Service</marquee>


  • Как вставить картинку?

    За это отвечает тег который имее атрибуты размеров (см.выше) и атрибут ссылки на картинку

    Code
    <img src="http://ucoz.ru/image.jpg" width="775" height="328">


  • Как сделать меню с двух сторон?

    http://abba.ucoz.ru/publ/

  • Как вставить флеш\музыку\видео?

    //forum.ucoz.ru/forum/24-7601-1

  • Как сделать плавный переход?

    В вставить

    Code
    <META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.5)">
    <META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.5)">


  • Как сделать сраницу по разные рарешения экрана?

    Для этого надо ширину таблиц (в основном) указывать не фиксированной, тоесть не в пикселях а в процентах (width="100%")

  • Как сделать другую картинку в адресной строке?
    Для этого просто надо зайти в админ-панель вашего сайта, далее в файловый менеджер, и в корень (тоесть просто в файловый менеджер, не в папки!) загрузить иконку favicon.ico

  • Как изменить цвет текста?
    Это можно сделать двумя спомобами, либо CSS либо тег

    - С помощью css

    Code
    body {color:#FFFFFF}


    - С помощью тега FONT

    Code
    <font color="#FF0000">Текст</font>


  • Загрузить папку "/img" с изображениями в корень вашего FTP
    Кто нить скажите где это всё находиться всю панель облазил не нашёл

    В файловом менеджере создаёшь папку "/img"..

  • Как сделать так чтобы время на сайте/форуме и где угодно отобращалось не в формате AM/PM а 24 часовом

    Панель управления - Общие настройки

  • Поменял шаблон сайта(не автоматически), но дизайн форума не поменялся дизайн форума. как это исправить?

    дизайн каждого модуля меняется отдельно, если не задействована опция - поменять сразу на всём сайте.

  • Как включить свой общий каркас, который сохранен в редакторе каркасов в панели управления?!!

    Вывести каркас в поле для редактирования и нажать на Создать шаблоны

  • Как поставить на главной странице подписку на рассылки

    Никак, рассылка при регистрации включается.
    • Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 2 | 12:11:17 10 Ноя 2007
  • Подскажите! Я вставил на главную страницу чат, а что надо сделать что бы чат был на каждой странице, не вставляя этот код на каждую страницу сайта

    Не вставляя на каждой странице, можно с помощью конструктора щаблонов. Если не знаете как им пользоваться, то на каждой руками.

  • Как сделать так, чтобы вместо скачать была картинка?

    Чтобы сделать ссылку, картинку надо тег картинки <img> заключить тег ссылки <a></a>
    Привер - <a href="Ссылка"><img src="http://ucoz.ru/image.jpg" width="775" height="328"></a>

  • как сделать что на фоне главной страници была картинка и поверх нее был текст

    Нарисовать картинку с текстом, и поставить ее на фон, страницы.

  • Как вставить свой курсор на сайт?

    Чтобы вставить курсор, вам нужна ссылка на него, где он будет закачен.
    Можно закачать на свой сайт или взять например вот тут - www.fantasyflash.ru.
    После того, как есть ссылка у вас, вы заходите в Редактор сайта в Таблица стилей (CSS) и там сверху находите вот такую строчку:
    td, body {font-family:Verdana,Arial,Helvetica; font-size:11px;}

    Затем превращаете ее вот в такую:
    td, body {cursor:url('http://fantasyflash.ru/cursor/cur/cursor53.ani'); font-family:Verdana,Arial,Helvetica; font-size:11px;}

    Жирным выделен ссылка курсора.

    Форматы .gif, .jpeg и пр. неработают.

    Также курсор можно вставить через html тег <style>

    Code
    <style>BODY { cursor:url('http://fantasyflash.ru/cursor/cur/cursor67.ani');}</style>

    Вставляем между <head> </head>
    • Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 3 | 12:11:27 10 Ноя 2007
  • Как установить флеш часы на сайт?

    Можно воспользоваться специальным сервисом http://www.clocklink.com/

    Вот для примера часы от туда

    А вот код для их вставки. (Для примера я взял 3 цвета) и так...

    Синий

    Code
    <embed src="http://www.clocklink.com/clocks/5010-blue.swf?TimeZone=GMT0300&"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

    Красный

    Code
    <embed src="http://www.clocklink.com/clocks/5010-red.swf?TimeZone=GMT0300&"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

    Зеленые

    <embed src="http://www.clocklink.com/clocks/5010-green.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

    На этом сайте много вариантов часов, вы можете с легкостью их установить, главное не забудте установить часовой пояс. (Москва GMT +3)

    Так же можете установить свои флеш часы.

    Code
    <embed src="ССЫЛКА НА ЧАСЫ"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">
    • Прикрепления: 29391787.jpg (4.2 Kb)
    Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 4 | 12:11:37 10 Ноя 2007
  • как в календарь вставить картинку?
    Если я правильно понял. То надо сделать прозрачный фон у ячеек с числами, а в таблице где календарь, поставить на фон картинку.
    • rusak
    Сообщений: 101
    Репутация: 121

    Сообщение # 5 | 12:11:57 10 Ноя 2007
  • Как сделать всплывающее окно?

    <a href="javascript:void(0)" onclick="javascript:window.open('адрес_html_страницы','название','width=400,height=480, status=no,toolbar=no,menubar=no,scrollbars=yes,resiza ble=yes');" class="black">Ссылка</a>

    Что-то вроде этого. Только перед этим создай html-документ, на который и укажешь 'адрес_html_страницы'

    • PGS
    Сообщений: 7
    Репутация: 67

    Сообщение # 6 | 12:12:17 10 Ноя 2007
  • Для одного модуля в CSS изменены некоторые элементы. После добавлен еще один модуль, но для него, похоже, действует прежний вариант CSS...

    Поставьте галочку возле надписи "Заменить путь к файлу со стилями для всех шаблонов" в Управлении стилями.

    • Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 7 | 12:12:27 10 Ноя 2007
  • Как вставить баннер на сайт?

    Code
    <embed width="ширина" height="высота" src="ссылка на банер">

  • Подскажите пожайлуста где можно отредактировать "друзья сайта".

    "Глобальные блоки" находится в выпадающем меню (лево, верх), либо просто перейдя в раздел "Управление дизайном". Редактируются HTML кодом.

  • Как зделать что бы новости выводились на главной!

    Для этого существует специальный код $LAST_NEWS$ который и выводит новости, не только на главной странице.

  • как зделать так, как у вас видите когда статус онлайн у вас пишет "где-то тут" как изменить это ? что с Online поменять на чтото другое?

  • Я не понимаю, где писать краткое описание новости отдельно от полного, НЕ ставя галку в общих настройках для обязательного краткого описания

    Изучайте систему!

  • Мне нужно зделать что на главной выводись случайным образом фотки и чтоб при нижатии их кидало в галерею

    Разбирайтесь в системе. Для этого есть специальный модуль "Информеры"

  • Ещё хотел зделать что бы баннеры в списке ДРУЗЕЙ САЙТА не стояли на месте а передвигались снизу вверх...

    Бегущая строка, в этой теме есть ответ как ее сделать.

  • как правильно вставить .exe файл на страницу и чтоб он открывался с определенным размером, напрмер 640+480? У меня есть флэшка, но она сразрешением .exe а не .swf

    Флешки с расширением .exe делайти доступными для скачивания.

  • Как сделать, чтобы в рейтинге отображались не цифры (к примеру 5.0/1), а звездочки или вообще свои иконки?

    Загрузите на сайт звездочки под названием: 1, 2, 3, 4, 5, потом найдите $КОД$, который показывает только целое число от рейтинга и укажите путь к картинке через это число

  • У меня ворос,я вставил бегущую строку,но ее не видно.,видно ее только если выделить текст надписи бегушей строки.Как мне поменять цвет этой бегущей строки на красный?

    style="color: #FF0000"

  • Где писать краткое описание новости отдельно от полного, НЕ ставя галку в общих настройках для обязательного краткого описания?

    Показывать сокращенную версию текста сообщения если сообщение очень длинное > Поставили галочку

    Количество символов, отведенных тексту сокращенной версии сообщения > Написали количество символов.

    • WE
    Репутация: 52
    Уровень замечаний:

    Сообщение # 8 | 12:12:37 10 Ноя 2007
  • хочу сделать так чтобы баннеры друзей сайтов ездили как бегущая строчка но вверх я пыталась вставлять код бегущей строки и меняла направление но она все равно едет в лево Как мне зделать чтобы баннеры ездили вверх?

    Code

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 scrollDelay=0 direction=up width=120 height=200>
    Тут URL
    </MARQUEE>

    Здесь:

    Code
    onmouseover=stop() onmouseout=start()
    - скрипт, при наведении прокрутка останавливается, когда убираем курсор - продолжается.

    Code
    scrollDelay=0
    Скорость обновления

    Code
    direction=up
    напревление (вверх, вниз, вправо, влево)
    • Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 9 | 12:12:47 10 Ноя 2007
    Energo, Вот смотрите
    Quote
    <script type="text/javascript">
    function showgrp(){var e=document.getElementById('pmgrs');if (e.style.display=='none'){e.style.display='';}else {e.style.display='none';}}
    </script>
    <a href="javascript://" onclick="showgrp();return false;">Мои любимые фразы</a> <img src="https://src.ucoz.ru/sm/2/up.gif"><br><br><div id="pmgrs" style="display:none;border-top:2px dotted #A9B8C2;border-bottom:2px dotted #A9B8C2;border-left:2px dotted #A9B8C2;border-right:2px dotted #A9B8C2;"><font color="#9d88eb">"Цена каждому человеку пропорциональна тому что он знает."<br>"Глупость лезет вперед, чтобы все ее видели, мудрость остается в тени, чтобы все видеть самой."
    <br>"Cвобода и отдых будут в раю, а пока жив, даже не думай об этом"<br>"Когда у человека много свободного времени, он не многого достигнет"
    <br>"Хочешь насмешить Бога, расскажи ему о своих планах!!!!!!"
    </font></div>

    вот ваш скрипт
    Тот текст который вы не видите заключен в блок div и имеет свои индивидуальный id, вы наверно когда добовляли ссылку то не меняли id.

    Я уже вообще писал как это делается. Если вам надо 2,3 10, 20 ссылок то вы делаете следующее.

    В теги head ставим функцию

    Code
    <script language="JavaScript">  
    function dnone(xlayer)  
    {  
    if(xlayer.style.display=='none') xlayer.style.display='';else xlayer.style.display='none'  
    }  
    </script>

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

    Code
    <a href="javascript://" onclick="dnone(frazi);">Мои любимые фразы</a>   
    <img src="http:https://src.ucoz.ru/sm/2/up.gif" width="25" height="19"><br><br>
    <div id="frazi" style="display:none; border-top:2px dotted #A9B8C2;border-bottom:2px dotted #A9B8C2;border-left:2px dotted #A9B8C2;border-right:2px dotted #A9B8C2;">
    <font color="#9d88eb">"Цена каждому человеку пропорциональна тому что он знает."<br>"Глупость лезет вперед, чтобы все ее видели, мудрость остается в тени, чтобы все видеть самой."  
    <br>"Cвобода и отдых будут в раю, а пока жив, даже не думай об этом"<br>"Когда у человека много свободного времени, он не многого достигнет"  
    <br>"Хочешь насмешить Бога, расскажи ему о своих планах!!!!!!"  
    </font></div>

    Каждому новому блоку необходимо присваивать свой уникальный id

    Code
    id="frazi"

    и соответственно правильно обращаться по ссылке

    Code
    onclick="dnone(frazi);

    где dnone имя функции, и соответственно id блока.

    Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 10 | 03:53:05 19 Фев 2008
    Ссылка менят фон у элемента по ID.

    Code
    <a href="javascript://" onclick="document.getElementById('ss').style.background='url(\'https://src.ucoz.ru/a/17/1203.jpg\')';"></a>

    Как сделать блок со скролом?

    Code
    <div style="width:100%; height:100%; overflow:auto; border:1px dashed #33bd34;">
    Контент
    </div>
    kenigauto
    Сообщений: 4
    Репутация: 3

    Сообщение # 11 | 13:27:28 21 Фев 2008
    как сделать чтобы на главной странице выводились нормальные демо картинки доски объяв, а не полноразмерные изображения ?? кто что посоветует?? если просто уменьшать изображение, то оно искажается ...
    пример: http://kenigauto.ru
    Если фота где то 400*300, то при уменьшении ее ширины до 120кб,высоту не прописываем, она автоматом считается- картинка искажается. - <img border="0" width="120" src="$SCREEN_URL$" alt="Фото объявы">
    Как можно использовать функции создания демо-картинок для доски объяв, как для фотогалереи?
    хелп ...
    Сообщение отредактировал kenigauto - Четверг, 21 Фев 2008, 13:27:49
    Piterski
    Сообщений: 386
    Репутация: 195

    Сообщение # 12 | 14:05:06 21 Фев 2008
    В общем если вы хотите выводить загруженные картики в доске обьявлений, на главной доски, я так понимаю в виде материала, то в шаблоне "Вид материалов" пишем скрипт, после всего кода.

    Code
    <script type="text/javascript">
    <script type="text/javascript">
    function changeImg$ID$() {
      //В переменную загружаем адрес картинки номер 1, далее картика номер 1 и будет показываться
      x$ID$ = '$IMG_URL1$'
      //Проверяем была ли загружена картинка номер 1, если да...
      if (x$ID$) {
       //Ниже в принципе не надо комментировать, получаем имя загруженной картинки, заменяем расширение файла, и формируем ссылку на маленькую картинку.
       xIndex$ID$ = x$ID$.indexOf('bd/0/');
       xIndex$ID$ = xIndex$ID$ + 5;
       xName$ID$ = x$ID$.slice(xIndex$ID$);
       xName$ID$ = xName$ID$.replace('.jpeg','.jpg');
       xUrl$ID$ = 'http://fr.ramenok.net/_bd/0/s';
       //Иначе if (x$ID$)
      } else {
       //Имя картинки которая будет подставлятся если картинка номер 1 не была загружена
       xName$ID$ = 'noavatar.gif';
       //Адрес где эта картинка расположена.
       xUrl$ID$ = 'http://fr.ramenok.net/img/pg/';
      }
      //Вставляем картинку в ячейку с - img$ID$, важно чтобы такая ячейка была в html коде, и id у нее был прописан как - id="img$ID$"
      document.getElementById('img$ID$').innerHTML='<img border=\"0\" src=\"' + xUrl$ID$ + xName$ID$ + '\">';
    }
    //Выполнение функции
    changeImg$ID$();
    </script>

    Есть маленький нюанс, скрипт не выполняется при переключении страницы в режиме ajax, я в этом случае в ячейке куда помещается картинка, написал следущее...

    Code
    <div id="img$ID$" style="text-align: center; color: #FF0000;" onmouseover="changeImg$ID$()">
      Наведите мышку чтобы посмотреть фото...
      </div>
    SandWicH
    Сообщений: 5
    Репутация: 114
    Уровень замечаний:

    Сообщение # 13 | 21:45:09 02 Июл 2008
    Наверное есть такие люди, которые хотят сделать несколько дизайнов для своего сайта.
    С помощью скрипта, показанного ниже, это можно реализовать.

    Важно!
    Скрипт производит замену CSS, поэтому все настройки "красоты", должны быть именно в нем. Все, что написано не в CSS, а в коде HTML, останется неизменным.

    Информация о выбранном варианте сайта сохраняется в куки, что избавляет от постоянного сброса настроек.

    Итак коды:
    Между <head></head> вставляем этот скрипт

    Quote

    <script>
    function getCookie(c_name)
    {
    if (document.cookie.length>0)
    {
    c_start=document.cookie.indexOf(c_name + "=");
    if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
    }
    return "";
    }

    function setCookie(c_name,value,expiredays)
    {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    }

    var diz = getCookie('mydiz') ? getCookie('mydiz') : 'styles1';
    document.write('<link type="text/css" rel="StyleSheet" href="http://paint.3dn.ru/'+diz+'.css">');

    function dizsave() {
    setCookie('mydiz',document.getElementsByName('mdiz')[0].value, 365);
    location.reload();
    }
    </script>

    *'styles1' - название вашего CSS, лучше, если оно будет таким же.
    *http://paint.3dn.ru/ - адрес на папку с CSS.
    Я использую два дизайна (можно больше) и оба файла CSS (styles1.css и styles2.css) лежат в корне сайта.


    Далее, в тело сайта (<body> СЮДЫ </body>) вставляем это:
    Quote

    Выберите дизайн сайта:
    <select name="mdiz">
    <option value="styles1" selected="selected">Темный</option>
    <option value="styles2">Светлый</option>
    </select>

    <input type="button" name="save" onclick="dizsave(); return true;" value="Сохранить" />

    *Выберите дизайн сайта: - Напишите че угодно, можно удалить.
    *"styles1" и "styles2" - имена ваших листов стилей (CSS), обратите внимание, пишется без ".css"
    *Темный и Светлый - названия ваших дизайнов, для пользователей.

    Вот и все.

    За доработку скрипта, под Firefox3 говорим спасибо пользователю Left (http://ipl.ucoz.ru/)
    Пример работы этого скрипта на этом форуме Paint.3dn.ru, для гостей он не доступен, поэтому залогиньтесь под тестовым пользователем:
    Login: Test
    Pass: 1234

    P.s. Скрипт не мой, я просто им делюсь

    GTA
    Сообщение отредактировал SandWicH - Среда, 02 Июл 2008, 21:48:56
    UZUMAKi
    Репутация: 11
    Уровень замечаний:

    Сообщение # 14 | 13:31:56 01 Авг 2008
    Работает только на "Internet Explorer"

    Code

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="Web Page Maker (unregistered version)">

    <style type="text/css">
    /*----------Text Styles----------*/
    .ws6 {font-size: 8px;}
    .ws7 {font-size: 9.3px;}
    .ws8 {font-size: 11px;}
    .ws9 {font-size: 12px;}
    .ws10 {font-size: 13px;}
    .ws11 {font-size: 15px;}
    .ws12 {font-size: 16px;}
    .ws14 {font-size: 19px;}
    .ws16 {font-size: 21px;}
    .ws18 {font-size: 24px;}
    .ws20 {font-size: 27px;}
    .ws22 {font-size: 29px;}
    .ws24 {font-size: 32px;}
    .ws26 {font-size: 35px;}
    .ws28 {font-size: 37px;}
    .ws36 {font-size: 48px;}
    .ws48 {font-size: 64px;}
    .ws72 {font-size: 96px;}
    .wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
    /*----------Para Styles----------*/
    DIV,UL,OL /* Left */
    {
    margin-top: 0px;
    margin-bottom: 0px;
    }
    </style>

    </head>

    <body>
    <style>
    <!--
    BODY {SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #FFFF99; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FF9900; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #FF9900; }
    -->
    </style>
    </body>

    </html>

    Меняем все цвета , тени , обводки - ТуТ

    Code


    BODY {SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #FFFF99; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FF9900; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #FF9900; }

    Сайт о Наруто Узумаки - Тыкь^_^

    Сообщение отредактировал UZUMAKi - Пятница, 01 Авг 2008, 13:32:23
    Aleko
    Репутация: 46

    Сообщение # 15 | 20:11:11 20 Фев 2009
    Я написал скрипт подсветки кода специально для модулей системы uCoz. Скрипт подсвечивает синтаксис языков html, css и javascript. Система подсветки скопирована из программы Dreamweaver 8 (тоесть подсвечивается код теми же самыми цветами, а не скрипт из программы выдран). Так же скрипт умеет выводить исходник кода в отдельном окне. Для установки скрипта не требуются какие либо глобальные изменения кода на вашем сайте, достаточно просто скопировать скрипт в самый низ нужных страниц и добавить необходимые для подсветки css стили на сайт. Пример работы скрипта можно увидеть в моем блоге, ну или на скриншоте ниже.

    Про установку скрипта читайте тут: http://studioad.ru/blog/2009-02-12-32.
    Прошу переместить тему в "настройки дизайна".

    Добавлено (18-Фев-2009, 18:01:39)
    ---------------------------------------------
    Обновил подсветку. Исправлено много багов!

    Добавлено (20-Фев-2009, 20:11:11)
    ---------------------------------------------
    Мне тут какой то перец поставил + за "труд по переносу кода по подсветке"... Ндаа.. Ну и откуда я его переносил?

    Прикрепления: 9765327.gif (14.7 Kb)
    LOADI.ru Сервис скачивания видео (тестируется). Блог о том, как сделать правильный сайт.. =)
    Сообщение отредактировал Aleko - Пятница, 20 Фев 2009, 20:12:21
    Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Полезные советы по дизайну (Готовые рецепты и хитрости)
    • Страница 1 из 2
    • 1
    • 2
    • »
    Поиск: