Angepinnt ~\ C S S /~ сводим сложное к простому

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • ~\ C S S /~ сводим сложное к простому

    Введение в CSS – классы и пути в Ogame


    Содержание:

    1. Обзор
    1.1 Отображение сырья
    1.2 Реклама командира
    1.3 Отображение флота - - Инструмент настройки
    1.4 Планеты в «Обзоре»

    2. Меню Построек
    2.1 Общее
    2.2 Постройки и Исследования
    2.3 Верфь и Оборона
    2.4 Дополнительные функции владельцам Командира

    3. Сырьё продукции

    4. Меню управления флотами

    5. Таблица технологий

    6. Галактика
    6.1 Общее
    6.2 Инструмент настройки
    6.3 Поле информации о активности

    7. Сообщения
    7.1 Обычные
    7.2 Шпионские доклады
    7.3 Боевые доклады

    8. Настройки

    9. Firefox - и Opera – Дополнения



    1. Обзор

    1.1 Отображение сырья
    Маленькая картинка Планет

    center table tr td center table tr td img

    Задний фон картинки Планеты

    center table tr td center table tr td

    Цвет названия Планет

    center table tr td center table tr td select

    Картинки ресурса

    table tr table tr td img

    Текст «Металл, Кристалл, Дейтерий, Энергия»

    table tr table tr td i b font

    Примечание переводчика:

    tr > td > i > b > font {font-style:normal;color:(RGB - color metall)}
    tr > td + td > i > b > font {font-style:normal;color:(RGB - color cristall)}
    tr > td + td + td > i > b > font {font-style:normal;color:(RGB - color deuterium)}
    tr > td + td + td + td > i > b > font {font-style:normal;color:(RGB - color energy)}

    table[width="100%"] tr > td {color:(RGB - color metall)}
    table[width="100%"] tr > td + td {color:(RGB - color cristall)}
    table[width="100%"] tr > td + td + td {color:(RGB - color deuterium)}
    table[width="100%"] tr > td + td + td + td {color:(RGB - color energy)}

    table[width="500"] tr > th {color:(RGB - color metall)}
    table[width="500"] tr > th + th {color:(RGB - color cristall)}
    table[width="500"] tr > th + th + th {color:(RGB - color deuterium)}
    table[width="500"] tr > th + th + th + th {color:(RGB - color energy)}



    Примечание переводчика:

    table[cellpadding="0"][cellspacing="0"][width="100%"] font[color="R-G-B"]
    {
    color:#ff0000; text-decoration: blink;
    }

    Данная ветка когда какой либо из ресурсов переполнится окрасит его в указанный цвет и заставит его мигать.



    Всё что выделено зелёным нужно изменить на код цвета
    например
    (RGB - color energy) - #ff0000;(красный)

    1.2 Реклама командира

    Шрифт текста рекламы:

    table tr td p
    table tr td p font
    table tr td p a font

    Настройки заднего фона

    table tr td p img

    1.3 Отображение флота – Инструмент настройки
    Общая настройка стоимости

    table tr th.tooltip_border tr th

    Настройка поля ввода

    table tr th.tooltip_border

    Флот Игрока:

    ~ Задание атаковать
    tr.flight span.ownattack
    tr.flight span.ownattack a
    tr.flight span.ownattack a:hover

    ~ Возврат флота с атаки
    tr.return span.ownattack
    tr.return t span.ownattack a
    tr.return span.ownattack a:hover

    ~ Задание переработать
    tr.flight span.ownharvest
    tr.flight span.ownharvest a
    tr.flight span.ownharvest a:hover

    ~ Возврат флота с обломков
    tr.return span.ownharvest
    tr.return t span.ownharvest a
    tr.return span.ownharvest a:hover

    ~ Задание транспорт
    tr.flight span.owntransport
    tr.flight span.owntransport a
    tr.flight span.owntransport a:hover

    ~ Возврат транспорта
    tr.return span.owntransport
    tr.return t span.owntransport a
    tr.return span.owntransport a:hover

    ~ Задание оставить
    tr.flight span.owndeploy
    tr.flight span.owndeploy a
    tr.flight span.owndeploy a:hover

    ~ Возврат с задания оставить
    tr.return span.owndeploy
    tr.return t span.owndeploy a
    tr.return span.owndeploy a:hover

    ~ Задание шпионаж
    tr.flight span.ownespionage
    tr.flight span.ownespionage a
    tr.flight span.ownespionage a:hover

    ~ Возврат шпионов
    tr.return span.ownespionage
    tr.return t span.ownespionage a
    tr.return span.ownespionage a:hover

    ~ Задание колонизовать
    tr.flight span.owncolony
    tr.flight span.owncolony a
    tr.flight span.owncolony a:hover

    ~ Возврат колонизатора
    tr.return span.owncolony
    tr.return t span.owncolony a
    tr.return span.owncolony a:hover

    ~ Войти в САБ
    tr.flight span.ownfederation
    tr.flight span.ownfederation a
    tr.flight span.ownfederation a:hover

    ~ Возврат из САБа
    tr.return span.ownfederation
    tr.return t span.ownfederation a
    tr.return span.ownfederation a:hover

    ~ Задание уничтожить луну
    tr.flight span.owndestroy
    tr.flight span.owndestroy a
    tr.flight span.ownfederation a:hover

    ~ Возврат Звезды Смерти с задания уничтожить
    tr.return span.owndestroy
    tr.return t span.owndestroy a
    tr.return span.owndestroy a:hover

    ~ Задание держаться
    tr.flight span.ownhold
    tr.flight span.ownhold a
    tr.flight span.ownhold a:hover

    ~ Стоять в защите
    tr.holding span.ownhold
    tr.holding span.ownhold a
    tr.holding span.ownhold a:hover

    ~ Возврат с защиты
    tr.return span.ownhold
    tr.return t span.ownhold a
    tr.return span.ownhold a:hover

    Инородный флот:

    ~ Транспорт
    tr.flight span.transport
    tr.flight span.transport a
    tr.flight span.transport a:hover

    ~ Защита
    tr.flight span.hold
    tr.flight span.hold a
    tr.flight span.hold a:hover

    ~ Уничтожение луны
    tr.flight span.destroy
    tr.flight span.destroy a
    tr.flight span.destroy a:hover

    ~ Атака
    tr.flight span.attack
    tr.flight span.attack a
    tr.flight span.attack a:hover

    ~ Шпионаж
    tr.flight span.espionage
    tr.flight span.espionage a
    tr.flight span.espionage a:hover

    ~ Флот в САБе
    tr.flight span.federation
    tr.flight span.federation a
    tr.flight span.federation a:hover

    Ракетная атака:

    Вы бьёте ракетой
    tr.flight span.missile
    tr.flight span.missile a
    tr.flight span.missile a:hover

    Вас бьют ракетой
    tr.flight span.ownmissile
    tr.flight span.ownmissile a
    tr.flight span.ownmissile a:hover


    Примечание переводчика:
    Если вы хотите чтобы какой-либо из флотов мигал, не забудьте добававить в путь:
    text-decoration: blink;


    1.4 Планеты в Обзоре

    Маленькие картинки планет

    а table.s img

    Задний план картинки

    а table.s
    а table.s tr
    а table.s th



    2. Меню Построек

    2.1 Общее

    Картинка в постройках

    td.l img

    Картинка в описании

    table tr th table tr td img

    Общие настройки

    table tr td table tr td.l
    body form table tr td table tr td.k
    body table tr td table tr td.k

    Настройки оплаты ресурса

    table tr td table tr td.l b /*metall*/ table tr td table tr td.l b + b /*cristall*/ table tr td table tr td.l b + b + b /*deuterium*/ table tr td table tr td.l b + b + b + b /*energy*/

    (То что выделено зелёным не воспринимается браузером Internet Explorer и потому наверное автор добавлять не стал, такие браузеры как Opera или FireFox эту функцию поддерживают, поэтому я счёл нужным добавить всё это сюда)

    Настройки ссылок

    table tr td table tr td.l a

    Настройки для описаний

    table tr th p
    table tr th p table
    table tr th p table tr td

    2.2 Постройки и исследования

    Ссылки сноса
    td.k div.z a, td.k div.z a.s, td.k div.z a.t
    td.k div.z a:hover

    2.3 Верфь и оборона

    Кнопка «Строить»

    form table table td.c input

    Настройки Производства

    div.z

    Поле ввода количества изделий

    body form table tr td table tr td.k input

    2.4 Дополнительные функции владельцам командира

    Шрифт для "чего не хватает“

    span.noresources

    "Строительство возможно через"

    span.timeremaining



    3. Сырьё продукции

    Настройки полей

    td.k

    Кнопка расчёта

    td.k input



    4. Меню управления флотами

    Общие окружения ввода

    th input

    Формат поля ввода

    table tr th input

    Три страницы

    Общие настройки

    table tr th table tr th

    Показатель остатка

    table tr th table tr th div

    «макс» и ссылки ресурсов

    table tr th table tr th a
    table tr th table tr th a:hover

    Задний фон заданий и ресурсов

    table tr th table tr td.c



    5. Таблица технологий

    Общие настройки
    center table tr td.l




    6. Галактика

    6.1 Общее

    Альянс

    .allymember

    Новичок

    .noob

    Сильный

    .strong

    Рабочий Отпуск

    .vacation

    Активность

    .inactive

    Активность от входа

    .longinactive

    Забанен

    .banned

    Шрифты в солнечной системе

    center form#galaxy_form table tr td table tr td.c

    Кнопки навигации

    form#galaxy_form td.l input

    Таблица обвода навигации

    form#galaxy_form td.l

    Кнопки сообщений в галактике

    form#galaxy_form table tr td input

    Кнопка меню, отправки ракет

    table form td.c input
    td.c input

    Количество ракет в наличии

    span#missiles

    6.2 Инструмент настройки

    Шрифт заднего плана

    table tr th.tooltip_border td.c

    Общие настройки

    table tr th.tooltip_border table tr th table tr th
    table tr th.tooltip_border table tr th table tr td
    table tr th.tooltip_border table tr th table tr th table tr th
    table tr th.tooltip_border table tr th table tr th table tr td

    Настройки ссылок

    table tr th.tooltip_border a
    table tr th.tooltip_border a:hover

    Настройки обвода

    th.tooltip_border img

    6.3 Поле информации о активности

    Рамки в таблице

    tr#fleetstatusrow th

    Таблица сообщений

    table#fleetstatustable

    Всплывающее сообщение

    table#fleetstatustable tr td

    Посадка флота

    table#fleetstatustable tr td span.success

    Ошибка при отправке флота

    table#fleetstatustable tr td span.error



    7. Сообщения
    7.1 Обычные

    Настройки поля ввода текста

    th input

    Таблица текста

    td.b

    7.2 Шпионские доклады

    Всеобщая таблица

    table tr td table tr td.b table

    Ячейка с содержимым

    table tr td table tr td.b table tr td

    Шрифты (Техи, Ресы, и т.д.)

    table tr td table tr td.b table tr td.c

    7.3 Боевые доклады

    Формат заднего плана

    table tr td table
    table tr td table tr th
    table tr td table tr th table tr th



    8. Настройки

    Центральная таблица
    body zentrieren!



    9. Firefox - и Opera - Дополнения

    Возвращающиеся корабли

    body center table tr.flight th span.flight a[title="Anzahl"]:after,

    в Обзоре

    body center table tr.flight th span.owntransport a[title]:after,
    body center table tr.flight th span.ownattack a[title]:after,
    body center table tr.flight th span.ownharvest a[title]:after,
    body center table tr.flight th span.colony a[title]:after,
    body center table tr.flight th span.ownespionage a[title]:after,
    body center table tr.flight th span.owndeploy a[title]:after
    body center table tr.flight th span.owndestroy a[title]:after,
    body center table tr.flight th span.ownhold a[title]:after



    Чтобы всё отображалось, в конце каждой строки добавьте: {content:" ("attr(title)")"; color:#(R-G-B);}



    Возвращающийся флот
    body center table tr.return th a[title]:after {content:" ("attr(title)")"; color:#(R-G-B);}


    /*Добавлено переводчиком*/
    Отправленный флот
    body center table tr.flight th span.flight a[title]:after {content:" ("attr(title)")"; color:#(R-G-B);}


    При скане фалангой флот раскрыт
    body center table tr th font a[title]:after {content:" ("attr(title)")"; color:#(R-G-B);}

    Отображение поля обломков
    a[title="Trьmmerfeld:"]:after {content:" ("attr(title)")"; color:#(R-G-B);}

    Скорость корабля
    a[title="Geschwindigkeit:"]:after {content:" ("attr(title)")"; color:#(R-G-B);}

    Примечание переводчика

    (То, что окрашено в зелёный цвет было добавлено Night_Pilgrim(переводчиком) т.к. без этих добавлений настройки не функционируют)



    Примечание переводчика, к сожалению автора этих путей я уже не помню, данная функция изменит цвета скорости корабля в меню флотов:

    select option[value="10"]
    {color:# (цвет 100%);}
    select
    option[value="9"]
    {color:# (цвет 90%);}
    select
    option[value="8"]
    {color:# (цвет 80%);}
    select
    option[value="7"]
    {color:# (цвет 70%);}
    select
    option[value="6"]
    {color:# (цвет 60%);}
    select
    option[value="5"]
    {color:# (цвет 50%);}
    select
    option[value="4"]
    {color:#f(цвет 40%);}
    select
    option[value="3"]
    {color:# (цвет 30%);}
    select
    option[value="2"]
    {color:# (цвет 20%);}
    select
    option[value="1"]
    {color:# (цвет 10%);}
    select
    option[value="0"]
    {color:# (цвет 0%);}




    Примечание переводчика:
    span[class="flight ownhold"]:before,
    span[class="flight owndeploy"]:before,
    span[class="flight owntransport"]:before,
    span[class="flight ownattack"]:before,
    span[class="flight ownharvest"]:before,
    span[class="flight ownespionage"]:before,
    span[class="flight owncolony"]:before,
    span[class="flight owndestroy"]:before,
    span[class="flight ownmissile"]:before

    { content:">>>>"; color: #RGB; }

    span[class="return ownhold"]:before,
    span[class="return owndeploy"]:before,
    span[class="return owntransport"]:before,
    span[class="return ownattack"]:before,
    span[class="return ownharvest"]:before,
    span[class="return ownespionage"]:before,
    span[class="return owncolony"]:before,
    span[class="return owndestroy"]:before,
    span[class="return ownmissile"]:before

    { content:"<<<<<"; color: #8f8f8f; }

    span[class="flight missile"]:before { content:"<<<<<"; color: #RGB; }

    tr.flight span.owndold a[title]:after,
    tr.return span.ownhold a[title]:after,
    tr.flight span.owndeploy a[title]:after,
    tr.return span.owndeploy a[title]:after,
    tr.flight span.owntransport a[title]:after,
    tr.return span.owntransport a[title]:after,
    tr.flight span.ownattack a[title]:after,
    tr.return span.ownattack a[title]:after,
    tr.flight span.ownharvest a[title]:after,
    tr.return span.ownharvest a[title]:after,
    tr.flight span.ownespionage a[title]:after,
    tr.return span.ownespionage a[title]:after,
    tr.flight span.owncolony a[title]:after,
    tr.return span.owncolony a[title]:after,
    tr.flight span.owndestroy a[title]:after,
    tr.return span.owndestroy a[title]:after


    Данная ветка позволяет добавлять символы (в данном случае <<<<< и >>>>>) перед флотами c заданиями отправляться и возвращаться.



    Ich hoffe dieses Dokument kann einigen auf die Sprьnge helfen!
    © 2006 Mic2003
    ©
    people.freenet.de/mic2003-skin/ogame_css_klassen.html

    Этот документ переведёл и дополнил Night_Pilgrim
    © 2007 G W




    Время меняет всё и уже завтра эти строки могут морально устареть
    В случае если найдёте, ошибку либо желаете что-то дополнить, пишите в ЛС.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Night_Pilgrim ()



  • tr > td > i > b > font {font-style:normal;color:(RGB - Metall);}
    tr > td + td > i > b > font {font-style:normal;color:(RGB - Cristall);}
    tr > td + td + td > i > b > font {font-style:normal;color:(RGB - Deuterium);}
    tr > td + td + td + td > i > b > font {font-style:normal;color:(RGB - Matery);}
    tr > td + td + td + td + td > i > b > font {font-style:normal;color:(RGB - Energy);}

    table[width="100%"] tr > td {color:(RGB - Metall);}
    table[width="100%"] tr > td + td {color:(RGB - Cristall);}
    table[width="100%"] tr > td + td + td {color:(RGB - Deuterium);}
    table[width="100%"] tr > td + td + td + td {color:(RGB - Matery);}
    table[width="100%"] tr > td + td + td + td + td {color:(RGB - Energy);}

    table[width="500"] tr > th {color:(RGB - Metall);}
    table[width="500"] tr > th + th {color:(RGB - Cristall);}
    table[width="500"] tr > th + th + th {color:(RGB - Deuterium);}
    table[width="500"] tr > th + th + th + th {color:(RGB - Matery);}
    table[width="500"] tr > th + th + th + th + th {color:(RGB - Energy);}



    В связи с нововведением, а именно с новым ресурсом "Тёмная материя" расклад цвета немного изменился

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Night_Pilgrim ()

  • В связи с тем что Mic2003 не указал в своём doc-файле(и похоже и не собирается этого делать) некоторых ньюансов, приходится делать это за него

    ниже расписал какая ветка за что отвечает, пути указывать не стал, будут вопросы, создавайте темы в разделе скины, отвечу, если найду время и информацию.
    :smile 050:


    /* ~~~ Menu config ~~~*/
    #menu
    (Общие настройки меню в игре)
    #menu td
    (Конфигурация ячеек таблицы меню)
    #menu table
    (Конфигурация картинок-империи в меню)
    #menu td:hover
    (Конфигурация ячейки при наведении на неё курсора мыши)
    #menu div a
    (Конфигурация ссылок)
    #menu div a:link
    (Ссылка в пассивном состоянии)
    #menu div a:visited
    (Посещённая ссылка в пассивном состоянии)
    #menu div a:hover
    (Ссылка при наведении на неё мыши)
  • Для тех кого бесит эта картинка:


    пишем в formate.css:

    [color="#204504"]div#header_top table tr table#resources tr td img[src*="dm_klein_2.jpg"]{height: 0px ;width: 0px;}

    div#header_top table tr table#resources tr td + td + td + td:after {content:url(images/darkmatter.gif);}
    div#header_top table tr table#resources tr td + td + td + td + td:after,
    div#header_top table tr table#resources tr + tr td + td + td + td:after,
    div#header_top table tr table#resources tr + tr + tr td + td + td + td:after{content:"";}[/color]


    далее добавляем картинку и называем её darkmatter.gif в папку с рисунками (туда где картинки металла, кристалла, дейтерия, энергии)



    спасибо за ссылку Quaker12uni
    © Mic2003
    board.ogame.org/thread.php?threadid=315247

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von Night_Pilgrim ()

  • Если кому кажется, что слова "Темная материя" портят внешний вид скина, их нетрудно заменить на что-нибудь более приемлемое:
    tr.header > td.header[width="85"]:first-child + td + td + td font
    { display: none; }

    tr.header > td.header[width="85"]:first-child + td + td + td b:after
    { content : "Dark Matter"; color : (R-G-B); }

    Вместо "Dark Matter" можно написать все что угодно. Для русского следует использовать кодировку KOI8-R.
  • эти ветки отвечают за настройки всплывающих окон


    div#WzTtDiV
    div#WzBoDy
    div#WzTtDiV
    div#WzTtDiV
    div#WzBoDy table tbody tr td#WzBoDyI
    div#WzTtDiV div#WzBoDy table
    div#WzTtDiV div#WzBoDy table table
    div#WzTtDiV div#WzBoDy table tbody tr td#WzBoDyI font

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Night_Pilgrim ()