Страница 1 из 11
Модератор форума: dotbot 
Сообщество uCoz » Архивариус » Корзина » Как из этого сделать кнопочку ? (Уверен что это не сложно просто нужно знать как.)
Как из этого сделать кнопочку ?
Gidroballon
Сообщений: 17
Репутация: 0

Сообщение # 1 | 07:58:42
Помогите разобраться.
Это в глобальном блоке.
Код
<div class="cnt oh"> <div class="process-block" data-animated="fadeInUp" > <i class="fa fa-lightbulb-o"></i> <span class="process-next"><i class="fa fa-chevron-right"></i></span><div class="process-name">-1</div></div>

это в CSS
Код
#process {
background: url(бла бла) center fixed no-repeat;
background-size: cover;
}
#process .section {  
padding-bottom: 70px;
}
.process-block {  
float: left;  
width: 210px;
height: 140px;  
margin-bottom: 30px;  
overflow: hidden;
}
.process-block:last-child {  
width: 120px;
}
.process-block > .fa {  
display: block;  
width: 120px;  
height: 80px;  
line-height: 80px;  
font-size: 36px;  
text-align: center;  
float: left;
}
.process-block .process-next {  
display: block;
float: left;  
width: 90px;  
height: 80px;  
line-height: 80px;  
font-size: 18px;  
text-align: center;
}
.process-name {  
clear: both;  
color: #fff;  
width: 120px;  
text-align: center;  
line-height: 20px;  
padding-top: 20px;  
font-size: 14px;  
text-transform: uppercase;
}
Подскажите Пожалуйста популярно что и куда прописать чтобы это стало кнопочкой с ссылкой. Спасибо
Gidroballon
Сообщений: 17
Репутация: 0

Сообщение # 2 | 08:03:59
Прикрепления: 5489689.jpg(52Kb)
Хард
Сообщений: 446
Репутация: 156

Сообщение # 3 | 11:35:18
Gidroballon, предоставьте ссылку на ваш сайт.

Модератор в отставке :D
Yuri_G
Модератор форума
Сообщений: 4195
Репутация: 899

Сообщение # 4 | 11:37:05
Gidroballon, можно сделать проще без кучи ненужных стилей, что вы выше привели в пример:
Цитата
<div class="knopka-button"><a href="ссылка по которой будем переходить при нажатии на кнопку">Название нашей кнопки</a></div>
Данный код разместить в том месте где должна отображаться кнопка
Поместить в таблицу стилей CSS:
Код
.knopka-button {
color: white;
padding: 5px 5px 5px 5px;
background: rgb(58, 116, 166);
display: inline-block;
border-radius: 2px;
border: 1px solid #068CEC;
}
.knopka-button a {
color: white;
text-decoration:none;
}
Все!

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
Gidroballon
Сообщений: 17
Репутация: 0

Сообщение # 5 | 11:49:33
Хард, ссылка на мой сайт Спасибо

Добавлено (10 Ноя 2014, 11:49:33)
---------------------------------------------
Ucoz_fan, Вы просто не представляете как сильно я рад Вашему ответу. Это не стёб. Так приятно что то новое узнать.

Yuri_G
Модератор форума
Сообщений: 4195
Репутация: 899

Сообщение # 6 | 12:06:48
Gidroballon, перейти в Панель управления - Главная - Дизайн - Управление дизайном - Глобальный блок(PROCESS), далее найти подобный код:
Цитата
<div class="process-name">-1</div>
и заменить на:
Цитата
<div class="process-name"><a href="ссылка куда перейти по нажатию">название кнопки</a></div>
Далее в таблице стилей CSS(перейти в Панель управления - Главная - Дизайн - Управление дизайном(CSS)) произвести небольшие корректировки находим строку номер 484:
Цитата
.process-name {
clear: both;
box-shadow: inset 0 0 0 2px #fff;
color: #fff;

width: 120px;
text-align: center;
line-height: 20px;
padding-top: 10px;
padding-bottom:10px;

font-size: 14px;
text-transform: uppercase;
}

Дополнительно добавить чуть ниже стили:
Цитата
.process-name a {color: white!important;}
.process-name:hover {
box-shadow: inset 0 0 0 2px rgba(255,214,0,0.88);
color: #fff!important;
}
Выделенное красным это внесенные правки.

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
Gidroballon
Сообщений: 17
Репутация: 0

Сообщение # 7 | 13:11:34
Ucoz_fan, И ещё миллион спасибо. Всё получилось. Всёполучилось. И первый, и второй вариант. А могу ли я сделать
то же с
process-block 456 строка встилях CSS.

Потрясающе!
Yuri_G
Модератор форума
Сообщений: 4195
Репутация: 899

Сообщение # 8 | 14:12:14
Цитата Gidroballon ()
process-block
cтили данного класса отвечают за радиус то есть расстояние между блоками(не рекомендую что-то в данных стилях менять так как отображение блоков поменяется не в лучшую сторону и блоки могут сбиться и выстроить вертикально, что есть не хорошо).

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
Gidroballon
Сообщений: 17
Репутация: 0

Сообщение # 9 | 14:51:46
Ucoz_fan, Спасибо. Какой же я нудный. Честно, последний вопрос. Можно ли сделать кнопкой то на что указывает стрелочка в рисунке ?


Чувствую что можно. Интуиция мне подсказывает что придётся Каждую кнопочку как бы отдельно делать. Так как они вроде часть целого элемента. Спасибо за терпение.
Прикрепления: 2358586.jpg(28Kb)
Yuri_G
Модератор форума
Сообщений: 4195
Репутация: 899

Сообщение # 10 | 15:29:10
Цитата Gidroballon ()
Можно ли сделать кнопкой то на что указывает стрелочка в рисунке ?
можно сделать содержимое, а именно элемент который находится внутри сделать кнопкой и кликабельным, но здесь аналогично каждому классу нужно прописывать свои стили на подобии:
Цитата
i.fa-pencil:before {visibility:hidden;}
далее в нужном нам месте прописываем в блоке ссылку:
Цитата
<a href="ссылка" class="fa-pencil"></a>
Это все как пример по одному пункту и для одного класса, так как для каждого нужно прописывать

Помогу в переводе сайта на SSL / https (поправлю базы данных если у вас крупный проект или форум), писать на почту yurij.geruk@gmail.com
Gidroballon
Сообщений: 17
Репутация: 0

Сообщение # 11 | 16:01:09
Ucoz_fan, Человечище! Спасибо. Очень помогли!

Добавлено (10 Ноя 2014, 16:01:09)
---------------------------------------------
Ucoz_fan, Человечище! Спасибо. Очень помогли!

Сообщество uCoz » Архивариус » Корзина » Как из этого сделать кнопочку ? (Уверен что это не сложно просто нужно знать как.)
Страница 1 из 11
Поиск: