Style24

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Style24 » FAQ по CSS » Помощники и программы (дизайна)


Помощники и программы (дизайна)

Сообщений 1 страница 4 из 4

1

Генератор стилей

http://ibtek.ru/mybb/index.php

Введите адрес форума, например, http://forum.mybb.ru
Жмите кнопку.
Подождите пока ваш форум подгрузится...
Дальше выбираем элемент, на котором курсор будет обводится красной рамочкой.
Когда решите отредактировать даблкликнете на элементе.
Появится меню и дальше делайте что Вам надо.Не бойтись ошибиться!
Чтобы убрать меню и выбрать следующий элемент, кликнете один раз на свободном месте.
Когда сделайте всё что надо жмите внизу страницы Получить код

Копируйте код (вставлять в ХТМЛ верх и закрывать тэгами <style>#pun......</style>) и пользуйтесь

Вы можете загрузить не только главную страницу форума, но и любую внутреннюю,  например  http://dizforum.mybb.ru/viewtopic.php?id=28

0

2

Создание Скриптов ХТМЛ самому!!!!

http://mnog.ru/generator/

0

3

Здесь вы можете сделать себе свой стиль. Вы только подбираете цвета и сразу видите что может получится.
Если понравилось то нажмите на Сохранить стиль что в разделе основные и скрипт вам выдаст код. Скопируйте содержимое поля во второе окошко (Администрирование > Стиль) Опция «Свой стиль»  должна быть включена

http://0pk.ru/generator/

0

4

Написан и предоставлен  Zebra

Ставим  в HTML-низ

Код:
    <script type="text/javascript">
    function cookCopy()
    {document.cookie="helper=not"}
    window.onunload=cookCopy
    function helpCss()
    {document.cookie="helper=letcopy"
    var alls=document.getElementsByTagName("body")[0].getElementsByTagName("*")
    var e=0
    for (e=0; e<=(alls.length-1); e++)
    {
    var styl=new Array()
    var styl2=new Array(0)
    var k=0
    styl[0]=alls[e]
    styl2.splice(0, 0, makingCss(styl[0]))
    k=1
    while(k<=10)
    {styl[k]=styl[k-1].parentNode
    if (styl[k].nodeName=="BODY")
    {break}
    styl2.splice(0, 0, makingCss(styl[k]))

    k=k+1}
    alls[e].title=styl2.join(" ")
    }}

    function makingCss(to)
    {if (to.id)
    {if ((to.id.indexOf("forum")!=-1)||(to.id.indexOf("category")!=-1))
    {if (to.className.indexOf(" ")!=-1)
    {var ret="."+to.className.substr(to.className.lastIndexOf(" ")+1)}
    else
    {var ret="."+to.className}}
    else
    {var ret="#"+to.id}}
    else if ((!to.id)&&(to.className))
    {if (to.className.indexOf(" ")!=-1)
    {var ret="."+to.className.substr(to.className.lastIndexOf(" ")+1)}
    else
    {var ret="."+to.className}}
    else if ((!to.id)&&(!to.className))
    {var ret=to.nodeName.toLowerCase()}
    return ret}

    </script>

    <input id="csshelper" type="button" value="Помощь в css" onclick="helpCss()" />

Внизу страницы вы уывидите кнопочку Помощь в css. Когда васприспичит похимичить с дизайном нажимаете ее. Далее наводите мышкой на любой элемент на странице. И вуаля. Видит полный код этого элемента, в какую точку бы вы не тыкали. Далее с дизайном может совладать даже абсолютный двоечник.

Переписываете выданное вам имя элемента.
Например, вам могут показать такое.

#pun #pun-index #pun-title table tbody tr .title-logo-tdl
Это абсолютный путь к Логотипу.

Это название сверх-точное, поэтому чтобы не было прописано в вашем изначальном стиле, когда вы напишете свой код с этим названием, новый дизайн элемента перекроет старый и появится абсолютно точно.
Но чаще всего такого подробного пути к элементу прописывать НЕ НАДО. Сокращайте то что вы видите по-максимуму. Но УБИРАЙТЕ ТОЛЬКО С НАЧАЛА.  Последних одного-двух слов в названии элемента почти всегда достаточно.
Напрример, от нашего случая достаточно будет оставить

.title-logo-tdl
Если вы оставили одно слово, но изменений не случилось, значит название надо написать чуть подробней. Добавьте второе слово.
Например, так

tr .title-logo-tdl
В общем удлиняйте, сокращайте, экспериментируйте.

Для тех, кто до сих пор не понял, чего с этими названия\ми-то делать - ознакомьтесь с первыми двумя-тремя сообщениями в этой теме FAQ по дизайну форума в CSS
Тогда вы поймете что в css коде пишется

название элемента {параметр1:...; параметр2:...;}
и т.д.
Например в нашем случае мы так сделаем лого

.title-logo-tdl {background-image: url(...);}
Экспериментируйте, сильнее помочь нельзя.

З.Ы. Помните, что после того кк вынажали кнопку Помщь, подсказки вы увидите только на текущей странице. Если перейдете на другую страницу, жмите кнопку снова.

З.З.Ы. В принципе скрипт можно убираь и ставить п мере необходимости. Но его вполлне можно сотавить там навсегда. Ибо он очень маленький и страницу не грузит совсем, ибо работает только при нажатии на кнопку.
Чтобы кнопку видели только вы пишем в нагрузку

Код:
<script type="text/javascript">
if (document.getElementById('pun-status').innerHTML.indexOf("Ваш ник")==-1)
{document.getElementById('csshelper').style.display="none"
}
</script>

Добавлено: копирование в буфер эта часть  полноценно работает только для иксплорера. В смысле происходит автоматическое копирование в буфер обмена. Для других не придумано аналогичных функций. Но, при двойном клике на элемент его код появится в форме рядом с кнопкой помощи, страница сфокусируется на кформе и код будет уже выделен. Останется только копировать.
Добавляем под наш скрипт:

Код:
<script type="text/javascript">
function copyPaste(event)
{if (document.cookie.indexOf("letcopy")!=-1)
{
if (navigator.appName=="Netscape")
{document.getElementById('copier').value=event.target.title
document.getElementById('copier').select()}
else
{document.getElementById('copier').value=event.srcElement.title
document.getElementById('copier').select()
CopiedTxt = document.selection.createRange()
CopiedTxt.execCommand("Copy")}
}}
</script>
<BODY ondblclick='copyPaste(event)' >
<textarea rows="4" cols="50" id="copier" ></textarea>

Чтобы скопировать - даблкликните на элемент, после того, как увидите его код.

0


Вы здесь » Style24 » FAQ по CSS » Помощники и программы (дизайна)