Cassiopeia - Alternative to Brand Topic is solved

[rgtr]

Hi

If one uses the Brand setting, then the one gets to provide a Site Title, and a Site Description.
IF these are quite long, then on mobiles etc, the words get chopped rather than wrapped.

The simple answer, which works well is to set the Brand setting to off, and to create a custom module in position "below-top". It works well. See tdocplus.co.uk/wp.
BY the way, all the tables on this site are now grids and working well.

The next thing I want to achieve is to place an image to the left side of the title and description.

However, setting up a grid in "below-top" seems to have its own set of problems. A grid which "self adjusts" seems the obvious answer. One would need two grid items alongside each other - one for the image, the other for the text for wider screens. For mobiles this needs to change to two grid items, one above the other.

"grid-template-columns" and "...-rows" using "auto-fit" and auto-fill" would seem to provide the answers... however, much experimenting  has failed. Some strange effects have been achieved, but not the one desired.

See here: http://tdocplus.co.uk/dionnevallantyne/
Now I am stuck. When I put an image it all goes belly up?

Any ideas ?

Richard

[rgtr]

Hi all

Well well well ...

Tried the auld trick of putting the image in as a background ...

And hey presto it is fine.

See here: http://tdocplus.co.uk/dionnevallantyne/

Bit more work required ... need to size the background image, and use one from the site.

Richard

The CSS is:
/* set up grid for header - bull, space, title & desc, space, bull */
.table_td {
display: grid;
grid-template-columns: 100px 0.01fr 3fr 0.01fr 100px;
}

/* centre text */
.grid_item_td{
text-align: center;
}

/* setup backgroun image */
/* rgtr 07112019 per viewtopic.php?f=713&t=975545 */
.grid_item_bg {
background: url('http://www.tdocplus.co.uk/linnpark/temp ... arving.jpg');
/* background-repeat:no-repeat; */
}

/* title stuff */
.dv_title {
font-size: 3rem;
/* font-family: Kunstler Script !important; */ /* useless unless font installed */
/* font-weight: bold */
}
/* remove the underline */
.dv_title a {
text-decoration: none;
}
/* description stuff */
.dv_desc {
font-size: 1.7rem;
line-height: 200% !important;
color: red;
}

The HTML is:
<div class="table_td">
<div class="grid_item_td grid_item_bg">&nbsp;</div>
<div class="grid_item_td">&nbsp;</div>
<div class="grid_item_td"><span class="dv_title"><a href="index.php?option=com_content&amp;view=featured" style="font-family: 'comic sans ms', sans-serif;">&nbsp;Dionne Vallantyne Art&nbsp;</a></span><br /><span class="dv_desc">Unique Scottish Artist</span></div>
<div class="grid_item_td">&nbsp;</div>
<div class="grid_item_td grid_item_bg">&nbsp;</div>
</div>

[rgtr]

Hi

Finally abandoned using fr in the grid setup ...

This is what works for me [ picture, space, text, space, picture]
grid-template-columns: 100px 0.01fr minmax(min-content, 1100px) 0.01fr 100px;

Now I have one solution for all my web sites !

Richard

[rgtr]

Hi
I am now in the process of converting my last three sites to J4 as Tabs and Accordions is in beta. So best sort everything else out.

In J3 the easiest way I was advised that the best way to provide an image in the banner is to insert one as background with no repeat like this:
/* rgtr 07112019 per viewtopic.php?f=713&t=975545 */
.header-inner {
background: url('../images/wee-man-carving.jpg');
background-repeat:no-repeat;
}

In J4 I find that the background url has to be the full path to the image. I am using a grid.
The css is:
/* setup background image */
.grid_item_bg {
/* this works */
background: url('http://127.0.0.1/as_31011_a/images/bann ... o8-125.jpg');
/* this does NOT work */
/* background: url('../images/banners/logo8-125.jpg'); */
background-repeat:no-repeat;
}
the html is
<div class="table_td">
<div class="grid_item_bg">&nbsp;</div>
<div class="grid_item_td">&nbsp;</div>
<div class="grid_item_td"><span style="font-family: arial, helvetica, sans-serif;"><span class="as_title"><a href="index.php?option=com_content&amp;view=featured">Accountability Scotland</a></span><br /><span class="as_desc">Campaigning to RESTORE Administrative Justice in Scotland</span></span></div>
</div>

any ideas as to why this is so ... is there some better code.

And lastly a not that in J4.2.3 the editor for user.css has a display problem. When one saves it the display goes awry ... and an overlap on the code appears ... F10 and the Esc and back to normal.

Richard