Техническая поддержка

Объявление

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

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


Вы здесь » Техническая поддержка » Дизайн форума » Абсолютный помощник по дизайну CSS


Абсолютный помощник по дизайну CSS

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

1

(c) Zebra
Смысл работы скрипта таков. Если вы прочитали хотя бы первых два сообщения в этой теме FAQ по дизайну форума в CSS и хотя бы раз писали css коды, вы знаете, чоу  каждого элемента есть свое название, которое мы прописываем, чтобы перекрасить, отредактировать и разукрасить какой-то элемент. Однако так как дизайнерские запросы у вас все растут, бывает так, что найти название именно того, чтоо вас интересует, вы никак не можете.
Ставим сие в 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

В общем удлиняйте, сокращайте, экспериментируйте. Тогда вы поймете что в css коде пишется

название элемента {параметр1:...; параметр2:...;}

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

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

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

<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>

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

Можно сделать кнопку или ссылку  там где  Сообщения без ответов, для этого делаем так
Вместо
<input id="csshelper" type="button" value="Помощь в css" onclick="helpCss()" />

ставим ХТМЛ- низ

<script type="text/javascript">
document.getElementById('pun-ulinks').innerHTML=document.getElementById('pun-ulinks').innerHTML.substring(0, document.getElementById('pun-ulinks').innerHTML.toLowerCase().indexOf("</ul>"))+"<li class='item7'>"+"<a id='csshelper'"+" href='helpCss()'>Помощь в css</a></li></ul>"
</script>

0

2

(c) Zebra
Терь все автоматизировано

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

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

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

0


Вы здесь » Техническая поддержка » Дизайн форума » Абсолютный помощник по дизайну CSS


фэнтези форумбесплатные форумымикроблоги