Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Корзина » Абсолютный помощник по дизайну CSS


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

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

1

Итак. Ибо факи уже писались в небывалых количествах, однако то ли в них не до конца разбираютсЯ, то ли элементарно лень их перекопать ;), решила сделать вам скрипт помощник.
Смысл его работы таков. Если вы прочитали хотя бы первых два сообщения в этой теме 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

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

Для тех, кто до сих пор не понял, чего с этими названия\ми-то делать - ознакомьтесь с первыми двумя-тремя сообщениями в этой теме http://forum.mybb.ru/viewtopic.php?
Тогда вы поймете что в 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>

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

Добавлено:Можно сделать кнопку или ссылку  там где  Сообщения без ответов, для этого делаем так
Вместо
<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>

Отредактировано Lexx (Вт, 17 Апр 2007 20:00:59)

+29

2

Танька, это +

0

3

Еще бы копировать можно было бы в буфер обмена...)) :O А ведь это реально...

0

4

Работает ли сия прелесть в Опере? Или токмо в ИЭ?
Но затея неплохая. Добавлено:В Опере работает! Большое спасибо! Зёбра - + !!!

Отредактировано Bench (Пн, 19 Мар 2007 18:35:43)

0

5

Тань, слов нет
умничка

0

6

Zebra
+
Спасибо огромное!!

0

7

Супер! Большего и не надо! +

0

8

Zebra - SUPER Star (+)

0

9

Lion написал(а):

Еще бы копировать можно было бы в буфер обмена...))  А ведь это реально...

А вот как?

0

10

Bench написал(а):

А вот как?

Zebra написал(а):

Добавлено: копирование в буфер

Пользуйся IE

0

11

Есть еще вариант такой - он возмрожен при определенных усилиях в любом браузере ( ну в основных точно). Чтобы внизу рядом с кнопкой поместить  форму, и когда в ынаконец навыбиарете элемент, после двойного клика код появлется в этой форме, страница сдвигается тобы форма была в фокусе, текст в ней уже выделен. Остается нжать копытом правую клавишу и скопировать.
Преждложения по усовершенствованию системы давайте сейчас.

0

12

Lion
Спасибо, не заметил добавку. Буду пробовать.

0

13

Zebra написал(а):

Есть еще вариант такой

В Опере работает! Проверил. Спасибо.

0

14

Так, тогда сделала этот враиант для всех браузеров.  Добавьте выделенную строку в первую часть

0

15

Мамочки. вижу что что-то классное, но сегодня бощка не варит, но Зебре + за такую штуку(завтра разберусь)

0

16

Zebra
Все классно работает!

0

17

МММ, а я наверное тормоз, но у меня как всегда ничего не работает( Кнопка появилась,жму, навожу и нифига(((

0

18

ПСИХованная
был казус
скопируй щас как есть и ставь

0

19

Зеброчка, вот теперь все работает , спасибо, а то я уже было испугалась :)

0

20

Zebra
Добавь, пожалуйста, изменения с куками...

0


Вы здесь » Единый форум поддержки » Корзина » Абсолютный помощник по дизайну CSS