Как искать элементы дизайна в коде uCoZ шаблонов - Настройка дизайна - Система uCoz

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

Догадываюсь, что мне достаточно будет залить свою картинку, и где то поменять ссылку. Вопрос в том и заключается: ГДЕ то место, что ссылается на картинку этого квадратика?

p.s. вот моя первая страница на Ucoz на основе этого шаблона:
www.307sw.moy.su (теперь адрес такой)

Сообщение отредактировал anOha - Четверг, 21.05.2009, 23:05

SleepWalker

Дата: Четверг, 21.05.2009, 17:05 | Сообщение # 2

Admin

Группа: Администраторы

Сообщений: 3093

Репутация: 222

Статус: Offline

значит в стилях строка выглядит так:
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:9pt;font-weight:bold;color:#FFF6F0; padding: 10px 10px 0 60px;background:url('/.s/t/889/13.gif') no-repeat;height:49px;}

прямая ссылка на картинку:http://307sw.clan.su/.s/t/889/13.gif

кстати. думаю тебе эта инфа не помешает (вроде бы у тебя есть желание и умственная возможность это понять):

как легко найти адрес определенной картинки (и не только) в дизе? (на примере твоего сайта)
сперва открываем волнующую нас страничку. далее копируем в буфер кусок любого текста возле нужного нам элемента.
значит я зашел на страницу -http://www.307sw.clan.su/publ. моя цель - квадратная картинка со стрелочкой
возле одной из стрелочек написано: Про экономию бензина. Экономичная езда на автомобиле.. вот это я и скопирывал.
Примечание: при выборе этого куска текста нужно смотреть, что бы он был так сказать однотипным. тоесть если ты выделиш к примеру кусок ссылки и обычного текста или кусок жирного и кусок обычного текста, то потом в коде тебе нечего не найти, бо на самом деле там оно будет выглядить примерно так
кусок выбраного тобой текста <a href=....> продолжение выбраного тобой текста...
или
кусок выбраного тобой текста <b> продолжение выбраного тобой текста</b>.....
так же еще бывают случаи что некотрые символы заменяют ихними кодами
к примеру " "(пробел) =  
& = &
теперь открываем код страницы
в опере я обычно открываю комбинацией alt+f3
в фф(фаер фокс) правой кнопкой клацаеш и в контекстном меню есть соответствуйщий пункт (нащет клавиатурного сокращения незнаю, так как использую оперу)
в ие7+(интернет експлорер) справа вверху кнопка "страница" или сверху меню "вид" и далее клацаем просмотр HTML кода. в старых ие есть доступ только из меню вид.
ищем скопированый нами фрагмент текста(ctrl+f)
теперь мы находимся рядом с нужным нам местом, возле которого собсно и нужно искать нужный нам код. если ето картинка, вставленная через <img>, то думаю сложностей не будет. но если она вставлена через стили, тот тут уже возникают сложности (но лиш пока мало опыта) с тем что бы понять: а что же мне надо? значит вот код который находится покраям от искомой фразы:
<div class="eTitle" style="text-align:left;"><a href="http://www.307sw.clan.su/publ/1-1-0-2">Про экономию бензина. Экономичная езда на автомобиле.</a></div>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">О том, как в нелегкое время кризиса сэкономить (или попытаться) на расходе бензина при езде на автомобиле.</div><div class="eDetails" style="clear:both;">
Для справки: стили вобщемто присваиваются тремя способами: ко всем тегам какогото типа, через id="id" или через class="имя_класа". в случае с картинками скорей всего понадовится знание про последние два вида. между классом и ид есть два отличия. ид можно присвоить только к одному елементу, а клас можно присвоить е любому количеству елементов, причем не обязательно однотипных. второе отличие то что в стилях к класу обращаются через .(точка), а к ид через #.
значит вернемся к коду. сейчас в коде мы видим три класса: eTitle, eMessage, eDetails. на юкозе классы названы очень понятно, потому мы сразу видем что нам нужен eTitle, так же мы можем ето понять по тому что искомая нами строка находится в том же блоке <div>...</div>, но это не всегда спасает, иногда искомая картинка может быть и в соседнем блоке, но опять же ето все вопрос опыта. чем больше будеш это делать тем безошибочнее будеш находить нужный клас.
значит мы нашли нужный нам класс eTitle (конечно может еще оказатся что мы промахнулись, тогда прийдется брать соседние классы или смотреть в таблице стилей соседние стили, так как скорей всего нужный стильдолжен быть рядом). следующим этапом будет поиск файла стилей или самих стилей. опять же есть два варианта размещения стиля.
непосредственно на странице:
<style type="text/css">
собсно сама таблица стилей
</style>
или в подключаемом файле(обычно находятся в голове документа <head>...</head>):
<link type="text/css" rel="StyleSheet" href="ссылка_на_файл" />
в нашем случае стили находятся в отдельном файле:
<link type="text/css" rel="StyleSheet" href="http://307sw.clan.su/_st/my.css" />
копируем ссылку и открываем ее в браузере. перед нами куча буков, но мы то помним какой мы стиль ищем, потому все что нам нужно сделать, это нажать ctrl+f и вставить туда название стиля. далее мы попадем к нужным строкам:
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:9pt;font-weight:bold;color:#FFF6F0; padding: 10px 10px 0 60px;background:url('/.s/t/889/13.gif') no-repeat;height:49px;}
.eTitle a:link {text-decoration:underline; color:#FFF6F0;background:#322521;}
.eTitle a:visited {text-decoration:underline; color:#FFF6F0;}
.eTitle a:hover {text-decoration:none; color:#FFFFFF;}
.eTitle a:active {text-decoration:underline; color:#FFF6F0;}
а их оказалось 5. но нам повезло так как ссылка присутствует только в одном стиле. копируем ее и вставляем в браузере, дабы быть уверенными что мы нашли именно ту картинку.
Примечание: довольно частое явление, когда у ссылки в начале нету протокола http:. это означает что файл находится на том же сервере что и сайт. думаю что тут не очень нужно вдаватся в подробности.... единственное что может немного попутать, так это наличие слеша в начале адреса если слеша нету, то ето значит что путь "щитается" от той папки в которой сейчас находится документ(в нашем случае таблица стилей)
.s/t/889/13.gif=http://307sw.clan.su/_st/.s/t/889/13.gif
но если слеш таки есть, то "отсчет" начнется от папки-родителя, тоесть:
/.s/t/889/13.gif=http://307sw.clan.su/.s/t/889/13.gif
немного в добавок:
стили типа:
.(#)имя1 имя_тега2(или .(#)имя2)
или
имя_тега1 имя_тега2(или .(#)имя2)
будут действовать на елементы которые вложены в елемент с именем1, но приетом ети лементы должны соответствовать имени2
к примеру:
.eTitle a:link {text-decoration:underline; color:#FFF6F0;background:#322521;}
.eTitle a:visited {text-decoration:underline; color:#FFF6F0;}
.eTitle a:hover {text-decoration:none; color:#FFFFFF;}
.eTitle a:active {text-decoration:underline; color:#FFF6F0;}
эти стили будут действовать на ссылки находящиеся в блоке с классом eTitle
ну и раз в наш код попали ссылки, то и немного про них:
:слово называются селекторами и добавляются обычно токо к ссылкам(хотя их можно и к другим елментам добавлять, к тому же их существует намного больше 4. но разные браузеры могут поддерживать не все селекторы или не так поддерживать. но это уже другая история :) ). селекторы описывают события которые могут случатся с елементом. для ссылки обычно используют такие:
:link - ссылка в нормальном состоянии(не посещенная)
:visited - посещенная ссылка (обычно совпадает со стилем непосещенной, но к примеру в поисковиках не совподает, дабы юзеру было понятнее где он побывал, а где нет)
:hover - вид ссылки когда на нее наведут курсор(унаследывавает все стили от :link+новые, которые имеют выше приоритет, тоесть если в link и в hover указан цвет, то при наведении будет тот цвет который в hover)
:active - вид ссылки в момент нажатия(в ие ето состояние сохраняется до потери фокуса елемента, тоесть, пока после щелчка по ссылке не кликнуть на чтонибуть другое)
кстати хочу обратить внимание, что в стилях ети селекторы должны быть именно в таком порядке. в одной книге предлогали запомнить это так: love and hate(любовь и ненависть). выделенные буквы - первые буквы селекторов и размещены они какраз в нужном порядке
вот вроде бы и все... многовато текста получилось. возможно запутанного. так что если возникнут вопросы, спрашивай.

anOha

Дата: Четверг, 21.05.2009, 18:09 | Сообщение # 3

Рядовой

Группа: Пользователи

Сообщений: 19

Репутация: 1

Статус: Offline

Вау, SleepWalker, ОГРОМНОЕ спасибо за столь развернутый ответ. Логику поиска понял, буду пробовать впредь сам. Если что-то будет не получаться, прошу не обижаться, но буду тревожить wink

По дизайну этого шаблона. Все попробовал, все работает! Спасибо.

p.s. Осталось теперь самому разобраться что же именно я туда хочу воткнуть wink

Сообщение отредактировал anOha - Четверг, 21.05.2009, 18:49

Jesse

Дата: Четверг, 21.05.2009, 20:42 | Сообщение # 4

Moderator

Группа: Главный модератор

Сообщений: 1625

Репутация: 58

Статус: Offline

Quote (anOha)

Осталось теперь самому разобраться что же именно я туда хочу воткнуть

ну давай, думай biggrin

Блог Jesse

Vovich

Дата: Четверг, 21.05.2009, 22:25 | Сообщение # 5

Полковник

Группа: Проверенные

Сообщений: 183

Репутация: 9

Статус: Offline

Полезная инфа, спасибо

studiov.3dn.ru

swat9162

Дата: Пятница, 25.06.2010, 19:43 | Сообщение # 6

Рядовой

Группа: Пользователи

Сообщений: 2

Репутация: 0

Статус: Offline

Привет!
Подскажите все по детали где находятся head и body я не могу найти их!
Подскажите люди!
Буду очень благодарень!

SleepWalker

Дата: Суббота, 26.06.2010, 13:47 | Сообщение # 7

Admin

Группа: Администраторы

Сообщений: 3093

Репутация: 222

Статус: Offline

swat9162, они находятся в коде любой страницы

swat9162

Дата: Воскресенье, 27.06.2010, 13:30 | Сообщение # 8

Рядовой

Группа: Пользователи

Сообщений: 2

Репутация: 0

Статус: Offline

Не, SleepWalker! короче есть скрипты?, вот там говориться надо это вставить в head а это в body????
я не пойму как это?????
Пожалуйста обясни все по порядку!
Если не сложно!?!?!?!?!?!?

Сообщение отредактировал swat9162 - Воскресенье, 27.06.2010, 13:33

PriDarkKnight

Дата: Вторник, 29.06.2010, 02:38 | Сообщение # 9

Генерал-лейтенант

Группа: Главный модератор

Сообщений: 698

Репутация: 78

Статус: Offline

swat9162, head и body это одни из основных тегов любой страницы,выглядят они так
<head>
...Тут тег тайтл,но не о нем сейчас
</head>
<body>
тут содержимое сайта,блоки,шапка и т.д.
</body>
В простом виде страница выглядит так:

Code

<html>
<head>
<title>Название сайта здесь</title>
</head>
<body>
Тут почти все,что вижишь на сайта,вообщем его содержимое.
</body>
</html>

Так теперь к твоему вопросу,скорее всего там имеется ввиду главная страница сайта,припиши к адрессу своего сайта /tmpls(к примеру http://www.mysite.su/tmpls )
Там есть пункт "Страницы сайта" (синим шрифтом написано),кликаешь по этой надписи и видишь теги <head> и <body>,тут уже и вставляй что тебе говорят. ;)
Совет:Почитай учебники по html,что бы знать базовые знания.

Переставляю Windows
--------------------

Переделываем старый шаблон,на новую версию для конструктора.

Меняем шапку.

Если хотите задать здесь вопрос прочтите!

Делаем новую модель каркаса
-----------------------
Вот и начал работать мой блог))

Страница 1 из 1

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

Хостинг от uCoz