{"id":328558,"date":"2022-01-25T15:00:26","date_gmt":"2022-01-25T15:00:26","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=328558"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=328558","title":{"rendered":"<span>Joomla 4 \u2013 \u0448\u0430\u0431\u043b\u043e\u043d Cassiopeia \u2013 \u0441\u043e\u0432\u0435\u0442\u044b \u0438 \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0438<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 <a href=\"https:\/\/slides.woluweb.be\/cassiopeia\/cassiopeia.html\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0438 <\/a>\u041c\u0430\u0440\u043a\u0430 \u0414\u0435\u0448\u0435\u0432\u0440\u0430 (<a href=\"https:\/\/www.woluweb.be\/\" rel=\"noopener noreferrer nofollow\">Marc Dech\u00e8vre<\/a>) \u0441 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u043e\u0439 tips and tricks \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia &#8212; \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441 Joomla 4.\u0445. \u041e\u043d \u0437\u0430\u043c\u0435\u043d\u0438\u043b \u0441\u043e\u0431\u043e\u0439 \u0434\u0430\u0432\u043d\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 Protostar. <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u044f \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430: <\/p>\n<ul>\n<li>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (\u043d\u0435 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435) \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u0442\u0430\u0442\u044c\u0438. <\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u043e\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u043e\u0447\u0438\u043a\u0430 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u044b \u0432 [<em>\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u043a\u0443\u0440\u0441\u0438\u0432\u043e\u043c &#8212; \u0422.\u0421.<\/em>]. <\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 (\u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 WCAG \u0438 \u0413\u041e\u0421\u0422) \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<\/li>\n<\/ul>\n<div class=\"persona\" persona=\"true\"><img decoding=\"async\" persona=\"true\" class=\"image persona__image\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/68b\/c96\/d1a\/68bc96d1a67b586c8b044cf1d82c0e2d.jpg\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/68b\/c96\/d1a\/68bc96d1a67b586c8b044cf1d82c0e2d.jpg\" data-blurred=\"true\"\/><\/p>\n<h5 class=\"persona__heading\" persona=\"true\">\u041c\u0430\u0440\u043a \u0414\u0435\u0448\u0435\u0432\u0440 (Marc Dech\u00e8vre)<\/h5>\n<p persona=\"true\" class=\"persona__text\">\u0427\u043b\u0435\u043d\u00a0<a href=\"https:\/\/www.joomla.fr\/association\/membres\/marc-dechevre\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u0432\u0435\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0424\u0440\u0430\u043d\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0439 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Joomla<\/a>, <a href=\"https:\/\/volunteers.joomla.org\/joomlers\/1794-marc-dechevre\" rel=\"noopener noreferrer nofollow\">\u0447\u043b\u0435\u043d \u0433\u0440\u0443\u043f\u043f\u044b<\/a>\u00a0<strong>\u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0443<\/strong>\u00a0\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0436\u0443\u0440\u043d\u0430\u043b\u0430\u00a0<strong>\u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 Joomla<\/strong>\u00a0(\u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Joomla, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443), \u0430\u0432\u0442\u043e\u0440 \u0441\u0442\u0430\u0442\u0435\u0439 \u0432 <a href=\"https:\/\/magazine.joomla.org\/all\/itemlist\/user\/48403-marcdech%C3%A8vre\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0436\u0443\u0440\u043d\u0430\u043b\u0435 Joomla Magazine<\/a>, \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 (\u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Joomla, \u043d\u043e \u0438 WordPress \u0438 \u0434\u0440\u0443\u0433\u0438\u0445). <\/p>\n<\/div>\n<h2>\u041f\u0440\u0435\u0430\u043c\u0431\u0443\u043b\u0430<\/h2>\n<p>\u041a\u0430\u043a \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u043d\u0430\u0435\u0442\u0435 \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 Joomla 4.1 [<em>\u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0441\u0430\u0439\u0442 &#8212; \u0432 Joomla 4.1 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f &#171;\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0442\u0435\u043c\u044b&#187; &#8212; \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b &#8212; \u0422.\u0421<\/em>.]  \u043f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0430\u043c css, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, js \u0438 scss \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<ul>\n<li>\n<p>\u0441 <em>templates\/cassiopeia\/<\/em>  \u0432 Joomla! 4.0<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 <em>media\/templates\/site\/cassiopeia\/<\/em>  \u0432 Joomla! 4.1+<\/p>\n<\/li>\n<\/ul>\n<p>\u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0443 \u0438 \u043f\u043e\u0434\u043e\u0431\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432.<\/p>\n<p><strong>\u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0437\u043d\u0430\u0442\u044c:<\/strong> \u0435\u0441\u043b\u0438 \u0412\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u0430\u0439\u043b <strong>templates\/cassiopeia\/css\/user.css<\/strong>  \u0432 Joomla! 4.0, \u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e Joomla! 4.1 \u0444\u0430\u0439\u043b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u043d \u0432 <strong>media\/templates\/site\/cassiopeia\/css\/user.css<\/strong>. \u041c\u043e\u0436\u043d\u043e \u043d\u0435 \u0431\u043e\u044f\u0442\u044c\u0441\u044f \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0438 user.css, \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0441\u044f \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0433\u0440\u0435\u0447\u0435\u0441\u043a\u0438\u0439 Joomla-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0414\u0438\u043c\u0438\u0442\u0440\u0438\u0441 \u0413\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u043a\u043e\u0433\u0438\u0430\u043d\u043d\u0438\u0441 (Dimitris Grammatikogiannis).<\/p>\n<h2>\u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Cassiopeia Joomla 4<\/h2>\n<p>\u0412\u0435\u0441\u043e\u043c\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043d\u0435\u043c\u0430\u043b\u043e:<\/p>\n<ul>\n<li>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/strong> <em>[\u0432 \u0440\u0430\u0437\u0440\u0435\u0437\u0435 \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445 \u0438 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u043e\u0432 \u043f\u043e \u0437\u0440\u0435\u043d\u0438\u044e, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 \u0438 \u0413\u041e\u0421\u0422 &#8212; \u0422.\u0421.] <\/em> &#8212; \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043d\u0435 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430.<\/strong> \u041f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lighthouse\/GTMetrix \u043d\u0430 \u0431\u043e\u0435\u0432\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b 97 \u0431\u0430\u043b\u043b\u043e\u0432 \u0434\u0430\u0436\u0435 \u0434\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0434\u0443\u0445\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0436\u0430\u0442\u0438\u044f \u0442\u0440\u0430\u0444\u0444\u0438\u043a\u0430. [<em>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u043b: Lighthouse \u0434\u0430\u043b 80 \u0431\u0430\u043b\u043b\u043e\u0432 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 96 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/strong> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f CSS Grid, CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0439 javascript \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0442.\u0434., \u0430 \u0442\u0430\u043a \u0436\u0435 Bootstrap 5 \u0438 FontAwesome 5.<\/p>\n<\/li>\n<li>\n<p> <strong>\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/strong> \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 &#8212; \u0432\u044b\u0445\u043e\u0434 Joomla 4.1 \u043d\u0430\u043c\u0435\u0447\u0435\u043d \u043d\u0430 15 \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2022 \u0433\u043e\u0434\u0430. 18 \u044f\u043d\u0432\u0430\u0440\u044f 2022 \u0433\u043e\u0434\u0430 &#8212; \u0441\u0442\u0430\u0442\u0443\u0441 Release Candidate <em>[\u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043f, &#171;\u0434\u043e\u0448\u043b\u0438\u0444\u043e\u0432\u043a\u0443&#187; \u0440\u0435\u043b\u0438\u0437\u0430 &#8212; \u0422.\u0421.].<\/em> <a href=\"https:\/\/github.com\/joomla\/joomla-cms\/releases\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/joomla\/joomla-cms\/releases<\/a> \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b (\u0434\u043e\u0447\u0435\u0440\u043d\u044b\u0435 \u0442\u0435\u043c\u044b \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 WordPress)<\/p>\n<\/li>\n<li>\n<p>\u0418\u043a\u043e\u043d\u043a\u0438 \u0434\u043b\u044f \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443 \u0412\u0430\u0441 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438. \u041d\u043e, Cassiopeia &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u0435\u0432\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 Joomla 4, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043d\u0430 Joomla 3 \u043d\u0438\u043a\u0442\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435\u0440\u044c\u0451\u0437 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 Protostar \u043a\u0440\u043e\u043c\u0435 \u043a\u0430\u043a \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f \u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia<\/h2>\n<p>\u041f\u0440\u0438 \u0431\u0435\u0433\u043b\u043e\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c: &#171;\u041e \u043d\u0435-\u0435\u0442! \u0422\u0430\u043a \u043c\u0430\u043b\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a!&#187; \u041d\u043e, \u043a\u0430\u043a \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0434\u0430\u043b\u0435\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0434\u0430\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043c\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0440\u0430\u0437\u0434\u0443\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442<\/p>\n<ul>\n<li>\n<p>\u043b\u0443\u0447\u0448\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u044f\u0434\u0440\u0430 Joomla \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u043e\u0432\u0435\u0442\u044b \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia<\/h2>\n<h3>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438<\/h3>\n<p>\u0412 Cassiopeia \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"css\">&lt;link href=\"\/media\/system\/images\/joomla-favicon.svg\" rel=\"icon\" type=\"image\/svg+xml\"> &lt;link href=\"\/media\/system\/images\/favicon.ico\" rel=\"alternate icon\" type=\"image\/vnd.microsoft.icon\"> &lt;link href=\"\/media\/system\/images\/joomla-favicon-pinned.svg\" rel=\"mask-icon\" color=\"#000\"><\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0445, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043d\u043e\u0432\u044b\u0445 \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043e\u043a <em>[\u0441 \u0442\u0435\u043c \u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u043d\u043e \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c &#8212; \u0422.\u0421.] <\/em>\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445:<\/p>\n<ul>\n<li>\n<p>\/templates\/cassiopeia\/images\/joomla-favicon.svg  <strong>\u0434\u043b\u044f Joomla 4.0<\/strong><\/p>\n<\/li>\n<li>\n<p>\/media\/templates\/site\/cassiopeia\/images\/joomla-favicon.svg <strong>\u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Joomla 4.1<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>\u0428\u0440\u0438\u0444\u0442\u044b<\/h3>\n<h5>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u00a0Google Fonts\u00a0\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0443<\/h5>\n<ul>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u043d\u0430 <a href=\"https:\/\/fonts.google.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/fonts.google.com\/<\/a><\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0432 user.css \u0448\u0430\u0431\u043b\u043e\u043d\u0430: <\/p>\n<ul>\n<li>\n<p>\/media\/templates\/site\/cassiopeia\/css\/user.css  \u0434\u043b\u044f Joomla 4.1+<\/p>\n<\/li>\n<li>\n<p>\/templates\/cassiopeia\/css\/user.css  \u0434\u043b\u044f Joomla 4.0<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"css\">\/* Import font from Google - Go to fonts.google.com, select a font and look for the import command *\/ @import url('https:\/\/fonts.googleapis.com\/css2?family=Georama:wght@100&amp;display=swap'); \/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. *\/ body {     font-family: 'Georama', sans-serif; }<\/code><\/pre>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: <a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template<\/a><\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 Google fonts \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/h4>\n<p>\u0418\u0437-\u0437\u0430 \u0437\u0430\u043a\u043e\u043d\u043e\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d \u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (GDPR \u0432 \u0415\u0432\u0440\u043e\u0441\u043e\u044e\u0437\u0435) \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u0430 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0431-\u0440\u0435\u0441\u0443\u0440\u043e\u0441\u0432 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 user.css. <\/p>\n<p>\u0412 \u043f\u043e\u043c\u043e\u0449\u044c: <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" rel=\"noopener noreferrer nofollow\">https:\/\/google-webfonts-helper.herokuapp.com\/fonts<\/a> <\/p>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: <a href=\"https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-optionen\/\" rel=\"noopener noreferrer nofollow\">https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-optionen\/<\/a> > Fonts Scheme  <\/p>\n<h3>\u0426\u0432\u0435\u0442\u0430<\/h3>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0432\u0441\u0451\u043c \u0441\u0430\u0439\u0442\u0435<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 user.css \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 CSS \u043a\u043e\u0434.<\/p>\n<pre><code class=\"css\">:root {   --cassiopeia-color-primary: red;   --cassiopeia-color-hover: green;   --cassiopeia-color-link: blue; }<\/code><\/pre>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/h4>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430: \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043c\u0435\u043d\u044e &#8212; \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e &#8212; \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b &#8212; CSS-\u043a\u043b\u0430\u0441\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <strong>colors1<\/strong>  <em>[\u0423\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 css-\u043a\u043b\u0430\u0441\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a \u0432\u044b\u0432\u043e\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 (\u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 Joomla, \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438\u043b\u0438 \u0442\u043e\u0432\u0430\u0440 \u0434\u043b\u044f \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u0438 \u0442.\u0434.) &#8212; \u0422.\u0421.]<\/em><\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>.colors1 {   --website-color-1: #5e2688;   --cassiopeia-color-primary: var(--website-color-1); }<\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u043f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432 RGBA-\u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 RGB (\u043f\u0440\u0438\u043c\u0435\u0440: 37, 143, 167)<\/p>\n<pre><code class=\"css\">.colors1 {   --website-color-primary: 37, 143, 167;   --website-color-hover: 242, 48, 48;   --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);   --cassiopeia-color-hover: rgb(var(--website-color-hover));   --cassiopeia-color-link: rgb(var(--website-color-primary)); }<\/code><\/pre>\n<h4>\u0422\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 Joomla<\/h4>\n<p>\u0415\u0441\u0442\u044c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u043e\u0442 \u041d\u0438\u043a\u043e\u043b\u0430\u0441\u0430 \u0414\u0438\u043e\u043d\u0438\u0441\u043e\u043f\u0443\u043b\u043e\u0441\u0430 (Nicholas Dionysopoulos):<\/p>\n<ul>\n<li>\n<p>\u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430 (\u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Atum)<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 (\u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Cassiopeia)<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <a href=\"http:\/\/readme.md\/\" rel=\"noopener noreferrer nofollow\">README.md<\/a> \u043d\u0430 <a href=\"https:\/\/github.com\/nikosdion\/DarkMagic\" rel=\"noopener noreferrer nofollow\">\u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430<\/a> \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043e Joomla 3. \u041d\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0438\u043c\u0435\u0435\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438: \u043e\u0434\u043d\u0430 \u0434\u043b\u044f Joomla 3, \u0434\u0440\u0443\u0433\u0430\u044f \u0434\u043b\u044f Joomla 4. \u0423\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;\u0440\u0435\u043b\u0438\u0437\u044b&#187; \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435. \u0412\u0435\u0440\u0441\u0438\u0438 1.x \u0434\u043b\u044f Joomla 3, \u0432\u0435\u0440\u0441\u0438\u0438 2.\u0445 &#8212; \u0434\u043b\u044f Joomla 4.<\/p>\n<p>\u0412\u043f\u043e\u043b\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u0412\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0441\u0430\u0439\u0442\u0430 \u0435\u0449\u0451 \u0433\u0438\u0431\u0447\u0435. \u0428\u0430\u0431\u043b\u043e\u043d Cassiopeia \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f 1 \u0440\u0430\u0437, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0442\u043d\u0435 \u043c\u0435\u0441\u0442 \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 CSS \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0442\u0451\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 (\u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0438, \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0442.\u0434. \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u0430\u043c \u0441\u0430\u0439\u0442\u0430).<\/p>\n<pre><code class=\"css\">:root {     --website-color-1: #D95F69;     --website-color-2: #F29544; } @media screen and (prefers-color-scheme: dark) { \/* \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 Dark Magic *\/     :root {         --cassiopeia-color-primary: var(--website-color-1) !important;         --cassiopeia-color-link: var(--website-color-1) !important;         --cassiopeia-color-hover: var(--website-color-2) !important;         --cassiopeia-color-gradient-end: var(--website-color-1) !important;         --cassiopeia-color-gradient-start: var(--website-color-2) !important;     }     .btn-primary {         background-color: var(--website-color-1) !important;     }     .btn-primary:focus, .btn-primary:hover {         background-color: var(--website-color-2) !important;     }     .back-to-top-link {         color: white !important;     }     #cf_1 { \/* Convert Forms \u0442\u0430\u043a \u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 *\/         --background-color: rgba(0, 0, 0, 0.9) !important;     } }<\/code><\/pre>\n<h3>\u041c\u0430\u043a\u0435\u0442\u044b<\/h3>\n<h4>\u041f\u043e\u0437\u0438\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassoipeia<\/h4>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0421\u0442\u0430\u0442\u044c\u044f \u043e \u0442\u043e\u043c, <a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 Joomla 4<\/a> <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/de9\/66e\/3aa\/de966e3aa7f7efcda80cdbb65e2a9bea.jpg\" width=\"898\" height=\"899\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de9\/66e\/3aa\/de966e3aa7f7efcda80cdbb65e2a9bea.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h4>\u041a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0432 \u0442\u043e\u043c \u0436\u0435 \u0440\u044f\u0434\u0443, \u0447\u0442\u043e \u0438 \u043c\u0435\u043d\u044e<\/h4>\n<p>\u0412 \u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430: \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0421\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 &#8212; Cassiopeia &#8212; \u0432\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b&#187; &#8212; \u043e\u043f\u0446\u0438\u044f &#171;\u041b\u043e\u0433\u043e\u0442\u0438\u043f&#187;. \u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438\u043b\u0438 \u0436\u0435 \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043b\u043e\u0433\u043e\u0442\u0438\u043f (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442) \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0440\u044f\u0434\u0443 \u043f\u0435\u0440\u0435\u0434 (\u0432\u044b\u0448\u0435) \u043c\u0435\u043d\u044e. \u041e\u043a, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u0442? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u043d\u043e \u043d\u0430 99,9% \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f \u044f\u0432\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0445\u043e\u0434.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0431\u044b\u043b \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u044f\u0434\u0443 \u0441 \u043c\u0435\u043d\u044e, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u041a\u043e\u043d\u0442\u0435\u043d\u0442 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0438\u043f\u0430  HTML-\u043a\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c HTML-\u043a\u043e\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u043e\u0434\u0443\u043b\u044c (\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 &lt;a href=&#187;\/&#187;>&lt;img src=&#187;your_logo.webp&#187; alt=&#187;logo desc&#187; \/>&lt;\/a><\/p>\n<\/li>\n<li>\n<p>\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044f &#171;\u041c\u0435\u043d\u044e&#187; <\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 (\u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0412\u0430\u0441 \u043d\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u043b\u0438 \u044f\u0437\u044b\u043a\u043e\u0432 \u0441\u0430\u0439\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0444\u0443\u0442\u0435\u0440 \u0441\u0430\u0439\u0442\u0430 \u0432 Joomla 4<\/h4>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u043e\u0434\u0443\u043b\u044c<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u041a\u043e\u043d\u0442\u0435\u043d\u0442 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 (\u0438\u043b\u0438 \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0438\u043f\u0430 &#171;\u041a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u044b&#187;, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e Footer,<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u0441\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043c\u0435\u043d\u044e \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c: 2 \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 \u0441\u0430\u0439\u0442\u0430, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0433\u043e\u0434. \u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 Joomla.<\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 2 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c.<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 MOD_FOOTER_LINE1 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 &#171;Copyright \u00a9 %date% %sitename%. All Rights Reserved.&#187; [<em>\u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 MOD_FOOTER_LINE2 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 <code>\"&lt;a href=\"https:\/\/www.joomla.org\">Joomla!&lt;\/a> is Free Software released under the &lt;a href=\"https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\">GNU General Public License.&lt;\/a><\/code>&#171;<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0448\u0430\u0433\u0438:<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u044f\u0437\u044b\u043a \u0441\u0430\u0439\u0442\u0430 (\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430), \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 [<em>\u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u043e\u0435 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u0438 \u0435\u0451 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<ul>\n<li>\n<p>\u0414\u043b\u044f MOD_FOOTER_LINE1 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c &#171;\u00a9 %date% %sitename% | &lt;a style=&#187;text-decoration: none;&#187; href=&#187;\/privacy&#187;>\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445&lt;\/a>&#187; [<em>&#171;%date%&#187; \u0438  &#171;%sitename%&#187; \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0433\u043e\u0434 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u043b\u044f MOD_FOOTER_LINE2 [<em>\u0421\u0415\u041e-\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0442\u0440\u0435\u043f\u0435\u0442\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0441\u044b\u043b\u043e\u0447\u043d\u043e\u0433\u043e, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0432\u0435\u0441 \u0437\u043e\u043b\u043e\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437 \u043d\u0438\u0445 \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0443\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0441\u0434\u0435\u043b\u0430\u043d \u043d\u0430 Joomla \u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 joomla.org. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f MOD_FOOTER_LINE2 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u044f\u0437\u044b\u043a\u043e\u0432\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u0435\u043b. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u043d\u0435\u0439 \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u0438. &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0412\u0430\u0441 \u0441\u0430\u0439\u0442 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445, \u0442\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445), \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 CSS-\u043a\u043e\u0434 \u0432 \u0441\u0432\u043e\u0439 user.css \u0444\u0430\u0439\u043b (<code>\/media\/templates\/site\/cassiopeia\/css\/user.css<\/code>\u00a0\u0432 Joomla 4.1+ \u0438<code>\/templates\/cassiopeia\/css\/user.css<\/code>\u00a0\u0432 Joomla 4.0).<\/p>\n<pre><code class=\"css\">footer div.mod-footer {   display: flex;   flex: 1 1 0%;   flex-direction: column;   justify-content: space-between;   align-items: center; } @media (min-width: 768px) {   footer div.mod-footer {     flex-direction: row;   } }<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Cassopeia, \u043d\u043e \u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435.<\/p>\n<h4>\u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0431\u043b\u043e\u0433\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0432 Joomla 4.<\/h4>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0432 Joomla \u0434\u043b\u044f \u0432\u0438\u0434\u0430 \u0431\u043b\u043e\u0433\u0430 Cassoipeia \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0431\u043b\u043e\u0433\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e (\u0442\u0438\u043f \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e &#8212; \u0411\u043b\u043e\u0433 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 &#8212; \u0432\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u0411\u043b\u043e\u0433&#187; &#8212; CSS-\u043a\u043b\u0430\u0441\u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432)<\/p>\n<ul>\n<li>\n<p>boxed (\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0431\u043b\u043e\u0433\u0435 \u0432 \u0440\u0430\u043c\u043a\u0435)<\/p>\n<\/li>\n<li>\n<p>image-right <\/p>\n<\/li>\n<li>\n<p>image-left  <\/p>\n<\/li>\n<li>\n<p>image-bottom<\/p>\n<\/li>\n<li>\n<p>image-alternate (\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0442\u043e\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0441\u043b\u0435\u0432\u0430, \u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0432\u0430. \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438, \u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0432\u0435\u0440\u0445\u0443.)<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/issues.joomla.org\/tracker\/joomla-cms\/18319\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f <\/a>\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430.<\/p>\n<p>\u0414\u0440\u0443\u0433\u0430\u044f \u0441\u0435\u0440\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0432 Cassoipeia \u044f\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 &#171;\u043a\u0438\u0440\u043f\u0438\u0447\u043d\u043e\u0439 \u043a\u043b\u0430\u0434\u043a\u0438&#187; (&#171;Masonry&#187;)<\/p>\n<ul>\n<li>\n<p>columns-2<\/p>\n<\/li>\n<li>\n<p>columns-3<\/p>\n<\/li>\n<li>\n<p>columns-4<\/p>\n<\/li>\n<li>\n<p>masonry-2<\/p>\n<\/li>\n<li>\n<p>masonry-3<\/p>\n<\/li>\n<li>\n<p>masonry-4<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u043b\u043e\u0433\u0430 \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0432 3 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 &#8212; masonry-3 &#8212; \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/cassiopeia.joomla.com\/sample-layouts\/mansory-layout\" rel=\"noopener noreferrer nofollow\">\u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>. \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0431\u043b\u043e\u0433\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043e\u043f\u0446\u0438\u044f &#171;\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432&#187;, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0412\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. [<em>\u041e\u043f\u0446\u0438\u044f &#171;\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432&#187; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 masonry-* &#8212; \u0422.\u0421.<\/em>]<\/p>\n<h4>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 (\u0432\u0441\u0442\u0443\u043f\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430) &#8212; Left, Center or Right<\/h4>\n<p>Joomla 4 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u201c\u0441\u043f\u0440\u0430\u0432\u0430\u201d, \u201c\u0441\u043b\u0435\u0432\u0430\u201d \u0438\u043b\u0438 \u201c\u043d\u0435\u0442\u201d, \u043d\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 css-\u043a\u043b\u0430\u0441\u0441\u0430. Cassiopeia \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u201cfloat-start\u201d \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0432\u0430 (\u0441\u043f\u0440\u0430\u0432\u0430 \u0434\u043b\u044f \u044f\u0437\u044b\u043a\u043e\u0432 rtl), \u201cfloat-end\u201d \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0432\u0430 (\u0441\u043b\u0435\u0432\u0430 \u0434\u043b\u044f \u044f\u0437\u044b\u043a\u043e\u0432 rtl) \u0438 \u201cfloat-none\u201d \u0434\u043b\u044f \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0433\u043e.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 css-\u043a\u043b\u0430\u0441\u0441 \u0432 user.css, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">.float-center.item-image {   text-align: center; }<\/code><\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c css-\u043a\u043b\u0430\u0441\u0441\u044b \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0435\u0439.  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u041a\u043e\u043d\u0442\u0435\u043d\u0442 &#8212; \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 &#8212; \u0424\u043e\u0440\u043c\u0430 \u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0432 \u043f\u043e\u043b\u0435 \u201cCSS-\u043a\u043b\u0430\u0441\u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0432\u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430\u201d \u0438\u043b\u0438 &#171;CSS-\u043a\u043b\u0430\u0441\u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430&#187;. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u044c css-\u043a\u043b\u0430\u0441\u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. <\/p>\n<p><a href=\"https:\/\/cassiopeia.joomla.com\/help\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a><\/p>\n<h4>\u0421\u0442\u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 &#8212; card \u0438\u043b\u0438 noCard<\/h4>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u041c\u043e\u0434\u0443\u043b\u0438 &#8212; &lt;\u0432\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c> &#8212; \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b &#8212; \u0421\u0442\u0438\u043b\u044c \u043c\u043e\u0434\u0443\u043b\u044f [<em>\u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0438\u0437\u0443 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>\u0412\u0438\u0434\u0438\u043c\u043e, \u0447\u0442\u043e Cassopeia \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f<\/p>\n<ul>\n<li>\n<p>card<\/p>\n<\/li>\n<li>\n<p>noCard<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041a\u0440\u043e\u043c\u0435 \u043d\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044f<\/p>\n<ul>\n<li>\n<p>html5 [<em>\u0431\u0443\u0434\u0443\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0435\u0433\u0430 \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u043e\u0434\u0443\u043b\u044f &#8212; article, aside, section \u0438 \u0442.\u0434. &#8212; \u0434\u043b\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>none [<em>\u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u043e\u0434\u0443\u043b\u044f, \u0431\u0435\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>outline [<em>\u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438 \u0441\u0442\u0438\u043b\u0435 \u043c\u043e\u0434\u0443\u043b\u044f &#8212; \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438\/\u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044f &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>table [<em>\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b \u0432 \u0442\u0435\u0433 \u0442\u0430\u0431\u043b\u0438\u0446\u044b &lt;table> &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<\/ul>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430 \u0432\u044b\u0432\u043e\u0434\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0439<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0412\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u043e\u0434 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia, \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">@supports (display: grid) {     .site-grid {         grid-template-areas:           \". banner banner banner banner .\"           \". top-a top-a top-a top-a .\"           \". top-b top-b top-b top-b .\"           \". comp comp comp comp .\"           \". side-r side-r side-r side-r .\"           \". side-l side-l side-l side-l .\"           \". bot-a bot-a bot-a bot-a .\"           \". bot-b bot-b bot-b bot-b .\";     }     @media (min-width: 992px) {         .site-grid {             grid-template-areas:               \". banner banner banner banner .\"               \". top-a top-a top-a top-a .\"               \". top-b top-b top-b top-b .\"               \". side-l comp comp side-r .\"               \". bot-a bot-a bot-a bot-a .\"               \". bot-b bot-b bot-b bot-b .\"         }     } }<\/code><\/pre>\n<p>\u042d\u0442\u043e CSS Grid. \u041e\u043d \u043e\u0447\u0435\u043d\u044c \u0438 \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439, \u043a\u0430\u043a \u0412\u044b \u0432\u0438\u0434\u0438\u0442\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u043c\u0430\u043b\u043e \u0438\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u043e CSS Grid, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/#prop-grid-template-areas\" rel=\"noopener noreferrer nofollow\">https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/#prop-grid-template-areas<\/a><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0412\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u0437\u0438\u0446\u0438\u044e banner \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0437\u0438\u0446\u0438\u0438 bot-a \u0438 bot-b \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u044f\u0434\u0443 50\/50 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0439 user.css \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"css\">@supports (display: grid) {     @media (min-width: 992px) {         .site-grid {             grid-template-areas:               \". top-a top-a top-a top-a .\"               \". top-b top-b top-b top-b .\"               \". side-l comp comp side-r .\"               \". bot-a bot-a bot-b bot-b .\"               \". banner banner banner banner .\"         }     } }<\/code><\/pre>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 CSS Grid, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a CSS, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \/ \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \/ \u0440\u0430\u0437\u0432\u0435\u0442\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0444\u0430\u0439\u043b PHP.<\/p>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u0435\u0432\u043e\u0439 \u0438 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/h4>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 &#8212; \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 (&#171;\u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0439&#187;) \u0440\u0435\u0436\u0438\u043c (\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u044e\u0442 \u043a \u043a\u0440\u0430\u044f\u043c \u044d\u043a\u0440\u0430\u043d\u0430).<\/strong><\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c CSS-\u043a\u043e\u0434\u043e\u043c<\/p>\n<pre><code class=\"css\">body.wrapper-fluid .site-grid {   grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] 100px [full-end] }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <strong>repeat(4,minmax(0,25%)). <\/strong>\u042d\u0442\u043e\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d <strong>minmax(0,25%) minmax(0,25%) minmax(0,25%) minmax(0,25%)<\/strong>: <\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 &#171;minmax(0,25%)&#187; \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0448\u0438\u0440\u0438\u043d\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 Left<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 &#171;minmax(0,25%)&#187; \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0448\u0438\u0440\u0438\u043d\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 Right<\/p>\n<\/li>\n<li>\n<p>\u0414\u0432\u0430 &#171;minmax(0,25%)&#187; \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0448\u0438\u0440\u0438\u043d\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0432 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u043b\u0438 \u0442\u043e\u0432\u0430\u0440 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430).<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a, \u0435\u0441\u043b\u0438 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 Left \u0438 Right \u0441 25% \u0434\u043e 20%, \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0439 user.css \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">body.wrapper-fluid .site-grid {   grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%) [main-end] 100px [full-end] }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 &#8212; Cassiopeia \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 &#8212; \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430<\/strong><\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (\u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435, Cassiopeia \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 mobile first) \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 CSS:<\/p>\n<pre><code class=\"css\">@supports (display: grid) {   @media (min-width: 992px) {     .site-grid {       grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end]     }   } }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0438: \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <strong>repeat(4,minmax(0,19.875rem))<\/strong>  \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d <strong>minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem)<\/strong>. Rem &#8212; \u044d\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 CSS. \u0414\u0430\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439<code>minmax(0,19.875rem)<\/code>\u00a0\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0448\u0438\u0440\u0438\u043d\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 Left<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439<code>minmax(0,19.875rem)<\/code>\u00a0\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u043f\u043e\u0437\u0438\u0446\u0438\u0438 Right<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0430<code>minmax(0,19.875rem)<\/code>\u00a0\u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435  \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 50% \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u043b\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u0441 19,875rem \u0434\u043e 9,875rem (\u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u0443 \u0436\u0435 \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443), \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 CSS \u0432 \u0441\u0432\u043e\u0439 user.css<\/p>\n<pre><code class=\"css\">@supports (display: grid) {   @media (min-width: 992px) {     .site-grid {       grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,9.875rem) minmax(0,29.875rem) minmax(0,29.875rem) minmax(0,9.875rem) [main-end] minmax(0,1fr) [full-end]     }   } }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0438\u0433\u0440\u0430\u044f \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u0434\u0435\u043d\u0438\u0435\u043c 4 * 19,875rem.<\/p>\n<h3>\u0411\u0430\u043d\u043d\u0435\u0440<\/h3>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438-\u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0432 Cassiopeia<\/h4>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e <a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0437\u0434\u0435\u0441\u044c<\/a>, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Addiing a site header&#187;.<\/p>\n<h4>\u041a\u0430\u043a \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u0431\u0430\u043d\u043d\u0435\u0440\u0430<\/h4>\n<p>\u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 css-\u043a\u043e\u0434 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439 user.css<\/p>\n<pre><code class=\"css\">\/* CLASSIC BANNER *\/ .container-banner .banner-overlay {     height: max(300px, 50vh); \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 50vh \u0432 Cassiopeia *\/ } @media (min-width: 768px) {     .container-banner .banner-overlay {         height: max(300px, 45vh);     } } @media (min-width: 992px) {     .container-banner .banner-overlay {         height: max(300px, 40vh);     } } @media (min-width: 1200px) {     .container-banner .banner-overlay {         height: max(300px, 35vh);     } }<\/code><\/pre>\n<h4>\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u0431\u0430\u043d\u043d\u0435\u0440\u0430<\/h4>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u043d\u0438\u043f\u043f\u0435\u0442 CSS-\u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b \u0432 user.css<\/p>\n<pre><code class=\"css\">\/* CLASSIC BANNER *\/ .container-banner .banner-overlay .overlay {     background-image: linear-gradient(120deg, rgba(231, 48, 42, 0.7), rgba(234, 174, 2, 0.7)); }<\/code><\/pre>\n<h4>\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0430\u043d\u043d\u0435\u0440\u0430<\/h4>\n<p>Cassiopeia \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u043a\u043e\u043b\u043e 50% \u0432\u044b\u0441\u043e\u0442\u044b \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u0414\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u0436\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0444\u043e\u043d \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0438\u043f\u0430 HTML-\u043a\u043e\u0434 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043e\u043f\u0446\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c HTML \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0438\u0436\u0435 (\u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 poster-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u0438\u0434\u0435\u043e \u043d\u0430 \u0441\u0432\u043e\u0438)<\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c CSS \u0432 \u0441\u0432\u043e\u0439 user.css<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"xml\">&lt;div class=\"video-banner\">   &lt;div class=\"text\">     &lt;h1 class=\"display-4 text-thin\">Title&lt;\/h1>     &lt;p class=\"lead\">Text&lt;\/p>     &lt;p>&lt;a class=\"btn btn-primary btn-lg\" href=\"#\">Link&lt;\/a>&lt;\/p>   &lt;\/div>   &lt;video poster=\"https:\/\/assets.codepen.io\/6093409\/river.jpg\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\">    &lt;source src=\"https:\/\/assets.codepen.io\/6093409\/river.mp4\" type=\"video\/mp4\" \/>   &lt;\/video> &lt;\/div><\/code><\/pre>\n<pre><code class=\"css\">\/* VIDEO BANNER - see https:\/\/codepen.io\/woluweb\/pen\/rNGROZj *\/ div.video-banner {     display: grid;     grid-template-areas: \"hero\";     place-items: center;     height: max(300px, calc(100vh - 152px)); \/* viewport height minus the fixed height of menu header on current website, with a minimum of X pixels *\/     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5); } div.video-banner > * {     grid-area: hero; \/* stacking all the child elements of the grid - could simply have set 1 \/ 1 \/ 2 \/ 2 instead of naming the area hero *\/ } div.video-banner div.text {     z-index: 1; \/* to be sure that this is on top of the video *\/     text-align: center;     color: white;     text-shadow: 2px 2px 5px black; } div.video-banner div.overlay {     width: 100%;     height: 100%;     background-image: linear-gradient(120deg, var(--cassiopeia-color-link), var(--cassiopeia-color-hover));     opacity: 0.7; } div.video-banner video {     width: 100%;     height: 100%;     object-fit: cover;     overflow: hidden; }<\/code><\/pre>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e javascript-\u043a\u043e\u0434\u0430<\/h3>\n<p>[<em>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u0434\u044b \u0432\u0435\u0431-\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 (\u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0430, Google Analytics, \u043a\u043e\u0434\u044b \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0438 \u0442.\u0434.) &#8212; \u0422.\u0421.<\/em>]<\/p>\n<h4>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 &#8212; \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 user.js<\/h4>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043a\u0430\u043a \u0412\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 user.css \u0432 \/media\/templates\/site\/cassiopeia\/css\/user.css \u0434\u043b\u044f Joomla 4.1 \u0438\u043b\u0438 \/templates\/cassiopeia\/css\/user.css  \u0432  Joomla 4.0 \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 js-\u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430: <strong>\/media\/templates\/site\/cassiopeia\/js\/user.js \u0434\u043b\u044f Joomla 4.1+<\/strong> (\u0431\u044b\u0432\u0448\u0438\u0439 \/templates\/cassiopeia\/js\/user.js  \u0432 joomla 4.0).<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u044e\u0449\u0435\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430<\/p>\n<pre><code class=\"javascript\">alert( 'Hello, world!' );<\/code><\/pre>\n<h4>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/h4>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e Joomla \u043d\u0435 \u043d\u0438\u0436\u0435 4.1. \u0414\u0430\u0442\u0430 \u0440\u0435\u043b\u0438\u0437\u0430 Joomla 4.1 &#8212; 15 \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2022 \u0433\u043e\u0434\u0430.<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0435\u043c \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0430\u0439\u0442\u0430 &#8212; \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c Cassiopeia<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d (\u043a\u043d\u043e\u043f\u043a\u0430 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0442\u0443\u043b\u0431\u0430\u0440\u0435) \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u043e\u0437\u0434\u0430\u043d.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043d\u0451\u043c \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0438 \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u0435 \u043e\u043f\u0430\u0441\u0430\u044f\u0441\u044c, \u0447\u0442\u043e \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c Joomla \u0412\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0443\u0442\u0441\u044f. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e [<em>\u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 &#8212; \u0422.\u0421.<\/em>].<\/p>\n<h4>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3 &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432 \u0448\u0430\u0431\u043b\u043e\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/h4>\n<p>\u0412 template.xml \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u043e\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a (textarea, radio \u0438 \u0442.\u0434.). \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432 index.php \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0412\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u044d\u0442\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u0445 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 js-\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 &lt;head> \u0441\u0430\u0439\u0442\u0430<\/p>\n<pre><code class=\"php\">&lt;?php $this->params->get('myJS'); ?><\/code><\/pre>\n<h4>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 4 &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u043e\u0434\u0443\u043b\u044f<\/h4>\n<p>\u0412 \u043b\u044e\u0431\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Joomla \u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435 Joomla \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 css \u0438\u043b\u0438 js-\u043a\u043e\u0434. \u0418\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u043e\u0434\u0443\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 CSS \u0438\u043b\u0438 JS [<em>\u0438\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 php-\u043a\u043e\u0434 &#8212; \u0422.\u0421.<\/em>] \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u043c\u0435\u044e\u0449\u0435\u043c\u0443\u0441\u044f \u0432 Joomla \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0443 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u0432. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0433\u0438\u0431\u043a\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043a \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043c\u0435\u043d\u044e \u0412\u044b \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u0435 \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0412\u0430\u0448 \u043a\u043e\u0434: \u043d\u0430 \u043a\u0430\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0434\u043b\u044f \u043a\u0430\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u0441\u0430\u0439\u0442\u0430, \u0432 \u043a\u0430\u043a\u043e\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 (\u0434\u0430\u0442\u0430 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439) \u0438 \u0442.\u0434.[<em>\u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0432 \u0442\u0435\u043a\u0441\u0442\u044b \u0441\u0442\u0430\u0442\u0435\u0439, \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438 \u0442.\u0434. &#8212; \u0422.\u0421.<\/em>]<\/p>\n<p>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430 \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u043e\u0434\u0443\u043b\u044f HTML-\u043a\u043e\u0434 (\u043c\u043e\u0436\u043d\u043e \u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0438\u043f \u043c\u043e\u0434\u0443\u043b\u044f)<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0430\u0439\u0442\u0430 &#8212; \u0412\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 &#171;\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0439&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c mod_custom (\u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0412\u0430\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044c)<\/p>\n<\/li>\n<li>\n<p>\u0412\u0438\u0434\u0438\u043c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/p>\n<ul>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0444\u0430\u0439\u043b <strong>\/templates\/cassiopeia > html > mod_custom > default.php<\/strong>  <\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0412\u0430\u043c<\/p>\n<\/li>\n<li>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e echo $module->content \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u0412\u0430\u043c CSS \u0438\u043b\u0438 JS \u043a\u043e\u0434 [<em>\u0438\u043b\u0438 \u0436\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 PHP-\u043a\u043e\u0434 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/docs.joomla.org\/J3.x:Adding_JavaScript_and_CSS_to_the_page\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c CSS \u0438 JS \u043a\u043e\u0434 \u041f\u0420\u0410\u0412\u0418\u041b\u042c\u041d\u041e \u0432 Joomla 3<\/a> &#8212; \u043c\u0435\u0442\u043e\u0434\u044b addStyleSheet, addStyleDeclaration, addScript, addScriptDeclaration  [<a href=\"https:\/\/jpath.ru\/docs\/output\/html-helpers\/podklyuchenie-i-razmeshchenie-fajlov-css-javascript-i-izobrazhenij-v-joomla\" rel=\"noopener noreferrer nofollow\"><em>\u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435<\/em><\/a><em> &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c CSS \u0438 JS \u043a\u043e\u0434 \u041f\u0420\u0410\u0412\u0418\u041b\u042c\u041d\u041e \u0432 Joomla 4 &#8212; <\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/docs.joomla.org\/J4.x:Web_Assets\" rel=\"noopener noreferrer nofollow\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Joomla 4 \u043f\u043e Web Assets Manager<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/docs.joomla.org\/J4.x:Http_Header_Management\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 Joomla 4<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.joomlashack.com\/blog\/tutorials\/web-assets-in-joomla-4\/\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0430\u0442\u044c\u044f \u0432 \u0431\u043b\u043e\u0433\u0435 JoomlaShack<\/a><\/p>\n<\/li>\n<li>\n<p>[<a href=\"https:\/\/jpath.ru\/docs\/output\/js-css\/kak-pravilno-podklyuchat-javascript-i-css-v-joomla-4\" rel=\"noopener noreferrer nofollow\"><em>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c JavaScript \u0438 CSS  \u0432 Joomla 4 <\/em><\/a><em>&#8212; \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0438\u043f\u0430 HTML-\u043a\u043e\u0434 \u0432 \u041a\u043e\u043d\u0442\u0435\u043d\u0442 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b&#187; &#8212; \u043c\u0430\u043a\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 &#8212; \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u043d\u0443\u0436\u043d\u043e\u0439 \u043d\u0430\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 .images, \u0442\u0435\u0433\u043e\u0432 h2 \u0438 h3 \u0432 CSS \u0438 JS \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u044f (Joomla 3)<\/p>\n<pre><code class=\"php\">&lt;?php use Joomla\\CMS\\Factory; defined('_JEXEC') or die; $doc = Factory::getDocument();  \/\/ adding some css file - for pure css animation \/\/ either via a local file (to be added manually) \/\/ $doc->addStyleSheet(\"\/templates\/cassiopeia\/css\/animate.css\", array('version'=>'auto')); \/\/ either via a distant file - see https:\/\/cdnjs.com\/libraries\/animate.css $doc->addStyleSheet(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\", [], [\"integrity\" => \"sha512-c42qTSw\/wPZ3\/5LBzD+Bw5f7bSF2oxou6wEb+I\/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg\/BTl50fJYAw==\", \"crossorigin\" => \"anonymous\" , \"referrerpolicy\" => \"no-referrer\" ]);  \/\/ adding some script for animation using intersection-observer \/\/ either via a local file (to be added manually) \/\/ $doc->addScript('\/templates\/cassiopeia\/js\/animate.js', array('version'=>'auto')); \/\/ either via an inline script $myAnimation = &lt;&lt;&lt;MYJS document.addEventListener('DOMContentLoaded', function() {      let observer = new IntersectionObserver(function (observables) {       observables.forEach(function (observable) {         \/\/ the element becomes visible         if (observable.intersectionRatio > 0.5) {           observable.target.classList.add('mytest')           \/\/ observable.target.classList.remove('not-visible')           observer.unobserve(observable.target)         }       })     }, {       threshold: [0.5]     });      \/\/ we observe the elements     let items = document.querySelectorAll('.image, h2, h3')     items.forEach(function (item) {       observer.observe(item)     })  }); MYJS; \/\/ add the script $doc->addScriptDeclaration($myAnimation);<\/code><\/pre>\n<p>\u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0412\u0430\u0448\u0435\u043c user.css, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u0430\u043c\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/p>\n<pre><code class=\"css\">h2.mytest, h3.mytest, p.mytest {     animation: fadeIn; \/* referring directly to the animation's @keyframe declaration *\/     animation-duration: 2s; \/* don't forget to set a duration! *\/ }<\/code><\/pre>\n<p>[<em>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 &#8212; \u044d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u043c\u043e\u0434\u0443\u043b\u0435\u043c. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u043f\u043e FTP \u0432 \u043f\u0430\u043f\u043a\u0443 modules\/mod_custom\/tmpl, \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b default.php \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043d\u0451\u043c \u0432\u0441\u0451, \u0447\u0442\u043e \u0412\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e. &#8212; \u0422.\u0421.<\/em>]<\/p>\n<h4>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 5 &#8212; \u0434\u043b\u044f Bootstrap 5<\/h4>\n<p>Joomla 4 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Bootstrap 5, \u043d\u043e \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 javascript Bootstrap 5 \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u0432 \u0441\u0432\u043e\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \/ \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u0445 \/ \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u0430\u0445 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438 \u0433\u0434\u0435 \u0412\u0430\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u0431\u044b Bootstrap  \u0432 \u0441\u0442\u0430\u0442\u044c\u044e. \u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0442 HTML (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0437\u044f\u0442 \u0438\u0437 <a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/components\/navs-tabs\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Bootstrap 5<\/a>)<\/p>\n<pre><code class=\"xml\">&lt;div class=\"bd-example\">   &lt;nav>     &lt;div class=\"nav nav-tabs mb-3\" id=\"nav-tab\" role=\"tablist\">       &lt;button class=\"nav-link active\" id=\"nav-home-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#nav-home\" type=\"button\" role=\"tab\" aria-controls=\"nav-home\" aria-selected=\"true\">Home&lt;\/button>       &lt;button class=\"nav-link\" id=\"nav-profile-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#nav-profile\" type=\"button\" role=\"tab\" aria-controls=\"nav-profile\" aria-selected=\"false\">Profile&lt;\/button>       &lt;button class=\"nav-link\" id=\"nav-contact-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#nav-contact\" type=\"button\" role=\"tab\" aria-controls=\"nav-contact\" aria-selected=\"false\">Contact&lt;\/button>     &lt;\/div>   &lt;\/nav>   &lt;div class=\"tab-content\" id=\"nav-tabContent\">     &lt;div class=\"tab-pane fade active show\" id=\"nav-home\" role=\"tabpanel\" aria-labelledby=\"nav-home-tab\">       &lt;p>&lt;strong>Home text&lt;\/p>     &lt;\/div>     &lt;div class=\"tab-pane fade\" id=\"nav-profile\" role=\"tabpanel\" aria-labelledby=\"nav-profile-tab\">       &lt;p>&lt;strong>Profile text&lt;\/p>     &lt;\/div>     &lt;div class=\"tab-pane fade\" id=\"nav-contact\" role=\"tabpanel\" aria-labelledby=\"nav-contact-tab\">       &lt;p>&lt;strong>Contact text&lt;\/p>     &lt;\/div>   &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>\u041a\u0430\u043a\u043e\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435? \u0422\u0430\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 2-\u0439 \u0438 3-\u0439 \u0442\u0430\u0431 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c Bootstrap 5 javascript:<\/p>\n<pre><code class=\"php\">\\Joomla\\CMS\\HTML\\HTMLHelper::_('bootstrap.tab', '.selector', []);<\/code><\/pre>\n<p>[<em>&#8216;.selector&#8217; &#8212; \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0442\u0430\u0431\u043e\u0432  &#8212; \u0422.\u0421.<\/em>] \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 js-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Bootstrap 5 \u0441\u043b\u0435\u0434\u0443\u044f <a href=\"https:\/\/docs.joomla.org\/J4.x:Using_Bootstrap_Components_in_Joomla_4\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Joomla 4<\/a><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0412\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u0441\u0441\u044b\u043b\u043a\u0430 \u0432\u044b\u0448\u0435) &#171;Approach 3: Using a Template Override&#187;, \u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044e \u043a\u043b\u0430\u0441\u0441 <strong>bs-tab<\/strong> \u0438 Bootstrap \u0442\u0430\u0431\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.<\/p>\n<h3>\u041c\u0435\u043d\u044e<\/h3>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043a \u043f\u0443\u043d\u043a\u0442\u0443 \u043c\u0435\u043d\u044e &#8212; \u0432 Joomla 4.1<\/h4>\n<ul>\n<li>\n<p>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u0443\u044e \u0438\u043a\u043e\u043d\u043a\u0443 \u043d\u0430 \u00a0<a href=\"https:\/\/fontawesome.com\/v5.15\/icons\" rel=\"noopener noreferrer nofollow\">https:\/\/fontawesome.com\/<\/a>, \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 css-\u043a\u043b\u0430\u0441\u0441 \u0438\u043a\u043e\u043d\u043a\u0438, fas fa-envelope.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 &#171;\u0422\u0438\u043f \u0441\u0441\u044b\u043b\u043a\u0438&#187; \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 css-\u043a\u043b\u0430\u0441\u0441 \u0432 \u043f\u043e\u043b\u0435 &#171;CSS-\u043a\u043b\u0430\u0441\u0441 \u0438\u043a\u043e\u043d\u043a\u0438&#187;. [<em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 CSS-\u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u043a\u043e\u043d\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043d\u0430\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438. &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e FontAwesome. <a href=\"https:\/\/github.com\/joomla\/joomla-cms\/pull\/34658\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043d\u0430 GitHub<\/a>.<\/p>\n<h5>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043a \u043f\u0443\u043d\u043a\u0442\u0443 \u043c\u0435\u043d\u044e &#8212; \u0432 Joomla 4.0<\/h5>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u0445\u043e\u0436\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 CSS-\u043a\u043b\u0430\u0441\u0441 \u0441\u0441\u044b\u043b\u043a\u0435 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 user.css \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e CSS-\u043a\u043b\u0430\u0441\u0441\u0430<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"css\">ul.mod-menu a.my-icon-home::before {     font-family: \"Font Awesome 5 Free\";     font-weight: 900;     content: \"\uf015\";     margin-right: 4px;     display: inline-block;     width: 1.25em !important; }<\/code><\/pre>\n<p>\u041f\u043b\u044e\u0441 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0412\u0430\u043c \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0438 \u043d\u0435 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0432\u0435\u0441\u044c \u0448\u0440\u0438\u0444\u0442 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043e\u0442\u043d\u044f\u043c\u0438 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a.<\/p>\n<h4>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0435\u043d\u044e-\u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440 \u0432 Cassoipeia<\/h4>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u0434\u0435\u043b \u00a0\u201cChange the Menu Layout\u201d <a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template<\/a><\/p>\n<p>\u041a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043c\u0435\u043d\u044e-\u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440 \u0432 Cassopeia \u0414\u041e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043e\u043d\u043e \u041f\u041e\u0421\u041b\u0415<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0412\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0430\u0433\u0430\u0435\u0442\u0435 \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 Menu \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n<ol>\n<li>\n<p>\u041b\u043e\u0433\u043e\u0442\u0438\u043f (\u043c\u043e\u0434\u0443\u043b\u044c HTML-\u043a\u043e\u0434)<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u043d\u044e<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u044f\u0437\u044b\u043a\u043e\u0432 \u0438\/\u0438\u043b\u0438 \u041c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u0435\u043d\u044e-\u0433\u0430\u043c\u0431\u0443\u0440\u0433\u0435\u0440 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435. \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0434\u0430 \u0432 user.css:<\/p>\n<pre><code class=\"css\">@media (max-width: 992px) {   nav.navbar {order: -1;} }<\/code><\/pre>\n<h3>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/h3>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/61f008964615593b75e24840\" data-style=\"\" id=\"61f008964615593b75e24840\" width=\"\"><\/div>\n<p>\u042d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f Joomla 4, \u0430 \u043d\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0433\u043e. \u041d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Cassiopeia  \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c [<strong><em>\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0449\u0430\u044f \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c (WCAG 2.1) \u0438 \u0438\u0445 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c (\u0413\u041e\u0421\u0422 \u0420 52872-2019)<\/em><\/strong><em> &#8212; \u0422.\u0421.<\/em>], \u0441\u0442\u043e\u0438\u0442 \u043d\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e\u0431 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <strong>\u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438<\/strong> (\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0441\u0430\u0439\u0442\u0430)<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; \u041f\u043b\u0430\u0433\u0438\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>\u0418\u0449\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d &#171;\u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u041f\u0430\u043d\u0435\u043b\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0433\u0434\u0435 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 (\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u0439\u0442, \u0432\u0435\u0437\u0434\u0435)<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <strong>\u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e<\/strong> (\u043d\u0430\u0436\u043c\u0438\u0442\u0435 Tab \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <strong>Alt+9<\/strong> \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0432\u0441\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u043c\u0435\u043d\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u0432\u0441\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043c\u043e\u0434\u0443\u043b\u0438)<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; \u041f\u043b\u0430\u0433\u0438\u043d\u044b<\/p>\n<\/li>\n<li>\n<p>\u0418\u0449\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d &#171;\u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043c\u0435\u043d\u044e&#187;<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0433\u0434\u0435 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043c\u0435\u043d\u044e (\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u0439\u0442, \u0432\u0435\u0437\u0434\u0435)<\/p>\n<\/li>\n<li>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/61f0089ccd09f7f6552eb55b\" data-style=\"\" id=\"61f0089ccd09f7f6552eb55b\" width=\"\"><\/div>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/h3>\n<p>\u0426\u0435\u043b\u044c \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0432\u0441\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0441\u043e\u0432\u0435\u0442\u044b, \u0442\u0440\u044e\u043a\u0438 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438. \u041d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0412\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u044d\u0442\u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438, \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0438\u0445 \u0432\u043c\u0435\u0441\u0442\u0435:<\/p>\n<ul>\n<li>\n<p><strong>Customize your Cassiopeia Template<\/strong>\u00a0\u043e\u0442 \u042d\u043b\u0438\u0437\u044b \u0424\u043e\u043b\u0442\u0435\u043d (<a href=\"https:\/\/github.com\/coolcat-creations\" rel=\"noopener noreferrer nofollow\">Elisa Foltyn aka coolcat<\/a>) \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0435 Joomla User Group \u0432 \u041d\u044c\u044e \u0414\u0436\u0435\u0440\u0441\u0438 \u2013 \u043d\u043e\u044f\u0431\u0440\u044c 2021<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cLOarOP5NI0\" rel=\"noopener noreferrer nofollow\">https:\/\/www.youtube.com\/watch?v=cLOarOP5NI0<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Child Templates in J!4.1<\/strong> (\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0442\u0435\u043c\u044b \u0432 Joomla 4.1) \u043e\u0442 \u0414\u0438\u043c\u0438\u0442\u0440\u0438\u0441\u0430 \u0413\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u043a\u043e\u0433\u0438\u0430\u043d\u043d\u0438\u0441\u0430 \u00a0(aka <a href=\"https:\/\/github.com\/dgrammatiko\" rel=\"noopener noreferrer nofollow\">dgrammatiko<\/a>)\u00a0\u043d\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0435 Joomla User Group London\u00a0&#8212; \u0434\u0435\u043a\u0430\u0431\u0440\u044c 2021<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/dgrammatiko.online\/talks\/\" rel=\"noopener noreferrer nofollow\">https:\/\/dgrammatiko.online\/talks\/<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=8lX44gS9QG8\" rel=\"noopener noreferrer nofollow\">https:\/\/www.youtube.com\/watch?v=8lX44gS9QG8<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Joomla 4.1\u00a0insights<\/strong> \u043e\u0442 \u0414\u0438\u043c\u0438\u0442\u0440\u0438\u0441\u0430 \u0413\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u043a\u043e\u0433\u0438\u0430\u043d\u043d\u0438\u0441\u0430 \u00a0(aka <a href=\"https:\/\/github.com\/dgrammatiko\" rel=\"noopener noreferrer nofollow\">dgrammatiko<\/a>)\u00a0\u043d\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0435 Joomla Extensions Developers JUG &#8212; 20 \u044f\u043d\u0432\u0430\u0440\u044f 2022\u0433.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.facebook.com\/events\/259747792922384\" rel=\"noopener noreferrer nofollow\">https:\/\/www.facebook.com\/events\/259747792922384<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0421\u0435\u0440\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439 \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia<\/strong> \u043e\u0442 \u0410\u0441\u0442\u0440\u0438\u0434 \u0413\u044e\u043d\u0442\u0435\u0440 (Astrid G\u00fcnther) \u0432 \u0435\u0451 \u0431\u043b\u043e\u0433\u0435<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/blog.astrid-guenther.de\/en\/allgemeines-zu%20cassiopeia-und-joomla4\/\" rel=\"noopener noreferrer nofollow\"><u>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0435 Cassiopeia<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/blog.astrid-guenther.de\/en\/warum-cassiopeia\/\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0447\u0435\u043c\u0443 Cassiopeia?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-banner\/\" rel=\"noopener noreferrer nofollow\"><u>\u0411\u0430\u043d\u043d\u0435\u0440 \u043d\u0430\u0432\u0435\u0440\u0445\u0443 \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e\u0434 \u043d\u0438\u043c<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-optionen\/\" rel=\"noopener noreferrer nofollow\"><u>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-autorinfo\/\" rel=\"noopener noreferrer nofollow\">\u0428\u0430\u0431\u043b\u043e\u043d Cassiopeia &#8212; \u0431\u043b\u043e\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Joomla 4: \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Cassiopeia \u0441 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u043c \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u043f\u043e\u0434 \u043d\u0438\u043c <\/strong>\u043e\u0442 \u0410\u0441\u0442\u0440\u0438\u0434 \u0413\u044e\u043d\u0442\u0435\u0440 (Astrid G\u00fcnther)  \u0432 \u0436\u0443\u0440\u043d\u0430\u043b\u0435 Joomla Community Magazine \u2013 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044c 2021<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/magazine.joomla.org\/all-issues\/september-2021\/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation\" rel=\"noopener noreferrer nofollow\">https:\/\/magazine.joomla.org\/all-issues\/september-2021\/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 Classes \u0432 Blog View<\/strong> (image-left, image-right, image-bottom, image-alternate, boxed, \u2026 ) \u043e\u0442 Ciaran Walsh<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/issues.joomla.org\/tracker\/joomla-cms\/18319\" rel=\"noopener noreferrer nofollow\">https:\/\/issues.joomla.org\/tracker\/joomla-cms\/18319<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Cassiopeia<\/strong> <em>[\u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0443 <\/em><strong><em>\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0449\u0430\u044f \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c (WCAG 2.1) \u0438 \u0438\u0445 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c (\u0413\u041e\u0421\u0422 \u0420 52872-2019)<\/em><\/strong><em> &#8212; \u0422.\u0421.] &#8212; <\/em> \u043e\u0442 \u041a\u0440\u0438\u0441\u0442\u0438\u0430\u043d\u0430 \u041c\u0430\u0439\u0435\u0440-\u0428\u0442\u0430\u0434\u0442\u0435\u0440\u0440\u0430 (Christiane Maier-Stadtherr) \u043d\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0435 JUG London 21 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f 2021\u0433.<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f <a href=\"https:\/\/docs.google.com\/presentation\/d\/11UKdDwfhKtIKIVk0CCKE9IxrwK93uVjx4UVSJHjQHB0\/edit?usp=sharing\" rel=\"noopener noreferrer nofollow\">https:\/\/docs.google.com\/presentation\/d\/11UKdDwfhKtIKIVk0CCKE9IxrwK93uVjx4UVSJHjQHB0\/edit?usp=sharing<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Joomla 4: \u0448\u0430\u0431\u043b\u043e\u043d Cassiopeia <\/strong>\u043e\u0442 \u041f\u0430\u0442\u0440\u0438\u043a\u0430 \u0414\u0436\u0435\u043a\u0441\u043e\u043d\u0430 (Patrick Jackson) \u0432 \u0436\u0443\u0440\u043d\u0430\u043b\u0435 Joomla Community Magazine \u2013 \u044f\u043d\u0432\u0430\u0440\u044c 2021\u0433.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/magazine.joomla.org\/all-issues\/january-2021\/joomla-4-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">https:\/\/magazine.joomla.org\/all-issues\/january-2021\/joomla-4-cassiopeia-template<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442 \u0441 Cassiopeia &#8212; \u043d\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 Joomla<\/strong> \u043e\u0442 Maarten Blokdijk \u043d\u0430 Joomla Day USA 2021<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/jdayusa.com\/2021\/sessions-2021\/sessions\/kickstart-cassiopeia-the-new-joomla-frontend-template\" rel=\"noopener noreferrer nofollow\">https:\/\/jdayusa.com\/2021\/sessions-2021\/sessions\/kickstart-cassiopeia-the-new-joomla-frontend-template<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Cassiopeia \u2013 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0432 Joomla 4<\/strong>\u00a0[\u043d\u0435\u043c\u0446\u0435\u043a\u0438\u0439 \u044f\u0437\u044b\u043a] \u043e\u0442 \u0412\u0438\u0432\u0430\u043d\u043d\u044b \u041c\u0435\u043d\u0446\u0435\u043b\u044c (Viviana Menzel) \u043d\u0430 JoomlaDay DACH 2021 (\u0413\u0435\u0440\u043c\u0430\u043d\u0438\u044f) \u2013 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044c 2021<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f <a href=\"https:\/\/www.dr-menzel-it.de\/images\/J4-Template.pdf\" rel=\"noopener noreferrer nofollow\">https:\/\/www.dr-menzel-it.de\/images\/J4-Template.pdf<\/a><\/p>\n<\/li>\n<li>\n<p>\u0412\u0438\u0434\u0435\u043e <a href=\"https:\/\/www.youtube.com\/watch?v=wk19Asepo8c\" rel=\"noopener noreferrer nofollow\">https:\/\/www.youtube.com\/watch?v=wk19Asepo8c<\/a><\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043c\u043e-\u0441\u0430\u0439\u0442 <a href=\"https:\/\/cassiopeia.joomla.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/cassiopeia.joomla.com\/<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0428\u0430\u0431\u043b\u043e\u043d Cassiopeia \u0432 Joomla 4<\/strong>\u00a0[\u043d\u0435\u043c\u0435\u0446\u043a\u0438\u0439 \u044f\u0437\u044b\u043a] \u043e\u0442 \u0425\u0430\u0433\u0435\u043d\u0430 \u0413\u0440\u0430\u0444\u0430 (Hagen Graf) \u2013 \u043e\u043a\u0442\u044f\u0431\u0440\u044c 2021<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/blog.novatrend.ch\/2021\/10\/11\/cassiopeia-template-in-joomla-4\/\" rel=\"noopener noreferrer nofollow\">https:\/\/blog.novatrend.ch\/2021\/10\/11\/cassiopeia-template-in-joomla-4\/<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <\/p>\n<div class=\"tm-article-poll\">\n<div class=\"tm-notice tm-article-poll__notice tm-notice_positive\"><!----> <\/p>\n<div class=\"tm-notice__inner\"><!----> <\/p>\n<div class=\"tm-notice__content\"><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/post\/647399\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__header\">\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u043b\u0438 \u0412\u044b \u0441 Joomla?<\/div>\n<div class=\"tm-article-poll__answers\">\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">             57.14%           <\/span> <span class=\"tm-article-poll__answer-label\">\u0414\u0430<\/span> <span class=\"tm-article-poll__answer-votes\">             4           <\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width:57.14%;\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">             42.86%           <\/span> <span class=\"tm-article-poll__answer-label\">\u041d\u0435\u0442<\/span> <span class=\"tm-article-poll__answer-votes\">             3           <\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width:42.86%;\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__stats\">        \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 7 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.          \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043d\u0435\u0442.      <\/div>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/647399\/\"> https:\/\/habr.com\/ru\/post\/647399\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 <a href=\"https:\/\/slides.woluweb.be\/cassiopeia\/cassiopeia.html\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0438 <\/a>\u041c\u0430\u0440\u043a\u0430 \u0414\u0435\u0448\u0435\u0432\u0440\u0430 (<a href=\"https:\/\/www.woluweb.be\/\" rel=\"noopener noreferrer nofollow\">Marc Dech\u00e8vre<\/a>) \u0441 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u043e\u0439 tips and tricks \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia &#8212; \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0441 Joomla 4.\u0445. \u041e\u043d \u0437\u0430\u043c\u0435\u043d\u0438\u043b \u0441\u043e\u0431\u043e\u0439 \u0434\u0430\u0432\u043d\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 Protostar. <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u044f \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430: <\/p>\n<ul>\n<li>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (\u043d\u0435 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435) \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u0442\u0430\u0442\u044c\u0438. <\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u043e\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u043e\u0447\u0438\u043a\u0430 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u044b \u0432 [<em>\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u043a\u0443\u0440\u0441\u0438\u0432\u043e\u043c &#8212; \u0422.\u0421.<\/em>]. <\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 (\u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 WCAG \u0438 \u0413\u041e\u0421\u0422) \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<\/li>\n<\/ul>\n<div class=\"persona\" persona=\"true\">\n<h5 class=\"persona__heading\" persona=\"true\">\u041c\u0430\u0440\u043a \u0414\u0435\u0448\u0435\u0432\u0440 (Marc Dech\u00e8vre)<\/h5>\n<p persona=\"true\" class=\"persona__text\">\u0427\u043b\u0435\u043d\u00a0<a href=\"https:\/\/www.joomla.fr\/association\/membres\/marc-dechevre\" rel=\"noopener noreferrer nofollow\">\u0421\u043e\u0432\u0435\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0424\u0440\u0430\u043d\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0439 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Joomla<\/a>, <a href=\"https:\/\/volunteers.joomla.org\/joomlers\/1794-marc-dechevre\" rel=\"noopener noreferrer nofollow\">\u0447\u043b\u0435\u043d \u0433\u0440\u0443\u043f\u043f\u044b<\/a>\u00a0<strong>\u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0443<\/strong>\u00a0\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0436\u0443\u0440\u043d\u0430\u043b\u0430\u00a0<strong>\u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 Joomla<\/strong>\u00a0(\u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Joomla, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443), \u0430\u0432\u0442\u043e\u0440 \u0441\u0442\u0430\u0442\u0435\u0439 \u0432 <a href=\"https:\/\/magazine.joomla.org\/all\/itemlist\/user\/48403-marcdech%C3%A8vre\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0436\u0443\u0440\u043d\u0430\u043b\u0435 Joomla Magazine<\/a>, \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 (\u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Joomla, \u043d\u043e \u0438 Wordpress \u0438 \u0434\u0440\u0443\u0433\u0438\u0445). <\/p>\n<\/div>\n<h2>\u041f\u0440\u0435\u0430\u043c\u0431\u0443\u043b\u0430<\/h2>\n<p>\u041a\u0430\u043a \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u043d\u0430\u0435\u0442\u0435 \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 Joomla 4.1 [<em>\u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0441\u0430\u0439\u0442 &#8212; \u0432 Joomla 4.1 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f &#171;\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0442\u0435\u043c\u044b&#187; &#8212; \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b &#8212; \u0422.\u0421<\/em>.]  \u043f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0430\u043c css, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, js \u0438 scss \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<ul>\n<li>\n<p>\u0441 <em>templates\/cassiopeia\/<\/em>  \u0432 Joomla! 4.0<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 <em>media\/templates\/site\/cassiopeia\/<\/em>  \u0432 Joomla! 4.1+<\/p>\n<\/li>\n<\/ul>\n<p>\u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0443 \u0438 \u043f\u043e\u0434\u043e\u0431\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432.<\/p>\n<p><strong>\u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0437\u043d\u0430\u0442\u044c:<\/strong> \u0435\u0441\u043b\u0438 \u0412\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u0430\u0439\u043b <strong>templates\/cassiopeia\/css\/user.css<\/strong>  \u0432 Joomla! 4.0, \u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e Joomla! 4.1 \u0444\u0430\u0439\u043b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u043d \u0432 <strong>media\/templates\/site\/cassiopeia\/css\/user.css<\/strong>. \u041c\u043e\u0436\u043d\u043e \u043d\u0435 \u0431\u043e\u044f\u0442\u044c\u0441\u044f \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0438 user.css, \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0441\u044f \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0433\u0440\u0435\u0447\u0435\u0441\u043a\u0438\u0439 Joomla-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0414\u0438\u043c\u0438\u0442\u0440\u0438\u0441 \u0413\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u043a\u043e\u0433\u0438\u0430\u043d\u043d\u0438\u0441 (Dimitris Grammatikogiannis).<\/p>\n<h2>\u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Cassiopeia Joomla 4<\/h2>\n<p>\u0412\u0435\u0441\u043e\u043c\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043d\u0435\u043c\u0430\u043b\u043e:<\/p>\n<ul>\n<li>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/strong> <em>[\u0432 \u0440\u0430\u0437\u0440\u0435\u0437\u0435 \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445 \u0438 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u043e\u0432 \u043f\u043e \u0437\u0440\u0435\u043d\u0438\u044e, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 \u0438 \u0413\u041e\u0421\u0422 &#8212; \u0422.\u0421.] <\/em> &#8212; \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043d\u0435 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430.<\/strong> \u041f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lighthouse\/GTMetrix \u043d\u0430 \u0431\u043e\u0435\u0432\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b 97 \u0431\u0430\u043b\u043b\u043e\u0432 \u0434\u0430\u0436\u0435 \u0434\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0434\u0443\u0445\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0436\u0430\u0442\u0438\u044f \u0442\u0440\u0430\u0444\u0444\u0438\u043a\u0430. [<em>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u043b: Lighthouse \u0434\u0430\u043b 80 \u0431\u0430\u043b\u043b\u043e\u0432 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 96 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 &#8212; \u0422.\u0421.<\/em>]<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/strong> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f CSS Grid, CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0439 javascript \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0442.\u0434., \u0430 \u0442\u0430\u043a \u0436\u0435 Bootstrap 5 \u0438 FontAwesome 5.<\/p>\n<\/li>\n<li>\n<p> <strong>\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/strong> \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 &#8212; \u0432\u044b\u0445\u043e\u0434 Joomla 4.1 \u043d\u0430\u043c\u0435\u0447\u0435\u043d \u043d\u0430 15 \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2022 \u0433\u043e\u0434\u0430. 18 \u044f\u043d\u0432\u0430\u0440\u044f 2022 \u0433\u043e\u0434\u0430 &#8212; \u0441\u0442\u0430\u0442\u0443\u0441 Release Candidate <em>[\u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043f, &#171;\u0434\u043e\u0448\u043b\u0438\u0444\u043e\u0432\u043a\u0443&#187; \u0440\u0435\u043b\u0438\u0437\u0430 &#8212; \u0422.\u0421.].<\/em> <a href=\"https:\/\/github.com\/joomla\/joomla-cms\/releases\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/joomla\/joomla-cms\/releases<\/a> \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b (\u0434\u043e\u0447\u0435\u0440\u043d\u044b\u0435 \u0442\u0435\u043c\u044b \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 Wordpress)<\/p>\n<\/li>\n<li>\n<p>\u0418\u043a\u043e\u043d\u043a\u0438 \u0434\u043b\u044f \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443 \u0412\u0430\u0441 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438. \u041d\u043e, Cassiopeia &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u0435\u0432\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 Joomla 4, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043d\u0430 Joomla 3 \u043d\u0438\u043a\u0442\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435\u0440\u044c\u0451\u0437 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 Protostar \u043a\u0440\u043e\u043c\u0435 \u043a\u0430\u043a \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<h2>\u041f\u0435\u0440\u0432\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f \u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia<\/h2>\n<p>\u041f\u0440\u0438 \u0431\u0435\u0433\u043b\u043e\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c: &#171;\u041e \u043d\u0435-\u0435\u0442! \u0422\u0430\u043a \u043c\u0430\u043b\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a!&#187; \u041d\u043e, \u043a\u0430\u043a \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0434\u0430\u043b\u0435\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0434\u0430\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043c\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0440\u0430\u0437\u0434\u0443\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442<\/p>\n<ul>\n<li>\n<p>\u043b\u0443\u0447\u0448\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u044f\u0434\u0440\u0430 Joomla \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u043e\u0432\u0435\u0442\u044b \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassiopeia<\/h2>\n<h3>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438<\/h3>\n<p>\u0412 Cassiopeia \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"css\">&lt;link href=\"\/media\/system\/images\/joomla-favicon.svg\" rel=\"icon\" type=\"image\/svg+xml\"> &lt;link href=\"\/media\/system\/images\/favicon.ico\" rel=\"alternate icon\" type=\"image\/vnd.microsoft.icon\"> &lt;link href=\"\/media\/system\/images\/joomla-favicon-pinned.svg\" rel=\"mask-icon\" color=\"#000\"><\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0445, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043d\u043e\u0432\u044b\u0445 \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043e\u043a <em>[\u0441 \u0442\u0435\u043c \u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u043d\u043e \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c &#8212; \u0422.\u0421.] <\/em>\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445:<\/p>\n<ul>\n<li>\n<p>\/templates\/cassiopeia\/images\/joomla-favicon.svg  <strong>\u0434\u043b\u044f Joomla 4.0<\/strong><\/p>\n<\/li>\n<li>\n<p>\/media\/templates\/site\/cassiopeia\/images\/joomla-favicon.svg <strong>\u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Joomla 4.1<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>\u0428\u0440\u0438\u0444\u0442\u044b<\/h3>\n<h5>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u00a0Google Fonts\u00a0\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0443<\/h5>\n<ul>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u043d\u0430 <a href=\"https:\/\/fonts.google.com\/\" rel=\"noopener noreferrer nofollow\">https:\/\/fonts.google.com\/<\/a><\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0432 user.css \u0448\u0430\u0431\u043b\u043e\u043d\u0430: <\/p>\n<ul>\n<li>\n<p>\/media\/templates\/site\/cassiopeia\/css\/user.css  \u0434\u043b\u044f Joomla 4.1+<\/p>\n<\/li>\n<li>\n<p>\/templates\/cassiopeia\/css\/user.css  \u0434\u043b\u044f Joomla 4.0<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"css\">\/* Import font from Google - Go to fonts.google.com, select a font and look for the import command *\/ @import url('https:\/\/fonts.googleapis.com\/css2?family=Georama:wght@100&amp;display=swap'); \/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. *\/ body {     font-family: 'Georama', sans-serif; }<\/code><\/pre>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: <a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template<\/a><\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 Google fonts \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/h4>\n<p>\u0418\u0437-\u0437\u0430 \u0437\u0430\u043a\u043e\u043d\u043e\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d \u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (GDPR \u0432 \u0415\u0432\u0440\u043e\u0441\u043e\u044e\u0437\u0435) \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u0430 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0431-\u0440\u0435\u0441\u0443\u0440\u043e\u0441\u0432 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 user.css. <\/p>\n<p>\u0412 \u043f\u043e\u043c\u043e\u0449\u044c: <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" rel=\"noopener noreferrer nofollow\">https:\/\/google-webfonts-helper.herokuapp.com\/fonts<\/a> <\/p>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: <a href=\"https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-optionen\/\" rel=\"noopener noreferrer nofollow\">https:\/\/blog.astrid-guenther.de\/en\/cassiopeia-optionen\/<\/a> > Fonts Scheme  <\/p>\n<h3>\u0426\u0432\u0435\u0442\u0430<\/h3>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0432\u0441\u0451\u043c \u0441\u0430\u0439\u0442\u0435<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 user.css \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 CSS \u043a\u043e\u0434.<\/p>\n<pre><code class=\"css\">:root {   --cassiopeia-color-primary: red;   --cassiopeia-color-hover: green;   --cassiopeia-color-link: blue; }<\/code><\/pre>\n<h4>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/h4>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430: \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043c\u0435\u043d\u044e &#8212; \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e &#8212; \u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b &#8212; CSS-\u043a\u043b\u0430\u0441\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <strong>colors1<\/strong>  <em>[\u0423\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 css-\u043a\u043b\u0430\u0441\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a \u0432\u044b\u0432\u043e\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 (\u0442\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 Joomla, \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0438\u043b\u0438 \u0442\u043e\u0432\u0430\u0440 \u0434\u043b\u044f \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432 \u0438 \u0442.\u0434.) &#8212; \u0422.\u0421.]<\/em><\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>.colors1 {   --website-color-1: #5e2688;   --cassiopeia-color-primary: var(--website-color-1); }<\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u043f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432 RGBA-\u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 RGB (\u043f\u0440\u0438\u043c\u0435\u0440: 37, 143, 167)<\/p>\n<pre><code class=\"css\">.colors1 {   --website-color-primary: 37, 143, 167;   --website-color-hover: 242, 48, 48;   --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);   --cassiopeia-color-hover: rgb(var(--website-color-hover));   --cassiopeia-color-link: rgb(var(--website-color-primary)); }<\/code><\/pre>\n<h4>\u0422\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 Joomla<\/h4>\n<p>\u0415\u0441\u0442\u044c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u043e\u0442 \u041d\u0438\u043a\u043e\u043b\u0430\u0441\u0430 \u0414\u0438\u043e\u043d\u0438\u0441\u043e\u043f\u0443\u043b\u043e\u0441\u0430 (Nicholas Dionysopoulos):<\/p>\n<ul>\n<li>\n<p>\u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430 (\u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Atum)<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 (\u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Cassiopeia)<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <a href=\"http:\/\/readme.md\/\" rel=\"noopener noreferrer nofollow\">README.md<\/a> \u043d\u0430 <a href=\"https:\/\/github.com\/nikosdion\/DarkMagic\" rel=\"noopener noreferrer nofollow\">\u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430<\/a> \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043e Joomla 3. \u041d\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0438\u043c\u0435\u0435\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438: \u043e\u0434\u043d\u0430 \u0434\u043b\u044f Joomla 3, \u0434\u0440\u0443\u0433\u0430\u044f \u0434\u043b\u044f Joomla 4. \u0423\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;\u0440\u0435\u043b\u0438\u0437\u044b&#187; \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435. \u0412\u0435\u0440\u0441\u0438\u0438 1.x \u0434\u043b\u044f Joomla 3, \u0432\u0435\u0440\u0441\u0438\u0438 2.\u0445 &#8212; \u0434\u043b\u044f Joomla 4.<\/p>\n<p>\u0412\u043f\u043e\u043b\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u0412\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0441\u0430\u0439\u0442\u0430 \u0435\u0449\u0451 \u0433\u0438\u0431\u0447\u0435. \u0428\u0430\u0431\u043b\u043e\u043d Cassiopeia \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f 1 \u0440\u0430\u0437, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0442\u043d\u0435 \u043c\u0435\u0441\u0442 \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 CSS \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0442\u0451\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 (\u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0438, \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0442.\u0434. \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u0430\u043c \u0441\u0430\u0439\u0442\u0430).<\/p>\n<pre><code class=\"css\">:root {     --website-color-1: #D95F69;     --website-color-2: #F29544; } @media screen and (prefers-color-scheme: dark) { \/* \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 Dark Magic *\/     :root {         --cassiopeia-color-primary: var(--website-color-1) !important;         --cassiopeia-color-link: var(--website-color-1) !important;         --cassiopeia-color-hover: var(--website-color-2) !important;         --cassiopeia-color-gradient-end: var(--website-color-1) !important;         --cassiopeia-color-gradient-start: var(--website-color-2) !important;     }     .btn-primary {         background-color: var(--website-color-1) !important;     }     .btn-primary:focus, .btn-primary:hover {         background-color: var(--website-color-2) !important;     }     .back-to-top-link {         color: white !important;     }     #cf_1 { \/* Convert Forms \u0442\u0430\u043a \u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 *\/         --background-color: rgba(0, 0, 0, 0.9) !important;     } }<\/code><\/pre>\n<h3>\u041c\u0430\u043a\u0435\u0442\u044b<\/h3>\n<h4>\u041f\u043e\u0437\u0438\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Cassoipeia<\/h4>\n<p>\u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0421\u0442\u0430\u0442\u044c\u044f \u043e \u0442\u043e\u043c, <a href=\"https:\/\/coolcat-creations.com\/en\/blog\/customize-your-cassiopeia-template\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 Joomla 4<\/a> <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h4>\u041a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0432 \u0442\u043e\u043c \u0436\u0435 \u0440\u044f\u0434\u0443, \u0447\u0442\u043e \u0438 \u043c\u0435\u043d\u044e<\/h4>\n<p>\u0412 \u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430: \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0421\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 &#8212; Cassiopeia &#8212; \u0432\u043a\u043b\u0430\u0434\u043a\u0430 &#171;\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b&#187; &#8212; \u043e\u043f\u0446\u0438\u044f &#171;\u041b\u043e\u0433\u043e\u0442\u0438\u043f&#187;. \u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438\u043b\u0438 \u0436\u0435 \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043b\u043e\u0433\u043e\u0442\u0438\u043f (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442) \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0440\u044f\u0434\u0443 \u043f\u0435\u0440\u0435\u0434 (\u0432\u044b\u0448\u0435) \u043c\u0435\u043d\u044e. \u041e\u043a, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u0442? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u043d\u043e \u043d\u0430 99,9% \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f \u044f\u0432\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0445\u043e\u0434.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0431\u044b\u043b \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u044f\u0434\u0443 \u0441 \u043c\u0435\u043d\u044e, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u041a\u043e\u043d\u0442\u0435\u043d\u0442 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0438\u043f\u0430  HTML-\u043a\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c HTML-\u043a\u043e\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u043e\u0434\u0443\u043b\u044c (\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 &lt;a href=&#187;\/&#187;>&lt;img src=&#187;your_logo.webp&#187; alt=&#187;logo desc&#187; \/>&lt;\/a><\/p>\n<\/li>\n<li>\n<p>\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044f &#171;\u041c\u0435\u043d\u044e&#187; <\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 (\u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0412\u0430\u0441 \u043d\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u043b\u0438 \u044f\u0437\u044b\u043a\u043e\u0432 \u0441\u0430\u0439\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0444\u0443\u0442\u0435\u0440 \u0441\u0430\u0439\u0442\u0430 \u0432 Joomla 4<\/h4>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u043e\u0434\u0443\u043b\u044c<\/p>\n<ul>\n<li>\n<p>\u0418\u0434\u0451\u043c \u0432 \u041a\u043e\u043d\u0442\u0435\u043d\u0442 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 (\u0438\u043b\u0438 \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u0430\u0439\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0438\u043f\u0430 &#171;\u041a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u044b&#187;, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e Footer,<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u0441\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043c\u0435\u043d\u044e \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c: 2 \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 \u0441\u0430\u0439\u0442\u0430, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0433\u043e\u0434. \u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 Joomla.<\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-328558","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/328558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=328558"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/328558\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=328558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=328558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=328558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}