Общие вопросы по оформлению (53)

Поделиться1Сб, 5 Апр 2014 15:43:50

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

Предыдущая тема: Общие вопросы по оформлению (52)


Инструменты для поиска и редактирования стиля (скриптов).	Как с помощью браузера можно определить элемент дизайна.
Каталог скриптов/CSS	Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое НТМЛ и CSS.
Типовые Вопросы (ЧаВо)	Ответы на часто задаваемые вопросы.
Как задавать вопросы! Разница между стилем и скриптом. ( Советы)	Плюс к названию темы еще и Памятка.

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

+3

Поделиться821Сб, 27 Сен 2014 13:14:13

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3556
Уважение: +2310
Позитив: +743
Пол: Мужской
Последний визит:
Пт, 15 Ноя 2024 11:14:46

boom
Администрирование - Свой стиль, во втором поле найдите код:

/*Ставим фон*/
HTML {
background-color: фоновый цвет;
background-image: url("http://i023.radikal.ru/1409/c2/96abc0bdd2e2.jpg");
background-repeat: repeat-xy;
background-position: center top;
}

Замените его на:

/*Ставим фон*/
HTML {
background: url("http://i023.radikal.ru/1409/c2/96abc0bdd2e2.jpg") center top fixed;
}

0

Telegram @reysler

Поделиться822Сб, 27 Сен 2014 13:28:12

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3556
Уважение: +2310
Позитив: +743
Пол: Мужской
Последний визит:
Пт, 15 Ноя 2024 11:14:46

Algot
Администрирование - Свой стиль, в первом окне найдите блок /* A5.3 */ в нем код:

#pun-redirect #pun-main {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
position: relative;
z-index: 1000;
}

Выделенная красным цифра отвечает за отступ сверху, меняйте это значение (чем выше значение, тем ниже будет находится этот блок). Чтобы покрасить фон этого блока, добавьте ниже этого кода такой код:

#pun-redirect .container {
background: здесь_цвет;
}

0

Telegram @reysler

Поделиться823Сб, 27 Сен 2014 13:34:29

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3556
Уважение: +2310
Позитив: +743
Пол: Мужской
Последний визит:
Пт, 15 Ноя 2024 11:14:46

Data
Только если такие ссылки стилизовать под общий вид кнопок (сложнее в оформлении, но проще в реализации). Если делать ссылки исключительно кнопками (проще в оформлении, но сложнее в реализации), для этого нужен скрипт, а за ним обращайтесь в тему: Запросы по скриптам[3]

0

Telegram @reysler

Поделиться824Сб, 27 Сен 2014 13:40:40

Автор: Data
Заслуженный
Зарегистрирован: Вт, 3 Сен 2013
Сообщений: 94
Уважение: 0
Позитив: +15
Последний визит:
Ср, 4 Дек 2019 20:13:17

Reysler написал(а):

Только если такие ссылки стилизовать под общий вид кнопок (сложнее в оформлении, но проще в реализации).

Вот этот вариант

0

Поделиться825Сб, 27 Сен 2014 13:51:30

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3556
Уважение: +2310
Позитив: +743
Пол: Мужской
Последний визит:
Пт, 15 Ноя 2024 11:14:46

Data
Без адреса форума ничего не получится

0

Telegram @reysler

Поделиться826Сб, 27 Сен 2014 14:01:35

Автор: Data
Заслуженный
Зарегистрирован: Вт, 3 Сен 2013
Сообщений: 94
Уважение: 0
Позитив: +15
Последний визит:
Ср, 4 Дек 2019 20:13:17

Reysler написал(а):

Без адреса форума ничего не получится

Торможу)
http://totten.mybb.ru

0

Поделиться827Сб, 27 Сен 2014 14:21:53

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3556
Уважение: +2310
Позитив: +743
Пол: Мужской
Последний визит:
Пт, 15 Ноя 2024 11:14:46

Data
Хорошо, что кнопки уже имеют свой стиль, а не стандартные
Администрирование - Свой стиль, в первом поле в самом низу найдите строчки:

Код

.button {
border: 1px solid #2e2511;
background: #9e5e19;
background: -webkit-gradient(linear, left top, left bottom, from(#473709), to(#9e5e19));
background: -webkit-linear-gradient(top, #473709, #9e5e19);
background: -moz-linear-gradient(top, #473709, #9e5e19);
background: -ms-linear-gradient(top, #473709, #9e5e19);
background: -o-linear-gradient(top, #473709, #9e5e19);
background-image: -ms-linear-gradient(top, #473709 0%, #9e5e19 100%);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #0d0900 0 1px 0;
color: #d9a220!important;
font-size: 16px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #5c3e03;
text-shadow: #e6d375 0 1px 0;
background: #cc8147;
background: -webkit-gradient(linear, left top, left bottom, from(#473709), to(#cc8147));
background: -webkit-linear-gradient(top, #473709, #cc8147);
background: -moz-linear-gradient(top, #473709, #cc8147);
background: -ms-linear-gradient(top, #473709, #cc8147);
background: -o-linear-gradient(top, #473709, #cc8147);
background-image: -ms-linear-gradient(top, #473709 0%, #cc8147 100%);
color: #d9a220!important;
}
.button:active {
text-shadow: #dbb66b 0 1px 0;
border: 1px solid #2e2511;
background: #9e5e19;
background: -webkit-gradient(linear, left top, left bottom, from(#473709), to(#cc8147));
background: -webkit-linear-gradient(top, #473709, #9e5e19);
background: -moz-linear-gradient(top, #473709, #9e5e19);
background: -ms-linear-gradient(top, #473709, #9e5e19);
background: -o-linear-gradient(top, #473709, #9e5e19);
background-image: -ms-linear-gradient(top, #473709 0%, #9e5e19 100%);
color: #785704;
}

Замените их на:

Код

.button, .post-links li a {
border: 1px solid #2e2511;
background: #9e5e19;
background: -webkit-gradient(linear, left top, left bottom, from(#473709), to(#9e5e19));
background: -webkit-linear-gradient(top, #473709, #9e5e19);
background: -moz-linear-gradient(top, #473709, #9e5e19);
background: -ms-linear-gradient(top, #473709, #9e5e19);
background: -o-linear-gradient(top, #473709, #9e5e19);
background-image: -ms-linear-gradient(top, #473709 0%, #9e5e19 100%);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #0d0900 0 1px 0;
color: #d9a220!important;
font-size: 16px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover, .post-links li a:hover {
border: 1px solid #5c3e03;
text-shadow: #e6d375 0 1px 0;
background: #cc8147;
background: -webkit-gradient(linear, left top, left bottom, from(#473709), to(#cc8147));
background: -webkit-linear-gradient(top, #473709, #cc8147);
background: -moz-linear-gradient(top, #473709, #cc8147);
background: -ms-linear-gradient(top, #473709, #cc8147);
background: -o-linear-gradient(top, #473709, #cc8147);
background-image: -ms-linear-gradient(top, #473709 0%, #cc8147 100%);
color: #d9a220!important;
}
.button:active, .post-links li a:active {
text-shadow: #dbb66b 0 1px 0;
border: 1px solid #2e2511;
background: #9e5e19;
background: -webkit-gradient(linear, left top, left bottom, from(#473709), to(#cc8147));
background: -webkit-linear-gradient(top, #473709, #9e5e19);
background: -moz-linear-gradient(top, #473709, #9e5e19);
background: -ms-linear-gradient(top, #473709, #9e5e19);
background: -o-linear-gradient(top, #473709, #9e5e19);
background-image: -ms-linear-gradient(top, #473709 0%, #9e5e19 100%);
color: #785704;
}

+1

Telegram @reysler

Поделиться828Сб, 27 Сен 2014 14:46:16

Автор: Avriuatta
Заслуженный
Зарегистрирован: Ср, 9 Мар 2011
Сообщений: 42
Уважение: 0
Позитив: +8
Пол: Женский
Последний визит:
Вс, 5 Окт 2014 22:50:46

Reysler
http://harappa.mybb.ru/
переехали немного. извините) :blush:

вот этот, хотелось бы текст приветствия спустить вниз, уже мучаюсь все никак

Код:

/* D5.2 */
#pun-status .container {
 
 margin-left: 4px;
 background: url(http://forumstatic.ru/files/0012/a8/7b/21595.png) no-repeat center !important;
 height: 150px;
width: 990px;
  }

0

Поделиться829Сб, 27 Сен 2014 15:22:09

Автор: creater
Стремящийся
Зарегистрирован: Чт, 25 Сен 2014
Сообщений: 4
Уважение: 0
Позитив: 0
Последний визит:
Пн, 29 Сен 2014 00:53:12

Подскажите пожалуйста. Возможно ли создавать специальные дизайны для подфорумов и тем? И каким образом это можно осуществить? Или хотя бы просто возможно это или нет?

0

Поделиться830Сб, 27 Сен 2014 15:47:02

Автор: Fover
Лови мой ритм
Зарегистрирован: Вт, 19 Мар 2013
Сообщений: 2332
Уважение: +397
Позитив: +48
Пол: Мужской
Последний визит:
Вт, 13 Сен 2016 16:58:18

creater
Это возможно. :glasses:

0

Поделиться831Сб, 27 Сен 2014 15:51:35

Автор: creater
Стремящийся
Зарегистрирован: Чт, 25 Сен 2014
Сообщений: 4
Уважение: 0
Позитив: 0
Последний визит:
Пн, 29 Сен 2014 00:53:12

Fover
Ну слава Богу =)

0

Поделиться832Сб, 27 Сен 2014 16:16:04

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3556
Уважение: +2310
Позитив: +743
Пол: Мужской
Последний визит:
Пт, 15 Ноя 2024 11:14:46

Avriuatta
Замените свой код на такой:

/* D5.2 */
#pun-status .container {
margin-left: 4px;
background: url(http://forumstatic.ru/files/0012/a8/7b/21595.png) no-repeat center !important;
height: 150px;
line-height: 50px;
width: 970px;
padding: 0 10px;
}

Отредактировано Reysler (Сб, 27 Сен 2014 16:16:53)

+1

Telegram @reysler

Поделиться833Сб, 27 Сен 2014 17:36:07

Автор: Avriuatta
Заслуженный
Зарегистрирован: Ср, 9 Мар 2011
Сообщений: 42
Уважение: 0
Позитив: +8
Пол: Женский
Последний визит:
Вс, 5 Окт 2014 22:50:46

Reysler, вау) спасибо огромное, вы не поверите, как долго меня это мучило)

0

Поделиться834Сб, 27 Сен 2014 17:40:38

Автор: boom
Заслуженный
Зарегистрирован: Пт, 8 Авг 2008
Сообщений: 250
Уважение: +8
Позитив: +108
Последний визит:
Ср, 3 Фев 2021 14:05:07

Reysler
спасибо большое!

0

Поделиться835Сб, 27 Сен 2014 21:11:22

Автор: Data
Заслуженный
Зарегистрирован: Вт, 3 Сен 2013
Сообщений: 94
Уважение: 0
Позитив: +15
Последний визит:
Ср, 4 Дек 2019 20:13:17

Собственно, как уменьшить это расстояние, чтобы ничто никуда не сползало?

скрин и ссылка

http://totten.mybb.ru

0

Поделиться836Сб, 27 Сен 2014 21:20:12

Автор: Герда
старая версия нечистой силы
Зарегистрирован: Пт, 20 Фев 2009
Сообщений: 2622
Уважение: +1782
Позитив: +784
Пол: Женский
Последний визит:
Чт, 17 Окт 2024 14:00:09

Data
найди:
#pun-main .pa-online {
margin: 12px;
}

замени:

margin: 0 12px 12px;

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

0

ВКонтакте forumd

Поделиться837Сб, 27 Сен 2014 21:28:35

Автор: Data
Заслуженный
Зарегистрирован: Вт, 3 Сен 2013
Сообщений: 94
Уважение: 0
Позитив: +15
Последний визит:
Ср, 4 Дек 2019 20:13:17

Герда написал(а):

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

Ну, все с чего-то начинают. К тому же чукча не верстальщик, чукча график)
Понял, исправил.

0

Поделиться838Сб, 27 Сен 2014 21:49:20

Автор: Герда
старая версия нечистой силы
Зарегистрирован: Пт, 20 Фев 2009
Сообщений: 2622
Уважение: +1782
Позитив: +784
Пол: Женский
Последний визит:
Чт, 17 Окт 2024 14:00:09

Data написал(а):

Ну, все с чего-то начинают.

ну, у тебя начинания куда более осознанные, чем у меня, так что, думаю, все получится
вот, может помочь:
http://www.youtube.com/watch?v=KyulfOdC4lU
http://www.youtube.com/watch?v=0MSrVY3zYuA

0