ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

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

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

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

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

[ВЫПОЛНЕНО] (БЕСПЛАТНО) / Кодинг: объявления. Таблица шапки

Страница:   1 2 3 4  
Тема закрыта

Сообщений 21 страница 30 из 35

21

  • Автор: Helheima
  • Участник
  • Helheima
  • Уважение: +68
Герда написал(а):

например, не удобнее ли вторую часть таблички засунуть на вкладку "мир"?

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

Отредактировано Helheima (21.11.20 23:05)

0

22

  • Автор: Helheima
  • Участник
  • Helheima
  • Уважение: +68

И во второй кнопке наши новые кнопки оставить под новостями
https://forumupload.ru/uploads/0007/e3/f7/7039/t832180.png

0

23

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD
Helheima написал(а):

Удобно ли будет переименовать вкладки мир и новости, поменяв их местами

да, теперь это легко делается

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

а к новостям на второй вкладке запихнуть новости и оставить новые кнопки "Что творится" и т.д.?

а что должны делать эти кнопки?

0

24

  • Автор: Helheima
  • Участник
  • Helheima
  • Уважение: +68
Герда написал(а):

а что должны делать эти кнопки?

Так, как сейчас они нажимаются и открывается текст, так же пусть и работают, как спойлеры. Там внутри будет только текст и пара картиночек для оформления, оно растянется в высоту под это? Если есть ограничение я туда могу короткие штуки вставить.

Отредактировано Helheima (21.11.20 23:41)

0

25

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD
Helheima написал(а):

Там внутри будет только текст и пара картиночек для оформления, оно растянется в высоту под это? Если есть ограничение я туда могу короткие штуки вставить.

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

0

26

  • Автор: Helheima
  • Участник
  • Helheima
  • Уважение: +68
Герда написал(а):
Helheima написал(а):

Там внутри будет только текст и пара картиночек для оформления, оно растянется в высоту под это? Если есть ограничение я туда могу короткие штуки вставить.

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

Пусть будет по тексту высота, так и оставляйте!

0

27

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Helheima
Коды

это в стиль (конец любого окна)

Код:
/********** Стиль таблицы в объявлении **********/
 /*****************  © ForumD.ru ****************/
.s-tabs{
width: 100%;
display: block;
text-align: center;
}
.stab {height:auto;}
.s-tabs span {
cursor: pointer;
font-family: Georgia;
font-size: 46px;
text-transform: uppercase;
padding: 4px 20px;
transition: color 0.3s;
-webkit-transition: color 0.3s;
display: inline-block;
color: #000;
}
.s-tabs span:hover,
.s-tabs span.selected{
color:#fff;
}
.s-tabs .stab {
width:auto;
margin:0;
display:none;
overflow-x:hidden; 
padding: 10px;
}

#s-block {
width: 100%; 
display: block;
margin-bottom: 10px;
text-align: left;
}

#s-block #left, #s-block #right {
display: inline-block;
width: 170px;
vertical-align: top;
text-align: left;
}

#s-block #center {
display: inline-block;
width: calc(98% - 350px);
text-align: center;
margin: 0 1%;
vertical-align: top;
}

#s-block #center.news {
max-height: 170px;
overflow-y: auto;
text-align: left;
}

#s-block #center.pic img {max-width: 100%;}

#s-block #center b {
font-weight: normal;
font-size: 15px;
display: block;
margin-bottom: 5px;
}
#s-block #center b img {
max-width: 15px;
max-height: 15px;
position: relative;
top: 2px;
padding-right: 5px;
}

.s-tabs h3 {
font-weight: bold;
color: #e3e3e0;
font-size: 18px;
font-family: 'Courier New';
margin-bottom: 4px;
}

.s-tabs h3 img {
max-width: 18px;
max-height: 18px;
position: relative;
top: 2px;
padding-right: 5px;
}

.s-tabs .sami-icon {
position: relative; 
display: inline-block;
margin: 0 5px 5px;
text-decoration: none;
}
.s-tabs .sami-icon img {max-width: 60px;}
.s-tabs .sami-icon i {
position: absolute; 
background: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
padding: 5px;
white-space: nowrap;
margin: 0 3px 6px;
bottom: 0;
}
.s-tabs .sami-icon:hover > i {opacity: 1; color: #fff; z-index: 99999;}


.s-tabs a.link {
display: block;
color: #d4d4d4;
border-left: 3px solid #fafdfd;
background-color: #000000;
padding: 4px;
text-decoration: none;
font-family: Century Gothic;
font-size: 14px;
}
.s-tabs a.link:hover {
background-color: #d9d4ff;
border: none;
color: #151515;
}

#menu {text-align: center; margin-bottom: 6px;}
#menu .spll {
width: auto !important;
height: auto !important;
display: inline-block;
}
div .splLink {
border: 1px solid #bfbfbf;
background: #000;
text-align: center;
font-family: Century Gothic;
font-size: 18px;
padding: 4px !important;
width: auto !important;
height: auto !important;
cursor: pointer;
}
.splCont {
display: none; position: absolute;
    height: auto;
    background: #000;
    padding: 5px;
    z-index: 1000;
    margin-top: 5px;
    border: 1px solid #7b7b7b;
    font-size: 16px;
    font-family: Microsoft Sans Serif;
    text-align: center;
}

.pic_block {display: block; position: relative;}
.pic_block img {width: 100%;}
.pic_block b {
position: absolute;
bottom: 5px;
width: calc(100% - 20px);
margin: 0 !important;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
color: #fff;
}
.pic_block:hover > b {opacity: 1; color: #fff;}



.s-tabs .innertab {display: none; margin: 10px;}
.s-tabs .innertab.show {display: block;}


img.spoiler {
max-width: 40%;
display: inline-block;
border: 2px solid transparent;
opacity: 0.6;
transition: all 0.3s;
-webkit-transition: all 0.3s;
cursor: pointer;
}
img.spoiler:hover {opacity: 1;}
img.spoiler.selected {border: 2px solid #fff; opacity: 1;}

.sami {  
    filter: alpha (Opacity=75);
filter: grayscale(1);
    opacity: 0.15;
    -moz-transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.sami:hover {
    filter: alpha (Opacity=100);
filter: grayscale(0);
    opacity: 1;
}

это в объяву:

Код:
<!-- Табличка в объявлении © ForumD.ru, Герда -->
<ul class="s-tabs">

<span>Мир</span>
<span>Новости</span>

        <li class="stab"><!-- начало первой вкладки -->


     <div id="s-block"><!-- блок -->
   <div id="left"><!-- слева -->

<h3><img src="https://i.ibb.co/nMbyBcB/image.png">Гостям</h3>
<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=123">Правила  </a>
<a class="link" href="http://karatada.rolka.su/pages/putevoditel">Путеводитель  </a>
<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=396">Розыск  </a>
<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=456">Гостевая</a>
<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=117">Шаблон анкеты</a>
<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=146">FAQ</a>

   <!-- слева: конец --></div>
   <div id="center" class="pic"><!-- по центру -->

<div id="menu">
<div class="spll"><div class="splLink">Навигация</div>
<div class="splCont">
<a href="http://karatada.rolka.su/pages/cyclopedia">Энциклопедия</a><br>
<a href="http://karatada.rolka.su/pages/races">Расы</a><br>
<a href="http://karatada.rolka.su/pages/map">Карта мира</a><br>
<a href="http://karatada.rolka.su/pages/fractions">Фракции</a><br>
<a href="http://karatada.rolka.su/pages/luni">Луны</a><br>
<a href="http://karatada.rolka.su/pages/gods">Боги</a><br>
<a href="http://karatada.rolka.su/pages/components">Компоненты</a><br>
</div></div>
<div class="spll"><div class="splLink">Механика</div>
<div class="splCont">
<a href="http://karatada.rolka.su/pages/gamemechanic">Игровая система</a><br>
<a href="http://karatada.rolka.su/pages/gameskills">Навыки</a><br>
<a href="http://karatada.rolka.su/pages/aspects">Способности и слабости</a><br>
</div></div>
<div class="spll"><div class="splLink">Игра</div>
<div class="splCont">
<a href="http://karatada.rolka.su/viewtopic.php?id=337">Покупка навыков</a><br>
<a href="http://karatada.rolka.su/viewtopic.php?id=370">Продажа писанины</a><br>
<a href="http://karatada.rolka.su/viewtopic.php?id=475">Государства и земли</a><br>
<a href="http://karatada.rolka.su/viewtopic.php?id=473">Бестиарий</a><br>
<a href="http://karatada.rolka.su/viewtopic.php?id=477">Контролируемая магия</a><br>
<a href="http://karatada.rolka.su/viewforum.php?id=96">Библиотека</a><br>
</div></div>
</div>

<a href="http://karatada.rolka.su/pages/cyclopedia" class="pic_block">
<b>Описание картинки</b>
<img src="https://i.ibb.co/6v8JRg9/tumblr-pxc7w6-NJE71x61ieeo5-540.gif"></a>


   <!-- по центру: конец --></div>
   <div id="right"><!-- справа -->

<h3>Игрокам</h3>
<a class="link" href="http://karatada.rolka.su/pages/cyclopedia">Энциклопедия</a>
<a class="link" href="http://karatada.rolka.su/pages/gamemechanic">Игровая механика</a>
<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=496#p7334">Бросить кубики</a>
<a class="link" href="http://karatada.rolka.su/pages/zatovari">Бакалея</a>

   <!-- справа: конец --></div>
     <!-- блок: конец --></div>
        <!-- конец первой вкладки --></li>

        <li class="stab"><!-- начало второй вкладки -->

     <div id="s-block"><!-- блок -->
   <div id="left"><!-- слева -->

<h3>Розыск</h3>

<a href="#" class="sami-icon">
<i>Описание иконки</i>
<img src="https://i.ibb.co/nr23Kr1/Arcane-Brilliance.png" class="sami">
</a>
<a href="#" class="sami-icon">
<i>Описание иконки</i>
<img src="https://i.ibb.co/nr23Kr1/Arcane-Brilliance.png" class="sami">
</a>
<a href="#" class="sami-icon">
<i>Описание иконки</i>
<img src="https://i.ibb.co/nr23Kr1/Arcane-Brilliance.png" class="sami">
</a>

   <!-- слева: конец --></div>
   <div id="center" class="news"><!-- по центру -->

<b><img src="https://i.ibb.co/wsP9KRd/image.png">Если накапливаются уведомления на иконке форума: Профиль -&gt; Редактировать -&gt; Уведомления, просто любуетесь историей и выходите... магия!</b>
<b><img src="https://i.ibb.co/wsP9KRd/image.png">В Кротову Лавку (бакалея) завезли новый товар! Поспешите, все предметы - в единственном экземпляре.</b>
<b><img src="https://i.ibb.co/wsP9KRd/image.png">Если видите несостыковки в темах и описаниях локаций - вызывайте Гейм Мастера!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">У навыка «Добыча» обновлена иконка, замените в своих карточках для корректного отображения.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru"><a href="http://karatada.rolka.su/pages/races">Каталог рас</a> пополнился новыми обитателями Каратады - Проклятыми. Не живые, но и не мертвые, кто они на самом деле?</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Подведены итоги <a href="http://karatada.rolka.su/viewtopic.php?id=471#p6810">конкурса</a>. Благодарим за участие!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Ловец Снов <a href="http://karatada.rolka.su/viewtopic.php?id=472#p5939">прибыл</a> в преддверии Ночи Кошмаров. Он готов купить все ваши самые жуткие воспоминания и  сны!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Список <a href="http://karatada.rolka.su/pages/aspects">слабостей</a> пополнен множеством новых изъянов, которыми может обладать персонаж!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Создан <a href="http://karatada.rolka.su/viewtopic.php?id=472#p5939">опрос</a> по проведению мероприятия в честь Хэллоуина. Не забудьте поучаствовать!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">«Фантасмагория» была расширена, а ролевая переведена на локационно-эпизодическую (смешанную) систему. По всем вопросам обращайтесь к ГМ!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Анкеты игроков с отсутствием активности более месяца перемещены в Архив. Если вы вернулись и потеряли анкету - обращайтесь к ГМу, мы все сохранили.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Мир - Хроники, были добавлены исторические хроники игрового мира. Если будут дополнения - пишите!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Некоторые темы из «Предисловия» были перенесены в новый раздел - «Бюро Авантюристов», доступный игрокам, которые уже приняты в игру. Все ссылки в быстром доступе работают без изменений.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru"> Друзья, у нас наконец-то появились темы для рекламы! Вы знаете, что нужно делать. Я верю в вас.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru">Доступен новый раздел <a href="http://karatada.rolka.su/pages/components">Компонентов</a> для ремесленных профессий, который со временем будет дополняться. Кожи пока нет.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru"><a href="http://karatada.rolka.su/viewtopic.php?id=370">Тетушка Яг</a> всерьез увлеклась ремеслом, а потому скупает описания компонентов и материалов со всех уголков мира!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru"> Отныне все желающие могут продать статейку-другую редакции «Сплетницы» через <a href="http://karatada.rolka.su/viewtopic.php?id=370">тетушку Яг</a> . Пусть целый мир узнает о ваших приключениях... и их последствиях!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru"> Теперь поиск соигрока стал удобнее - шаблон в <a href="http://karatada.rolka.su/viewtopic.php?id=396">Розыске</a> поможет вам в этом нелегком деле!</b> 
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/3/38/%D0%A2%D1%8B%D0%BA%D0%B2%D0%B0.png/revision/latest?cb=20160618194250&amp;path-prefix=ru"> Ребята! Снова доступна <a href="http://karatada.rolka.su/pages/zatovari">Бакалея</a>, хотя с не доведенными до ума магазинами. Есть поле для творчества - дерзайте. Удачи!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/7/76/%D0%9F%D1%80%D0%BE%D0%BA%D0%BB%D1%8F%D1%82%D0%B0%D1%8F_%D0%BF%D1%83%D0%BB%D1%8F.png/revision/latest?cb=20120811100333&amp;path-prefix=ru">Список способностей и слабостей переменится, так что Вы пока туда не смотрите.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/7/76/%D0%9F%D1%80%D0%BE%D0%BA%D0%BB%D1%8F%D1%82%D0%B0%D1%8F_%D0%BF%D1%83%D0%BB%D1%8F.png/revision/latest?cb=20120811100333&amp;path-prefix=ru"><a href="http://karatada.rolka.su/viewtopic.php?pid=3413#p3413">Мана</a> теперь не нужна.</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/7/76/%D0%9F%D1%80%D0%BE%D0%BA%D0%BB%D1%8F%D1%82%D0%B0%D1%8F_%D0%BF%D1%83%D0%BB%D1%8F.png/revision/latest?cb=20120811100333&amp;path-prefix=ru">Мастеринг в игре  давно стался пассивным! Но Вы пишите мне!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/7/76/%D0%9F%D1%80%D0%BE%D0%BA%D0%BB%D1%8F%D1%82%D0%B0%D1%8F_%D0%BF%D1%83%D0%BB%D1%8F.png/revision/latest?cb=20120811100333&amp;path-prefix=ru">До конца месяца игромеханика снова переменится, так что ничему не верьте. Особенно - магам!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/7/76/%D0%9F%D1%80%D0%BE%D0%BA%D0%BB%D1%8F%D1%82%D0%B0%D1%8F_%D0%BF%D1%83%D0%BB%D1%8F.png/revision/latest?cb=20120811100333&amp;path-prefix=ru">Мастеринг в игре  давно стался пассивным! Но Вы пишите мне!</b>
<b><img src="https://vignette.wikia.nocookie.net/terraria/images/7/76/%D0%9F%D1%80%D0%BE%D0%BA%D0%BB%D1%8F%D1%82%D0%B0%D1%8F_%D0%BF%D1%83%D0%BB%D1%8F.png/revision/latest?cb=20120811100333&amp;path-prefix=ru">Теперь посты можно оценивать жирным плюсом.</b>

   <!-- по центру: конец --></div>
   <div id="right"><!-- справа -->

<h3>Новые авантюристы</h3>

<a href="#" class="sami-icon">
<i>Описание иконки</i>
<img src="https://i.ibb.co/nr23Kr1/Arcane-Brilliance.png" class="sami">
</a>
<a href="#" class="sami-icon">
<i>Описание иконки</i>
<img src="https://i.ibb.co/nr23Kr1/Arcane-Brilliance.png" class="sami">
</a>
<a href="#" class="sami-icon">
<i>Описание иконки</i>
<img src="https://i.ibb.co/nr23Kr1/Arcane-Brilliance.png" class="sami">
</a>

   <!-- справа: конец --></div>
     <!-- блок: конец --></div>


<img src="https://i.ibb.co/LZWGNvD/lok-0004-12.jpg" class="spoiler">
<div class="innertab"><!-- что творится: начало -->

что творится

<!-- что творится: конец --></div>

<img src="https://i.ibb.co/crzrm2p/lok-0018-1.jpg" class="spoiler">
<div class="innertab"><!-- хроники мира: начало -->

хроники мира

<!-- хроники мира: конец --></div>

<img src="https://i.ibb.co/bzcycmr/lok-0013-7.jpg" class="spoiler">
<div class="innertab"><!-- сплетница: начало -->

сплетница

<!-- сплетница: конец --></div>

<img src="https://i.ibb.co/HzyC5bb/lok-0015-4.jpg" class="spoiler">
<div class="innertab"><!-- игровые события: начало -->

игровые события

<!-- игровые события: конец --></div>



        <!-- конец второй вкладки --></li>
</ul>



<script type="text/javascript">
$('.s-tabs').each(function(){
   $(this).children('span:first').addClass('selected');
   $(this).children('.stab').eq(0).show();   
});
$('.s-tabs>span').live('click', function(){
     var a = $(this).parent('.s-tabs');
     var arr = a.children('span');
     var index = arr.index(this);
     arr.removeClass('selected');
     $(this).addClass('selected');
     a.children('.stab').hide();   
     a.children('.stab').eq(index).show();   
});


$('.stab>.spoiler').live('click', function(){
     var a = $(this).parent('.stab');
     var arr = a.children('.spoiler');
     var index = arr.index(this);
     $(this).toggleClass('selected');
     a.children('.innertab').eq(index).toggleClass('show');
});

$('.splLink').click(function(){
   $(this).parent().children('div.splCont').toggle('normal');
    return false;
});
</script>

как работают вкладки

<ul class="s-tabs">

<span>Мир</span>
<span>Новости</span>

        <li class="stab"><!-- начало первой вкладки -->
сюда контент вкладки
        <!-- конец первой вкладки --></li>

        <li class="stab"><!-- начало второй вкладки -->
сюда контент вкладки
        <!-- конец второй вкладки --></li>
</ul>

Красное - названия, теперь они текстовые, чтоб добавить новую вкладку просто достаточно добавить <span>название</span> в том порядке, в котором оно должно отображаться

Синее - теги для начала и конца вкладки.
если нужна будет еще одна, добавляем:

Код:
        <li class="stab">
тут контент
        </li>

в каком порядке идет вкладки - в таком же порядке они "привязываются" к красным пунктам меню.

Контент
Внутри вкладок вот такие блоки отвечают за "таблицу":

Код:
     <div id="s-block"><!-- блок -->
   <div id="left"><!-- слева -->

контент слева

   <!-- слева: конец --></div>
   <div id="center" class="pic"><!-- по центру -->

контент по центру


   <!-- по центру: конец --></div>
   <div id="right"><!-- справа -->

контент справа

   <!-- справа: конец --></div>
     <!-- блок: конец --></div>

Если добавлять вот такую конструкцию внутрь вкладок - будет три ячейки.
если без нее, то будет просто текст (по центру)

Чтобы сделать заголовок ставим теги:

<h3><img src="https://i.ibb.co/nMbyBcB/image.png">Гостям</h3>

если вставить картинку, она автоматически "сожмется" до нужного размера и сделает отступ от текста

чтобы вставить пункт меню (как в блоках "гостям" или "игрокам"):

<a class="link" href="http://karatada.rolka.su/viewtopic.php?id=123">Правила</a>

class="link" отвечает за то, чтобы ссылка имела нужный стиль. тегов переноса <br> рядом с такими ссылками не нужно - они сами переносятся на новую строку.

Новость добавляется кодом:

<b><img src="https://i.ibb.co/wsP9KRd/image.png">Если накапливаются уведомления на иконке форума: Профиль - Редактировать - Уведомления, просто любуетесь историей и выходите... магия!</b>

теги <b></b> отвечают за стиль новости, весь текст надо вставлять внутри них.
если вставить картинку, она автоматически "сожмется" до нужного размера и сделает отступ от текста
тегов переноса <br> досле новости не нужны - они сами переносятся на новую строку.

Картинки-спойлеры:

<img src="https://i.ibb.co/LZWGNvD/lok-0004-12.jpg" class="spoiler">
<div class="innertab"><!-- что творится: начало -->

что творится

<!-- что творится: конец --></div>

красное - ссылка на картинку
картинка автоматически сжимается до 40% от ширины таблички в встает по центру.
синее - текст

+1

28

  • Автор: Helheima
  • Участник
  • Helheima
  • Уважение: +68

Герда, большое спасибо! Все очень понятно, табличка замечательная <3
Прошу прощения за доставленные в процессе неприятности, я постараюсь четче формулировать свое "что надо" в следующий раз, благодарю за терпение.

+1

29

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Helheima
без проблем. оставлю топик открытым. если будут какие-нибудь правки, проблемы - обращайся

0

30

  • Автор: Helheima
  • Участник
  • Helheima
  • Уважение: +68
Герда написал(а):

Helheima
без проблем. оставлю топик открытым. если будут какие-нибудь правки, проблемы - обращайся

Хорошо, спасибо! Я вышлю ссылку как поставлю у нас, хочу завезти с зимним дизайном сразу :3

0

Тема закрыта
Страница:   1 2 3 4