-Музыка

 -Подписка по e-mail

 

 -Поиск по дневнику

Поиск сообщений в Интернет_Активисты

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 11.06.2008
Записей:
Комментариев:
Написано: 771


Дизайн страницы на Best Persons

Воскресенье, 29 Июня 2008 г. 04:47 + в цитатник
nps все записи автора Здравствуйте. Есть там такая функция, как подглючение своего CSS, код которого после парсинга (кроме удаления комментариев ничего не заметил, но всё же) помещается в http://username.bestpersons.ru/style.jsp. Предлагаю к просмотру своё недооформление и прошу делиться советами как сделать то или иное изменение на странице.

На данный момент получилось:
1.jpg - upload images with Picamatic

CSS

/* Заголовок первый */
.toppanel {
background:none !important; /* Удаление фана */
border:solid 1px #DDD;border-top:0px} /* Светло-серая рамка, кроме верхнего края */

/* Заголовок средний */
.cclogo img{display:none;}/* widht:1px;height:1px Сворачивание логотипа и ссылки (остаётся же "личный кабинет") на главную */
.cclogo a:after {content:url(http://habrahabr.ru/i/habr.gif);} /* Так логотип остаётся ссылкой */
/*.cclogo a:after {content: "Best Persons" } Чего-то не то */
/*.cclogo {
background: #fff url('http://habrahabr.ru/i/habr.gif'); /* Свёрнутый логотип Хабрахабра в фоне */
width:240px; height:130px /* Рамзеры блока под логотип */
}*/

/* Заголовок последний */
#bp_head_wrap1 {background:none !important} /* Удаление градиента */
#bp_head_wrap2 {background:none !important} /* Удаление фоновой картинки */
#bp_head {background:none !important; border:solid 1px #DDD} /* Белый фон и рамочка*/
#bp_status {color:#4899bf}

/* Записи */
#bp_posts{background:none !important;border:0 !important} /* Удаление фона */
#bp_posts_title h1 a img{display:none !important} /* Неправильная иконка (не сработало) */
#bp_posts h1{text-decoration:underline !important} /* Подчеркивание назад*/
#post_title {font-weight:normal !important} /* Нежирный текст, т.к. большей микроблоговых записей (не сработало) */
#bp_readall{display:none} /* Скрытие кнопки перехода ко всем записям */

/* Комментарии/стена */
#togglenewcomment {text-decoration:underline !important;border:none !important} /* Обычное подчеркивание */

/* Друзья */
#bp_friends{border:0 !important;} /* Не нужна там рамка */
#bp_myfriends a img{display:none} /* Неправильная иконка */

#bp_informers{display:none} /* Лишняя информация */

/* Подвал */
.hline {display:none} /* Скрытие разделитной линии */
.footer div,.footer a{color:gray} /* Серым текстом */
.footer div{text-align:right}

a#addsites:after { content: "ик" } /* Вот такое в IE не работает */
/* Изменение ссылки "Редактировать" на иконку с подсказкой */
a#editsites{color:white !important}a#editsites:hover{color:#4899bf !important}
a#editumeu{color:white !important}a#editumeu:hover{color:#4899bf !important}
a#edittext{color:white !important}a#edittext:hover{color:#4899bf !important}
a#editother{color:white !important}a#editother:hover{color:#4899bf !important}
a#editcontacts{color:white !important} a#editcontacts:hover{color:#4899bf !important}


Получается черновой невалидный вариант, но из этого, думаю, можно сделать красиво.
Много important'ов из-за основного кода прямо на странице, а местами - прямо inline.
Комментариев к коду - с излишком. Прошу помочь с:
Заменой зеленых кнопочек;
Перемещением блока друзей в правую колонку (с учетом того что обтекает левая колонка, а не правая);
Менее глючным отступом комментариев;
Сдвигом верхних пяти ссылок левее.

Был дизайн-пример у Unno, но с большой переделкой, видимо, он был брошен.
Спасибо htmlbook за справку и создателям Firebug за лучший инструмент.

Update (новая иконка Google в разделе контактов):
#cont5 img{display:none} /* Ух-ты, работает */
#cont5 div.si_left {background:url(http://66.102.9.104/favicon.ico);width:16px;height:16px}
(Но всё же нужна картинка без полупрозрачности)


Update 2 {правильная иконка ICQ (динамичная):
#cont1 img{display:none}
#cont1 div.si_left {background:url(http://web.icq.com/whitepages/online?icq=314934927&img=27);
width:16px;height:16px}

На месте моего девятизнака вписать свой. Если хочется просто зеленый цветок,
то заменить на ссылку http://status.icq.com/27/online1.gif
(Осталось только иконку телефона симпатичную найти)
Рубрики:  Полезные Статьи
bestpersons.ru
Вопросы
Метки:  

Gite   обратиться по имени Понедельник, 30 Июня 2008 г. 12:11 (ссылка)
Здорово сделал! Молодец.
Надо еще вариантов *)
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 30 Июня 2008 г. 13:39ссылка
nps
Например спереть дизайн из ВКонтакте)
немного_иронии   обратиться по имени Вторник, 01 Июля 2008 г. 17:40 (ссылка)
а я скомуниздила код с сайта http://www.pimp-my-profile.com/,правда изменился почему-то только фон...
Ответить С цитатой В цитатник
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку