Наводим лоск - оформление профиля пользователя и пагинации страниц
Хочу поделиться легкими фиксами шаблона оформления, которые реализовал на своем проекте. Возможно, для кого-то информация окажется полезной, т.к. все изменения можно без труда внести в шаблон default Предупреждаю сразу, изменения чисто косметические и сделаны на мой вкус. Владея базовыми навыками CSS верстки, Вы без сомнения, сможете доработать дизайн своего проекта и без приведенной ниже информации. Изменения касаются: вывода статуса пользователя, оформления профиля кнопок (Ваш друг!, Считает вас другом., Считаете другом., Подружится), оформления пагинации страниц. Использую версию альфа — 2.0 с патчем Френдлента, имейте это в виду, если будете использовать приведенные фиксы. Пост обновлен — редактирование статуса в PopUp окне
1. Первое, на что обратил внимание, это оформление вывода информации о статусе пользователя. Сейчас в стандартном шаблоне наблюдаем следующее:
Видно, что текст статуса пользователя не вписывается в общую картину (субъективно) и давит на чувство эстетического восприятия (имхо).
Хозяин, как говорится — барин… Мне показалось что изменения внести все же стоит.
Подредактировав немного файл ( sample.profile_head.tpl ) можно получить следующее:
При этом кнопка-ссылка на страницу изменения статуса будет выводиться непосредственно рядом с информацией о статусе
Заменив текстовые ссылки ( Ваш друг!, Считает вас другом., Считаете другом., Подружится ) картинками, делаем страничку более красивой и одновременно убираем возможное перепрыгивание строк из-за нехватки места.
Также добавляется кнопка редактирования профиля пользователя рядом с аватаром, вместо текста «Это ваш профиль, вы здесь хозяин, а здесь вы можете его отредактировать.». Мне кажется так удобнее.
Что потребуется изменить:
а) открываем файл base.css и добавляем код:
div.blog_status { width: 250px; background: #eeeeee; padding: 0px 15px 10px 15px; } .status-row { width: 20px; background: url('images/status-row.jpg') no-repeat top right; }
б) редактируем файл ( themes/default/templates/sample.profile_head.tpl )
Подробную инструкцию по редактированию кода (картинки и уже измененные файлы) можно скачать
Хотел было вставить прямо в пост, но устал бороться с парсером, т.ч. сори, как говорится, за неудобства.
2. Второе, на что обратил внимание, на многих сайта используется стандартный шаблон default (ну возможно слегка доработанный) и как следствие — везде одинаковое оформление пагинации.
Некоторое время назад, я наткнулся на пост здесь на сайте, в нем была инструкция как внедрить в шаблон ява-скрипт paginator3000, который бы отвечал за постраничную навигацию.
Я тогда помню удивился… как же поисковики будут индексировать страницы, если ссылки выводятся через ява-скрипт? Но внешнее оформление понравилось.
Поэтому сделал для себя почти то же самое, правда, без красивой прокрутки, исключительно на css.
Править нужно будет файлы:
ваша тема/base.css
modules/blog/templates/approved.tpl
modules/blog/templates/purgatory.tpl
modules/blog/templates/gap.tpl
modules/blog/templates/friendstape.tpl (если используется Френдлента)
modules/blog/templates/user.tpl
onair/templates/index.tpl
и вообще все файлы, где используется конструкция:
во всех этих файлах нужно привести строку
к виду
У нас в base.css уже описан класс .pager, т.ч. дополнение в виде padding можно внести прямо туда.
А изменения намечаются такие:
вместо
.pager { line-height: 30px } .pager span.curr { padding: 2px 7px 3px 7px; margin-right: 5px; background: #666; border: 1px solid #333; color: #FFF }
нужно вписать
.pager { line-height: 30px; border-bottom: 3px solid #ccc; padding: 5px 0 10px 2px; } .pager span.curr { padding:3px 0; color:#fff; background:#cccccc url('images/bottom-pager.jpg') right bottom repeat-x; font-style:normal; font-weight:normal; padding: 2px 7px 28px 7px; margin-right: 5px; }
остальну часть класса .pager можно настроить по желанию, а можно использовать мой вариант
.pager a { padding: 2px 7px 3px 7px; margin-right: 5px; text-decoration: none; color: #ACACAC; } .pager a:hover { background: #eeeeee; color: #ACACAC; } .pager a.prev, .pager a.next, .pager a.first, .pager a.last { color: #ACACAC; } .pager a.prev:hover, .pager a.next:hover, .pager a.first:hover, .pager a.last:hover { color: #ACACAC; background: #eeeeee; }
.pager span.curr — класс отвечает за оформление номера текущей страницы, и для его атрибута background цвет можно назначить в соответствии с цветовой гаммой вашего сайта.
После этого останется только добавить файл bottom-pager.jpg в папку images темы оформления.
Если рисовать свой маркер для активной страницы лень, то скачать готовый файл bottom-pager.jpg + инструкцию можно тут
UPDATE
Развил идею, которую подал TuXoH ( чтобы пользователь не покидал страницу профиля, для смены своего статуса )
За основу взял его форму отправки данных:
<form method="POST" action="{$oRouter->getPathWeb()}/profile/{$oProfile->getLogin()}/status/save/" enctype="multipart/form-data"> <input type="hidden" name="user_id" value="{$oProfile->getId()}"> <input type="text" style="width: 70%; height: 20px" name="user_status" value="{$oProfile->getUserStatus()|htmlspecialchars}"> <input type="submit" value=" Ок "> <input type="hidden" name="form_token" value="{$form_token}"> </form>
Также в файле ( status.action.php )
строку:
header('Location: '.System_Router::getPathWeb().'/profile/'.$oSavedProfile->getLogin().'/status/saved/');
изменил на строку:
header('Location: '.System_Router::getPathWeb().'/profile/'.$oSavedProfile->getLogin().'');
в файл base.css
добавил класс для оформления всплывающего окна
.popup_editstatus { position: absolute; visibility: hidden; margin-top: -20px; margin-left: -110px; background: #F9F9F0; border: 1px solid #999999; width: 180px; height: 100px; }
В файл ( themes/default/templates/sample.profile_head.tpl )
вместо строки:
<td rowspan=2 valign="top"><a href="{$oRouter->getPathWeb()}/profile/{$oProfile->getLogin()}/status" title="Изменить статус"><img src="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/images/buttons/18/edit.gif" border="0" alt="Изменить статус" title="Изменить статус"></a></td>
поставил следующий код:
{literal} <script language="JavaScript"> <!--// var d=document function show (n) { if (n==1) d.all["l1"].style.visibility='visible' else d.all["l1"].style.visibility='hidden' } //--> </script> {/literal} <td rowspan=2 valign="top"><a href="javascript:void show(1)" title="Изменить статус"><img src="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/images/buttons/18/edit.gif" border="0" alt="Изменить статус" title="Изменить статус"></a> <div class="popup_editstatus" id="l1" name="l1"><div style="text-align: right;"> <small style="padding: 5px 7px 3px 7px; background: #800000"><a style="color: #FFF; text-decoration: none" href="javascript:void show(0)">Закрыть</a></small></div> <div style="width: 180; padding-bottom: 5px;" align="center"><br/> <form method="POST" action="{$oRouter->getPathWeb()}/profile/{$oProfile->getLogin()}/status/save/" enctype="multipart/form-data"> <input type="hidden" name="user_id" value="{$oProfile->getId()}"> <input type="text" style="width: 70%; height: 20px" name="user_status" value="{$oProfile->getUserStatus()|htmlspecialchars}"> <input type="submit" value=" Ок "> <input type="hidden" name="form_token" value="{$form_token}"> </form> </div> <small class="pale"> * html-теги запрещены</small> </div> </td>
Теперь при изменении статуса появляется такое вот безобразие:
Уточнение: следующий код
{literal} <script language="JavaScript"> <!--// var d=document function show (n) { if (n==1) d.all["l1"].style.visibility='visible' else d.all["l1"].style.visibility='hidden' } //--> </script> {/literal}
Нужно вставить лишь один раз,
в самое начало файла themes/default/templates/sample.profile_head.tpl
Вообще-то, догадываюсь, можно popup реализовать средствами встроенного jquery… так, наверное, правильнее будет. Не разбирался на эту тему, занят счас немного другим. Потому сделал быстренько, просто чтобы работало. Еще, пожалуй, нужно все используемые стили (как для div-ов так и для form) прописать в base.css для порядка.
P.S.
Я осознаю, что доработка оформления, не так важна, как работа над модулями и ядром в целом, поэтому прошу не относится к приведенной информации излишне серьезно.
Прекрасно понимая, что этот пост в свете текущих изменений на проекте (появление новых сборок), а также изменений грядущих в виде нового шаблона, может стать не актуальным,
я, все же, надеюсь что кому-то эти готовые решения будут полезны.
| tommyred |
9 июня 2009 00:23 |
комментариев: 17 |
 |
8,94 |
 |
|
просмотров: 2520 |
Комментарии:
Только зарегистрированные пользователи могут оставлять комментарии.
|
|
Мне нравиться, сейчас кофе налью и буду пробывать.
Топикстартеру респект и уважуха +1
Если человек добавляет тебя в друзья, то ты каким-либо образом можешь получить об этом информацию? На сколько я вижу, сейчас если человек добавил тебя в друзья, ты не узнаешь об этом пока не зайдёшь в егро профиль. Это так? Может следует сделать сделать отправку сообщения в верхнее меню. В котором будет извещение, что такой то юзер добавил вас в френды.
А заходить каждый раз в свой же профиль по меньшей мере неудобно.
+1
Но ведь серенькая иконка users_pale.gif имеет альт и тайтл в которых записано «Считает вас другом». При наведении на нее мышом всплывает соответственное текстовое сообщение. Если пользователь отвечает взаимностью — иконка становится цветной, альт и тайтл меняются на «Ваш друг!». Согласен, это не так наглядно как если бы был текст, но я решил что нужно чем-то пожертвовать ради экономии места. Если есть другое решение — с удовольствием его выслушаю.
А там уже, в профиле ты увидишь надпись «Считает Вас другом. Добавить в друзья?»
Понимаешь?
Меня добавил Вася в друзья. И мне генерируется письмо заголовка типа:
Вася добавил вас в друзья от 09.09 2009
и сообщение:
Я добавил вас в Друзья. Вы также всегда можете добавить меня в свои друзья.
Я тоже думал а поп апе! Но остановился пока на таком варианте как есть. у меня щас юзер видит свой статус полный под полем с текстом статуса. Сам юзер у меня щас видит статус в поле для ввода, собственно он его помнит и не обязательно дальше вдиеть конец текста, он его и редактирует условно говоря удобно. Админ же теперь у меня под полем редактирования чужих каментов теперь видит в виде текста и статус целиком. Удобно тоже безумно;) На всякий можешь потестить, приятно же;) Ещё я обнаружил у меня некоторую ошибку с выводом разным группам пользователей, терь всё разграничил и исправил права доступа и отображения.
Написать комментарий