^

Сайт и форум / Оформление страниц. 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
# 24 июня 2010, 16:41

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
В режиме радектирования HTML доступны следующие теги:…
Как добраться до редактирования HTML Oo ? ))
# 24 июня 2010, 16:42

Derfas13

The Archivist 45 уровень
3278 сообщений
5297 SFP
@Cypher писал:
В режиме радектирования HTML доступны следующие теги:…
Как добраться до редактирования HTML Oo ? ))

Выключенный редактор = редактирование HTML

# 24 июня 2010, 16:43

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP

1. Можно взять этот http://squarefaction.ru/images/design/logo-black.png. Могу выложить логотип с перьями, но только ближе к воскресенью.

2. Если измененный логотип будет без фона, тогда могу добавить его к основным.
Я бы рекомендовал, логотип фоновое изображение делать, как тут http://squarefaction.ru/games/page/final-fantasy-vii-crisis-core.

1. Менять можно любые блоки, например #layout-content {background: #000; color #fff}. Ограничений в данном случае нет.

3. Все css правила доступны.

4. Можно.
#main-menu {background: none}
#main-menu li a {text-shadow:none}
#main-menu li a:hover {background:none; color: #2891F2;text-shadow:none}

Тут например можно почитать по CSS http://ru.html.net/tutorials/css/.


Работать можно 2мя способами:
  • Поставить FireBug и редактировать в html. Измененные параметры копировать себе в блокнот, потом редактор оформления сф.
    http://www.youtube.com/watch?v=Q5h-6kZX5HE
  • Сохранить себе локальную копию страницы и через какой-нибудь front page или dreamweaver. И в нём ковырять css.


Не забываем тестировать свой результат во всех основных браузерах.
Отредактировано 24 июня 2010, 16:50
+9
# 24 июня 2010, 16:46

Derfas13

The Archivist 45 уровень
3278 сообщений
5297 SFP
@Cypher писал:
Новый логотип
1. Где взять стандартную надпись SQUARE FACTION без фона, что бы наложить на новую картинку?

http://squarefaction.ru/images/design/logo.png

http://squarefaction.ru/images/design/logo-black.png

http://squarefaction.ru/images/design/logo-white.png

http://squarefaction.ru/images/design/logo-blue.png

http://squarefaction.ru/images/design/logo-orange.png


@Cypher писал:
2. Когда я сделаю новую картинку, то как мне её загрузить и потом найти? ))

Загружаешь как фоновое изображение например. Тогда оно будет распологаться по адресу «/files/game/200/background.png», только соответственно номер твоей игры там.

Отредактировано 24 июня 2010, 17:03
# 25 июня 2010, 16:04

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Еще вопрос:
Набиваю статью по Зеносаге. Хочу чтобы на странице были ссылки на большие картинки в види миниатюр.
1) Разумноли выложить куда-нибудь оригинальную картинку (например на imageshack) в разрешении 800х600 и её миниатюру 80х60. Получить две ссылки и потом в самой статье сделать сделать ссылку-миниатюру на большую картинку. Или есть более стандартный способ получения миниатюр на сайте?

2) Куда лучше выложить картинки? Большим картинкам нашлось бы место в галерее. Т.е. изначально картинка была выложенна в какой-нибудь альбом галереи, но она же используется в статье. точнее ссылка на неё. куда выложить миниатюры?
# 25 июня 2010, 16:24

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@Cypher писал:
Еще вопрос:
Набиваю статью по Зеносаге. Хочу чтобы на странице были ссылки на большие картинки в види миниатюр.
1) Разумноли выложить куда-нибудь оригинальную картинку (например на imageshack) в разрешении 800х600 и её миниатюру 80х60. Получить две ссылки и потом в самой статье сделать сделать ссылку-миниатюру на большую картинку. Или есть более стандартный способ получения миниатюр на сайте?

2) Куда лучше выложить картинки? Большим картинкам нашлось бы место в галерее. Т.е. изначально картинка была выложенна в какой-нибудь альбом галереи, но она же используется в статье. точнее ссылка на неё. куда выложить миниатюры?
Можно брать уже сгенерированные.

Например полноразмерное изображение из галереи:
http://squarefaction.ru/files/game/378/gallery/6e2ae224224d1e212a5d0876db0998f2.jpg

Миниатюра 120x80:
http://squarefaction.ru/files/game/378/gallery/120x80/6e2ae224224d1e212a5d0876db0998f2.jpg

Миниатюра 80x53:
http://www.squarefaction.ru/files/game/378/gallery/80x53/6e2ae224224d1e212a5d0876db0998f2.jpg
# 25 июня 2010, 16:44

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Что еще можно сделать с CSS полезного здесь, кроме изменения цвета блока и расположения фона\логотипа?
# 25 июня 2010, 17:02

Cypher

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

Например полноразмерное изображение из галереи:
http://squarefaction.ru/files/game/378/gallery/6e2ae224224d1e212a5d0876db0998f2.jpg

Миниатюра 120x80:
http://squarefaction.ru/files/game/378/gallery/120x80/6e2ae224224d1e212a5d0876db0998f2.jpg

Миниатюра 80x53:
http://www.squarefaction.ru/files/game/378/gallery/80x53/6e2ae224224d1e212a5d0876db0998f2.jpg
Есть какие-то стандарты размера миниатюр? 120х80, 80х53 … ?
И чем плох метод с заливкой миниатюр отдельно? )

А тэги HSPACE и VSPACE для картинок не работают?) А то если картинка обтекается текстом то он вплотную к ней прижимается ((
# 25 июня 2010, 17:40

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@dameon писал:
Что еще можно сделать с CSS полезного здесь, кроме изменения цвета блока и расположения фона\логотипа?
Полностью изменить оформление сайта.

@Cypher писал:
@CJ Slade писал:
Можно брать уже сгенерированные.

Например полноразмерное изображение из галереи:
http://squarefaction.ru/files/game/378/gallery/6e2ae224224d1e212a5d0876db0998f2.jpg

Миниатюра 120x80:
http://squarefaction.ru/files/game/378/gallery/120x80/6e2ae224224d1e212a5d0876db0998f2.jpg

Миниатюра 80x53:
http://www.squarefaction.ru/files/game/378/gallery/80x53/6e2ae224224d1e212a5d0876db0998f2.jpg
Есть какие-то стандарты размера миниатюр? 120х80, 80х53 … ?
И чем плох метод с заливкой миниатюр отдельно? )

А тэги HSPACE и VSPACE для картинок не работают?) А то если картинка обтекается текстом то он вплотную к ней прижимается ((
Тем, что это проще.

Припиши к картинкам class="margins"
# 25 июня 2010, 17:44

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Пока что-то никто не стремится полностью менять оформление сайта. Что конкретно можно изменить на странице игры, какие названия имеют эти элементы?
# 25 июня 2010, 17:48

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
.head-bar {} // левая голубая шапка
#page-info {} // так нелюбимый Derfas13'м, серый блок в анкете

Можно в коде смотреть по id и class. Html код сайта вполне читабелен.
# 25 июня 2010, 17:49

Derfas13

The Archivist 45 уровень
3278 сообщений
5297 SFP
@dameon писал:
Пока что-то никто не стремится полностью менять оформление сайта. Что конкретно можно изменить на странице игры, какие названия имеют эти элементы?

Изменить можно всё, что позволяет менять css.

Названия смотришь в коде страницы.


@CJ Slade писал:
#page-info {} // так нелюбимый Derfas13'м, серый блок в анкете

Я уже привык к нему xD

# 25 июня 2010, 17:50

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
@CJ Slade писал:
Припиши к картинкам class="margins"
Великолепно! Спс ;)

Замечание: после добавления кода написанного в блокноте в статью ко всем картинкам добавляется тег alt="имя файла картинки", где имя файла вот такое: ojshef7w4fhu4cfhn2983nfc34t89c23ytn.jpg :). Это нормально? ))
Добавляется только в том случае, если я сам не вписываю тэг альт. Если я пишу чего-нибудь осознаное то все ОК.

Про 120x80. Согласен, это куда проще :). Однако сделать 80x120 уже не получается. Если картинка это скан обложки диска PS2, например, вертикальный, то горизонтальная миниатюра добавляет здоровые серые области по краям, которых и в принципе не хотелось бы видеть, а оставить вертикальную миниатюру. Посему если стандартные миниатюры это 120х80, 80х53 и все, то придется поковырятся в фотошопе самому :). В таком случае куда лучше заливать эти миниатюры?
# 25 июня 2010, 17:56

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
Тогда можно файловые хостинги использовать.
# 25 июня 2010, 17:59

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Оке ;)
# 25 июня 2010, 18:23

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
А запороть дизайн реально? Местоположение блоков тоже ведь можно задавать, получается.
# 25 июня 2010, 18:59

CJ Slade

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

Да, поэтому функция доступна на высоких уровнях.
# 25 июня 2010, 21:09

Lahli

Познающий кубы клана Draw.ch 25 уровень
3234 сообщения
1147 SFP
Ох как я не люблю всем этим мутным делом-то заниматься.

Так как я еще не разобрался ничерта, подскажите, как менять цвет буковок, можно стандартным тегом html иль придется мне сесть за CSS?
# 26 июня 2010, 01:27

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Можноли сделать так, чтобы при нажатии на миниатюру картинки большой оригинал открывался не в обычной html-странице а в такой пафосной выплывающей формочке с крестиком в правом верзнем углу, как со страницы форума, например?
# 26 июня 2010, 09:52

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@Cypher писал:
Можноли сделать так, чтобы при нажатии на миниатюру картинки большой оригинал открывался не в обычной html-странице а в такой пафосной выплывающей формочке с крестиком в правом верзнем углу, как со страницы форума, например?

Да, нужно написать class="lightbox" у ссылки.
# 26 июня 2010, 16:33

Derfas13

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

Не могу сообразить, как обратиться к тексту который внутри блока «page-info»?

Просто через «#page-info» на текст ничего не влияет. Через «#page-info div.data-block smaller» тоже ничего не получается.


@UPD: Уже нашёл, «#custom-page div.data-block th» и «#custom-page div.data-block td».

Отредактировано 26 июня 2010, 16:42
# 26 июня 2010, 16:43

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@Derfas13 писал:

Не могу сообразить, как обратиться к тексту который внутри блока «page-info»?

Просто через «#page-info» на текст ничего не влияет. Через «#page-info div.data-block smaller» тоже ничего не получается.


@UPD: Уже нашёл. «#custom-page div.data-block th» и «#custom-page div.data-block td».

BODY{color: #6F1212}
# 26 июня 2010, 16:47

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
Рекомендую подбирать цвета на специальных сайтах:
http://colorschemedesigner.com
http://www.colorschemer.com/online.html

они помогают избежать визуальной «кислотности»

# 28 июня 2010, 00:03

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
При смене разрешения экрана установленные элементы могут уехать куда-нибудь. Можно ли этого как-то избежать?
# 28 июня 2010, 09:23

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
@dameon писал:
При смене разрешения экрана установленные элементы могут уехать куда-нибудь. Можно ли этого как-то избежать?

Если про шапку речь, тогда центрировать.
# 28 июня 2010, 10:56

dameon

Devil Summoner 75 уровень
8595 сообщений
19930 SFP
Ну так размер шапки все равно фиксированное разрешение имеет. И при другом разрешении края будут заканчиваться в других местах. Или нет?

# 28 июня 2010, 11:12

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
При ширине не более 950px сужаться картинки не должна.
# 28 июня 2010, 14:09

Cypher

Гражданский 24 уровень
2169 сообщений
1748 SFP
Можно ли в html-редакторе сделать текст колонками? Пробовал сделать таблицу из двух ячеек-столбцов и разместить в них текст. Однако таблица растягивается на всю ширину страницы и не получается убрать border.
# 28 июня 2010, 14:17

CJ Slade

Основатель 32 уровень
683 сообщения
2461 SFP
В текущем состоянии только через таблицу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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