У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается
24. 05. 12. Так как заказ стилей закрыт, вы можете оставить ваши заявки в теме Стили на очередь!, которые будут выполняться по мере возможностей дизайнеров!
22. 07. 12. Наконец у нас новый дизайн! В котором как вы успели заметить - учтены ваши пожелания! Ваши отзывы и предложения вы можете высказать в ДАННОЙ ТЕМЕ

Калейдоскоп аватар

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Калейдоскоп аватар » ДИЗАЙН CSS » [Вопросы по кодам css]


[Вопросы по кодам css]

Сообщений 81 страница 100 из 303

81

подскажите пожалуйста, как менять размер слов форум, участники, поиск и так далее?
например как ту (эти слова большим шрифтом)

0

82

не знаю задавался такой вопрос, но как сделать, так что в объявление нажав на картинку, выпрыгивал текст, ну как у вас рамка Наши новости.
Подскажите плиз код

0

83

Этти, ну вот кое-что.

Код:
/* CS1.8 */
#pun-navlinks .container {
  background-color: transparent;
  color: #58564d;
  font-family: "Times"; 
font-size: 18px;
  font-weight: normal ;
  text-align: center;
  }

.offline li.pa-online strong {
  font-weight: normal  ;
  }

.punbb textarea, .punbb select, .punbb input {
background-color:#82827b;
background-image: url(адрес картинки);
color: #58564d;
  
}

Первый подпункт отвечает за меню навигации

#pun-navlinks .container {
  background-color: transparent;
  color: #58564d;
  font-family: "Times";
font-size: 18px;
  font-weight: normal ;
  text-align: center;
  }

background-color: - цвет фона (можно так же вставить картинку)
  color: - цвет шрифта
font-size: - размер шрифта в пикселях
font-family: - можно менять шрифт текста
font-weight: -начертание шрифта:
normal - нормальный
bold - жирный
text-align: - расположение текста:
center, left, right - по центру, слева, справа

Автор: Tunguska

Отредактировано Angel-Demon (2011-03-28 19:48:09)

+1

84

Angel-Demon
спасибо большое) помогли очень)

0

85

Регина
Выпадающее меню для форума
HTML-верх

Открыть|Закрыть
Код:
<style> 
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

HTML-низ

Открыть|Закрыть
Код:
<!--Спойлер - контейнер-->
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

А это ставите туда, где хотите увидеть само меню:

Открыть|Закрыть
Код:
<center><table style="width: 90%">
<tr>

<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

</tr>
</table></center>
Заполнение меню|Закрыть

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

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

<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

Внимание! Не меняйте НИКАКИЕ числовые значения в этой части кода! В противном случае меню перестанет работать!

б). Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

в). Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

3. Оформление меню.
Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:

а).
Код:

div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}

Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).

б).
Код:

.spll {width: 130px; height: 70px; }

Не рекомендовано для изменения неопытным пользователям!
Замечание: width: 130px; менять одновременно с предыдущим значением ширины (ширина основных блоков).

в).
Код:

.spll div .splCont {height: auto; width: 300px; background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}

Отвечает за дизайн выпадающих блоков.
height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

Информация взята с Единого форума поддержки

0

86

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

0

87

у меня возникла небольшая проблемка с дизайном...
http://schoolofpassion.mybb.ru/
названия категорий не видны...т.т
как сделать, чтобы они были видны?

0

88

у меня что-то с фоном и шапкой: на моем компе смотрится все нормально, у других не так.
http://thethirdpower.mybb.ru/
что сделать, чтобы так не было?

0

89

Беллинда
это всё в браузерах дело, наверное

0

90

HappyTime©
мм, наверное, я тоже так подумала сначала)))

0

91

Этти
ты где-то в дизайне перепутала если выделять то появляются названия, поищи по коду цветов в нм проблема ты где-то залила бежевым эти названия категорий

0

92

HappyTime©

Открыть|Закрыть

Админка-Стиль-Цвета style_cs.css

/* CS1 Background and text colours
-------------------------------------------------------------*/
html, body {
background: #цвет фона url(адрес фоновой картинки);
background-repeat:no-repeat;
background-position: top center;
background-attachment: no-fixed;

}

#pun {
background: #цвет форумных таблиц, если идет картинкой, пишем - none;
background-image: url(адрес картинки форумных таблиц);
background-repeat: repeat;
}

/* CS1.4 */
#pun-title, #pun-title .container {
  background-image: url(адрес изображения шапки);
  margin:  0 auto 0 auto;
  width: 800px; - меняем на ширину шапки (у тебя 800)
  background-color: transparent;
  }
 
.punbb .modmenu .container {
  margin:  0 auto 0 auto;
  width: 800px; - меняем на ширину шапки
  background-color: transparent;
  }

Также нужно изменить высоту!!!
Идем в верхнее окошко (Структура style.css)

/* A5.1 */
#pun {
  margin: auto;
  width : 800px; - тоже меняем на ширину твоей шапки
  padding: 0px 0px 0px 0px;
  border: none;
  border-top: none;
}

/* A5.2 */
.punbb {
  float: center;
  width: 800px; - меняем на ширину шапки
  height: auto;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #50210d;
  width: 550px; - меняем на высоту шапки (если между фоном и шапкой появляется щель - уменьшаем высоту на 1 пикс - делаем 549пикс)
  margin: 5px 0;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 549px; - меняем высоту шапки
  margin-bottom: -1px;
}

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: 549px; - меняем высоту шапки
  width: 100%;

0

93

Этти
посмотри, возможно цвет шрифта стоит такой-же как и цвет фона

Открыть|Закрыть

Цвета style_cs.css

#pun {
background: #b3b2b2; - цвет фоновой таблицы
background-image: url();
background-repeat: repeat;
}

/* CS1.3 */

#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
background-image: url(http://savepic.net/957983.png);
  color: #2b443d; - цвет шрифта в категориях
  font-weight: normal;
font-style: normal;

0

94

Беллинда
да, это зависит от браузера, надо подгонять!
У меня для этого установлена и Мазила и Опера!

0

95

а как сделать такую таблицу?
(выделена ярко красным)

http://i52.tinypic.com/15eycmo.jpg

0

96

Taylor
это боковая панель **
---------------------------------------
а) Простая панель

Код:
<style type="text/css">#sidebar 
{
	display: block;
	background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); 
	width: 200px; 
	height: 500px;
	margin: 1px;
	float: left; 
	border: 1px solid; 
	position: relative; 
	z-index: 0; 
	top: 0px; 
       padding: 0;
}</style>

б) Только на главной странице

Код:
<style type="text/css">
#sidebar 
{
	display: none;
	background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); 
	width: 200px; 
	height: 500px;
	margin: 1px;
	float: left; 
	border: 1px solid; 
	position: relative; 
	z-index: 0; 
	top: 0px; 
       padding: 0;
}
#pun #pun-index #sidebar {display: block;}</style>

в) Только на страницах просмотра тем

Код:
<style type="text/css">
#sidebar 
{
	display: none;
	background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); 
	width: 200px; 
	height: 500px;
	margin: 1px;
	float: left; 
	border: 1px solid; 
	position: relative; 
	z-index: 0; 
	top: 0px; 
       padding: 0;
}
#pun #pun-viewforum #sidebar {display: block;}</style>

г) только на страницах просмотр сообщений

Код:
<style type="text/css">
#sidebar 
{
	display: none;
	background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); 
	width: 200px; 
	height: 500px;
	margin: 1px;
	float: left; 
	border: 1px solid; 
	position: relative; 
	z-index: 0; 
	top: 0px; 
       padding: 0;
}
#pun #pun-viewtopic #sidebar {display: block;}</style>

это ставим в html-верх, редактируйте как хотите

</div></div></div><table width="100%" ><tr><td id="sidebar">
    здесь можно попробовать сделать нечто подобное на блок крутой
    </td><td style="padding: 0px;"><div><div><div>

это ставим в самый низ объявления. Выделенная часть- наполнение блока, ставьте туда что хотите
Код:

Код:
</div></div></div></td></tr></table><div><div>

это ставьте в самый конец html-низа.
http://s58.radikal.ru/i161/1001/af/dcd5a84838fc.png
тем кто столкнулся с проблемой растягивания сайд-бара по отношению к форуму,
и наоборот растягивания форума по отношению к сайд-бару, наверное будет интересен следующий скрипт
идея принадлежит rps
Автоподгонка между сайд-баром и форумом
by Romych

html-низ:

Код:
<script type="text/javascript">
$(document).ready(function(){
var x=0;
if ($.browser.msie) {x=x+6;}
$('div.punbb, #sidebar').css('height', ($(document).height()-10));
});
$(window).resize(function() {
var x=0;
if ($.browser.msie) {x=x+6;}
$('div.punbb, #sidebar').css('height', ($(document).height()-10));
});
</script>

при этом из стиля сайд-бара необходимо убрать параметр height !!!

<style type="text/css">#sidebar
{
    display: block;
    background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png);
    width: 200px;
    height: 500px;
    margin: 1px;
    float: left;
    border: 1px solid;
    position: relative;
    z-index: 0;
    top: 0px;
       padding: 0;
}</style>

код (с) mkusher

0

97

Этти
а мне что и куда вставить что бы так же получилось?

0

98

Taylor
вапиант а, б, в или г ставишь в html-низ.
остальное расписано *О*

+1

99

Этти
спасибо!)

0

100

Не знал куда обратиться...тут такая вот проблема...
Уважение +/- не ставятся, постоянно выдаёт такое сообщение "Вы не можете давать оценку одному и тому же участнику чаще раз в сутки." В настройках все ограничения сняты с уважения, разрешено ставить большое число в сутки + и -, но это не помогает, всё равно получаем это сообщение. Подскажите, что не так мы могли сделать? Если нужна будет ссылка на форум, предоставлю.

Отредактировано Этти (2011-05-06 20:07:13)

0


Вы здесь » Калейдоскоп аватар » ДИЗАЙН CSS » [Вопросы по кодам css]