Как сделать кнопочку подписка в 2 раза крупнее???

Вопросы
Вопрос по дизайну так сказать:

как сделать кнопку подписка в 2 раза крупнее!!! такой как она была в скине хабр в версии 0.2

И как добавить к ней текстовое описание на странице Блога??

15 комментариев

avatar
А где эта кнопка находитья?
avatar 
.profile-blog .action li.join a { display: block; height: 10px; width: 10px; background:  url(../images/icons.gif) no-repeat scroll 0 -250px; }
.profile-blog .action li.join a:hover { background: url(../images/icons.gif) no-repeat scroll -10px -250px; }
.profile-blog .action li.join.active a { background: url(../images/icons.gif) no-repeat scroll -10px -250px; }

если не ошибаюсь, то что-то из этого
avatar
Вообще все кнопки сейчас находятся в одном файле icons.gif. И далее кнопка выбирается путем позиционирования этой картинки.

Чтобы увеличить размер кнопки надо перерисовать этот файл и исправить позиционирование в CSS для этих кнопок и всех, что находятся правее/ниже.
avatar
лучше сделать отдельную иконку в отдельном файле
avatar
или так :-)
avatar
это точно.
Я на днях буду переделывать кнопку «Вступить в блог» — она ведь просто микроскопическая, ее юзеры просто не видят!
avatar
а я вот перерисовал уже как то


и заодно добавление в избренное, а то это избранное слишком прозрачное и не заметное
avatar
забирайте, кому нужно. это png24 с прозрачностью.
avatar
я извиняюсь за наглость, а как собственно вставить это? какие файлы менять и какие стили прописывать?
поделись <:-)
avatar
а всё оч просто
в style.css
находишь класс

.people.top-blogs .join a

меняешь там аттрибут background
на 

background:transparent url(http://style.in.ua/i/tmp/connect_48x48.png) no-repeat scroll 0 0;

аттрибут width устанавливаешь равным 48px, аттрибут height устанавливаешь 48px

дальше, находишь класс
.people.top-blogs .join a:hover
и меняешь аттрибут background
на 

background:transparent url(http://style.in.ua/i/tmp/connect_48x48.png) no-repeat scroll 0 -48px

это для не подключенных блогов
дальше меняем всё только наоборот для подключенных
находишь класс
.people.top-blogs .join.active a
и меняешь background на 

background:transparent url(http://style.in.ua/i/tmp/connect_48x48.png) no-repeat scroll 0 -48px !important


только у всех аттрибутов путь к картинке указывай свой :)

avatar
в общем вот как должны классы в style.css выглядеть:


.people.top-blogs .join a:hover {
background:transparent url(../images/connect_48x48.png) no-repeat scroll 0 0;
}
.people.top-blogs .join.active a {
background:transparent url(../images/connect_48x48.png) no-repeat scroll 0 -48px !important;
}

.people.top-blogs .join a {
background:transparent url(../images/connect_48x48.png) no-repeat scroll 0 0;
display:block;
height:48px;
margin:0 auto;
outline-style:none;
outline-width:medium;
width:48px;
}
avatar
если кнопка для тебя слишком большая — уменьши её до нужных размеров и пропиши соответствующие смещения и размеры в классах.
avatar
а. забыл добавить — если хочешь чтобы кнопка смотрелась нормально и в IE6, нужно будет добавить хак _background:none и после него фильтр

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/connect_48x48.png', sizingMethod='crop');

либо сделать кнопку png 8 бит без прозрачности, добавив какой-то цвет на бэкграунд кнопки.
avatar
Вставил!
И не только туда но и в сам блог!
теперь там гигантская кнопка!
avatar
:)

я не зря дал кнопку в png24 так как размер её не для этого скина. поэтому если нужно — уменьши её до нужного размера.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.