Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

Опубликовано:

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

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

 

post-36807-1266938953_thumb.jpg

 

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

 

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

 

post-36807-1266938991_thumb.jpg

 

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

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

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

Изменено пользователем RPSVoloch

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

Опубликовано:

Я могу объяснить, как это делать, но только после того, как Вы сверстаете то же самое в html.

Сделайте web страничку с содержанием и закругленным заголовком и краями.

 

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

После того, как сверстаете, приходите, объясню, как перенести на ipb.

Опубликовано:
  • Автор

Если устроит в РНР тогда смотрите _http://l2chaos.homeip.net тут есть навёрстанная страничка с округлёнными краями (сайт запущен на моей машине и написан мной)

Опубликовано:

Но там же просто целые куски.

http://l2chaos.homeip.net/images/pap_top.jpg

Вы разрежте их и сверстайте, чтобы получился резиновый дизайн.

 

А картинки с офсайта про lineage

Опубликовано:
  • Автор
А картинки с офсайта про lineage

не с оф сайта а с игры есть в хрониках ( Kamael и далее) могу предъявить те изображения которые были в игре (тот кто играл в ней поймёт откуда что взято)

 

А растянуть сейчас.

 

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

Изменено пользователем RPSVoloch

Опубликовано:

А я сейчас (зачем-то) попробовала на div-ах

 

Оформление заголовков

1. Добавьте в папку картинок скина 4 файла

cat_bg.png

cat_left.png

cat_right.png

cat_top.png

2. Добавьте в конец ipb_styles.css

.cat_left{
height: 100%;
   width: 100%;
float: left !important;
background: url({style_images_url}/cat_left.png) no-repeat 0 0;
}

.cat_right{
height: 100%;
float: right;
   width: 100%;
background: url({style_images_url}/cat_right.png) no-repeat 100% 0;
}

.cat_middle {
background: #4d6b88 url({style_images_url}/cat_bg.png) repeat-x top;
width: 100%;
height: 47px;
margin: 0;
padding: 0;
}

body .cat_middle .maintitle{
background: url({style_images_url}/cat_top.png) 50% 0 no-repeat;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
margin: 0 !important;
display: block;
padding: 0 30px !important;
line-height: 47px;
}

body .cat_middle .maintitle a.toggle {
margin-top: 15px !important;
}

 

3. Откройте в html

Список форумов > boardIndexTemplate

Найдите

<h3 id='category_{$_data['cat_data']['id']}' class='maintitle'><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 class='cat_middle clear'><div class='cat_right'><div class='cat_left'><h3 id='category_{$_data['cat_data']['id']}' class='maintitle'><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>

 

Возможно, придется делать небольшие правки в классе maintitle конкретно в Вашем скине.

Опубликовано:

Размер шрифта в майнтитлах точно придется уменьшить.

Поставить 1.0em или 0.95em (0.9em) вместо того, что там прописано.

 

Картинки переименуйте (они скачаются отсюда с неверными именами наверное)

Ну там понятно как вроде :)

Опубликовано:
  • Автор

Установил всё сделал толку 0 где я мог ошибиться ? Или же что поправить.

Опубликовано:

Картинки переименовали в cat_bg.png, cat_left.png, cat_right.png и cat_top.png ?

Через админку код правили?

Опубликовано:
  • Автор
Картинки переименовали в cat_bg.png, cat_left.png, cat_right.png и cat_top.png ?

Через админку код правили?

Естественно переименовал и код правил в админке так как не знаю где его без неё править.

Опубликовано:

Дома выглядит так. Пробовала на каком-то левом темном скине, что был под рукой.

Так что все работает.

head.png

Опубликовано:
  • Автор

Можете выйти и посмотреть что у меня получилось (проверил в нескольких браузерах одно и то же но в IE7 не отображает шапку)

 

 

А вообще я намереваюсь получить вот это:

 

post-36807-1266955189_thumb.jpg

Изменено пользователем RPSVoloch

Опубликовано:

У меня дома мой код работает везде, включая ie7 (вернее, в ie8 в режиме совместимости с ie7).

 

Поскольку с этим разобраться не можете, делать бока и низ не буду.

 

То, что намереваетесь получить, надо просто продолжить с того, что я начала :)

Опубликовано:
  • Автор

Оказалось всё намного проще когда я взял и начал редактировать дэфолтный скин (в нём всё отображается и работает)

Благодарю за помощь. Но всё же хотелось узнать какие классы редактировать дальше (мне только название классов и в каких файлах они находятся)

Изменено пользователем RPSVoloch

Опубликовано:

Разбирайтесь. Кэш скина перестройте например....

У меня дома все работает.

 

Вот потому уроки по верстке не даю, что у 99% пользователей наступает затык на самом элементарном.

А 1% в уроках не нуждается.

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

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

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

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.