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

1 2 3 4 5 6
# Опубликовано 24 июня в 16:13
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
Расскажите побольше про возможности редактирования страниц :)
Ну или хотя бы ответьте на вопросы:

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

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

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

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

ЗЫ: не знал где создать тему. Перенесите если что.
# Опубликовано 24 июня в 16:41
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
В режиме радектирования HTML доступны следующие теги:...
Как добраться до редактирования HTML Oo ? ))
# Опубликовано 24 июня в 16:42
Derfas13 Хранитель игр 17 уровень
855 сообщений
618 SFP
@Cypher писал:
В режиме радектирования HTML доступны следующие теги:...
Как добраться до редактирования HTML Oo ? ))

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

I'll be here... Why...?
I'll be 'waiting'...here... For what?
I'll be waiting...for you...so...
If you come here...
You'll find me. I promise.
# Опубликовано 24 июня в 16:43
CJ Slade Основатель 20 уровень
481 сообщение
684 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 июня в 16:46
Derfas13 Хранитель игр 17 уровень
855 сообщений
618 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", только соответственно номер твоей игры там.

I'll be here... Why...?
I'll be 'waiting'...here... For what?
I'll be waiting...for you...so...
If you come here...
You'll find me. I promise.
# Опубликовано 25 июня в 16:04
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
Еще вопрос:
Набиваю статью по Зеносаге. Хочу чтобы на странице были ссылки на большие картинки в види миниатюр.
1) Разумноли выложить куда-нибудь оригинальную картинку (например на imageshack) в разрешении 800х600 и её миниатюру 80х60. Получить две ссылки и потом в самой статье сделать сделать ссылку-миниатюру на большую картинку. Или есть более стандартный способ получения миниатюр на сайте?

2) Куда лучше выложить картинки? Большим картинкам нашлось бы место в галерее. Т.е. изначально картинка была выложенна в какой-нибудь альбом галереи, но она же используется в статье. точнее ссылка на неё. куда выложить миниатюры?
# Опубликовано 25 июня в 16:24
CJ Slade Основатель 20 уровень
481 сообщение
684 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 июня в 16:44
dameon Мастер-хранитель 23 уровень
2133 сообщения
721 SFP
Что еще можно сделать с CSS полезного здесь, кроме изменения цвета блока и расположения фона\логотипа?
  Entrust thy heart to me
d70617eaaa67.jpg
# Опубликовано 25 июня в 17:02
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 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 июня в 17:40
CJ Slade Основатель 20 уровень
481 сообщение
684 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 июня в 17:44
dameon Мастер-хранитель 23 уровень
2133 сообщения
721 SFP
Пока что-то никто не стремится полностью менять оформление сайта. Что конкретно можно изменить на странице игры, какие названия имеют эти элементы?
  Entrust thy heart to me
d70617eaaa67.jpg
# Опубликовано 25 июня в 17:48
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
.head-bar {} // левая голубая шапка
#page-info {} // так нелюбимый Derfas13'м, серый блок в анкете

Можно в коде смотреть по id и class. Html код сайта вполне читабелен.
# Опубликовано 25 июня в 17:49
Derfas13 Хранитель игр 17 уровень
855 сообщений
618 SFP
@dameon писал:
Пока что-то никто не стремится полностью менять оформление сайта. Что конкретно можно изменить на странице игры, какие названия имеют эти элементы?

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

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


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

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

I'll be here... Why...?
I'll be 'waiting'...here... For what?
I'll be waiting...for you...so...
If you come here...
You'll find me. I promise.
# Опубликовано 25 июня в 17:50
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
@CJ Slade писал:
Припиши к картинкам class="margins"
Великолепно! Спс ;)

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

Про 120x80. Согласен, это куда проще :). Однако сделать 80x120 уже не получается. Если картинка это скан обложки диска PS2, например, вертикальный, то горизонтальная миниатюра добавляет здоровые серые области по краям, которых и в принципе не хотелось бы видеть, а оставить вертикальную миниатюру. Посему если стандартные миниатюры это 120х80, 80х53 и все, то придется поковырятся в фотошопе самому :). В таком случае куда лучше заливать эти миниатюры?
# Опубликовано 25 июня в 17:56
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
Тогда можно файловые хостинги использовать.
# Опубликовано 25 июня в 17:59
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
Оке ;)
# Опубликовано 25 июня в 18:23
dameon Мастер-хранитель 23 уровень
2133 сообщения
721 SFP
А запороть дизайн реально? Местоположение блоков тоже ведь можно задавать, получается.
  Entrust thy heart to me
d70617eaaa67.jpg
# Опубликовано 25 июня в 18:59
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
@dameon писал:
А запороть дизайн реально? Местоположение блоков тоже ведь можно задавать, получается.

Да, поэтому функция доступна на высоких уровнях.
# Опубликовано 25 июня в 21:09
Laharl Ученик клана Velvet Room 16 уровень
2794 сообщения
300 SFP
Ох как я не люблю всем этим мутным делом-то заниматься.

Так как я еще не разобрался ничерта, подскажите, как менять цвет буковок, можно стандартным тегом html иль придется мне сесть за CSS?
Жизнь коротка и она не заканчивается с потерей другого человека, пусть даже самого близкого.
# Опубликовано 26 июня в 01:27
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
Можноли сделать так, чтобы при нажатии на миниатюру картинки большой оригинал открывался не в обычной html-странице а в такой пафосной выплывающей формочке с крестиком в правом верзнем углу, как со страницы форума, например?
# Опубликовано 26 июня в 09:52
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
@Cypher писал:
Можноли сделать так, чтобы при нажатии на миниатюру картинки большой оригинал открывался не в обычной html-странице а в такой пафосной выплывающей формочке с крестиком в правом верзнем углу, как со страницы форума, например?

Да, нужно написать class="lightbox" у ссылки.
# Опубликовано 26 июня в 16:33
Derfas13 Хранитель игр 17 уровень
855 сообщений
618 SFP

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

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


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

I'll be here... Why...?
I'll be 'waiting'...here... For what?
I'll be waiting...for you...so...
If you come here...
You'll find me. I promise.
# Опубликовано 26 июня в 16:43
CJ Slade Основатель 20 уровень
481 сообщение
684 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 июня в 16:47
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
Рекомендую подбирать цвета на специальных сайтах:
http://colorschemedesigner.com
http://www.colorschemer.com/online.html

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

# Опубликовано 28 июня в 00:03
dameon Мастер-хранитель 23 уровень
2133 сообщения
721 SFP
При смене разрешения экрана установленные элементы могут уехать куда-нибудь. Можно ли этого как-то избежать?
  Entrust thy heart to me
d70617eaaa67.jpg
# Опубликовано 28 июня в 09:23
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
@dameon писал:
При смене разрешения экрана установленные элементы могут уехать куда-нибудь. Можно ли этого как-то избежать?

Если про шапку речь, тогда центрировать.
# Опубликовано 28 июня в 10:56
dameon Мастер-хранитель 23 уровень
2133 сообщения
721 SFP
Ну так размер шапки все равно фиксированное разрешение имеет. И при другом разрешении края будут заканчиваться в других местах. Или нет?

  Entrust thy heart to me
d70617eaaa67.jpg
# Опубликовано 28 июня в 11:12
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
При ширине не более 950px сужаться картинки не должна.
# Опубликовано 28 июня в 14:09
Cypher Ученик клана SquarePatrol 19 уровень
2248 сообщений
232 SFP
Можно ли в html-редакторе сделать текст колонками? Пробовал сделать таблицу из двух ячеек-столбцов и разместить в них текст. Однако таблица растягивается на всю ширину страницы и не получается убрать border.
# Опубликовано 28 июня в 14:17
CJ Slade Основатель 20 уровень
481 сообщение
684 SFP
В текущем состоянии только через таблицу.
1 2 3 4 5 6