Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум поддержки IPB.SU > Внешний вид форума > CSS-Helper


Автор: Duka Май 18 2008, 11:49
Цитата (Zebra с майбб)

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

Этот скрипт написал замечательный человек с ником Zebra) Я лишь придал небольшой вид.
Идем в Global HTML elements - Board Header (logo, links, etc)
И ставим в самый низ следующее:
Код
<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>
<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)' >

<span><a href="#" title="Для раскрытия блока жать сюда" onclick=" obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;"><b>CSS helper</b></a><div style="display: none" class="em">
<input id="csshelper" type="button" value="Помощь в css" onclick="helpCss()" />
<textarea rows="2" cols="50" id="copier" >Нажмите кнопку, после этого даблкликните на любой элемент страницы</textarea></div></span>

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

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


Отдельный совет администратору. Сделайте ваш сервис получше других аналогов ipb.
Добавьте, желательно, к каждому элементу на ваших форумах свой id, таким образом через css можно будет вытворить ВСЕ, что угодно, не копаясь в шаблонах.
Чем больше id понатыкаете в движок, т.е. в шаблон вашего движка. тем больше возможностей для изменений появится у ваших польхователей.
Будет меньше вопросов по поводу шаблонов "что, куда, зачем?".
CSS великая штука, но на сайтах или форумах. где айди и классы используются в малых колличествах, противно заходить, ибо css тут уже не поможет, только сплошное хтмл-редактирование...

Автор: Добрый Май 18 2008, 20:16
Отличная Штука! Спасибо!
Закреплено

Автор: Goblin Май 19 2008, 09:07
Duka,
Огромное спасибо,очень нужная тема

Автор: Rom4ik Май 19 2008, 16:05
Извините не понял скрипт

Автор: Добрый Май 19 2008, 16:27
Rom4ik, что не поняли конкретно?)

Автор: Rom4ik Май 19 2008, 17:07
ну смысл скрипта что он делает!
Можно хоть пример?

Автор: Добрый Май 19 2008, 17:33
Rom4ik, ну вы установите и увидите)

Автор: Rom4ik Май 19 2008, 17:52
Вообще супер! Duka большое тебе спс! и зебре тож)))

А как сделать чтоб гости и пользеватели немогли этого видеть?

Автор: Добрый Май 19 2008, 18:48
QUOTE (Rom4ik @ Май 19 2008, 17:51)
А как сделать чтоб гости и пользеватели немогли этого видеть?
Судя по всему - никак. Устанавливайте этот скрипт во время работ над скином и будет вам счастье) Когда работы будут оконченны - убирайте)

Автор: Rom4ik Май 19 2008, 19:49
Ясно
Большое спс скрипт супер! так как я туп в CSS)))

Автор: Duka Май 19 2008, 19:55
От гостей как скрыть?
Могу написать скрипт на досуге, который будет показывать его только администраторам всем или же одному юзеру.

Автор: ReGa Май 19 2008, 20:53
QUOTE (Duka @ Май 19 2008, 19:54)
От гостей как скрыть?
Могу написать скрипт на досуге, который будет показывать его только администраторам всем или же одному юзеру.

во во! давай! biggrin.gif

Автор: Rom4ik Май 19 2008, 21:54
Если не сложно то только администрации чтоб был виден!
Думаю не будет особого смысла если пользеватели будут это видеть!
Много лишних вопросов

Автор: Goblin Май 20 2008, 06:03
Да такой скрипт очень нужен,потому что не хочется каждый раз,когда проводишь работы над скином ставить этот мод,а потом убирать

Автор: Rozess Май 21 2008, 11:12
Duka, огромное спасибо за скрипт))

Автор: Добрый Май 21 2008, 14:25
надеюсь Теперь будет намного меньше вопросов по css)) biggrin.gif

Автор: Rom4ik Май 21 2008, 15:37
полюбому)))

Автор: Настюха Июл 10 2008, 07:57
я установила, но так и не поняла зачем он нужен

Автор: Rom4ik Июл 10 2008, 08:17
это для тех кто мало знает или вообще не знает CSS wink.gif

Автор: silvermanll Фев 6 2009, 20:00
вы издеваетесь или как? нету никакой кнопки после того как я это все уставновил!!

Автор: EDG_aka_Dima Фев 6 2009, 20:22
QUOTE (silvermanll @ Фев 6 2009, 20:01)
вы издеваетесь или как? нету никакой кнопки после того как я это все уставновил!!

И что по вашему мы должны сделать? Вы даже адрес форума не указали. Единственное что я могу вам сказать: вы неправильно установили модификацию.

Автор: Саффира Фев 19 2009, 17:46
здорово! rolleyes.gif

Автор: LIPNIKI Мар 30 2009, 08:58
Duka, спасибо за скрипт)))) biggrin.gif [HTML]

Автор: Mastero444ek Июн 1 2009, 22:11
форум ( http://humor.ipb.su/ )
все добавил как положено.... но ничего в низу не появилось( не подскажете почему..???

Автор: Dron Июн 1 2009, 22:15
QUOTE (Mastero444ek @ Сегодня, 23:12)
все добавил как положено.... но ничего в низу не появилось( не подскажете почему..???

Вообще-то в верху надо смотреть...

Автор: Mastero444ek Июн 1 2009, 22:20
точно... вверху... нашел)) но оно почемуто ничего не работает((( можете обьяснить, как пользоваться этой системой..?

Автор: Dron Июн 1 2009, 22:24
QUOTE (Mastero444ek @ Сегодня, 23:21)
но оно почемуто ничего не работает((( можете обьяснить, как пользоваться этой системой..?

Все работает... та же для танкистов специально прямо в поле написано как пользоваться.

Автор: Mastero444ek Июн 1 2009, 23:10
"Нажмите кнопку, после этого даблкликните на любой элемент страницы" - это как понимать то..??? на какую кнопку жать сначала... и потом жму на левую кн. мыши 2 раза на любом элементе, и ничего не сдвигается(

Автор: Dron Июн 2 2009, 00:00
Mastero444ek,
Открываем CSS helper
Жмем на кнопку с надписью: Помощь в css
Далее делаем двойной клик мышкой на нужный элемент форума и смотрим, что появляется в текстовом окне. Это и будет расшифровка css искомого элемента.

Автор: Mastero444ek Июн 2 2009, 07:36
Все, разобрался))) спасибо большое)

Автор: Землянин Сен 30 2009, 11:37
QUOTE (Duka @ Май 19 2008, 19:56)
Могу написать скрипт на досуге, который будет показывать его только администраторам всем или же одному юзеру

Видать не знать нам счастья с таким скриптом...? =((

Автор: asm-a) Сен 30 2009, 14:33
QUOTE (Землянин @ Сен 30 2009, 11:38)
QUOTE (Duka @ Май 19 2008, 19:56)
Могу написать скрипт на досуге, который будет показывать его только администраторам всем или же одному юзеру

Видать не знать нам счастья с таким скриптом...? =((

Создайте форум, закройте его и поставьте его туда. И будет вам счастье. =)

Автор: Михалыч Ноя 5 2009, 02:16
Спасибо. Помогло разобраться в цветах)

Автор: Potter Ноя 17 2009, 17:39
Да спасибо!

Автор: Dron Ноя 17 2009, 21:53
QUOTE (Potter @ Сегодня, 18:40)
Да спасибо!

Вы решили в каждой теме на форуме отметиться? Не стоит.

Автор: Potter Июн 18 2010, 23:47
как изменить гл. фон форума??
З/Ы
CSS helper не помогает ohmy.gif

Автор: Сергей Июн 19 2010, 03:47
Работает. Пользоватся правильно нужно.
Есть специальная тема по переменным стиля.
В конце концов очень плохо не знать, что фон BODY.

Автор: Potter Июн 19 2010, 09:36
теперь буду знать спс))) smile.gif

Автор: ИмПеРаТоР Авг 3 2010, 17:25
да,не плохая вещь...
там и разбераться нечего...

Автор: Dirae Апр 6 2011, 07:26
как помоему этот скрипт удачно заменяет Google Chrome которым можно просмотреть и html код, и css, и получить доступ к элементам сайта

Автор: Magadannoxton Сен 28 2013, 06:27
http://ipboard.net/index.php?showuser=691,
ЗДРАВСТВУЙТЕ НЕ ПОНИМАЮ ЕГО ВСЕ ДЕЛАЮ , А КОГДА ИЩУ НЕ МОГУ ЭТОТ КОД НАЙТИ , МОЖЕТ НЕ ТАК ПОКАЗЫВАЕТ ? #ipbwrapper #logostrip .tableborder .maintitle

Автор: asm-a Сен 28 2013, 10:47
Цитата (Magadannoxton @ Сегодня, 07:27)
.tableborder .maintitle

Все верно показывает.

Powered by Invision Power Board (//www.invisionboard.com)
© Invision Power Services (//www.invisionpower.com)