[#34464] - Add 2 new positions
- Closed
- 9 Jun 2021
- Medium
- Build: staging
- # 34464
Dear colleagues. How many web designers create websites using the Cassiopeia template, redefining its blocks, creating a completely new design?
I do the same thing. The Cassiopeia template has accessibility, normalization, styles, and a framework. This template is ideal for starting even if you need to create a website with a completely different design.
But Cassiopeia is not adapted for use on a large scale with such capabilities.
Cassiopeia is used only with the design that is already laid down. This is bad. It can not be used as NORMALIZE.CSS is used.
We need to add this to the template:
//134 line
<jdoc:include type="modules" name="top" style="none" class="grid-child" />
//180 line
<jdoc:include type="modules" name="bottom" style="none" class="grid-child" />
The important thing is that you need to add these positions without the <DIV> container.
Using classes in a position
class="grid-child"
we specify that the position will have the default grid width that all blocks on the site have.
Class processing should be added to
//25 line \templates\cassiopeia\html\layouts\chromes\noCard.php
//25 line \templates\cassiopeia\html\layouts\chromes\card.php
$moduleAttribs['class'] = $module->position . ' no-card ' . ($params->get('moduleclass_sfx') ?
(htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8')) : $attribs['class']);
Add the GRID-ARIA grid position to the styles.
.
Dear colleagues, thanks to the change. You can create modules on the site that are the width of the entire site, this can be a map of the route map. It can be a carousel of products. Agree that the driving directions and carousel are convenient when they are the entire width of the site.
Let's make more features for Cassiopeia!
By default, this position has only the width of the content.
This is also convenient when placing just ordinary modules.
If desired, we can place the gallery in the entire width of the site between the blocks.
90% of sites have a gallery in the site header with a width of 100% without affecting the main menu.
For example, the Xiaomi website.
https://www.mi.com/global/
https://www.solus.com/
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Labels |
Added:
?
|
||
Interesting idea for bringing more flexibility into Cassiopeia. We have to look into it, but probably for the next version of J4.
There's nothing to learn here. Here it is necessary to test.
Add to the nightly build, and test and test. During the test, there will be errors or not be errors.
Would you like to make a PR for that? Looking forward to test it.
Would you like to make a PR for that? Looking forward to test it.
I can't do PR since the Cassiopeia repository is closed. https://github.com/joomla/cassiopeia/
I've been doing this for less than a year, redoing Cassiopeia for J3, adding these positions. I'll tell you this is very convenient.
Of course, in my version of Cassiopeia for J3, I had to replace jQuery with 3.5. But in general, everything works well. Thanks to this flexibility.
I could create a new HEADER for mobile devices. And also create your own hamburger menu also for mobile devices by placing other modules in the hamburger.
According to accessibility, if one HEADER has DISPLAY:NONE, then it is ignored completely and you can add another HEADER.
The use of such positions is very wide.
The cassiopeia repository was only an interim solution while working on improvements. Now Cassiopeia is integrated in core, so you can create a PR directly there.
The cassiopeia repository was only an interim solution while working on improvements. Now Cassiopeia is integrated in core, so you can create a PR directly there.
What CSS files should I make changes to? .min.css, .css, css?
Let's delete the old repository
It's not relevant, is it?
https://github.com/joomla/cassiopeia/
You need to change the scss files and build the css again. You need a development environment with composer and npm. Do you have experience using npm?
https://github.com/joomla/joomla-cms/tree/4.0-dev#how-to-get-a-working-installation-from-the-source
no experience with NPM
In the near future. I'll try adding PR
Can you post the proposed changes here and maybe someone else can submit a pull request?
Can you post the proposed changes here and maybe someone else can submit a pull request?
\templates\cassiopeia\index.php - Insert line 166
<jdoc:include type="modules" name="top" style="none" class="grid-child" />
\templates\cassiopeia\index.php - Insert line 212
<jdoc:include type="modules" name="bottom" style="none" class="grid-child" />
\templates\cassiopeia\html\layouts\chromes\noCard.php - Replace line 25
$moduleAttribs['class'] = $module->position . ' no-card ' . ($params->get('moduleclass_sfx') ?
(htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8')) : $attribs['class']);
\templates\cassiopeia\html\layouts\chromes\card.php - Replace line 25
$moduleAttribs['class'] = $module->position . ' card ' . ($params->get('moduleclass_sfx') ?
(htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8')) : $attribs['class']);
/templates/cassiopeia/templateDetails.xml - Insert 31, 39 lines
<position>top</position>
<position>bottom</position>
/templates/cassiopeia/scss/blocks/_css-grid.scss - Insert in 8 and 41 lines
". top top top top ." later ". banner banner banner banner ."
/templates/cassiopeia/scss/blocks/_css-grid.scss - Insert in 15 and 46 lines
". bot bot bot bot ." later ". bot-b bot-b bot-b bot-b ."
/templates/cassiopeia/scss/blocks/_css-grid.scss - Insert in 72 line
.container-top { grid-area: top;} after .container-banner { grid-area: banner;}
/templates/cassiopeia/scss/blocks/_css-grid.scss - Insert in 112 line
.container-bottom { grid-area: bot;} after .container-bottom-b { grid-area: bot-b;}
to make a wide module, you need to add a class suffix full-width in the module settings of the admin panel.
I'm confused: Your PR is for 4.1-dev .. so you want it to go into 4.1 and not 4.0?
I'm confused myself.
I hardly understand how GitHub works.
I've been trying to make changes to 4.0 for about 5 hours.
NetBeans throws an error. And through the web interface also did not work.
I'll try to make it for 4.0
Tell me what I'm doing wrong?
@brianpeat
There are no questions here.
I had a problem with that when I make changes. I have changes for only one file every time in one patch. I can't change 5 files to create 5 PR.
I had a problem to create 1 PR but to have 5 modified files in it.
I have many identical patches. If I delete everything.
Will the PR created by me remain?
@drmenzelit @chmst @Quy @richard67
<jdoc:include type="modules" name="top" style="none" class="grid-child" />
What do you think?
does the CLASS attribute have the correct name?
After all it is more correct in meaning that the attribute has the name DEFAULT_CLASS
Can this be closed now as there is a PR for it?
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-06-09 18:09:18 |
| Closed_By | ⇒ | korenevskiy |
Yes.
Interesting idea for bringing more flexibility into Cassiopeia. We have to look into it, but probably for the next version of J4.