Новости Joomla

NorrCompetition 3.0 — новые возможности компонента конкурсов и голосований для Joomla 6

Релиз NorrCompetition 3.0 — крупное обновление расширения для проведения конкурсов и голосований в Joomla.

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

Релиз безопасности Joomla 6.1.1 и Joomla 5.4.6

Проект Joomla! рад сообщить о выходе Joomla 6.1.1 и Joomla 5.4.6. Это релизы безопасности и исправления ошибок для серий 5.x и 6.x.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

В открытый доступ выложен видео-курс Дмитрия Гончарова по созданию интернет-магазина на связке Joomla + JoomShopping. Видеоуроки содержат пошаговые инструкции от регистрации хостинга до особенностей вёрстки, настройки способов оплаты и доставки.

В видео фигурирует JoomShopping 4 и Joomla 3, однако JoomShopping довольно консервативный компонент и многие способы и подходы в нём не менялись годами, поэтому данные видео могут быть по прежнему полезны.

Смотреть видео-курс

@joomlafeed

1 2  Все   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 35 Ответов
  • 3715 Просмотров
*

Леон

  • Захожу иногда
  • 333
  • 5 / 0
Стиль заголовков модулей как на фото
« : 12.07.2015, 19:43:06 »
Здравствуйте. Подскажите пожалуйста как сделать шапки у модулей примерно как на фото:



Это просто картинка, реального сайта нет, поэтому посмотреть в фаербаге не получится. Просто прямоугольник с заливкой это понятно и уже сделано, интересует создание небольшого выступа (не знаю как он называется).

Сейчас у меня так, все нормально только без стрелки.
Код
.richbox-2 {
  padding: 10px;
  background: #007a8f;
  color: #fff;
}
« Последнее редактирование: 12.07.2015, 19:47:21 от Леон »
Записан
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #1 : 12.07.2015, 19:51:56 »
Сделайте фон шапки модуля готовой картинкой уже с выступом, если картинки по длине одинаковые(т.е. ширина модуля), а на ней уже название, которое регулируется в админке модуля.
Если не одинаковые, то начало картинки с выступом, а далее полоской дублируется до нужной ширины модуля, в итоге будет также.
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Леон

  • Захожу иногда
  • 333
  • 5 / 0
Re: Стиль заголовков модулей как на фото
« Ответ #2 : 12.07.2015, 19:55:12 »
vipiusss, спасибо, отличное решение. Размеры будут одинаковые, сделаю первым вариантом.
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #3 : 13.07.2015, 13:26:51 »
плохое решение
Весь блок на градиенте http://www.colorzilla.com/gradient-editor/ а уголок через псевдо элемент after позиционировать, вот его можно картинкой вырезать.
Тогда будет универсальное решение под любую ширину блока
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Стиль заголовков модулей как на фото
« Ответ #4 : 15.07.2015, 10:02:53 »
А если картинка будет svg - вообще отлично
Записан
*

Леон

  • Захожу иногда
  • 333
  • 5 / 0
Re: Стиль заголовков модулей как на фото
« Ответ #5 : 15.07.2015, 12:55:39 »
Всем спасибо, решения все лучше и лучше идут.
Спойлер
[свернуть]
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Стиль заголовков модулей как на фото
« Ответ #6 : 15.07.2015, 14:43:34 »
легко, если вы скинете образец картинки (без лишнего фона) и дадите ссылку на сайт, где это применяется
Записан
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #7 : 15.07.2015, 14:57:37 »
ну я быстро написал решение, оно было по своему правильное.
можно вообще поизвращаться, пиксельную матрицу сделать, об этом не думали?!
конечно CSS самый оптимальный вариант, и кстати beliyadm,
раз уже туда полезли, можно и с помощью CSS сделать и уголок тот(или как его назвать), зачем картинки?
« Последнее редактирование: 15.07.2015, 15:01:54 от vipiusss »
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Стиль заголовков модулей как на фото
« Ответ #8 : 15.07.2015, 15:08:09 »
выеживаться с уголком на CSS уж больно геморно, там уголок острый, + заливка в нем, картинкой именно уголок проще будет, тем более свг ничего и не весит
Записан
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #9 : 16.07.2015, 07:01:37 »
#имя {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 50px solid #цвет;
}

будет треугольник, а потом по оси его поворачивать и сместить по диагонали, искривлением.
Вы же CSS хотели, дополняйте.
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Стиль заголовков модулей как на фото
« Ответ #10 : 16.07.2015, 07:30:09 »
У этого треугольника угол 45 градусов, а надо 30, а то и 25. При повороте его угол не изменится, потому вариант отпадает. К тому же весь уголок - это бордер, а необходимо ему тонкую окантовку, и box-shadow не уверен, что может прокатить.
« Последнее редактирование: 16.07.2015, 07:39:52 от AlekVolsk »
Записан
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #11 : 16.07.2015, 13:16:10 »
я же писал, искажать треугольник.
сможешь, меньше слов, больше.....
ТС, пиво, и не будешь читать флуд, сделаю на CSS, срок 1 день, ТЗ на почту(или скайп)

и тему в свалку или ком раздел!
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #12 : 19.07.2015, 12:48:38 »
vipiusss - сможешь сделать такой уголок на стилях? С поворотом, градиентом и бордером?
Хочу увидеть рабочий пример )
Хотя правильно говорят, гемор, не стоит потраченного времени
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #13 : 19.07.2015, 13:10:44 »
смогу, но гемор!
на спор могу, тогда с тебя пиво, а так леньки!
ещё и тултипы добавлю, чтоб не скучно было)))
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #14 : 19.07.2015, 13:28:09 »
Цитата: vipiusss от 19.07.2015, 13:10:44
на спор могу, тогда с тебя пиво, а так леньки!
не вопрос, приезжай в гости в Севастополь )
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #15 : 19.07.2015, 13:35:51 »
Цитата: beliyadm от 19.07.2015, 13:28:09
не вопрос, приезжай в гости в Севастополь )
я в Киеве, хотя ваш город красивый!
приезжай ко мне, натравлю кота)))) он как маленькая рысь, хищный ппц!
заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
***
я кандидата на велике защитил, с Николаевки,4 дня, до вас доехал, в апреле было.Через арабатку и казантип.
вёл 10 человек,3 ночовки.
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #16 : 19.07.2015, 13:37:48 »
Цитата: vipiusss от 19.07.2015, 13:35:51
заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
если я тебе буду подсказывать в линуксе - твой сервак больше в жизни никогда мяу не скажет
по поводу стилей забей, можно конечно же сделать, но смысла большого не вижу, когда 30 секунд вырезать картинку
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #17 : 19.07.2015, 13:40:15 »
я и забил, смысл выделываться, ТС на пиво даст, если не надоело тему читать и его картинки устроили, тогда сделаю и покажу!
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Стиль заголовков модулей как на фото
« Ответ #18 : 20.07.2015, 09:54:01 »
http://jsfiddle.net/Shustry/vdkoauky/1/

У ТС на скрине уголок без градиента. Сделать градиентный на CSS не получится. Тут проще и рациональнее svg юзать.
Записан
*

Леон

  • Захожу иногда
  • 333
  • 5 / 0
Re: Стиль заголовков модулей как на фото
« Ответ #19 : 29.07.2015, 23:24:41 »
Еще один вопрос, тема практически та же. На CSS можно ли как-то сделать волнистый бордер, вот пример, также картинка непонятно как сделано((



Способы выше мне понятны, но если тут можно обойтись без картинок, будет отлично.
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Стиль заголовков модулей как на фото
« Ответ #20 : 30.07.2015, 00:14:29 »
нет, волнистый нельзя
Записан
*

Леон

  • Захожу иногда
  • 333
  • 5 / 0
Re: Стиль заголовков модулей как на фото
« Ответ #21 : 30.07.2015, 10:41:17 »
Ладно, забил, сделал картинками. 8)
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #22 : 31.07.2015, 13:54:55 »
Цитата: AlekVolsk от 30.07.2015, 00:14:29
нет, волнистый нельзя
Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/ :)
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Леон

  • Захожу иногда
  • 333
  • 5 / 0
Re: Стиль заголовков модулей как на фото
« Ответ #23 : 31.07.2015, 14:09:46 »
Находил такое) Меня эти php вставки пугают. Еще находил border-style: wave, не знаю откуда это но выдает ошибку в css))
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #24 : 31.07.2015, 14:22:24 »
Цитата: Леон от 31.07.2015, 14:09:46
Меня эти php вставки пугают.
там ничего страшного, просто повторяется подряд много раз дивы типа waves1 и других, каждый из которых представляет собой квадратик 10*10 с круглым бордером. В итоге в верхней строке будет много много дивов, ширина_блока/10пкс, вот сколько ))
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #25 : 31.07.2015, 14:51:02 »
Что ещё никак не родили?  ::)
Да сделал бы как я картинкой бы уже и не парился......
Я бы давно на это забил бы.Может не грамотно, но на мобилках норм, ну и PC тем более.
Не понимаю, что вы преследуете этим разговором?: грамотность решения или итог?

Вообще банально можно поизвращаться и без css:таблицей друг над другом.
А <tr> и <td> стиле в коде задать...

ТС, да делай картинкой, норм вариант!
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Стиль заголовков модулей как на фото
« Ответ #26 : 31.07.2015, 15:08:12 »
Цитата: beliyadm от 31.07.2015, 13:54:55
Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/ :)
Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Стиль заголовков модулей как на фото
« Ответ #27 : 31.07.2015, 15:10:00 »
Цитата: Shustry от 31.07.2015, 15:08:12
Хреналион мусорных тэгов в теле тебя н смущает?
смущает конечно :) я ж не предлагаю это в продакшн пускать. просто разные варианты
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Стиль заголовков модулей как на фото
« Ответ #28 : 31.07.2015, 15:12:16 »
Там же, на хабре, был вариант с вставкой • — этого символа. Но так немного не то получится.
Записан
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Стиль заголовков модулей как на фото
« Ответ #29 : 31.07.2015, 15:14:04 »
Цитата: Shustry от 31.07.2015, 15:08:12
Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.

Щас Шустрый ТСу и скрипт напишет, который попиксельно, исходя от настроения юзера, просматриваемого сайт, будет изменять шапку модульных позиций, отталкиваясь на кеш браузера и анализируя запросы в поисковых сетях и социальных аккаунтах)))

Не сдержался)))
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
1 2  Все   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Нужен пример как присвоить свой стиль одному модулю

Автор nick71

 Ответов: 21
Просмотров: 6394 		Последний ответ 17.02.2018, 14:44:40
от cirip
Перенести стиль компонента в шаблон

Автор stparts

 Ответов: 5
Просмотров: 2144 		Последний ответ 07.02.2018, 14:01:10
от stparts
вывести элементы поверх остальных модулей

Автор lexxbry

 Ответов: 6
Просмотров: 2541 		Последний ответ 29.10.2017, 17:55:05
от lexxbry
Стиль для вышестоящего блока - HTML, CSS

Автор lalalag

 Ответов: 6
Просмотров: 3330 		Последний ответ 26.06.2017, 15:07:35
от Shustry
Как сделать нормальный caption для фото?

Автор Missile

 Ответов: 18
Просмотров: 2276 		Последний ответ 01.05.2017, 07:54:46
от vipiusss