Редактирование дефолтной структуры

Подписчики

Опубликовано: 23 февраля 201015 г

Всем доброго времени суток.

Суть проблемы такова:

Нужно убрать стандартное изображение и вместо него поставить 3 изображения и естественно фон (всё из картинок)

А ещё лучше сделать что то на подобии рамки из изображений (думаю что будет сложнее редактировать текст нежели картинку):

Изначально скачал какой то стиль и хочу его переделать полностью под свои нужды

( http://invisionarts.com/3.0.html )

Считаю что данная тема будет полезна всем

Изменено 23 февраля 201015 г пользователем RPSVoloch

Опубликовано: 18 июля 201015 г

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

Код в css:

.cat_base{
background: transparent url(http://ipbskins.ru/forum/public/style_images/ipbskins/cat_bg.png);
       height: 28px;
       width: 100%
       margin: 0;
       padding:0;
overflow: hidden;

}
   body .cat_base a {
               color: #fff;
               font-family: tahoma, arial;
               font-size: 14px;
               padding-left: 5px;
   }


.cat_left{
background: url(http://ipbskins.ru/forum/public/style_images/ipbskins/cat_left.png) 0 0 no-repeat;
       height:28px;
       padding:0;
       margin:0;
}

.cat_right{
background: url(http://ipbskins.ru/forum/public/style_images/ipbskins/cat_right.png) 100% 0 no-repeat;
       height:28px;
       padding:0;
       margin:0;
}

Код в boardIndexTemplate:


         <div class='cat_base'>
           <div class='cat_left'>
             <div class='cat_right'>
					<h3 id='category_{$_data['cat_data']['id']}'><a class='toggle right' href='#' title="{$this->lang->words['toggle_cat']}">{$this->lang->words['toggle_cat']}</a> <a href="{parse url="showforum={$_data['cat_data']['id']}" seotitle="{$_data['cat_data']['name_seo']}" template="showforum" base="public"}" title='{$this->lang->words['view_cat']}'>{$_data['cat_data']['name']}</a></h3>
             </div>
           </div>
         </div>

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

Пробовал и ваш код, который на первой странице.

И ещё один вопрос, как сделать такой же бордер как в вашем шаблоне Black Sea?

Код в css:

.corner-right{
background: transparent url({style_images_url}/r.png) repeat-y right;
padding-right: 8px;
        margin: 0px;
}


.corner-left{
background: url({style_images_url}/l.png) repeat-y left;
padding-left: 8px;
        margin: 0px;
}
.top-left{
   padding:0;
   margin:0;
   background: url({style_images_url}/tl.png) 0 0 no-repeat;
   height:20px;
}

.top-right{
   padding:0;
   margin:0;
   background: url({style_images_url}/tr.png) 100% 0 no-repeat;
   height:20px;
}

.top{
   padding:0;
   margin:0 20px;
   background: url({style_images_url}/t.png) repeat-x;
   height:20px;
}

.bottom-left{
   padding:0;
   margin:0;
   background:url({style_images_url}/bl.png) 0 0 no-repeat;
   height:30px;
}
.bottom-right{
   padding:0;
   margin:0;
   background: url({style_images_url}/br.png) 100% 0 no-repeat;
   height:30px;
}

.bottom{
   padding:0;
   margin:0 20px;
   background: url({style_images_url}/b.png) repeat-x;
   height: 30px;
}

Как я понял за вывод этих классов отвечают:

{parse replacement="top"}

{parse replacement="bot"}

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

Изменено 18 июля 201015 г пользователем Axibas

Опубликовано: 18 июля 201015 г

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

Или сделать cat_base без фона, а класс с фоном назначить для h3 (или другого внутреннего)

А в этом шаблоне еще присутствует внешний контур у блоков. Его убирать надо везде.

Опубликовано: 18 июля 201015 г

А в этом шаблоне еще присутствует внешний контур у блоков. Его убирать надо везде.

Если можно по подробнее.

Посмотрите я обновил своё первое сообщение, добавил вопрос.

UPD:

Первый вопрос решён, сохранил картинки в .jpg, да и весить стали меньше, и проблема решена.

Остался второй вопрос.

Изменено 18 июля 201015 г пользователем Axibas

Опубликовано: 18 июля 201015 г

Я вначале не поняла, что мой скин приведен как пример для другого вопроса.

В дефолтном контуров у блоков практически нет....

Код html для рамки я вынесла в макросы – в top и bot. В шаблоне есть только переменные для обращения к макросам.

Но можно прописать и в шаблоне. Разницы нет.

Опубликовано: 18 июля 201015 г

Код html для рамки я вынесла в макросы – в top и bot. В шаблоне есть только переменные для обращения к макросам.
Но можно прописать и в шаблоне. Разницы нет.

Пример можно?

Опубликовано: 18 июля 201015 г

Просто откройте макросы и кодом, что содержит макрос с названием 'top', замените в шаблоне строчку {parse replacement="top"}

Опубликовано: 20 июля 201015 г

В общем у меня опять появились вопросы, и думаю будет ещё не один, начну по порядку.

1. Сделал оформление блока "Последние обновление статусов", не знаю почему, но начал с него.

Выглядит он так:

Но проблема в том, что он не сворачивается, хотя нижние блоки сворачиваются. Не знаю может я где то допустил ошибку, и просто я её не замечаю или сделал не так.

Вот код:

<div class="sidebar_t">
 <div class="sidebar_tl">
   <div class="sidebar_tr">
     <h3 class="sidebar_text"><img src='{$this->settings['img_url']}/user_comment.png' alt='' /> {$this->lang->words['recent_status_updates']} </h3>
   </div>
 </div>
</div>
<div class="sidebar_l">
 <div class="sidebar_r">
   <script type='text/javascript' src='{$this->settings['public_dir']}js/ips.status.js'></script>
   {parse striping="recent_status" classes="row1,row2"}
   <div class='sidebar_wrapper'>
     <div class='clearfix' id='statusHook'>
       <div class='_sbcollapsable'>
         <if test="canCreate:|:$this->registry->getClass('memberStatus')->canCreate( $this->memberData )">
           <div class='status_update row2 altrow'>
             <input type='text' id='statusUpdate' style='width:80%'>
             <input type='submit' class='input_submit' id='statusSubmit' value='{$this->lang->words['_rarr']}' />
             <if test="update:|:(IPSLib::twitter_enabled() OR IPSLib::fbc_enabled() ) AND ( $this->memberData['fb_uid'] OR $this->memberData['twitter_id'] )">
               <p class='desc' style='padding-top:5px;'>{$this->lang->words['st_update']}
                 <if test="updateTwitter:|:IPSLib::twitter_enabled() AND ( $this->memberData['twitter_id'] )">
                   <input type='checkbox' id='su_Twitter' value='1' name='su_Twitter' />
                   <img src="{$this->settings['public_dir']}style_status/twitter.png" style='vertical-align:top' alt='' /></if>
                 <if test="updateFacebook:|:IPSLib::fbc_enabled() AND ( $this->memberData['fb_uid'] )"> 
                   <input type='checkbox' id='su_Facebook' value='1' name='su_Facebook' />
                   <img src="{$this->settings['public_dir']}style_status/facebook.png" style='vertical-align:top' alt='' /></if>
               </p>
             </if>
           </div>
         </if>
         <div id="status_wrapper">
           <if test="hasUpdates:|:count( $updates )"> {parse template="statusUpdates" group="profile" params="$updates, 1, 1"}
             <else />
             <p>{$this->lang->words['status_updates_none']}</p>
           </if>
           <div class="status_main_content" style='text-align:right;padding:4px'> <a class='desc' href='{parse url="app=members&module=profile&section=status&member_id={$member['member_id']}" seotitle="true" template="members_status_all" base="public"}'>{$this->lang->words['viewallupdates']} {$this->lang->words['_rarr']}</a> </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>
<div class="sidebar_b">
 <div class="sidebar_bl">
   <div class="sidebar_br"></div>
 </div>
</div>
<div class="sidebar_gap"></div>

2. Как сделать так, чтобы внизу по середине была картинка этого блока, а точнее тут:

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

/* SIDEBAR FOOTERS */

.sidebar_bl { 
background: transparent url({style_images_url}/sidebar_images/sidebar_bl.png) 0 0 no-repeat;
padding-left: 5px; 
margin: 0; 
height: 6px; 
}

.sidebar_br { 
background: transparent url({style_images_url}/sidebar_images/sidebar_br.png) 100% 0 no-repeat;
	padding-right: 5px;
margin: 0;
	height: 6px; 
}

.sidebar_b { 
background: transparent url({style_images_url}/sidebar_images/sidebar_b.png) repeat-x; 
margin: 0px; 
height: 6px; 
}

/*body .sidebar_b { 
background: url({style_images_url}/sidebar_images/sidebar_bottom.png) 50% 0 no-repeat;
       float: center;
       padding: 0px 0px 0 0px;
margin: 0px; 
height: 13px;
       display: block;
}*/

В идеале, в готовом варианте должно выглядеть так:

Изменено 20 июля 201015 г пользователем Axibas

Опубликовано: 20 июля 201015 г

1. Чтобы блок сворачивался в этом варианте верстки придется h3 выносить наружу, а не оборачивать слоями div

То есть придется все декоративные div загонять внутрь

Иначе js не понимает.

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

А если снаружи, то margin нижний убирать придется и придумывать другой вариант отступа

Опубликовано: 20 июля 201015 г

Хе хе) Вот разработчики подложили свинью)

Теперь придётся ломать голову как сделать, чтобы корректно отображалось и работало сворачивание...

Заставить бы, чтобы в дивах скрипт работать... Эх.. Мечты мечты...)

Изменено 20 июля 201015 г пользователем Axibas

Опубликовано: 20 июля 201015 г

Я обновляла клиентский скин и тоже с этим столкнулась. Ну ничего, использовала h3 вместо наружного дива...

Опубликовано: 20 июля 201015 г

Пример можно? Просто очень интересно.)

Опубликовано: 20 июля 201015 г

http://forum.kerch.com.ua/

Обновляла с 3.0.5 до 3.1.1

В 3.0.5 не было сворачиваний в сайдбаре

Опубликовано: 20 июля 201015 г

http://forum.kerch.com.ua/

Обновляла с 3.0.5 до 3.1.1
В 3.0.5 не было сворачиваний в сайдбаре

Приятный дизайн.)

Но к сожалению, я не спрашивал пример как это выглядит, а как сделать.)

Не ну конечно можно понапихать классов:

<h3 class='sidebar_t sidebar_tl sidebar_tr'>

Но думаю это не слишком хорошо.

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

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

<!-- CONTENT -->
<div id="corner">
<div class="top-left">
 <div class="top-right">
   <div class="top"> </div>
 </div>
</div>
<div class="corner-left">
 <div class="corner-right">
   <div id='ipbwrapper2'> <a id='j_content'></a> {$items['adHeaderCode']}
     <if test="mainpageContent:|:$html">{$html}</if>
     {$items['adFooterCode']} <br class='clear' />
   </div>
 </div>
</div>
<div class="bottom-left">
 <div class="bottom-right">
   <div class="bottom"> </div>
 </div>
</div>
<!-- CONTENT -->

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

Опубликовано: 20 июля 201015 г

1. Я сказала как сделать. Задать h3 в сайдбаре свойства внешнего div, который Вы используете. Сделать это можно по-разному. Я не знаю тонкостей Вашей верстки. Грубо задав свойства можно испортить другие заголовки с h3 уже не в сайдбаре. Поэтому можно дать только направление для экспериментов, но не готовое решение.

2. Статистику не вытащить, потому что она находится в шаблонах группы Board Index, а не в глобальных.

В глобальных прописывается тег content, который заменяется содержанием из других групп, в частности, Board Index.

Я не знаю, что имеется ввиду под "за пределы". Теоретически можно задать абсолютную позицию в обрамляющем классе и посмотреть, что получится. Но, скорее всего, не получится ничего хорошего.

Внутренние элементы наружными не сделать. Это то же самое, что стать отцом своей матери :)

Опубликовано: 26 июля 201015 г

В общем не много помудрив, получилось задуманное, а именно:

А именно я это сделал так:

В globalTemplate я сделал следующие:

Перед:

			<a id='j_content'></a>
			{$items['adHeaderCode']}
			<if test="mainpageContent:|:$html">{$html}</if>
			{$items['adFooterCode']}
			<br class='clear' />

Добавил:

{parse replacement="top"}

И стало так:

		{parse replacement="top"}
			<a id='j_content'></a>
			{$items['adHeaderCode']}
			<if test="mainpageContent:|:$html">{$html}</if>
			{$items['adFooterCode']}
			<br class='clear' />

Но мне пришлось вставлять в конец страниц это:

		{parse replacement="bottom"}

Всё получилось, кроме страниц, Входа, Регистрации, и Просмотра профиля.

Помучившись не нашёл куда именно вставлять, например в страницу Регистрации, а именно в отвечающий за неё шаблон registerForm я вставлял в конец:

		{parse replacement="bottom"}

Но получалось вот что:

Может я не туда вставляю, ли может для этих страниц придётся что-то править и т.д.

В общем нужен ваш совет.

UPD:

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

Изменено 26 июля 201015 г пользователем Axibas

Создайте аккаунт или войдите в него для комментирования

Зарегистрировать аккаунт

Войти сейчас

Подписчики

Перейти к списку тем

Нет пользователей, просматривающих эту страницу.

Войти

Редактирование дефолтной структуры

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

Account

Navigation

Поиск

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)