^

Сайт и форум / Оформление страниц. CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
# 24 июня 2010, 16:13     автор темы

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Расскажите побольше про возможности редактирования страниц :)
Ну или хотя бы ответьте на вопросы:

>>>Новый логотип
1. Где взять стандартную надпись SQUARE FACTION без фона, что бы наложить на новую картинку?
2. Когда я сделаю новую картинку, то как мне её загрузить и потом найти? ))
3. Далее, я думаю, в блоке для CSS нудно прописать чего-нить типа:
#logo-block h1 { background-image: url(/images/design/mynewlogo.jpg);}
Вопрос, что конкретно и каков будет адрес загруженной картинки?

>>>Другие блоки
1. В нашем могучем хелпе по CSS есть пример смены цвета нижнего блока. Вопрос: какие еще доступны блоки?
2. Точнее так: такие настройки можно проворачивать только с заранее разрешенными блоками типа нижнего, или со всеми имеющимися и нужно знать только как они называются?
3. Что еще можно делать с блоками. можно-ли поменять цвет шрифта, сам шрифт и т.д.?

>>>Остальные кнопочки
Можно-ли изменить цвет кнопок в верхнем меню «люди, игры, кланы…», остальные кнопки типа удаления из любимых?

>>>Что почитать про CSS?

ЗЫ: не знал где создать тему. Перенесите если что.
Отредактировано 25 июня 2010, 16:16
...
# 21 июля 2010, 17:43

Derfas13

The Archivist 45 уровень
3278 сообщений
5299 SFP
@Cypher писал:
Пробовал в ЦСС:
p.cypher_align
{ vertical-align: top; }
и применял к содержимому ячейки, где текст — не работает (мож не туда применял)?

Делаешь класс тейблу, и потом table.cypher_align td {vertical-align: top;}

# 21 июля 2010, 17:50

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
Внес поправки. Теперь в редакторе тоже к верхней границе должно прижиматься.
# 21 июля 2010, 18:21

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@CJ Slade писал:
Внес поправки. Теперь в редакторе тоже к верхней границе должно прижиматься.

Работает. Теперь ан форуме все Ок. Но в статьях таже беда ((
# 21 июля 2010, 18:29

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@Derfas13 писал:
@Cypher писал:
Пробовал в ЦСС:
p.cypher_align
{ vertical-align: top; }
и применял к содержимому ячейки, где текст — не работает (мож не туда применял)?

Делаешь класс тейблу, и потом table.cypher_align td {vertical-align: top;}

Fuck yeah! )))
Работает и в статьях! )
# 22 июля 2010, 22:59

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Можно конкретнее про «сделать класс тэйблу»? Могу ли я как-то заставить текст в ячейке быть выравненным по обеим сторонам?


Также предвижу проблему, как сделать это не в своей игре? 


Поскольку я опять забыл включить оформление на странице игры, то переходим сразу ко второму вопросу)

Отредактировано 22 июля 2010, 23:16
# 23 июля 2010, 00:02

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@Cypher писал:
@Derfas13 писал:
@Cypher писал:
Пробовал в ЦСС:
p.cypher_align
{ vertical-align: top; }
и применял к содержимому ячейки, где текст — не работает (мож не туда применял)?

Делаешь класс тейблу, и потом table.cypher_align td {vertical-align: top;}

Fuck yeah! )))
Работает и в статьях! )
Fuck NO!
Следующий код не пройдет ведь?
<table class="cypher_align" class="no-borders">
# 23 июля 2010, 00:07

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP

table.dameon_table td

{

// а_сюда_зафигачь_что_надо

border-style: none;

}


Оставь только свой класс, class="no-borders" убери 

# 23 июля 2010, 00:10

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Я примерно так и решил проблему ))
Зря панику поднял)

В коде пишем:
<table class="cypher_align">
… таблица

В CSS:
table.cypher_align td
{
border : 0px;             //убирает рамку табшлицы
vertical-align: top;     //прижимает содержимое к верхней границе
text-align: justify;      //делает текст по ширине ячейки
}


Непонятно только можно-ли тоже самое сделат ьс ячейками. т.е. присвоить им класс типа
<td class="cypher_porno_content">
редактор такой код преобразует в <td>.
Мне оно не надо, просто для системы интересно))
# 23 июля 2010, 00:36

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Вопрос: если я хочу присоить класс таблице, то я пишу:
<table class="имя класса">

А в CSS пишу table.имя класса td {…}

А если я хочу присвоить класс картинке, то я пишу
<img src="путь" class="имя класса2">
И что я должен написать в CSS?
img.имя класса2 {…} ?



P.S. что за td в имени класса и почему оно без него не работает? )
# 23 июля 2010, 01:11

Derfas13

The Archivist 45 уровень
3278 сообщений
5299 SFP

В img можно просто .имя_класса{} вроде.

td там потому что ты обращаешься к td. Также ты можешь обратиться например к table.имя класса th {}.

# 3 августа 2010, 11:11

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Как мне убрать оригинальный SF-логотип при наличии его на фоне?
Тут например: http://squarefaction.ru/games/page/rock-n-roll-racing
# 3 августа 2010, 11:25

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
А еще есть ли возможность сделать оранжевый логотип с перьями?
# 3 августа 2010, 11:36

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@Cypher писал:
А еще есть ли возможность сделать оранжевый логотип с перьями?
Через css попробуй. Убедись, чтобы была невидимая ссылка над твоим логотипом.

@Cypher писал:
Как мне убрать оригинальный SF-логотип при наличии его на фоне?
Тут например: http://squarefaction.ru/games/page/rock-n-roll-racing
Нарисуй, добавлю.
# 3 августа 2010, 11:58

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Не умею рисовать :)
Пробовал просто цвета менять на черно-белом с перьями, не получается :(

Про логотипы:

У меня два пока что логических недопонимания:
1) Можно ли полностью убрать оригинальный логотип, который является ссылкой на главную страницу? Если можно, то тогда остается просто фоновое изображение.
2) Можно ведь часть фоновой картинки превратить в ссылку? Т.е. из фона искусственно какбы сделать логотип: выделить надпись SQUARE FACTION на фоновой картинке и сделать её ссылкой на главную страницу?

Я такпонимаю это все делать при помощи CSS так как ни к чему другому у нас нет доступа. Как делать-то? ^__^
# 3 августа 2010, 13:18

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@Cypher писал:
Не умею рисовать :)
Пробовал просто цвета менять на черно-белом с перьями, не получается :(

Про логотипы:

У меня два пока что логических недопонимания:
1) Можно ли полностью убрать оригинальный логотип, который является ссылкой на главную страницу? Если можно, то тогда остается просто фоновое изображение.
2) Можно ведь часть фоновой картинки превратить в ссылку? Т.е. из фона искусственно какбы сделать логотип: выделить надпись SQUARE FACTION на фоновой картинке и сделать её ссылкой на главную страницу?

Я такпонимаю это все делать при помощи CSS так как ни к чему другому у нас нет доступа. Как делать-то? ^__^
да. background-image: transparent
# 3 августа 2010, 14:34

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@CJ Slade писал:
@Cypher писал:
Не умею рисовать :)
Пробовал просто цвета менять на черно-белом с перьями, не получается :(

Про логотипы:

У меня два пока что логических недопонимания:
1) Можно ли полностью убрать оригинальный логотип, который является ссылкой на главную страницу? Если можно, то тогда остается просто фоновое изображение.
2) Можно ведь часть фоновой картинки превратить в ссылку? Т.е. из фона искусственно какбы сделать логотип: выделить надпись SQUARE FACTION на фоновой картинке и сделать её ссылкой на главную страницу?

Я такпонимаю это все делать при помощи CSS так как ни к чему другому у нас нет доступа. Как делать-то? ^__^
да. background-image: transparent
А чего должно произойти. Основной логотип SQUARE FACTION должен стать прозрачным?
Пробовал:

#logo-block h1
{
background-image: transparent;
}

Ничего не происходит ((
# 3 августа 2010, 14:56

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
А еще я не понимаю почему такая штука: выбрал цвет для фона картинки: 092638, что бы с фоном логотипа сочитался. Выполнил заливку:
1280833036.JPG

Затем в визуальном редакторе уже на СФ странице выбрал такой же цвет для фона:
1280833084.JPG
Но на самой странице явно видно переход.

Где я накосячил?

# 3 августа 2010, 19:38

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@Cypher писал:
А еще я не понимаю почему такая штука: выбрал цвет для фона картинки: 092638, что бы с фоном логотипа сочитался. Выполнил заливку:
1280833036.JPG

Затем в визуальном редакторе уже на СФ странице выбрал такой же цвет для фона:
1280833084.JPG
Но на самой странице явно видно переход.

Где я накосячил?

Поставь color-picker для firefox'а. Он показал цвет #141B29.
# 3 августа 2010, 19:40

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
попробуй
#logo-block h1 { background-image: none; }
или
#logo-block h1 { background: transparent; }
# 3 августа 2010, 21:40

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Оба способа помогли, спс :)
Теперь надо положение невидимого логатипа сдвинуть, чтобы ссылка на главную выравнялась с фоном :). С этим справлюсь ))
# 3 августа 2010, 23:21

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Усе, сделал. Оставлю запись для потомков:

Как заменить логотип SQUARE FACTION. Способ 1: фоновое изображение.
1) Делаем новый логотип-картинку содержащую лого со словами SQUARE FACTION. Это может быть как и перерисованный логотип, так и полностью вся шапка (пример тут).
Надписи SQUARE FACTION и Rock 'n Roll Racing, а так же рубящие митал инопланетяне представляют из себя одно изображение размера 950x228 — примерная ширина и выста шапки.
2) Загружаем такую картинку как фоновое изображение (расположение «не дублируем»):
1280862890.JPG
По вертикали картинка прижимается к верху, по горизонтали центрируется. Если надо сделать её левее или правее, то тупо делаем само изображение шире, т.е. справа или слево добавляем пустые области. Если сразу делали картинку ширины 950, проблема не возникнет.
3) Надо избавиться от стандартного логотипа SQUARE FACTION, оставив новый. Для этого прише в CSS:

#logo-block h1 {
top: 27px;
left: 141px;
background: transparent;
}

, где вместо 27 и 141 указываем положение SQUARE FCTION на новом логотипе. Таким образом старый логотип наложится на новый. Но третья строка сделает его невидимым, но как ссылка на главную он будет работать.

Минус: далее не получиться привинтить какое-нибудь фоновое изображение, сделать кирпичики на фоне или еще что. Только выбрать его цвет.

Хочу: Способ 2: перерисовка основного логотипа, не затрагивая фоновое изображение. Расскажите кто-нибудь плиииз, как это сделать :)
# 3 августа 2010, 23:31

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@CJ Slade писал:
@Cypher писал:

Где я накосячил?

Поставь color-picker для firefox'а. Он показал цвет #141B29
Отличная штука. Паставилась вместе с аддоном ColorZILLA :). Только она на шесть единиц меньше цвет указывает. Ставишь 161616 в меню игры, сохраняешь. Выдает 101010. Вычесть шесть не сложно, но лол )). Исправил свой косяк на странице Зеносаги. На единичку не сходилось :). Р-н-р наверно черным оставлю.
# 3 августа 2010, 23:34

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Кстати, есть примеры красивых дизайнов страниц без черного или белого фона?
# 3 августа 2010, 23:36

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@dameon писал:
Кстати, есть примеры красивых дизайнов страниц без черного или белого фона?
Это сложнее чем кажется :)
Да и с черным и с белым фоном можно дизайн забобахать, но тут уже таланты нужны :)
# 3 августа 2010, 23:39

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
И, кстати, как видео с ютуба разместить по центру страницы?
# 3 августа 2010, 23:42

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Просто не всем играм идет черный или белый дизайн.
# 3 августа 2010, 23:45

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Кстати, свое лого можно поставить вместо текущего просто:


#logo-block h1 {

background:url(«ссылка на картинку»);

height: 70px; // размеры видимой области

width: 250px; 

}


Раз оно ссылкой задается, то работать с ним нельзя. Разве что вручную перекрасить и указать путь.


# 4 августа 2010, 02:25

Derfas13

The Archivist 45 уровень
3278 сообщений
5299 SFP

Я логотипы меняю, используя фоновое изображение и следующую конструкцию:

#logo-block h1 {
   width: 426px;
   height: 180px;
   top: 0px;
   left: 0px;
   background-image: none;
}

Где ширина и высота задают область, в которой действует ссылка.


@dameon писал:
Кстати, есть примеры красивых дизайнов страниц без черного или белого фона?

Crisis Core, или ты имел ввиду вообще без белого?

Заодно вопрос относительно цвета фона и color-picker для firefox'а, о котором тут писалось. Там сейчас перехода не заметно во всех браузерах? А то я только в Фоксе и IE тестил, после того как отдельно для каждого прописал цвет.


@Cypher писал:
И, кстати, как видео с ютуба разместить по центру страницы?

[p align="center"] код видео [/p]

Скобки только естественно другие.

Отредактировано 4 августа 2010, 02:33
# 5 августа 2010, 07:45

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Derfas13, спс :)

Вопрос: как добраться до выпадающего поисковго меню и поменять в нем цвет шрифта?
1280979904.PNG
# 5 августа 2010, 09:47

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
#search-form #search-dropdown ul li a {}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Для комментирования необходимо авторизоваться