kolobdur74
А нафига этот элемент - bortik(div) ?
Нафег лишнее ? Добавить сss к <div id='tablica'> - padding-top:XXpx
(А то он как в телеге пятое колесо
Отредактировано Deff (Пн, 23 Сен 2013 03:39:20)
Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Новые возможности форумов » Создаем полноценный Портал на форумах MyBB!
kolobdur74
А нафига этот элемент - bortik(div) ?
Нафег лишнее ? Добавить сss к <div id='tablica'> - padding-top:XXpx
(А то он как в телеге пятое колесо
Отредактировано Deff (Пн, 23 Сен 2013 03:39:20)
kolobdur74
И фон сделать текущим реальным цветом - эт сразу даст первичную ориентацию пользователю - Лого и фон
Отредактировано Deff (Пн, 23 Сен 2013 02:27:41)
А нафига этот элемент - bortik(div) ?
А вдруг чего захотят присобачить сверху и снизу)))
Вот пара вариантов:
И фон сделать текущим реальным цветом - эт сразу даст первичную ориентацию пользователю - Лого и фон
Можно..
1-й Вариант - симпатичнее
а чо лого зажал во всю длину - проще на лого выделить светлый прямогуольник с надписью селектора
Сомкнуть навигацию Часы и Лого как в реале(проще даж снять скришот этой части и на светлых вставках вписать селекторы) - там нафег большой зеленый паддинг
А вдруг чего захотят присобачить сверху и снизу)))
Захотят присобачить - присобачат ибо css - не для совсем тупых... эти будут ставить мини версию
Отредактировано Deff (Пн, 23 Сен 2013 03:47:51)
Вот еще вариант:
Отредактировано kolobdur74 (Пн, 23 Сен 2013 05:10:48)
Чуть Подправил
kolobdur74
Ксать селектор #wrapper (div) - тоже уже не нужен - Первоначально он предполагался как общее обрамление для навигации и контента Новостей, затем был разделён и всунут в ячейку
в скрипте он тоже лишь в стиле
div#wrapper {
width: 100%;
margin: 0 auto;
}
Отредактировано Deff (Пн, 23 Сен 2013 22:42:09)
Ксать селектор #wrapper (div) - тоже уже не нужен - Первоначально он предполагался как общее обрамление для навигации и контента Новостей, затем был разделён и всунут в ячейку
в скрипте он тоже лишь в стиле
Да, перенес margin: 0 auto; в #nav и убрал #wrapper никакой разницы, значит убираем #wrapper..Надо перекрасить #nav в желтенький цвет)))
.Надо перекрасить #nav в желтенький цвет
Так сойдёт
http://projekt1.bbmy.ru/pages/portal
Отредактировано Deff (Вт, 24 Сен 2013 12:01:11)
Так сойдёт
А, я его только перекрасил)))))
Вообщем, я тут решил прикинуть насколько легко можно изменить дизайн у конструктора, и вот что вышло без особого напряжения:
http://projekt1.bbmy.ru/pages/portal4
То есть практически ничего не меняя можно изменить достаточно сильно вид портала. Кроме того я прикинул, что и сложный вариант дизайна, с добавкой таблиц, можно сделать. То есть и тем кто не сильно разбирается в css, и людям продвинутым, вполне подходит...Конструктор, по моему вполне состоялся..
Отредактировано kolobdur74 (Ср, 25 Сен 2013 05:05:28)
Вообщем, я тут решил прикинуть насколько легко можно изменить дизайн у конструктора, и вот что вышло без особого напряжения:
Симпатично!
Конструктор, по моему вполне состоялся..
красиво,а код где взять?
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)
красиво,а код где взять?
Пока еще не все до конца готово, поэтому я код не выкладывал, но в принципе порталом можно и сейчас уже пользоваться..А, да - это не портация, эт я вчера решил сам попробовать..))
Наверно так:
я вчера решил сам попробовать..
спасибо,пойду поэксперементирую с дизайном))))
спасибо,пойду поэксперементирую с дизайном))))
Вот может пригодится:
Таблица основных селекторов: |
№ | Селектор | Описание |
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 | Комментарии и Читать далее. Настраиваем расположение. |
Отредактировано kolobdur74 (Ср, 25 Сен 2013 20:02:54)
В связи с тем, что домен 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>
kolobdur74
Давай я ваши наработки в первое сообщение закину? Только дай пожалуйста ссылки на наработки, дабы я знал, что закинуть.
Вы здесь » Единый форум поддержки » Новые возможности форумов » Создаем полноценный Портал на форумах MyBB!