Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Новые возможности форумов » Создаем полноценный Портал на форумах MyBB!


Создаем полноценный Портал на форумах MyBB!

Сообщений 821 страница 840 из 1001

821

kolobdur74
:flirt: А нафига этот элемент - bortik(div) ?
Нафег лишнее ? Добавить сss к <div id='tablica'> - padding-top:XXpx
(А то он как в телеге пятое колесо

Отредактировано Deff (Пн, 23 Сен 2013 03:39:20)

0

822

kolobdur74
И фон сделать текущим реальным цветом - эт сразу даст первичную ориентацию пользователю - Лого и фон

Отредактировано Deff (Пн, 23 Сен 2013 02:27:41)

0

823

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

А нафига этот элемент - bortik(div) ?

А вдруг чего захотят присобачить сверху и снизу)))

Вот пара вариантов:

Карта

http://s4.uploads.ru/srp9G.gif
http://s5.uploads.ru/uPfKe.gif

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

И фон сделать текущим реальным цветом - эт сразу даст первичную ориентацию пользователю - Лого и фон

Можно.. :yep:

0

824

1-й Вариант - симпатичнее
а чо лого зажал во всю длину - проще на лого выделить светлый прямогуольник с надписью селектора
Сомкнуть навигацию Часы и Лого как в реале(проще даж снять скришот этой части и на светлых вставках вписать селекторы) - там нафег большой зеленый паддинг

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

А вдруг чего захотят присобачить сверху и снизу)))

Захотят присобачить - присобачат  ибо css - не для совсем тупых... эти будут ставить мини версию

Отредактировано Deff (Пн, 23 Сен 2013 03:47:51)

0

825

Вот еще вариант:
http://s5.uploads.ru/5MopC.gif

Отредактировано kolobdur74 (Пн, 23 Сен 2013 05:10:48)

0

826

http://s4.uploads.ru/ja3Hm.jpg
Чуть Подправил

Отредактировано Deff (Пн, 23 Сен 2013 22:33:10)

0

827

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

Чуть Подправил

:cool:

0

828

kolobdur74
Ксать селектор #wrapper (div) - тоже уже не нужен - Первоначально он предполагался как общее обрамление для навигации и контента Новостей, затем был разделён и всунут в ячейку

в скрипте он тоже лишь в стиле

div#wrapper {
width: 100%;
margin: 0 auto;
}

Отредактировано Deff (Пн, 23 Сен 2013 22:42:09)

0

829

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

Ксать селектор #wrapper (div) - тоже уже не нужен - Первоначально он предполагался как общее обрамление для навигации и контента Новостей, затем был разделён и всунут в ячейку
в скрипте он тоже лишь в стиле

Да, перенес margin: 0 auto; в #nav и убрал #wrapper никакой разницы, значит убираем #wrapper..Надо перекрасить #nav в желтенький цвет)))

0

830

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

.Надо перекрасить #nav в желтенький цвет

:D Так сойдёт

http://s5.uploads.ru/NxmdA.jpg

http://projekt1.bbmy.ru/pages/portal

Отредактировано Deff (Вт, 24 Сен 2013 12:01:11)

0

831

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

Так сойдёт

А, я его только перекрасил))))) :D
http://s4.uploads.ru/Bj1Ed.gif

0

832

Вообщем, я тут решил прикинуть насколько легко можно изменить дизайн у конструктора, и вот что вышло без особого напряжения:
http://s5.uploads.ru/t/0jJtH.gif
http://projekt1.bbmy.ru/pages/portal4

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

Отредактировано kolobdur74 (Ср, 25 Сен 2013 05:05:28)

0

833

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

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

:cool: Симпатично!

0

834

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

Конструктор, по моему вполне состоялся..

красиво,а код где взять?

0

835

svetlay
Contr+U - просмотр кода страницы
Наверно так:

Свернутый текст

<!--Портация с e107 Bread of Life-->
<div id=Mydiv style="display:none">
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000e/14/cc/71903.css">
<!--Таблица Портала-->
<div id='tablica'>
<table id='shapka' cellpadding='0' cellspacing='0'>
<tr>
<td class='logo'><div class='name_portal'></div>
   <img src="http://s4.uploads.ru/IBXv8.gif" width=100% height="341px"></td>
</tr>
<tr>
<td class='logo2'>
<!--Дата-->
<span id="clock"></span>
<!--Конец Дата-->
</td>
</tr>
<tr>
<td>
<!--Меню-->
<div id="nav">
<!--Вставка  Контент меню -->
</div>
<!--Конец Меню-->
</td>
</tr>
</table>
<table id='tab_content' class='tab_portal' cellpadding='0' cellspacing='10'>
<tr>
<td class='left_block'>
<div id='content_left'></div>
</td>
<td class='center_block' id="news-and-pag">
<!--Вставка - Новости с Пагинатором-->
</td>
<td class='right_block'>
<div id='content_right'></div>
</td>
</tr>
</table>
</div>
<!--Конец таблицы Портала-->
<!--Название форума-->
<div id="inf_name_portal">Имя форума</div>
<!--Вставка меню-->
<a id="inf_menu_portal" href="/pages/portal">Портал</a>
<a id="inf_menu_forum" href="/">Форум</a>
<div id="inf_menu_user">Участники</div>
<div class="vse_podm" style="width:100%">
<li>
<a href="#">Это категория 1</a>
<span class="rightarrow"></span>
<ul class="sub_2nd">
<li><a href="#">Это подменюшка 1</a></li>
<li><a href="#">Это подменюшка 2</a></li>
<li><a href="#">Это подменюшка 3</a></li>
</ul>
</li>
<li><a href="#">Это категория 2</a>
<span class="rightarrow"></span>
<ul class="sub_2nd">
<li><a href="#">Это подменюшка 2</a></li>
<li><a href="#">Это подменюшка 3</a></li>
</ul>
</li>
</div>
<!-- Вставка Анонсы портала -->
<div id="inf_name_ob">Анонсы портала</div>
<div id="inf_ob_nov"><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" scrollamount="3" scrolldelay="1" width="100%">Анонсируем много анонсов... И еще, и еще, много-много..Можно и бегающей строкой..</marquee>
<div class="edit-container" data="http://projekt1.bbmy.ru/viewtopic.php?id=39#p443"></div>
</div>
<!--Вставка блоков слева-->
<div id=Inf_block_Left style="display:none">
<!--НАЧАЛО-->
<h2>НОВОСТЬ 1</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 2</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 3</h2>
<div id="statis"></div>
</div>
<!--Вставка блоков справа-->
<div id=Inf_block_Right style="display:none">
<!--НАЧАЛО-->
<h2>НОВОСТЬ 1</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 2</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 3</h2>
Текст НОВОСТИ
</div>
<!--Исключаемые из новостей портала Темы -->
<div id="delete_Tems" style="display:none">
<p>_й_</p> <p>$DEL$</p>
<p>Тут контенты редактируемых блоков в HTML верх</p>
<p>Тут контенты редактируемых блоков в объявлении</p>
<p>Тут контенты редактируемых блоков На своей Странице</p>
<p>Тут контенты редактируемых блоков в HTML низ</p>
<p>Тут контенты редактируемых блоков в Правилах форума</p>
<p>Фильмы</p>
</div>
<script type="text/javascript">
function addContentParse_ (pstContent){
  var serials = pstContent.find('.quote-box.spoiler-box > div[ onclick*="toggleClass"]:contains("KINO-SLIDER")')
  serials.each(function(){var a=$(this).parents('div.vse_news:first');a.html('<div class="post-content">'+a.html()+'</div>');});
  $('<script src="http://forumstatic.ru/files/0010/b4/f8/82547.js"><\/script>').appendTo('body');
  }
</script>
<script type="text/javascript" src="http://forumstatic.ru/files/000e/14/cc/43591.js"></script>
<!--//Подгрузка контента редактируемых блоков "edit-container" -->
<script type="text/javascript">loadEditContainers();</script>
</div>

Основной стиль - тут

<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/000e/14/cc/71903.css">

Если нужно - правим - перезаливаем к себе в Админку - меняем ссылку

Отредактировано Deff (Ср, 25 Сен 2013 14:38:11)

0

836

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

красиво,а код где взять?

Пока еще не все до конца готово, поэтому я код не выкладывал, но в принципе порталом можно и сейчас уже пользоваться..А, да - это не портация, эт я вчера решил сам попробовать..))

0

837

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

Наверно так:

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

я вчера решил сам попробовать..

спасибо,пойду поэксперементирую с дизайном))))

0

838

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

спасибо,пойду поэксперементирую с дизайном))))

Вот может пригодится:

http://s5.uploads.ru/ZvAG5.png

Таблица основных селекторов:

Селектор

Описание

1.

#tablica

Основной селектор портала. На него ставим фон, делаем отступы, позиционируем.

2.

#shapka

Это наша шапка, в ней находится главная картинка, имя портала, дата и часы, и меню. Позиционируем и делаем отступы.

3.

.logo

Основная картинка (лучше ставить на фон через НТМЛ, а не через CSS - быстрее загрузка): <img src="ваша картинка на шапку" width="100%" height="ваша высота">.

4.

.name_portal

Находится внутри ячейки .logo рядом с фоновой картинкой. Это имя портала. Настраиваем расположение, а также величину и цвет текста.

5.

.logo2

Эта ячейка распологается в следующей строке, после .logo. В ней располагаеются часы и дата. Так же можно использовать как продолжение фона.

6.

#clock

Часы и Дата. Настраиваем цвет, тени и фон текста.

7.

div#nav

Это меню. Находится в самой нижней строке таблицы #shapka. В принципе оно настроено, если хотим изменить фон, убрать бордюры, то используем селектор: #nav ul.main.

8.

div#nav ul.main

Настройки меню находятся в файле js, если не хотим в нем копаться, то можно все поменять через файл css, с обязательным добовлением !important, иначе работать не будет. Настраиваем фон меню и бордюры.

9.

div#nav ul.main li a

Настраиваем цвет ссылок основного меню.

10.

#tab_content

Основная таблица контента. Настраиваем фон, ширину, позиционирование всей таблицы, бордюры.

11.

.left_block

Это ячейка таблицы всего левого блока. Настраиваем отступы, ширину и позиционирование.

12.

.center_block

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

13.

.right_block

Это ячейка таблицы всего правого блока. Настраиваем отступы, ширину и позиционирование. Правый и левый блок можно отключать.

14.

#content_left

В нем находятся все подблоки с контентом левого блока. Находится внутри основного левого блока .left_block. Настриваем отступы.

15.

.td_news

Это подблок в нем располагаются название контента и сам контент. Находится как в левом блоке, так и вправом. Настраиваем, фон, отступы, бордюры, всякие красивости.

16.

.nazvfnie_content

Название контента данного подблока. Настраиваем фон, бордюры, отступы, расположение текста, цвет текста.

17.

.inf_content

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

18.

.nov

Находится в центральном блоке. Это название: "Анонс" и "Новости". Настраиваем фон, бордюры, цвет и расположение текста.

19.

#ob_nov

Это собственно сам Анонс. Настраиваем фон, бордюры, расположение и цвет текста.

20.

.vse_news

Находится в центральном блоке. Это подблок с одной новостью. Настраиваем бордюр, отступы, фон (можно фон не настраивать, если он настроен в .post-content)

21.

.post-content

Это посты (Новости), также связан с скриптом Онлайн Редактор Объявлений, поэтому часть Анонса настраивается через данный селектор. Можно делать те же настройки, что и на селекторе #ob_nov

22.

.titles

Имя новости. Настраиваем расположение, размер и цвет текста.

23.

.authors

Автор и время написания поста.. Настраиваем расположение, размер и цвет текста.

24.

.conts

Сам пост. Настраиваем расположение.

25.

.JLinks

Комментарии и Читать далее. Настраиваем расположение.

http://s5.uploads.ru/ZvAG5.png

Отредактировано kolobdur74 (Ср, 25 Сен 2013 20:02:54)

+1

839

В связи с тем, что домен bbmy.ru не продлен портал в посту 835 стал не рабочий. Перезалил js и css файлы, вот рабочий вариант:

Код
Код:
<!--Закат-->
<div id=Mydiv style="display:none">
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0013/49/9f/71903.css">
<!--Таблица Портала-->
<div id='tablica'>
<table id='shapka' cellpadding='0' cellspacing='0'>
<tr>
<td class='logo'><div class='name_portal'></div>
   <img src="http://s4.uploads.ru/IBXv8.gif" width=100% height="341px"></td>
</tr>
<tr>
<td class='logo2'>
<!--Дата-->
<span id="clock"></span>
<!--Конец Дата-->
</td>
</tr>
<tr>
<td>
<!--Меню-->
<div id="nav">
<!--Вставка  Контент меню -->
</div>
<!--Конец Меню-->
</td>
</tr>
</table>
<table id='tab_content' class='tab_portal' cellpadding='0' cellspacing='10'>
<tr>
<td class='left_block'>
<div id='content_left'></div>
</td>
<td class='center_block' id="news-and-pag">
<!--Вставка - Новости с Пагинатором-->
</td>
<td class='right_block'>
<div id='content_right'></div>
</td>
</tr>
</table>
</div>
<!--Конец таблицы Портала-->
<!--Название форума-->
<div id="inf_name_portal">Имя форума</div>
<!--Вставка меню-->
<a id="inf_menu_portal" href="/pages/portal">Портал</a>
<a id="inf_menu_forum" href="/">Форум</a>
<div id="inf_menu_user">Участники</div>
<div class="vse_podm" style="width:100%">
<li>
<a href="#">Это категория 1</a>
<span class="rightarrow"></span>
<ul class="sub_2nd">
<li><a href="#">Это подменюшка 1</a></li>
<li><a href="#">Это подменюшка 2</a></li>
<li><a href="#">Это подменюшка 3</a></li>
</ul>
</li>
<li><a href="#">Это категория 2</a>
<span class="rightarrow"></span>
<ul class="sub_2nd">
<li><a href="#">Это подменюшка 2</a></li>
<li><a href="#">Это подменюшка 3</a></li>
</ul>
</li>
</div>
<!-- Вставка Анонсы портала -->
<div id="inf_name_ob">Анонсы портала</div>
<div id="inf_ob_nov"><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" scrollamount="3" scrolldelay="1" width="100%">Анонсируем много анонсов... И еще, и еще, много-много..Можно и бегающей строкой..</marquee>
<div class="edit-container" data="http://testmods.mybb.ru/viewtopic.php?id=8#p9"></div>
</div>
<!--Вставка блоков слева-->
<div id=Inf_block_Left style="display:none">
<!--НАЧАЛО-->
<h2>НОВОСТЬ 1</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 2</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 3</h2>
<div id="statis"></div>
</div>
<!--Вставка блоков справа-->
<div id=Inf_block_Right style="display:none">
<!--НАЧАЛО-->
<h2>НОВОСТЬ 1</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 2</h2>
Текст НОВОСТИ
<h2>НОВОСТЬ 3</h2>
Текст НОВОСТИ
</div>
<!--Исключаемые из новостей портала Темы -->
<div id="delete_Tems" style="display:none">
<p>_й_</p> <p>$DEL$</p>
<p>Тут контенты редактируемых блоков в HTML верх</p>
<p>Тут контенты редактируемых блоков в Объявлении</p>
<p>Тут контенты редактируемых блоков На своей Странице</p>
<p>Тут контенты редактируемых блоков в HTML низ</p>
<p>Тут контенты редактируемых блоков в Правилах форума</p>
<p>Исходники</p>
</div>
<script type="text/javascript">
function addContentParse_ (pstContent){
  var serials = pstContent.find('.quote-box.spoiler-box > div[ onclick*="toggleClass"]:contains("KINO-SLIDER")')
  serials.each(function(){var a=$(this).parents('div.vse_news:first');a.html('<div class="post-content">'+a.html()+'</div>');});
  $('<script src="http://forumstatic.ru/files/0010/b4/f8/82547.js"><\/script>').appendTo('body');
  }
</script>
<script type="text/javascript" src="http://forumstatic.ru/files/0013/49/9f/43591.js"></script>
<!--//Подгрузка контента редактируемых блоков "edit-container" -->
<script type="text/javascript">loadEditContainers();</script>
</div>

0

840

kolobdur74
Давай я ваши наработки в первое сообщение закину? Только дай пожалуйста ссылки на наработки, дабы я знал, что закинуть.

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Создаем полноценный Портал на форумах MyBB!