Need help on Joomla countmodules

[shaibustephen]

I want to have three position box. One left=col-md-2{position-x}, middle =col-md-7{position-y}, right =col-md-2{position-z}.
On these, if only the position in a container of col-md-7 that has content, it should occupied all the entire space and extend to both end of the site with leaving blank space. So, if either position y and z has content, the position z should readjust y taking it rightful space side while y readjust again to occupy the remaining space left and if the three comes in, then, it should come the way it should appear.
How should I go about using joomla countmodules? Sample
// Adjusting content width
if ($this->countModules('sidebar-1') && $this->countModules('sidebar-2')) {
$span = "col-md-6";
} elseif ($this->countModules('sidebar-1') && !$this->countModules('sidebar-2')) {
$span = "col-md-9";
} elseif (!$this->countModules('sidebar-1') && $this->countModules('sidebar-2')) {
$span = "col-md-9";
} else {
$span = "col-md-12";
}

[Mr. Wimpy]

Hey, hey,
Do you really need 3 positions for 3 modules?

I believe 1 position for 3 modules will work perfectly.

HTML

Code: Select all

<?php if($this->countModules("sidebar")) { ?>
<div class="sidebar display-<?php echo $this->countModules("sidebar"); ?>">

  <jdoc:include type="modules" name="sidebar" style="" />

</div>
<?php } ?>

echo $this->countModules("sidebar") displays the number of active modules in the sidebar position.
If you display 2 modules in that position $this->countModules("sidebar") == 2.
And the class becomes display-2. 1 module changes the class to display-1, 3 modules has class display-3.

CSS

Code: Select all

.sidebar {
  display: grid;
  grid-gap: 20px; /* Create space between grid cells */
  grid-template-columns: 1fr 3fr 1fr; /* Create a 3-column grid with a middle wide column */
}

.module-1,
.module-2,
.module-3 {
  grid-column: span 3; /* Span the modules across 3 columns on small screens (mobile first)  */
}

/* For screens wider than 750px */
@media (min-width: 750px) {
  .module-1,
  .module-3 {
    grid-column: span 1; /* Span the 2 outside modules over 1 column */
  }
  .display-3 .module-2 {
    grid-column: span 1; /* Span the middle module across 1 column if 3 modules are displayed */
  }
  .display-2 .module-2 {
    grid-column: span 2; /* Span the middle module across 2 columns if only 2 modules are displayed */
  }
}

.module-1, -2, -3 is the module class suffix you enter under Advanced in the respective modules.
You can use your own.

Good luck.
Wim

[shaibustephen]

Screenshot_2019-06-11 Home.png

Thanks for your explanation. The screen shot below is what i get. How do i make use of normal text than using display as you used in the example. What i got is too bold for use in a normal website text font-size 12px.

[shaibustephen]

Screenshot_2019-06-11 Home(1).png

I want it to display like the sample text format of the screen shot below. Then, if i want to readjust it to four column, what should i change in the sample you gave me?

[Mr. Wimpy]

if i want to readjust it to four column

That's not fair. You're changing the rules [haha]

Do I need to take something into account when there are less than 4 modules?

For the fontsize I need an url.
My code does not change the fontsize.
Unless something wonky is going on...

Thank you.
Wim

[shaibustephen]

Kindly view the larger font size display when i followed above sample span

https://www.sadiqdigitalprints.com.ng/delight_j/

[shaibustephen]

yes, i also want it to take note if there are four columns and above

[Mr. Wimpy]

So it is my code
display-1 to -4 is used by bootstrap. It's used to change the font-size and so we can't use that.

New code + some extra changes in css
- In my code I renamed 'display-' to 'modules-', but you can name your own.
- The css is now a 4 column grid
-- If 4 modules are counted all modules span across 1 column.
-- if 3 or less modules are counted "module-2" spans across multiple columns.

HTML

Code: Select all

<?php if($this->countModules("sidebar")) { ?>
<div class="sidebar modules-<?php echo $this->countModules("sidebar"); ?>">

  <jdoc:include type="modules" name="sidebar" style="" />

</div>
<?php } ?>

CSS

Code: Select all

.sidebar {
  display: grid;
  grid-gap: 20px; /* Create space between grid cells */
  grid-template-columns: repeat(4, 1fr); /* Create a 4-column grid */
}

.sidebar > div {
  grid-column: 1 / -1; /* Span the modules across all columns on small screens (mobile first)  */
}

/* For screens wider than 750px */
@media (min-width: 750px) {
  .sidebar > div {
    grid-column: span 1; /* Span modules across 1 column */
  }
  .modules-3 .module-2 {
  	grid-column: span 2; /* If 3 modules: Span the "middle module" across 2 columns */
}
  .modules-2 .module-2 {
    grid-column: span 3; /* If 2 modules: Span the "middle module" across 3 columns */
  }
}

For more info on css-grid I suggest you to check out these links:
https://gridbyexample.com with some nice examples for creating grids.
https://css-tricks.com/snippets/css/complete-guide-grid

So you may be able to adjust my code to your needs.
Regards,
Wim