Техническая поддержка сервиса Quadro.Boards

sadhaka

Как сделать? Что вставить? Где править?
Отвечаем на ваши вопросы по оформлению форумов. :mybb:

Прошлые темы:
1. Вопросы по оформлению форумов, дизайну и css
2. Вопросы по оформлению форумов, дизайну и css - 2

Теги: вопросы по оформлению, стиль форума, стиль, css, style, как сделать

0

Zetsuu · Поделиться**781**13.05.2014 00:48:27

И снова здравствуйте!

ссылка на форум, если надо

форум

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

скрин

0

sadhaka · Поделиться**782**13.05.2014 08:04:07

Zetsuu
используете скрипт скрытия названий: если да - это он косячит

0

Zetsuu · Поделиться**783**13.05.2014 09:16:12

sadhaka
да, используется такой скрипт

скрипт

Код:

<script type="text/javascript">
var A=[1,2,3]
$(".post .post-author li").each(function (){
for(var i in A){if($(this).hasClass("pa-fld"+A[i])){
$(this).html($(this).html().replace(/^[^:]*:/,''));}};});
</script> //*сокрытие названий полей профиля

0

pons · Поделиться**784**13.05.2014 11:20:58

дада, и опять я :confused:

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

Выставленные награды не отображаются под профилем в сообщении. Спойлер лишь содержит ссылку на все награды и "нет наград" пишет под профилем, где они должны быть. В общем списке наград значится, что этому профилю награда выдана, а под аватаром - не показывает((

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

Отредактировано pons (13.05.2014 11:22:43)

0

99problem · Поделиться**785**13.05.2014 21:50:29

summer
Огромное спасибо! И еще подскажите пожалуйста
Возникла проблема с обрамлением профиля, не получается подогнать, сверху каждый раз появляется расстояние, которое абсолютно не нужно.
http://i64.fastpic.ru/big/2014/0511/57/ … 765257.png
как можно исправить данную проблему?

Отредактировано 99problem (13.05.2014 21:51:14)

0

summer · Поделиться**786**13.05.2014 23:14:44

99problem
Убрать зачёркнутое и добавить выделенное:

.punbb .post .post-author > ul {
background:url(http://i63.fastpic.ru/big/2014/0511/a8/ … 7407a8.png) 0 top no-repeat,url(http://i63.fastpic.ru/big/2014/0511/c8/ … ec74c8.png) 0 bottom no-repeat;
/*Ôîí âåðõà - íèçà*/
margin: -5px 0 -32px 0!important;
~~padding:52px 0px!important;~~
min-height: 300px;
}

0

sadhaka · Поделиться**787**14.05.2014 07:50:29

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

проблема наблюдается у всех админов

только у админов?
из-под гостя на указанном форуме награды вижу в Хроме.

0

pons · Поделиться**788**14.05.2014 17:00:11

решено

sadhaka
Судя по всему, только от гостя и видно Оо
пользователям и админам - нет

upd. причина была все же в скрипте

Отредактировано pons (15.05.2014 05:49:27)

0

albar · Поделиться**789**18.05.2014 00:56:11

Доброго времени суток! Так уж вышло, что отношения с футерами у меня совершенно не складываются.
Помогите, будьте добры, подогнать несчастного под форум =_=

Код:

/* CS1.5 
#pun-about p.container {background-image: url(http://ipic.su/img/img7/fs/321.1400359531.jpg); background-position: top center; background-repeat: no-repeat; height: 223px; width: 920px;}
div#html-footer {margin: -150px 0px 0px 0px;}

Отредактировано albar (19.05.2014 18:25:19)

0

Ichimaru Gin · Поделиться**790**18.05.2014 02:33:19

albar
этим заменить то, что вы выложили

Код:

#pun-about p.container {
  background-image: url("http://ipic.su/img/img7/fs/test.1400360240.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 223px;
  left: 50%;
  margin-left: -460px;
  padding: 0;
  position: absolute;
  width: 920px;
}

Пойдет так?)

+1

albar · Поделиться**791**18.05.2014 11:54:05

Ichimaru Gin
Воу, вы волшебник! Вроде как стало, как надо. Спасибо большое)

0

albar · Поделиться**792**18.05.2014 17:08:25

И снова ~~доброе утро~~ здравствуйте.
Теперь возник вопрос с...рамкой в профиле? В общем, заехала она туда, куда не надо. Как бы подвинуть? А еще границы верха и низа отображаются не совсем корректно. Буду благодарен за помощь в сим великом деле. Хочу сдвинуть эту шайтан-машину правее, чтобы основную рамку не загораживало. Такие дела. И пострадает ли при этом граница с полями вводимых сообщений, станет ли меньше? (могу выражаться не совсем понятно, пардон)
http://ipic.su/img/img7/fs/213.1400418325.jpg
На всякий случай прилагаю код, который используется:

Код

<style type="text/css">
/*окантовка профиля - картинками*/
.post-author a, .post-author a:hover, .post-author a:focus, .post-author a:active {color: #000 !important;
}
li.pa-avatar {margin-top: 2px !important; z-index: 5;}
.pa-title {
color: #000 !important;
font-family: "Century" !important;
font-size: 10pt !important;
font-variant: small-caps !important;
font-weight: 300 !important;
padding: 0px 0px 5px 5px !important;
text-align: center;
}

.pa-author {
background: url("http://ipic.su/img/img7/fs/uppp.1400415046.jpg") 0% 0% no-repeat;
color: #000 !important;
height: 25px;
line-height: 26px !important;
margin-left: -0px !important;
margin-top: -0px !important;
padding: 0px 5px 0px 0px !important;
position: relative;
text-align: center;
width: 200px !important;
}
.pa-author a, .pa-author {
color: #000 !important;
font-family: "Century" !important;
font-size: 10pt !important;
font-variant: small-caps !important;
font-weight: 200 !important;
margin-left: 0px;
text-align: center;
font-style: normal !important;
}

.post-author {
background: url("http://ipic.su/img/img7/fs/ser.1400415115.jpg") repeat-y; weight: 200px;
color: #000 !important;
}
.post-author ul li {
padding: 0px 3px;
text-align: center;
color: #000 !important;
}

.post-author > ul {
background: url("http://ipic.su/img/img7/fs/dd.1400415154.jpg") no-repeat scroll center bottom transparent;
margin-left: 0px;
text-align: center;
width: 200px !important;
margin-left: -11px !important;
}
</style>

Отредактировано albar (19.05.2014 18:25:00)

0

Ichimaru Gin · Поделиться**793**18.05.2014 20:06:57

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

Вроде как стало, как надо.

а у меня и в Хроме и в Мозилле сдвиг на 1 пиксель наблюдается почему-то(
поставьте так:

Код:

#pun-about p.container {
  background-image: url("http://ipic.su/img/img7/fs/test.1400360240.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 223px;
  left: 50%;
  margin-left: -461px;
  padding: 0;
  position: absolute;
  width: 920px;
}

Профиль на странице сообщений, ищите в стиле .punbb .post .post-author и заменяйте правило на вот это:

.punbb .post .post-author {
float: left;
margin-left: 4px;
margin-top: -1.5em;
overflow: hidden;
width: 19em;
}

зеленое число - это сдвиг слева. Его можно увеличть до 12.

Если покажется, что отступ нужен больше, от 13 до 23, то придется сделать еще одно изменение:

.punbb .post-body {
border-left-style: solid;
border-left-width: 1px;
margin-left: 20em;
padding: 0 0 1px;
}

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

. И пострадает ли при этом граница с полями вводимых сообщений, станет ли меньше?

не пострадает

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

А еще границы верха и низа отображаются не совсем корректно

не понял, о каких границах идет речь)

0

albar · Поделиться**794**19.05.2014 01:10:05

Ichimaru Gin, спасибо огромное)
С отображениями теперь все в полном порядке.

0

albar · Поделиться**795**19.05.2014 23:23:08

В очередной раз обращаюсь к вам за помощью.
Теперь дело стопорнулось за табличкой. Собственно, хотелось бы узнать, как этот столбец с кнопками перетащить так, чтобы он был на уровне с остальными двумя столбцами, на которых отображается информация после нажатия. Или, если, допустим, если кнопки в сумме по размеру были меньше, то пусть хотя бы по центру висят там (приблизительно по синим границам =_=).
Ну и второе, такое же важное:
Как убрать ту серенькую заливку, которая при клике на нужный элемент отображается? Сейчас она мне кажется лишней.
http://ipic.su/img/img7/fs/Bezimeni-12.1400527027.jpg
Код таблицы:

код

Код:

<style>
#pun-announcement .main {
	width: 100%;
	height: 250px;
}
.buttons {
	float: left;
	height: 250px;
	width: 30%;
}
.buttons ul {
	margin-top: 75px;
}
.buttons ul li {
	height: 50px;
	font-weight: bold;
	cursor: pointer;
	border: 0px solid black;
	margin: 4px;
}
.buttons ul li.active, .buttons ul li:hover {
	background-color: grey;
}

.content {
	height: 100%;
	margin-left: 31%
}
.content > div {
	text-align: center;
	display: none;
}

h3 {
	padding-top: 3px;
	height: 17px;
	
}

.in {
	display: inline-block;
	vertical-align: top;
	width: 45%;
}
.scroll {
	height: 230px;
	overflow-y: auto;
}
.border {
	margin: 2px;
	padding: 2px;
	border: 0px solid black;
	text-align: left;
}
</style>

<div class="main">
	<div class="buttons">
        <ul>
        <li alt="1" class="active"><img src="http://ipic.su/img/img7/fs/osn.1400526060.png" alt="Основное"></li>
        <li alt="2"><img src="http://ipic.su/img/img7/fs/addm.1400526205.png" alt="Администрация"></li>
        <li alt="3"><img src="http://ipic.su/img/img7/fs/game.1400526275.png" alt="Игра"></li>
        <li alt="4"><img src="http://ipic.su/img/img7/fs/partn.1400526362.png" alt="Партнеры"></li>
        </ul>
    </div>

	<div class="content">
    <div id="c1">
    	<div class="in">
        <h3>Новости</h3>
        <div class="scroll border">
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at volutpat mi. Pellentesque et enim felis, sit amet imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla elit risus, volutpat a auctor a, luctus eget dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non purus eu orci varius consectetur vestibulum in velit. Nullam eu enim ut urna lacinia porttitor. Nam nec dui sit amet ligula volutpat rutrum vel non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare adipiscing augue quis venenatis. Praesent nec sapien libero, id posuere erat. Aliquam tincidunt nunc nec eros mattis eget blandit elit dapibus. Integer ut mi magna. Fusce ut ligula nec lacus mollis dapibus vel convallis ligula.</p>
        	<p>Integer fermentum adipiscing nibh in porta. Cras massa augue, luctus at volutpat egestas, dignissim a leo. Proin eget egestas dui. Nulla dignissim commodo diam, ut euismod purus volutpat nec. Nunc pharetra hendrerit fringilla. Integer malesuada condimentum tellus, quis convallis nisi sagittis euismod. Aliquam consequat lobortis sodales. In id rutrum tortor. Aliquam id eros a velit elementum fringilla et ut dolor. Curabitur urna metus, lacinia quis luctus et, feugiat ut eros. Aenean sed malesuada nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        </div>
    	</div>
    	<div class="in">
        <h3>О форуму</h3>
        <div class="border">
        	Etiam nisl sapien, pretium id molestie sit amet, eleifend vel ante. Donec eleifend nulla vitae purus faucibus ultricies. Integer at diam eros, et imperdiet lectus. Mauris in enim erat. Vivamus id elit eget elit egestas condimentum ac vitae nulla.
        </div>
        <h3>Навигация</h3>
        <ul>
        	<li><a href="#">Ссылка 1</a></li>
        	<li><a href="#">Ссылка 2</a></li>
        	<li><a href="#">Ссылка 3</a></li>
        	<li><a href="#">Ссылка 4</a></li>
        	<li><a href="#">Ссылка 5</a></li>
        	<li><a href="#">Ссылка 6</a></li>
        	<li><a href="#">Ссылка 7</a></li>
        	<li><a href="#">Ссылка 8</a></li>
        </ul>
    	</div>
    </div>
    <div id="c2">
    	<h3>Администраторы</h3>
    	<img src="Ссылка на аватар" alt="Имя администратора 1" title="Описание администратора 1">
    	<img src="Ссылка на аватар" alt="Имя администратора 2" title="Описание администратора 2">

    	<h3>Модераторы</h3>
    	<img src="Ссылка на аватар" alt="Имя модератора 1" title="Описание модератора 1">
    	<img src="Ссылка на аватар" alt="Имя модератора 2" title="Описание модератора 2">
    	<img src="Ссылка на аватар" alt="Имя модератора 3" title="Описание модератора 3">
    </div>
    <div id="c3">
    	<div class="in">
        <h3>Погода и время</h3>
        <div class="scroll border">
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at volutpat mi. Pellentesque et enim felis, sit amet imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla elit risus, volutpat a auctor a, luctus eget dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non purus eu orci varius consectetur vestibulum in velit. Nullam eu enim ut urna lacinia porttitor. Nam nec dui sit amet ligula volutpat rutrum vel non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare adipiscing augue quis venenatis. Praesent nec sapien libero, id posuere erat. Aliquam tincidunt nunc nec eros mattis eget blandit elit dapibus. Integer ut mi magna. Fusce ut ligula nec lacus mollis dapibus vel convallis ligula.</p>
        	<p>Integer fermentum adipiscing nibh in porta. Cras massa augue, luctus at volutpat egestas, dignissim a leo. Proin eget egestas dui. Nulla dignissim commodo diam, ut euismod purus volutpat nec. Nunc pharetra hendrerit fringilla. Integer malesuada condimentum tellus, quis convallis nisi sagittis euismod. Aliquam consequat lobortis sodales. In id rutrum tortor. Aliquam id eros a velit elementum fringilla et ut dolor. Curabitur urna metus, lacinia quis luctus et, feugiat ut eros. Aenean sed malesuada nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        </div>
    	</div>
    	<div class="in">
        <h3>События в игре</h3>
        <div class="scroll border">
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at volutpat mi. Pellentesque et enim felis, sit amet imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla elit risus, volutpat a auctor a, luctus eget dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non purus eu orci varius consectetur vestibulum in velit. Nullam eu enim ut urna lacinia porttitor. Nam nec dui sit amet ligula volutpat rutrum vel non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare adipiscing augue quis venenatis. Praesent nec sapien libero, id posuere erat. Aliquam tincidunt nunc nec eros mattis eget blandit elit dapibus. Integer ut mi magna. Fusce ut ligula nec lacus mollis dapibus vel convallis ligula.</p>
        	<p>Integer fermentum adipiscing nibh in porta. Cras massa augue, luctus at volutpat egestas, dignissim a leo. Proin eget egestas dui. Nulla dignissim commodo diam, ut euismod purus volutpat nec. Nunc pharetra hendrerit fringilla. Integer malesuada condimentum tellus, quis convallis nisi sagittis euismod. Aliquam consequat lobortis sodales. In id rutrum tortor. Aliquam id eros a velit elementum fringilla et ut dolor. Curabitur urna metus, lacinia quis luctus et, feugiat ut eros. Aenean sed malesuada nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        </div>
    	</div>
    </div>
    <div id="c4">
    	<h3>Наши друзья</h3>
    	<div class="border" style="height: 100px; text-align: center;">Баннеры</div>

    	<h3>О рекламе</h3>
    	<div class="border scroll" style="height: 100px; width: 70%; margin: auto">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at volutpat mi. Pellentesque et enim felis, sit amet imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla elit risus, volutpat a auctor a, luctus eget dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non purus eu orci varius consectetur vestibulum in velit. Nullam eu enim ut urna lacinia porttitor. Nam nec dui sit amet ligula volutpat rutrum vel non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare adipiscing augue quis venenatis. Praesent nec sapien libero, id posuere erat. Aliquam tincidunt nunc nec eros mattis eget blandit elit dapibus. Integer ut mi magna. Fusce ut ligula nec lacus mollis dapibus vel convallis ligula.
    	</div>
    </div>
	</div>
</div>

<script>
$('#pun-announcement .buttons li').click(function() {
	$('#pun-announcement .buttons li').removeClass('active')
	alt = $(this).addClass('active').attr('alt');
	
	$('#pun-announcement .content > div').slideUp('slow');
	$('#pun-announcement .content > #c' + alt).slideDown('slow');
})
$('#pun-announcement .buttons li.active').trigger('click');

</script>

Тестовик, если нужно:
http://testzone.anihub.ru/

0

Ichimaru Gin · Поделиться**796**20.05.2014 21:59:11

Убрать заливку:

.buttons ul li.active, .buttons ul li:hover {
background-color: #808080;
}

удалите правило или замените выделение при наведении на что-то другое, например:

Код:

.buttons ul li.active img, .buttons ul li img:hover {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

(получится подсветка белая именно для картинки)

подвинуть с красного на синий (по рисунку) квадрат:
вот это:

.buttons ul {
margin-top: 75px;
}

замените на

Код:

.buttons ul {
  margin-left: 20px;
  margin-top: 25px;
  text-align: center;
}

margin-left: 20px; - отступ слева (можно убрать вообще, оно и так неплохо)
margin-top: 25px; - отступ сверху
text-align: center; - выравнивание посередине, даже если кнопки будут меньше.

0

albar · Поделиться**797**20.05.2014 23:53:16

Ichimaru Gin
Спасибо! В который раз спасли)

0

Trinity Wane · Поделиться**798**21.05.2014 11:05:38

Здравствуйте. Проблема с футером) Как убрать полоску что на скрине?

скрин

http://mozartlokonte.artbb.ru/

0

Фера · Поделиться**799**21.05.2014 19:29:08

Здравствуйте.
Есть проблема с расположением ссылок в профиле пользователя. Они наезжают на название доп. поля. Скрин.
Как это можно исправить/где ошибка?
http://lifeanimal.0pk.ru/

0

XDD · Поделиться**800**21.05.2014 21:49:56

снимаю вопрос с:

доброты, сердечные.
на форум был установлен скрипт обтекания картинки текстом. с пользовательского аккаунта все работает, гости же видят это. этот баг как-то устраняется или только выпиливанием скрипта? ~~а то жалко, удобная вещь~~

ой, вопрос снимается, простите, это оказался баг не кода, а админа *посыпает голову пеплом*

Отредактировано XDD (21.05.2014 21:59:02)

0

Вопросы по оформлению форума, дизайну и css (5)	Оформление форумов	04.09.2024
Вопросы по оформлению форума, дизайну и css (4)	Оформление форумов	21.01.2016
Вопросы по оформлению форумов, дизайну и css - 2	Оформление форумов	18.10.2013
Вопросы по оформлению форумов, дизайну и css	Архив	14.12.2012
О разделе «Оформление форумов» + навигация по разделу	Оформление форумов	26.12.2012

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

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

Вопросы по оформлению форума, дизайну и css (3)

Сообщений 781 страница 800 из 1000

Поделиться118.10.2013 17:22:26

Поделиться78113.05.2014 00:48:27

Поделиться78213.05.2014 08:04:07

Поделиться78313.05.2014 09:16:12

Поделиться78413.05.2014 11:20:58

Поделиться78513.05.2014 21:50:29

Поделиться78613.05.2014 23:14:44

Поделиться78714.05.2014 07:50:29

Поделиться78814.05.2014 17:00:11

Поделиться78918.05.2014 00:56:11

Поделиться79018.05.2014 02:33:19

Поделиться79118.05.2014 11:54:05

Поделиться79218.05.2014 17:08:25

Поделиться79318.05.2014 20:06:57

Поделиться79419.05.2014 01:10:05

Поделиться79519.05.2014 23:23:08

Поделиться79620.05.2014 21:59:11

Поделиться79720.05.2014 23:53:16

Поделиться79821.05.2014 11:05:38

Поделиться79921.05.2014 19:29:08

Поделиться80021.05.2014 21:49:56

Похожие темы