Изменение иконок товара gamestores.ru

Хостинг игровых серверов
7erGO

7erGO

Прохожий
7 Фев 2018
75
56
30
https://vk.com/rustanydev
vk.com
Доброго времени суток.

Я не так давно в этом деле. И как говорится: "Было бы желание...". А оно у меня действительно было!

За недолгий срок, примерно с месяц, прочитав немного-немало статей, мануалов и "гуидов", подружившись немного с Bootstrap'ом (знающие поймут что это) я кое что начал понимать, думаю для старта сгодится. Ну и соответственно начал это всё пробовать изначально для себя. Пожалуй, на мой взгляд, я сделал достаточно неплохо, с учётом того что я новичок в этом деле, без опыта и с базовыми, даже меньше того, знаниями и их сроком получения не более чем с месяц.

В этом видео.... ой простите, не туда понесло :D в этом"гуиде" я хотел бы показать как сменить форму иконок, прозрачность фона и немного разного в магазине платформы gamestores.ru.

Всё это делается под синий стиль сайта, поэтому и все встречающиеся цвета будут с синими оттенками. Делается это на шаблоне дизайна "Название: Столица России capital.gamestores.ru "

Иконки будут как на скрине:
Было:
yppsx.jpg

Стало:
ypyWw.jpg

Сделать это достаточно просто, особенно для Вас это дело пару кликов. Идём в "Внешний вид", "Продвинутая конфигурация" и в поле CSS (псс, друже - вся сегодняшняя работа будет проводиться только в этом поле) вставляем код:
Код: 
.product {
    position: relative;
    border-radius: 200px;
    box-shadow: 0 15px 15px rgba(0,0,0,.9);
    margin: 10px;
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

Теперь по настройкам слегка:
border-radius: 200px; отвечает за само скругление, мне хотелось чтобы было именно круглым, но можно выставить значение в 20px либо 30px и будет также смотреться симпочтично.
box-shadow: 0 15px 15px rgba(0,0,0,.9); отвечает за тень от иконки товара.
margin: 10px; отвечает за размер самой иконки, чем больше значение тем она меньше, чем меньше значение тем иконка больше.

Далее когда мы наводим на иконку появляется цена и название, мне это не нравилось, поэтому я это убрал. В итоге у меня не видно цены и названия, что дает больше фантазий с работами над иконками. В томже разделе, в тоже поле ( CSS ) вставляем код:
Код: 
.product__price {
    padding: 0px;
    width: 0%;
    opacity: 0;
}
Далее нам нужно убрать надпись название товара, при наведении .... Для этого всё в томже разделе и в тоже поле вводим код:
Код: 
.product__name {
    padding: 0px;
    width: 0%;
}

Далее сделаем немного фон прозрачнее, добавив код:
Код: 
.xbox {
background: #30303000;
}
.xbox__body {
background: #3030304f;
}

Теперь немного анимируем наши иконки, причем анимация появится не только у иконки (при наведении) но и самих картинок внутри товара, а также шапки магазина. Всё туда же добавляем код:
Код: 
.product:hover{
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    .product:hover .product__image{
        animation: 1s ease-in-out alternate infinite aqwe backwards
    }

    .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
        color: #fff;
        background-color: #f1cc6a !important;
    }

    .roulette-item__image{
        animation: 1.5s ease-in-out alternate infinite aqwe backwards
    }

    .service__image{
        animation: 1s ease-in-out alternate infinite aqwe backwards
    }

    /*@include shake(15px, 15px, 1deg, 'shake-slow', 1);*/
    @keyframes aqwe{0%{transform: rotate(-4deg)}50%{transform: scale(1.05);box-shadow: 0 0px 0px rgba(0, 0, 0, .1), 0 15px 12px rgba(0, 0, 0, .05)}
        100%{transform: rotate(4deg)}}

Далее можно убрать саму шапку ( логотип ) магазина. Я себе убрал, мне не нравилось как смотрится с ней. Для этого добавляем код:
Код: 
.header-image {
    width: 0%;
}

Теперь по остальным частям, чтобы сделать и остальные элементы сайта более прозрачными. Добавляем код:
p.s.: /* текст */ можно удалять, я же это добавил для Вашего удобства, на работоспособность кода не влияет, если оставить.
Код: 
/* делает прозрачность блока с надписью "мониторинг" и "магазин" */
.xbox__header {
    background: #2828284f;
}

/* делает прозрачность блока поиска товаров */
.form-control {
    background-color: #28282887;
}

/* делает прозрачность прогресс бара (шкалы онлайна в мониторинге сервера) */
.progress {
    background: #28282859;
}

/* делает прозрачность верхнего блока, в котором находятся стандартные кнопки навигационного меню*/
.navbar {
    background: #28282859;
}

/* меняем цвет разделительных полос страницы*/
.xbox__body {
    padding: 20px;
    border-top: 3px solid #337ab7;
    border-bottom: 3px solid #337ab7;
}

Где  padding: 20px; отвечает за расстояние между полями блоке в мониторинга сервера.
3px отвечает за толщину разделительной полосы, а #337ab7; соответственно за её цвет

/* меняем цвет блока поиска*/
.form-control {
    border-radius: 2px;
    border: 1px solid #337ab7;
    color: #00BFFF;
}
где  border-radius: 2px; толщина самой границы блока, color: #00BFFF; отвечает за цвет текста которым будут писать в этом блоке,  border: 1px solid #337ab7; за толщину (  1px  ) и цвет (  #337ab7  ) границы блока поиска.

Так, на последок. Мы округлили иконки товаров, давайте теперь немного и сами блоки страницы магазина округлим. Вставляем:
Код: 
/* округление верхнего блока, главного, с навигационным меню*/
.navbar {
    border-radius: 0 0 30px 30px;

30px отвечает за угол округления

/* округление среднего блоке, на котором написано мониторинг и магазин*/
.xbox__header {
    border-radius: 30px 30px 0 0;
}
}

На этом я закончил делать свой сайт. НО можно добавить еще и округление нижних частей сайта, просто мне нравится именно как так смотрится, а далее ваше дело:
Код: 
/* округление нижнего блока*/
.xbox__footer {
    border-radius: 0 0 30px 30px;
}

На этом пожалуй, пока что, всё.
Не сочтите за рекламу, хотя что там рекламировать хз, сайт пуст, но вот моя работа наглядный пример что вышло : посмотреть
Теперь каждый, кто не шарит и просто копипастит коды, может себе позволить видоизменить свой магазинчик)

Спасибо за внимание!
С Уважением, 7erGO?!
 
Последнее редактирование:
  • Like
Реакции: Murad, Urust, Shining и 4 других
AARomanov

AARomanov

Сервер Ural Rust
Прохожий
22 Июл 2019
23
13
30
vk.com
Теперь по остальным частям, чтобы сделать и остальные элементы сайта более прозрачными. Добавляем код:
p.s.: /* текст */ можно удалять, я же это добавил для Вашего удобства, на работоспособность кода не влияет, если оставить.

Не получилось сделать прозрачность и окружность. (Иконки сделал хорошо)
Что не так делаю? Ссылка на магазин
Desktop Screenshot 2020.03.12 - 20.05.52.30.png
CSS: 
.product {
    position: relative;
    border-radius: 30px; //Окружность
    box-shadow: 0 15px 15px rgba(0,0,0,.9); //Тень
    margin: 10px; //Размер иконки
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
.product__price { //Цена предметов
    padding: 0px;
    width: 0%;
    opacity: 0;
}
.product__name { //Название предметов
    padding: 5px;
    width: 55%;
    opacity: 1;
}
.xbox { //Прозрачность фона
background: #30303000;
}
.xbox__body {
background: #3030304f;
}
.product:hover{ //Анимация иконок
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    .product:hover .product__image{
        animation: 1s ease-in-out alternate infinite aqwe backwards
    }

    .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
        color: #fff;
        background-color: #f1cc6a !important;
    }

    .roulette-item__image{
        animation: 1.5s ease-in-out alternate infinite aqwe backwards
    }

    .service__image{
        animation: 1s ease-in-out alternate infinite aqwe backwards
    }
@keyframes aqwe{0%{transform: rotate(-4deg)}50%{transform: scale(1.05);box-shadow: 0 0px 0px rgba(0, 0, 0, .1), 0 15px 12px rgba(0, 0, 0, .05)} //@include shake(15px, 15px, 1deg, 'shake-slow', 1);
        100%{transform: rotate(4deg)}}
.header-image { //Шапка (логотип) магазина.
    width: 0%;
}
.xbox__header { // делает прозрачность блока с надписью "мониторинг" и "магазин"
    background: #2828284f;
}
.form-control { // делает прозрачность блока поиска товаров
    background-color: #28282887;
}
.progress { // делает прозрачность прогресс бара (шкалы онлайна в мониторинге сервера)
    background: #28282859;
}
.navbar { // делает прозрачность верхнего блока, в котором находятся стандартные кнопки навигационного меню.
    background: #28282859;
}
.xbox__body { // меняем цвет разделительных полос страницы.Где  padding: 20px; отвечает за расстояние между полями блоке в мониторинга сервера.
3px отвечает за толщину разделительной полосы, а #337ab7; соответственно за её цвет
    padding: 20px;
    border-top: 3px solid #337ab7;
    border-bottom: 3px solid #337ab7;
}
.form-control { // меняем цвет блока поиска. Где  border-radius: 2px; толщина самой границы блока, color: #00BFFF; отвечает за цвет текста которым будут писать в этом блоке,  border: 1px solid #337ab7; за толщину (  1px  ) и цвет (  #337ab7  ) границы блока поиска.
    border-radius: 2px;
    border: 2px solid #337ab7;
    color: #00BFFF;
}
.navbar { // округление верхнего блока, главного, с навигационным меню
    border-radius: 0 0 20px 20px;
}
 
Последнее редактирование:
  • Like
Реакции: 7erGO и Басотник
AARomanov

AARomanov

Сервер Ural Rust
Прохожий
22 Июл 2019
23
13
30
vk.com
AARomanov написал(а):
Теперь по остальным частям, чтобы сделать и остальные элементы сайта более прозрачными. Добавляем код:
p.s.: /* текст */ можно удалять, я же это добавил для Вашего удобства, на работоспособность кода не влияет, если оставить.

Не получилось сделать прозрачность и окружность. (Иконки сделал хорошо)
Что не так делаю? Ссылка на магазин
Посмотреть вложение 5213
CSS: 
.product {
    position: relative;
    border-radius: 30px; //Окружность
    box-shadow: 0 15px 15px rgba(0,0,0,.9); //Тень
    margin: 10px; //Размер иконки
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
.product__price { //Цена предметов
    padding: 0px;
    width: 0%;
    opacity: 0;
}
.product__name { //Название предметов
    padding: 5px;
    width: 55%;
    opacity: 1;
}
.xbox { //Прозрачность фона
background: #30303000;
}
.xbox__body {
background: #3030304f;
}
.product:hover{ //Анимация иконок
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    .product:hover .product__image{
        animation: 1s ease-in-out alternate infinite aqwe backwards
    }

    .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
        color: #fff;
        background-color: #f1cc6a !important;
    }

    .roulette-item__image{
        animation: 1.5s ease-in-out alternate infinite aqwe backwards
    }

    .service__image{
        animation: 1s ease-in-out alternate infinite aqwe backwards
    }
@keyframes aqwe{0%{transform: rotate(-4deg)}50%{transform: scale(1.05);box-shadow: 0 0px 0px rgba(0, 0, 0, .1), 0 15px 12px rgba(0, 0, 0, .05)} //@include shake(15px, 15px, 1deg, 'shake-slow', 1);
        100%{transform: rotate(4deg)}}
.header-image { //Шапка (логотип) магазина.
    width: 0%;
}
.xbox__header { // делает прозрачность блока с надписью "мониторинг" и "магазин"
    background: #2828284f;
}
.form-control { // делает прозрачность блока поиска товаров
    background-color: #28282887;
}
.progress { // делает прозрачность прогресс бара (шкалы онлайна в мониторинге сервера)
    background: #28282859;
}
.navbar { // делает прозрачность верхнего блока, в котором находятся стандартные кнопки навигационного меню.
    background: #28282859;
}
.xbox__body { // меняем цвет разделительных полос страницы.Где  padding: 20px; отвечает за расстояние между полями блоке в мониторинга сервера.
3px отвечает за толщину разделительной полосы, а #337ab7; соответственно за её цвет
    padding: 20px;
    border-top: 3px solid #337ab7;
    border-bottom: 3px solid #337ab7;
}
.form-control { // меняем цвет блока поиска. Где  border-radius: 2px; толщина самой границы блока, color: #00BFFF; отвечает за цвет текста которым будут писать в этом блоке,  border: 1px solid #337ab7; за толщину (  1px  ) и цвет (  #337ab7  ) границы блока поиска.
    border-radius: 2px;
    border: 2px solid #337ab7;
    color: #00BFFF;
}
.navbar { // округление верхнего блока, главного, с навигационным меню
    border-radius: 0 0 20px 20px;
}
Нажмите для раскрытия...

Всё получилось!
Хочу иконки сделать прозрачными, сейчас буду искать как и где.
Desktop Screenshot 2020.03.12 - 22.28.31.45.png

CSS: 
.colqq {
    width: 20%;
    clear: none !important;
}

.product {
    position: relative;
    border-radius: 10px;
    box-shadow: 0 15px 15px rgba(0,0,0,.9);
    margin: 10px;
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
.product__name { //Название предметов
    padding: 0px;
    width: 0%;
    opacity: 0;
}
.navbar {
    background: #28282859;
}
.product:hover{ //Анимация иконок
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.product:hover .product__image{
    animation: 1s ease-in-out alternate infinite aqwe backwards
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
color: #fff;
    background-color: #f1cc6a !important;
}
.roulette-item__image{
    animation: 1.5s ease-in-out alternate infinite aqwe backwards
}
.service__image{
    animation: 1s ease-in-out alternate infinite aqwe backwards
}
@keyframes aqwe{0%{transform: rotate(-4deg)}50%{transform: scale(1.05);box-shadow: 0 0px 0px rgba(0, 0, 0, .1), 0 15px 12px rgba(0, 0, 0, .05)} //@include shake(15px, 15px, 1deg, 'shake-slow', 1);
100%{transform: rotate(4deg)}}
.xbox {
    background-color: rgba(0, 0, 0, 0.1);
}
.xbox__body {
    background-color: rgba(0, 0, 0, 0.3);
}
.xbox__header {
    background-color: rgba(0, 0, 0, 0.6);
}
.form-control {
    background-color: rgba(89, 36, 36, 0.4);
}
.progress {
    background-color: rgba(89, 36, 36, 0.4);
}
.navbar {
    background-color: rgba(0, 0, 0, 0.6);
}
.xbox__body {
    padding: 10px;
    border-top: 5px solid #592424;
    border-bottom: 5px solid #592424;
}
.form-control {
    border-radius: 2px;
    border: 2px solid #592424;
    color: #ff0000;
}
 
  • Like
Реакции: 7erGO и Басотник
Басотник

Басотник

Команда форума
Продавец
Меценат
Местный
Обитатель
Прохожий
21 Окт 2017
1,619
329
Красивое оформление
 
  • Like
Реакции: AARomanov
AARomanov

AARomanov

Сервер Ural Rust
Прохожий
22 Июл 2019
23
13
30
vk.com
Немного переделал CSS под себя. Кому интересно я всё оставляю тут.
Desktop Screenshot 2020.03.13 - 19.10.20.63.pngDesktop Screenshot 2020.03.13 - 19.11.12.16.png
CSS: 
.product__price {
    padding: 3px;
    width: 0%;
    opacity: 1;
    background: rgba(0, 0, 0, 0.0);
}
.colqq {
    width: 20%;
    clear: none !important;
}

.product {
    position: relative;
    border-radius: 15px;
    box-shadow: 0 15px 15px rgba(0,0,0,.9);
    margin: 1px;
   background: rgba(0, 0, 0, 0.0);
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
.product__name { //Название предметов
    padding: 0px;
    width: 0%;
    opacity: 0;
}
.navbar {
    background: #28282859;
}
.product:hover{ //Анимация иконок
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.product:hover .product__image{
    animation: 1s ease-in-out alternate infinite aqwe backwards
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
color: #fff;
    background-color: #f1cc6a !important;
}
.roulette-item__image{
    animation: 1.5s ease-in-out alternate infinite aqwe backwards
}
.service__image{
    animation: 1s ease-in-out alternate infinite aqwe backwards
}
@keyframes aqwe{0%{transform: rotate(-4deg)}50%{transform: scale(1.05);box-shadow: 0 0px 0px rgba(0, 0, 0, .1), 0 15px 12px rgba(0, 0, 0, .05)} //@include shake(15px, 15px, 1deg, 'shake-slow', 1);
100%{transform: rotate(4deg)}}
.xbox {
    background-color: rgba(0, 0, 0, 0.1);
}
.xbox__body {
    background-color: rgba(0, 0, 0, 0.3);
}
.xbox__header {
    background-color: rgba(0, 0, 0, 0.6);
}
.form-control {
    background-color: rgba(89, 36, 36, 0.4);
}
.progress {
    background-color: rgba(89, 36, 36, 0.4);
}
.navbar {
    background-color: rgba(0, 0, 0, 0.6);
}
.xbox__body {
    padding: 10px;
    border-top: 5px solid #592424;
    border-bottom: 5px solid #592424;
}
.form-control {
    border-radius: 2px;
    border: 2px solid #592424;
    color: #ff0000;
}
 
  • Like
Реакции: 7erGO, Nixsy и Басотник
7erGO

7erGO

Прохожий
7 Фев 2018
75
56
30
https://vk.com/rustanydev
vk.com
PainGame написал(а):
Что то не понял, А как сделать видео фон?
Нажмите для раскрытия...
Сделать это достаточно просто, особенно для Вас это дело пару кликов. Идём в "Внешний вид", "Продвинутая конфигурация" и в поле CSS вставляем код:

<video loop="true" muted="true" autoplay="true" playsinline="true" style="width: 100%; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1;"><source src="https://files.facepunch.com/s/rust/f14016" type="video/mp4"></video>
 
P

PainGame

Новичек
6 Янв 2021
6
1
7erGO написал(а):
Сделать это достаточно просто, особенно для Вас это дело пару кликов. Идём в "Внешний вид", "Продвинутая конфигурация" и в поле CSS вставляем код:

<video loop="true" muted="true" autoplay="true" playsinline="true" style="width: 100%; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1;"><source src="https://files.facepunch.com/s/rust/f14016" type="video/mp4"></video>
Нажмите для раскрытия...
Спасибо родной!
 
pauseg

pauseg

Новичек
21 Апр 2021
3
0
onetrix.ru
7erGO написал(а):
Сделать это достаточно просто, особенно для Вас это дело пару кликов. Идём в "Внешний вид", "Продвинутая конфигурация" и в поле CSS вставляем код:

<video loop="true" muted="true" autoplay="true" playsinline="true" style="width: 100%; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1;"><source src="https://files.facepunch.com/s/rust/f14016" type="video/mp4"></video>
Нажмите для раскрытия...



UP.

Разобрался как поставить фон, по методу автора не работает.

Рабочий метод - Внешний вид / Виджеты / Добавить виджет / Пользовательский виджет / в поле HTML вставляем код :


HTML: 
<video loop="true" muted="true" autoplay="true" playsinline="true" style="width: 100%; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1;"><source src="[URL]https://files.facepunch.com/s/rust/f14016[/URL]" type="video/mp4"></video>


всё. если помог ставь лайк
 
Последнее редактирование:
7erGO

7erGO

Прохожий
7 Фев 2018
75
56
30
https://vk.com/rustanydev
vk.com
pauseg написал(а):
UP.

Разобрался как поставить фон, по методу автора не работает.

Рабочий метод - Внешний вид / Виджеты / Добавить виджет / Пользовательский виджет / в поле HTML вставляем код :


HTML: 
<video loop="true" muted="true" autoplay="true" playsinline="true" style="width: 100%; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1;"><source src="[URL]https://files.facepunch.com/s/rust/f14016[/URL]" type="video/mp4"></video>


всё. если помог ставь лайк
Нажмите для раскрытия...
Всё работает клик (не реклама) - создавался на момент когда делался этот гайд. как видишь всё работает досихпор.
Скрин виджета:
1620122007870.png
 
pauseg

pauseg

Новичек
21 Апр 2021
3
0
onetrix.ru
7erGO написал(а):
Всё работает клик (не реклама) - создавался на момент когда делался этот гайд. как видишь всё работает досихпор.
Скрин виджета:
Посмотреть вложение 6454
Нажмите для раскрытия...
"Внешний вид", "Продвинутая конфигурация" и в поле CSS вставляем код:
Нажмите для раскрытия...

вписaть код в CSS
и вписать код в виджет
2 разные вещи
 
7erGO

7erGO

Прохожий
7 Фев 2018
75
56
30
https://vk.com/rustanydev
vk.com
pauseg написал(а):
вписaть код в CSS
и вписать код в виджет
2 разные вещи
Нажмите для раскрытия...
Я просто выше не то скопипастил, речь шла о виджете. И так как выше благодарили, значит они поняли о чем речь и все норм у них. ПО самому коду понятно что он не для css
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу