Тень вокруг форума, как реализовать

[Serifa]

Давно хотела, но тяму не хватало сообразить... А тут залезла на какой-то сайтик, а там столько всяких кодов для менюшек и кнопочек! Я пока себе всё это примеряла, вдруг поняла, как надо сделать тень. Осенило, буквально. Ну долго до меня доходит, что поделать...
* всё сделано пока на тестовом форуме!!
Выкладываю реализацию, вдруг кому-то тоже захочется.

Всё через цсс! _{Кроме менюшки, менюшка прописана в админке и в цсс, плюс под неё потребовалось больше места в шапке, пришлось добавить.}

Идём в хидер, в шапку. Я подписала, где что. Там же - середина форума.

Код Выделить Развернуть

/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */
/* the framing graphics */
#header
{
   background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
   padding-left: 20px;
box-shadow: 0 15px 15px 5px #888;
}
/*тень вниз!*/
#header div.frame
{
   background: url(../images/theme/main_block.png) no-repeat 100% -480px;
   display: block;
   padding: 5px 20px 1em 0
box-shadow: 0 15px -15px 5px #888;
}
/*тень вверх!*/

/* the content section */
#content_section
{
   background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
   padding-left: 20px;
box-shadow: 0 15px 15px 5px #888;
}
#content_section div.frame
{
   background: url(../images/theme/frame_repeat.png) repeat-y top right;
   display: block;
   padding: 0 20px 0 0;
}
/*это внутренний блок в центре форума, там тень не нужна!!!*/
#main_content_section
{
   width: 100%;
   min-height: 200px;
}
/*тоже внутренний блок со всеми блоками портала, тень смыкается с тенью футера, видны углы*/

/*это верх и середина форума (внешние границы)*/
#main_content_section
/*это внутренние границы середины*/


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

Но с копирайтами я ещё буду разбираться!

Код Выделить Развернуть

/* The footer wih copyright links etc. */
#footer_section
{
   text-align: center;
   background: url(../images/theme/main_block.png) no-repeat 0 -820px;
   padding-left: 20px;
box-shadow: 0 15px 15px 5px #888;
}
#footer_section span.smalltext
{
   font-size: 100%;
}
#footer_section div.frame
{
   background: url(../images/theme/main_block.png) no-repeat 100% -820px;
   display: block;
   padding: 60px 0 0 0;
box-shadow: 0 15px 15px 5px #888;
}
/*это внутренний блок в центре футера, где начинаются копирайты!*/

Больше ничего не нужно. Цвет и длину тени можете выставить на свой вкус.

[GeorG]

ИХМО, с боков форума, слишком крупная теть, у меня установлено так:

Код Выделить Развернуть

box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

Думаю немного сбавить даже.

Менюшка красивая получилась и внизу форума

[ALINA]

Это только на дефолте можно реализовать ?

[Serifa]

Это только на дефолте можно реализовать ?

Везде можно, хидер с футером в цсс одни и те же, я думаю. Найти поиском #header #footer и добавить тень там, где картинки подключаются.

[Serifa]

ИХМО, с боков форума, слишком крупная теть, у меня установлено так:

Код Выделить Развернуть

box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

Думаю немного сбавить даже.
Менюшка красивая получилась и внизу форума

Менюшку потырила с сайта http://codepen.io/

Тень надо делать одинаковую по всем трем разделам форума, иначе будут несостыковки. А когда тень сильнее размыта, она больше закрывает футер. Так что тут всё просчитано

[ALINA]

хидер с футером в цсс одни и те же,

глянула у себя . Ни фига . Вот смотри . У тебя  бакграунд хейдера  обращается  к файлу ( background: url(../images/theme/main_block.png)) который непосредственно  затрагивает и хейдер и футер . А у меня нет  . На дефолте это понятно .Вот в клубе у меня дефолтная тема . Там можно  поиграться .А на основной нет .

[Yarik]

А на основной нет .

У меня на недефолтной теме получилась полоса сбоку и снизу.

[ALINA]

В принципе да . Попробовала .Смотрится неплохо , если задний фон или однотонный или градиентом залит .А не графический рисунок .Надо будет поразмыслить на эту тему
Yarik у меня не получится  на нестандартной теме . У меня хейдер отдельно, футер отдельно . Бока  у форума тоже отдельно . И все из кусочков 

[Serifa]

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

[ALINA]

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

[GeorG]

Возможно так:

Код Выделить Развернуть

#header {
border-radius: 2em 2em 0 0;
}

#header div.frame {
border-radius: 0 2em 0 0;
}

[ALINA]

Возможно так:

попозже посмотрю .Висит хостинг .Недоступен тестовый .

[Serifa]

Алина, у тебя же там градиент, убери спрайт целиком.

[ALINA]

убери спрайт целиком.

Да помогло .Но надо тогда на такой градиент еще и тень делать не только вверху ,но и по бокам http://alsiti.besaba.com/index.php Глянь со стороны . 

[Serifa]

Тень там присутствует, и по бокам тоже.

Когда маин блок перекрашиваешь, надо всегда учитывать наличие подложки. Без подложки скругленные уголки не получатся в темах и заголовках. А подложку выбирать того же цвета, как у файлов frame и roundframe.

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

[ALINA]

Serifa поняла спасибо . . А вот такой вопрос еще если можно . Можно сделать вот такую полоску с тенью как внизу чуть выше менюшки ?

[Serifa]

Не совсем поняла, ты хочешь тень вокруг маин_меню?
Тогда надо выбрать его в цсс и пририсовать ему box-shadow с тенью в нужном направлении, как-то так.

[ALINA]

box-shadow с тенью в нужном направлении, как-то так.

Да спасибо все получилось .Сервер что то там сегодня висит . Сделаю потом скругление еще .

[Serifa]

*офф
это странно, но у меня как раз тоже сервер подвисает, то открывается страница, то ошибку показывает)

[ALINA]

Допилила вроде «клубную тему»  в стиле гламура 

[Serifa]

Офф...

Допилила вроде «клубную тему»  в стиле гламура 

А напомни, вроде ты уже где-то писала, как сделала сообщение о новых письмах? с конвертиком еще

[ALINA]

вроде ты уже где-то писала, как сделала сообщение о новых письмах? с конвертиком еще

В index.template.php

Код Выделить Развернуть

echo '<li>', allowedTo('pm_read') ?
            '<a href="' . $scripturl . '?action=pm" title="Прочитать почту"> ' . $context['user']['messages'] . ' ' .
               ($context['user']['messages'] == '1' ? $txt['message_lowercase'] : $txt['msg_alert_messages']) . ' '
               . ($context['user']['unread_messages'] > '0' ? '<b><font color="red">' : '')
               . $context['user']['unread_messages'] . ' ' . ($context['user']['unread_messages'] == '1' ? $txt['newmessages0'] : $txt['newmessages1']) : '', ''
               . ($context['user']['unread_messages'] > '0' ? '</font></b>' : '')
               . ($context['user']['unread_messages'] > '0' ? ' <img style="position:absolute; top:45px; right:370px;" src="ссылка на картинку  atl="" title="Вам письмо..."  />' : '') . '</a></li>';   
Конвертик открывается и закрывается .Одно время у меня там смайлик почтальона был 

ps задний фон переделала .Ляписто очень было 

[Serifa]

Благодарю Даже не знаю, сработает ли у меня. Мод Editor Lite поломал всё, что можно.

[ALINA]

Мод Editor Lite

так вот он у меня и стоит .Поэтому и пришлось  выводить уведомление к блоку с авкой . Должно сработать .Позиционирование сама там выставишь .

[CedarMill]

В index.template.php

ALINA, подскажите пожалуйста, а как правильно добавить код pm_read в код шаблона форума, чтобы было как на скриншоте?

Код Выделить Развернуть

if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">
<li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

[ALINA]

Вот как это выглядит у меня целиком .

Код Выделить Развернуть

if (!empty($context['user']['avatar']))
echo '
<div id="my-avatar">
', $context['user']['avatar']['image'], '
</div>';
echo '
<ul class="reset">
<li class="greeting">', $context['greeting'], '</span></li>';

echo '<li>', allowedTo('pm_read') ?
'<a href="' . $scripturl . '?action=pm" title="Прочитать почту"> ' . $context['user']['messages'] . ' ' .
($context['user']['messages'] == '1' ? $txt['message_lowercase'] : $txt['msg_alert_messages']) . ' '
. ($context['user']['unread_messages'] > '0' ? '<b><font color="red">' : '')
. $context['user']['unread_messages'] . ' ' . ($context['user']['unread_messages'] == '1' ? $txt['newmessages0'] : $txt['newmessages1']) : '', ''
. ($context['user']['unread_messages'] > '0' ? '</font></b>' : '')
. ($context['user']['unread_messages'] > '0' ? ' <img style="position:absolute; top:65px; right:370px;" src="http://alsiti.net/pic/pm.gif" atl="" title="Вам письмо..."  />' : '') . '</a></li>';

echo ' <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unread;all">Показать все новые сообщения.</a></li>
<li><a href="', $scripturl, '?action=recent">Последние сообщения на форуме.</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

[CedarMill]

как это выглядит у меня целиком

Благодарю!

[Serifa]

так вот он у меня и стоит .Поэтому и пришлось  выводить уведомление к блоку с авкой . Должно сработать .Позиционирование сама там выставишь .

Никак не соберусь доделать эти уведомления... И так работы завал... Никуда же эта тема не убежит!