I am puzzeled by the blog sample data

[Nickinamillion]

In an install of Joomla, there is some example data (Sample Data) that can be installed to populate a test/learning site. In the Blog Sample Data, while looking in the backend, it is mostly fairly easy to work out how it works. However, there are one or two things that evade my level of comprehension. Can anyone explain this please?
There is a background picture of the Milky-Way on the home page, under the Main Menu Blog, it has text in white saying 'Welcome to Joomla on Cassiopeia! etc'. In The back I can see it is a 'Custom' module named 'Image' in position banner. I could find no extra CSS. Under the advanced tab, Module Style = Inherited, I do not know where it is inherited form.
Q1 how is this text controlled to make it white? The default is for black text, and it is not controlled by the text color in the tiny editor.
Q2 how does the picture transform to the width of the page, where is this controlled from? The default behaviour repeats. It also usually only shows as much of the background picture that is covered with text. So you can show more of the picture by adding carriage returns. There is no user.css file

[ceford]

You need to Inspect the 'Welcome to Joomla' message with your browser Developer Tools. It is a H1. Select each container in turn to see the styles applied. There is a div with id="mod-custom118" where I can see the background image style is inline. Outside that is a div with class="container-banner full-width" styled from template.css.

[Nickinamillion]

Thank you for your help Mr Ford. I had seen the code you mentioned via dev tools. Unfortunately, I am still confused.
The HTML from the Joomla blog site

Code: Select all

<div class=". full-width">               
<div class="mod-custom custom banner-overlay" id="mod-custom118">
    <div class="overlay">
        <p>&nbsp;</p>
<h1 class="display-4 text-thin">Welcome to Joomla on Cassiopeia!</h1>
<p class="lead"><strong>You have chosen one of the most powerful CMS Systems in the world.</strong></p>
<p class="lead">Cassiopeia is the multi-purpose frontend template for Joomla 5.</p>
<p><a class="btn btn-primary btn-lg" href="/jmla_joomla/index.php/typography">Typography »</a></p>
<p>&nbsp;</p>
</div>
</div>
</div>

Is different to my site

Code: Select all

<div class="container-banner full-width">            
<div id="mod-custom110" class="mod-custom custom">
    <h1 class="display-4 text-thin">Welcome to my site</h1>
<p class="lead"><strong>I am fare from a Joomla developer</strong></p>
<p class="lead">With a little bit of help, maybe I will become one!</p>
<p><a class="btn btn-primary btn-lg" href="/jmla_mrbumble/index.php?view=article&amp;id=11&amp;catid=11">Typography »</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

So how does the Joomla site update the HTML without it getting wiped by the next update?
Where can the mod-custom118 be found, or the mod-custom110 on my site?

[ceford]

It is implemented as an override. Go to System / Templates / Cassiopeia Details and Files and then html / mod_custom / banner.php

Overrides are preserved during updates.

[Nickinamillion]

Thank you again. I checked out your reply and found that the /templates/cassiopeia/html/mod_custom/banner.php file on my site contains exactly the same code as the Joomla blog sample site. Yet the custom module in the banner position behave differently on both site as I described earlier.
I know that I have not loaded any overrides on my site, I also have not installed the blog sample data, so it must have been loaded with the basic Joomla site.
So what controls this loads this behaviour?

[ceford]

I do not understand what you mean by 'the Joomla blog site' and 'my site'. Are these two different sites that belong to you? Or what?

[Webdongle]

... and found that the /templates/cassiopeia/html/mod_custom/banner.php file on my site contains exactly the same code as the Joomla blog sample site. ...

It will do until you edit it. A template override is a copy of the core file and will be used instead of it. So you need to edit it. The file could be removed with an update so creating a Child template and an override for the child is preferred.

... Yet the custom module in the banner position behave differently on both site as I described earlier.
...

Depends on the module setting and template on each site.


Joomla installs with no data, you can either add sample data or add your own data. It is possible to add both but that can confuse things.

At this stage it may be helpful to know your general age group and computer experience. That way we can pitch are replies to the correct level.

[Nickinamillion]

I do not understand what you mean by 'the Joomla blog site' and 'my site'. Are these two different sites that belong to you? Or what?

A template override is a copy of the core file and will be used instead of it. So you need to edit it.

Sorry both, this has all got a bit muddled up. The original question was about the custom module, in the banner position, in the Sample Data Blog, the one with a background of the Milky-Way. It behaves differently to a Cassiopeia site without the sample data.
Looking at the Sample Blog Data site, the picture is full width with white writing that show up on the dark background. In a none sample data site this module and position, the background image repeats and the text is black. There are other ways of achieving this, I was inquiring about how it is achieved in the case (in a Cassiopeia side with the Sample Data Blog installed). I could not findanything that had been changed, only the result.

It is implemented as an override. Go to System / Templates / Cassiopeia Details and Files and then html / mod_custom / banner.php

The banner.php file have not been edited, it is the same as an unedited installation. So this is not how it is implemented.

[gws]

Are you aware that blog item menus produce a different page layout than article menus?

[Nickinamillion]

Of course I am. Are you aware of the 'Sample data Blog' that can be installed on a site? It is like no one has heard of it because this thread it going round in circle. I was inquiring about that because there are some things in it that I can not work you how they work.

[Webdongle]

We are having trouble because we don't understand your level of understanding.

...
At this stage it may be helpful to know your general age group and computer experience. That way we can pitch are replies to the correct level.

[Nickinamillion]

I think that is an irrelevant question. I thought that I had explained correctly, but nobody seem to understand, so I obviously I have not. An answer would reveal whether I asked a stupid question, but I don't think it is. Thanks but don't worry, I done.

[Mr. Wimpy]

It wasn't clear to me if you had already copied the banner.php override file to your site (that has no sample data).
This file has specific classes for the color of the text and the size of the image to work.

If you hadn't done so:
- Copy banner.php to your template (html/mod_custom).
- In your banner-module, under tab Advanced, set Layout to banner.

The text color and image size are styled by the class container-banner banner-overlay.
The image is loaded by the id mod_custom118 (the number is based on the module ID. In your own (data-less) site this number may be different).
You can check it in your browser's devtools. Select the part that says <div id="mod_custom118" class="mod-custom custom banner-overlay">

You can change the styles by adding .container-banner .banner-overlay and #mod_custom118 (or your module ID) to the user.css file.

[Nickinamillion]

Thank you, very much for your answer, I very much appreciate it.

It wasn't clear to me if you had already copied the banner.php override file to your site (that has no sample data).
This file has specific classes for the color of the text and the size of the image to work.

If you hadn't done so:
- Copy banner.php to your template (html/mod_custom).
- In your banner-module, under tab Advanced, set Layout to banner.

I did copy over the html/mod_custom/banner.php file to the correct location in my own site.

The text color and image size are styled by the class container-banner banner-overlay.
The image is loaded by the id mod_custom118 (the number is based on the module ID. In your own (data-less) site this number may be different).
You can check it in your browser's devtools. Select the part that says <div id="mod_custom118" class="mod-custom custom banner-overlay">

I did see the class container-banner banner-overlay, and the <div id="mod_custom118" class="mod-custom custom banner-overlay"> in the dev tools, thank you for confirming that it is these that shape the behaviour of this module.
I have also copied the same HTML and inline classes from the image module to my similar module (the classes and ID you describe are not in that code)
There is one thing I still do not understand and I need to know in order to duplicate the behaviour in my own site. Namely, what box or location in the back-end do I tick or write a class, ID or code in, in order to invoke the desired behaviour. I could not find any place in the sample site that contained anything different to my own site's back-end. I could only see the difference with the web tools. I am missing something fundamental. Thank you for your help.

[Mr. Wimpy]

Hm... it almost sounds like something is overriding the white colour or it's not there...

When you inspect <h1 class="display-4 text-this"> or <p class="lead"> on your empty site in devtools, can you see if there are styles that override the color="#fff" of .container-banner .banner-overlay?

Can you give us an url where we can look at it as well?

[Nickinamillion]

Thank you, Mr Wimpy.
There are small but significant differences that I can see with dev tools, between site. But I can not find where these differences are implemented in the back-end. My site loaded with blog sample data is local, but this site is very similar; https://cassiopeia.joomla.com/. The id="mod-custom117" is id="mod-custom118" in mine.

Code: Select all

<div class="container-banner full-width">
<div class="mod-custom custom banner-overlay" id="mod-custom117">
  <div class="overlay">
     <h1 class="display-4 text-thin">Welcome to Joomla on Cassiopeia!</h1>
  <p class="lead"><strong>You have chosen one of the most powerful CMS Systems in the world.</strong></p>
  <p class="lead">Cassiopeia is the multi-purpose frontend template for Joomla 4.</p>
  <p><a class="btn btn-primary btn-lg" href="/typography">Typography »</a></p>    
</div></div></div>

I have a site without the blog sample data loaded, that is: https://savehamfarm.org.uk/.

Code: Select all

<div class="container-banner full-width">  
  <div class="mod-custom custom" id="mod-custom110">
    <h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1>
    <h1 style="text-align: center;"><span style="color: #169179; background-color: #ced4d9;">Welcome to Save Ham Farm</span></h1>
    <p style="text-align: center;"><span style="color: #169179; background-color: #ced4d9;">Campaigning against house development on Ham Marsh and Farm</span></p>
    <h1>&nbsp;</h1><h1>&nbsp;</h1><h1>&nbsp;</h1>
  </div>
</div>

My none blog sample has no banner-overlay" id="mod-custom117". But as I said earlier, I do not know how that is implimented in the Back-End. Thx all for your help.

[Webdongle]

Compare the settings in the Modules

[Mr. Wimpy]

Okay...

1. Set the layout for the module to banner (tab: Advanced)
This sets the correct html and classes for the banner.

2. Clean up the text
2a. Under tab: Module open the editor's code view.
TinyMCE: Above the editor buttons: Tools > Source Code+
JCE: Above the editor buttons, to the right: Code

2b. Delete the content and replace it with:

Code: Select all

<h1 class="display-4 text-thin">Welcome to Save Ham Farm</h1>
<p class="lead">Campaigning against house development on Ham Marsh and Farm</p>

You now have the banner module set as on the sample data site.

The class display-4 sets the font-size. If you want a bigger font-size use a lower number.
The class text-thin makes the text... well... thin, and adds the line underneath.
The class lead sets a dynamic font-size.

You can ofcourse use your own classes and add these to your user.css file.

[Nickinamillion]

Thank you, Mr Wimpy, that is fabulate. It turns out that it was fairly simple, I had no idea. I had looked in the advanced tab places, I do not know how I missed it. Also, I knew the code in the editor was important, so I don't know why I emitted that. Thank you for putting me straight.