How to add Logo and resize Topic is solved

[snowgoose]

I'm trying to get to grips with J4, and people are saying it's worth sticking with, but I can't see any improvement over J3 for me right now.
Upgrading my sites will not work, mainly becasue they are based on Protostar which doesn't exisit any more. So the only way forward for me is to create all my sites from scratch. I created a blank J4 site and the first thing I tried to do was what I do on all my sites. Upload a logo (which in my case is best described as a banner) which I want to go across the full width of the site. I never could understand why Protostar didn't have an option to specify the width when uploading a logo, but at least is was fairly easily achieved by modifying some CSS (within user.css).

However, trying to do this with Cassiopeia seems impossible. I have googled the problem but no answers. Using Firefox's developer tools I still can't find any CSS associated with the logo. My header/banner remains a tiny little box in the top left corner and nothing I do will make it fit across the page.

Any ideas? Surely Cassiopeia can't be this fixed and unflexible?? Why is there not an option to specify the size of the logo on the same page as the option to upload a logo? Why do the developers assume everyone wants the exact same size logo? Or am I missing something? Or should I just stick with Joomla 3?

Thanks
Dave

[Pavel-ww]

Hi. Cassiopeia is built on CSS Grid technology. There is another logic than what you knew in Protostar. You just do not understand how it works, so in a dead end. But if you learn CSS Grid (this will take two weeks to the maximum), you will understand how much Protostar is poor and ancient .

CSS Grid technology - very powerful, flexible, requires significantly less code and works much faster. With this technology, you can rebuild the layout as you want, only with CSS.

In this topic you can see an example viewtopic.php?f=815&t=988134&p=3638773#p3638773

[Jaydot]

Assuming you entered the logo in the Style section of the template, I used this selector...

Code: Select all

.container-header .navbar-brand img

and set the width I wanted.

[snowgoose]

Thank you. I'll try that tomorrow

[snowgoose]

Assuming you entered the logo in the Style section of the template, I used this selector...

Code: Select all

.container-header .navbar-brand img

and set the width I wanted.

Thank you Jaydot, that works perfectly

[vesodimov]

Hello.
Please be more detailed in the explanations. What to do with this code?
I select logo like that: System - Site Template Styles - select Cassiopeia - Advanced - Logo
Result - very small logo.

[tompasworld]

Hi,

I am trying the above solution but I don´t get it to work. Below is what I have done. Can anyone tell me if I miss a step or do something wrong, please?

1. In Joomlas System > Site teplate styles > Cassiopia (Default > advanced > logo, it says:

Code: Select all

images/logo211003.png#joomlaImage://local-images/logo211003.png?width=940&height=115

2. In Cassiopias template.css I added:

Code: Select all

.container-header .navbar-brand img {
  width: 940px;
}

[Jaydot]

I am trying the above solution but I don´t get it to work...

It should work, perhaps you need to clean cache...
However:
Never make changes to the template.css file - any changes will be overwritten on the next update. Instead, create a file user.css in the template's CSS folder, and add your own CSS to that.
And: as a rule, do not use dimensions in pixels. It will make the image unresponsive, in other words, it will look horrible on a small screen like a phone. Use a percentage instead. Using a percentage will limit the width to the width of .navbar-brand, so you might want to set the width of .navbar-brand first.

[tompasworld]

- Cache is cleaned (I just forgot to write that).

- I know it will eventully get overwritten, but this is just a test installation to get to know version 4 until I can update my real site, so overwriting at the moment is no problem.

- And: as a rule, do not use dimensions in pixels.
I know, just didn´t think of it when trying this last night, I just wanted to see if this solution would work at all, but not for me.

[Pavel-ww]

I know, just didn´t think of it when trying this last night, I just wanted to see if this solution would work at all, but not for me.

Just provide the link to the site and explain exactly what you want to achieve.
940px width is not logo, but a banner

Cassiopea is built on CSS Grid. Therefore, it will not be enough to control the width for similar size. And even say so, the width control in this case will not be the right solution in general

[tompasworld]

Banner, logo, header...some call it this, some call it that.

The way I want it to look: My current site/look, which is based on Protostar, that is no more as I understand. Therefor I need to redesign, but this banner/header/logo I do not want to change.
http://jikrantz.se/

The way it currently look, Cassiopeia style.
http://jikrantz.se/next/

[Pavel-ww]

Banner, logo, header...some call it this, some call it that.

The way I want it to look: My current site/look, which is based on Protostar, that is no more as I understand. Therefor I need to redesign, but this banner/header/logo I do not want to change.
http://jikrantz.se/

The way it currently look, Cassiopeia style.
http://jikrantz.se/next/

Hi. Create user.css file in cassiopea/css/ folder and place the following code

Code: Select all

.container-header .navbar-brand img {
	width: 100%;
}

1.jpg

And this worked too. Perhaps you have placed the code in the wrong place. This code is simply not responsive.

Code: Select all

.container-header .navbar-brand img {
	width: 940px;
}

[tompasworld]

Hi,

Thank you for your help. It works fine now.
I know it would be overwritten at upgrades if editing template.css and user.css is a better solution but why wouldn´t this work by just editing appropriate code in template.css as I first tried?

[Pavel-ww]

Hi,

Thank you for your help. It works fine now.
I know it would be overwritten at upgrades if editing template.css and user.css is a better solution but why wouldn´t this work by just editing appropriate code in template.css as I first tried?

Hi. Because if you take a look at the source code of the page, you will not find there template.css. This file is not involved in building an appearance. But you will find template.min.css there. If you add code to this file, everything will work. For what is needed template.css, I still do not know. Cassiopea has no documentation and we have to explore it as Terra Incognita