Перейти к содержанию

Кнопка с ссылкой

Pashok(one)

Автор Pashok(one)
в ББКоды IP.Board

 Поделиться

Рекомендуемые сообщения

Pashok(one) Ментор

Pashok(one)

Опубликовано
Опубликовано

index.php?app=downloads&module=display&s

Название: Кнопка с ссылкой

Добавил: Pashok(one)

Добавлен: 18 Окт 2012

Категория: ББКоды IP.Board

bb код "кнопка", очень удобный, кнопка более заметна чем обычная ссылка.

Для работоспособности кода :

Добавляем данную строку в ipbstyles.css (в самый низ)


.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

По всем проблемам с бб кодом обращаться ко мне.

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

Обновленно

Дополнительный скриншот

f9ffc566.jpg

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

Пробоваю.

Ни хочет... Как пользоваться? Просто кидаешь и она сама в кнопку? Я правильно понимаю?

При установке хука:

Так и должно быть?

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

Пробоваю.

Ни хочет... Как пользоваться? Просто кидаешь и она сама в кнопку? Я правильно понимаю?

При установке хука:

Так и должно быть?

Это bb код выбирай в соответственном меню+залей код css себе в самый низ

+

5131d8d1.png

Внешний вид>bb-коды>в самом низу (скачай последню версию кнопок. я её уже залил

00d2482a.png

Вот тут вот устанавливать.

А далее вот тут выбираешь делаешь всё по инструкции, и воаля кнопка готова!

b363e2f2.jpg

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

А я как хук устанавливал :dance:

Чайник чоуш... :sorry:

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

А я как хук устанавливал :dance:

Чайник чоуш... :sorry:

Как установишь отпишись, мне будет приятно :)

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано 


.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}
Открой Файл ipbstyles.css
  • Внешний вид >
  • Управление стилями и шаблонами >
  • Управление шаблонами ваш стиль
  • В этом файле : 9bec5670.png
и добавь в самый низ это : 

.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

Ну ни дурак же я, добавил конечно. Только ты пишешь ipbstyle а у меня он ipb_style есть разница? Не думаю.

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

Ну ни дурак же я, добавил конечно. Только ты пишешь ipbstyle а у меня он ipb_style есть разница? Не думаю.

кинь ссылку на свой сайт

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

После обновления кеша сама кнопка появилась таки но:

core.php

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано (изменено)

После обновления кеша сама кнопка появилась таки но:

post-6-0-17607000-1365612433.png

Измени тему и заного правильно напиши и ссылку на сайт кинь

Измени тему и заного правильно напиши и ссылку на сайт кинь

Скачай заного бб_код и поставь по верх того всё должно будет работать

271f918d.jpg

Всё работает, переустанови и смотри куда и что прописываешь, пример кода :


[download='__ipbmafia.ru']Тест кнопки (NEW)[/download]

Изменено пользователем Pashok(one)
Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

:yahoo: :yahoo: :yahoo:

post-8093-0-71649900-1365664392_thumb.jp

Наконецто :))))

Админы, del все посты кроме

Ссылка на комментарий
Поделиться на другие сайты
_Dark_ Ветеран

_Dark_

Опубликовано
Опубликовано

Админы, del все посты кроме #13

Нет.

А вообще BB-код бесполезный, по крайней мере мне так кажется.

Не вижу смысла выделять определенную ссылку как какую-то кнопку, однородным все должно быть.

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

Все должно быть однородным, прошу убрать выделение кнопки "скачать":

post-8496-0-42350300-1365713713_thumb.jp

Ну вот как-то так. Иногда полезно для красивости сообщения выделять ссылку кнопочкой.

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

Все должно быть однородным, прошу убрать выделение кнопки "скачать":

post-8496-0-42350300-1365713713_thumb.jp

Ну вот как-то так. Иногда полезно для красивости сообщения выделять ссылку кнопочкой.

Немного не понял, ты говоришь мне изменить стиль кнопки?

Ссылка на комментарий
Поделиться на другие сайты
Respected Солдат мафии

Respected

Опубликовано
Опубликовано

За кнопку отвечает класс .download_button их ipdownloads.css

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

Мое сообщение было ответом на это:

А вообще BB-код бесполезный, по крайней мере мне так кажется.

Не вижу смысла выделять определенную ссылку как какую-то кнопку, однородным все должно быть.

Ну раз однородным то и "Скачать" надо сделать просто ссылкой.
Ссылка на комментарий
Поделиться на другие сайты
_Dark_ Ветеран

_Dark_

Опубликовано
Опубликовано

Все должно быть однородным, прошу убрать выделение кнопки "скачать":

Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

Ссылка на комментарий
Поделиться на другие сайты
Pashok(one) Ментор

Pashok(one)

Опубликовано
  • Автор
Опубликовано

Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

Вот это ты расписал Оо

Ссылка на комментарий
Поделиться на другие сайты
podvorie Восходящая звезда

podvorie

Опубликовано
Опубликовано

Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

Ну а если я хочу так же на дверь повесить ручку только не используя структурных элементов, как то врезанный на заводе беспонтовый замок "крокодил", а красивенькую причиндалину "аллигатор". Разве нельзя? :sorry: А мне нравится, и пользуны мои оценили пользуются (пока правда больше балуются) оне у меня тормоза... Сложно привыкают к новому и хорошему...
Ссылка на комментарий
Поделиться на другие сайты
Respected Солдат мафии

Respected

Опубликовано
Опубликовано

Ну так я же написал, к этой ссылке прицепляется класс .download_button, который делает её такой кнопкой. Можно удалить все параметры класса и она будет выглядеть обычной ссылкой.

Ссылка на комментарий
Поделиться на другие сайты
  • 10 месяцев спустя...
kovboi Основной

kovboi

Опубликовано
Опубликовано

все хорошо и прекрасно

вопрос в другом

я ставлю скачивать файлы на 4-5 ФО

должна быть альтернатива для людей

как сообразить кнопки на ФО в бб кодах а не на один?

 

сейчас вставляю просто по шаблону заготовленому

спасибо

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...