Обсуждение дизайна групп, консультации и помощь

Если вы хотите поменять дизайн группы, но не знаете как это сделать, пишите здесь.

На картинке краткий список основных id в файле group_zone.css, которые вам в основном и будут нужны.
Сам файл находится здесь: http://www.sxnarod.com/templates_head/group_zone.css

В этом файле куча стилей и они не все нужны на самом деле. Дело в том что этот файл стилей взят с форума, а он дописывается десятый год и там все намешано в кучу и мы с этим боремся.

Пишите, задавайте вопросы. Читайте хороший справочник по CSS: http://htmlbook.ru/css/cat/atrules

Картинка фона.

Как прикрепить картинку в "шапку" группы?
Например, я хочу зафигачить горизонтальную такую картиночку чуть выше красного блока с ссылками, в то место, где у меня сейчас написано:

""Ответ в Обсуждение дизайна групп, консультации и помощь
Взрослая социальная сеть -> Группы -> Сообщество владельцев групп -> Обсуждение дизайна групп, консультации и помощь"

То есть чтоб выглядело на манер шапки стандартного сайта...

#main {background:url(тут адрес картинки) repeat:no-repeat position:center}

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

#main {background:url(тут адрес картинки) repeat:no-repeat position:center; height:100px}

100px это высота блока, можно поставить больше или меньше.
Чтобы отодвинуть текст ниже, надо указать отступ: padding-top

#main {background:url(тут адрес картинки) repeat:no-repeat position:center; height:150px; padding-top:50px}



Самое главное вырезайте код сверху и снизу:
<style type='text/css'>

</style>

Чтобы вообще его не было. Это пока глючит, чуть позже исправим.

В целом понял.
Буду варганить картинку...Если что не получится, отпишу.

Чтобы не забыть

http://habrahabr.ru/post/148327/
http://habrahabr.ru/post/64173/
http://handynotes.ru/2008/01/100-height-css.html
http://www.xiper.net/collect/html-and-css-...noy-visoty.html

Немного переверстал структуру страниц, чтобы можно было более интересные вещи на CSS делать.

Паш, а куда картинку с фоном втыкать, чтобы стало как вот сейчас на этой странице??)

body {background:url(https://dl.backbook.me/full/d6b327e49b.png)}

размер размножаемой картинки может быть любым?

Да. Она просто копируется если не поставлены ограничения.

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

Это сообщение отредактировал Мерлин - 27-10-2012 - 19:36

Дима, вот мой код, изучай:

#main {width:1040px; padding:30px; border:solid 2px #ddd; border-radius:10px; margin:30px auto; background:#fff}
body {background:url(https://dl.backbook.me/full/d6b327e49b.png)}
#navigation {margin-top:-15px; padding-top:0}
#footer {margin-top:50px}
h1 {font-size:20px}
#left {border:0; background:none; box-shadow:0 0 0; border-radius:0}
#tabletopic tr:nth-child(even) td {background:none}

Ну правильно!!!!
Строка: #tabletopic tr:nth-child(even) td {background:none}
Отменяет применение картинки фона в таблице контента.
Но ты же мне сперва дал огрызок кода,я же не телепат, как я мог догадаться!??))


Всё заработало.

Дима, смотри код этой группы, стили в самом верху увидишь.

Да как всё же поменять дизайн группы?

Пал Палыч,как-то получилось,что в списке закрытых групп,моя группа зафиксировалась 2 раза.Окажите милость,удалите одну,чтобы не вводила людей в заблуждение.

(фантаквас @ 28.10.2012 - время: 19:01)
Да как всё же поменять дизайн группы?
Дизайн нужно самому писать, по вашим вкусам)

(фантаквас @ 28.10.2012 - время: 18:54)
Пал Палыч,как-то получилось,что в списке закрытых групп,моя группа зафиксировалась 2 раза.Окажите милость,удалите одну,чтобы не вводила людей в заблуждение.
Удаление завтра сделаем.

Фон для группы.





11

Может потом кто-то сделает отдельную группу по скинам для групп.

Румпельштицкин поставил скин новый,всё вроде пока фурычит,но есть замечания: Взрослая социальная сеть -> Группы -> Инвалиды можно не чёрным сделать и при нажатии белое,можно другой цвет,светлее,а то глаза напрягает реально. Продолжим: Powered by Invision Power Board(U) v1.3.1 Final © 2003 IPS, Inc.


[ Script Execution time: 0.0192 ] [ 11 queries used ] [ GZIP выключен ] можно не серого цвета,а то сливается,лично у меня. Ну я не дизайнер,так что если чем обидел,то не суди строго.

Замените:
#navigation a {color:#000} на #navigation a {color:#fff}

Добавьте сточки:
#footer a, #footer div {color:#999}
.copyright {color:#999}

(Румпельштицкин @ 29.10.2012 - время: 19:10)
Замените:
#navigation a {color:#000} на #navigation a {color:#fff}

Добавьте сточки:
#footer a, #footer div {color:#999}
.copyright {color:#999} Замените:
#navigation a {color:#000} на #navigation a {color:#fff}
Заменил,спасибо:) Второе уже Опера не отображает в скине новом,предлагает исходный код посмотреть,наверное я бландынка,но мужского пола.

заменил 50%

<style type='text/css'>
body {background:url(https://dl.backbook.me/full/937e43cd73.png) top repeat-x #1d1d1d}
#container {background: url(https://dl.backbook.me/full/7fe9690dab.png) repeat-x #eee; border: 5px double #000; border-radius: 6px; box-shadow: 0px 0px 10px #000;}
#left {border:0; background:none; box-shadow:0 0 0; border-radius:0;}
#navigation {margin-top:85px; color:#eee; height:160px; background:url(https://dl.backbook.me/full/139cb5d7d7.png) top center no-repeat}
#navigation h1, h2 {color:#fff; text-shadow:1px 1px #000}
#navigation h1 {font-size:24px}
#navigation h2 {margin-bottom:20px}
#navigation a {color:#fff}
#navigation a:hover {color:#fff}
#head {margin-top:-225px; background:none; box-shadow:0 0 0; border-radius:0; height:60px; border:0}
#body {margin-top:110px}
#right {padding-top:20px; background:url(https://dl.backbook.me/full/f2493602b9.png) left repeat-y; border-top-left-radius: 6px;}
#left {padding-left:15px}
#tabletopic tr:first-child td {background:none}
#tabletopic {margin-top:30px}
#head a {display:block; float:left; border:1px solid #777; padding:5px; margin:-14px 5px 0 0; background:#333; text-decoration:none; border-radius:5px}
#head a:hover {background:#d00; color:#000; border:1px solid #fff}
#head img {margin-top:-23px}
#left {background:url(https://dl.backbook.me/full/63ea78b3c6.png) top repeat-x; margin-top:5px; border-top-left-radius: 6px; margin-left:-100.5%}
#left li a:hover {background-color:#777; color:#ddd}
#left hr {height:1px; color:#aaa; background-color:#aaa; box-shadow:1px 1px 1px #777; border:0px none;}
</style>
#navigation {margin-top:85px; color:#eee; height:160px; background:url(https://dl.backbook.me/full/139cb5d7d7.png) top center no-repeat}

Это сообщение отредактировал La Foto - 29-10-2012 - 19:54

У вас стили идут после </style>

Паш, я хочу меню, которое с логотипом сайта и далее: Форум, Блоги, Сообщества..." вынести на верх и чтоб были в виде кнопочек, как у тебя сейчас, но без смены цвета и остальногго.
Как это сделать?)
В код смотрел, не могу сообразить где это....

Это #head и #navigation

Паш, мне бы таблицу цветов твою? А то стандартные цвета шестизначное обозначение имеют, типа "808080"...

И ещё не смог сам, прошу помощи:
- Блок: "Форум Сообщества Блоги Регистрация Вход"
Как его перекинуть на верх, где он сейчас у тебя и
Как оформить в виде кнопочек, меняющих цвет при наведении курсора? и цвет самого текста ссылок как поменять?



Это сообщение отредактировал Мерлин - 30-10-2012 - 10:27

Вид кнопочек:
#head a {display:block; float:left; border:1px solid #777; padding:5px; margin:-14px 5px 0 0; background:#333; text-decoration:none; border-radius:5px}
#head a:hover {background:#d00; color:#000; border:1px solid #fff}

Таблица цветов у меня обычная для хтмл, шестнадцатиричная.
В фотошопе делай макет, тыкай пипеткой и смотри какой цвет получается, эти цифры и буквы копируй и вставляй в код, не забудь # ставить перед ними.
Для примера: цвет белый #ffffff, цвет черный #000000, цвет красный #ff0000

Пал Палыч, я просто феерический лох в CSS :) У меня в группе "Гараж" само название группы находится на картинке-фоне. Я это хочу сдвинуть ниже, на свободное поле. Плюс рамка наплывает на "Жалобы", а хотелось бы, чтобы было ниже и расширялось вниз по мере появления тем. Где подправить надо?
И ещё планку " Взрослая социальная сетьФорум Сообщества Блоги Регистрация Вход" хотелось бы закрепить в самом верху...

Это сообщение отредактировал Angelofdown - 30-10-2012 - 19:04

Вам надо найти кто смыслет в css и он вам отредактирует как надо.

И вообще надо группу развивать, а не дизайн. У вас 2 топика и с гулькин пенис постов ... займитесь этим.

Огромное спасибо Румпельштицкин'у, Мерлин'у и La Foto за то, что поделились опытом и помогли сделать дизайн!

Есть несколько мелочей, с которыми никак не получилось разобраться:
- изменение цвета текста Описания Группы (navigation как только ни пробовала - не получается);
- изменение цвета заголовка в left (тоже перепробовала разные приведённые вами варианты - ничего не получилось).

Подскажите, пожалуйста, какие коды использовать для этих вещей.
Заранее спасибо!

Цвет описания группы: #navigation {color:#eee}
Цвета заголовка в left: #left h3 {color:#eee}

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

(Румпельштицкин @ 31.10.2012 - время: 01:29)
И пригласите в группу людей наконец-то. Разместите у себя в подписи зазывающую надпись. Да приглашу скоро! :) Просто уж хочется всё по-человечески сделать, чтобы люди не в бардак пришли. :)

Спасибо за коды!!!

Это сообщение отредактировал CHENING - 31-10-2012 - 01:35