Cassiopeia - Alternative to Brand Topic is solved

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
rgtr
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 147
Joined: Tue Sep 01, 2009 11:31 am
Location: Glasgow
Contact:

Cassiopeia - Alternative to Brand

Post by rgtr » Tue Jan 11, 2022 4:08 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 147
Joined: Tue Sep 01, 2009 11:31 am
Location: Glasgow
Contact:

Re: Cassiopeia - Alternative to Brand

Post by rgtr » Mon Jan 17, 2022 12:36 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 147
Joined: Tue Sep 01, 2009 11:31 am
Location: Glasgow
Contact:

Re: Cassiopeia - Alternative to Brand

Post by rgtr » Mon Jan 17, 2022 3:44 pm

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
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 4.x”