Aanpassen user.CSS

Ik heb een aantal websites draaien op mijn eigen server thuis.
Een van de websites heb ik als test gebruikt om Joomla 4 te installeren en moet zeggen dat mij dit prima aanstaat!

Nu heb ik het volgende probleem,
Eerst even ter info, ik heb een user.CSS file aangemaakt in de CSS directory
Ik heb de Hoofdbanner al in de user.CSS aangepast

De testsite is www.josvanas.com deze draait nu op Joomla 4
Ik wil deze site hetzelfde laten uitzien (de grove infrastructuur) als de volgende website die ook van mij is.
Het adres is
www.shootingsports.nl
Deze draait op Joomla 3.**

Wat moet er gebeuren?
1 De testsite moet smaller worden (zoals shootingsports.nl)
2 ik wil de kleur van de HELE website (frontpage) wijzigen, dus ook de sidebars.
3 De velden links en rechts van de sidebars (side bar right and left) die nu nog wit zijn
4 kleur van de "main menu" veld en het Inlogveld.

Dit alles wil ik via de user.CSS regelen.
Het zou zomaar kunnen zijn dat ik dat in de Joomla CSS files zelf moet gaan aanpassen?
Met de sites die op Joomla 3.** draaien doe ik dat ook rechtstreeks via de Joomla CSS en index.PHP files om de site zo uit te laten zien (template BEEZ3)
Na elke joomla update moest ik die CSS en index,php files weer even aanpassen.

Kan iemand mij helpen om dit voor elkaar te krijgen?

Alvast bedankt!

Namens het Joomla!NL team heet ik je hartelijk welkom op dit forum.

Tip: maak gebruik van de ingebouwde Hulpmiddelen voor ontwikkelaars voor Firefox (Ctrl + Shift + I voor Windows of Cmd + Opt + I voor Mac) of een soortgelijk alternatief (F12) voor andere browsers Met deze tool kan je o.a. van ieder onderdeel van de site de css definities achterhalen en waar in welk bestand ze staan. Tevens kan je met deze tool in de betreffende pagina van je site veranderingen aanbrengen in de css definities en meteen zien wat het effect is (later evt. wel zelf de aanpassingen aanbrengen in css bestanden).

Bedankt voor uw bericht ben aan het kijken met inspector en heb rechts een marge van 300 ingegeven, en inderdaad rechts word het smaller.
Weet echter niet waar ik dit moet gaan wijzigen in de CSS files.
Zie de bijlage,
Heeft u enig idee?

Grt Jos

Dat hangt een beetje af van het template waar je me werkt.
Meestal moet je de css code die je in de middelste kolom van je screenshot hebt staan daar kopiëren en plakken in het bestand user.css of custom.css
Dat bestand vind je in de map van het template.

Welk template gebruik je?

En houd er rekening mee dat je oude website-template niet goed meeschaalt op een tablet of smartphone.
Een menu-sructuur in de linker kolom is bij responsive templates daarom vaak een horizontaal menu onder de header. Het menu wordt in een responsve template op een tablet of smartphone dan zichtbaar als hamburgermenu. Dus drie horizontale streepjes onder elkaar.

Tijden veranderen en templates ook. Moderne weergaven zijn altijd breder. Maar als je het per se aan wilt passen dan kan je even hier kijken.

Hiermee word alleen het onderste deel smaller...
Ik moet de hele site smaller hebben dus ook de hoofdbanner (boven)
Ik denk dat voor de ".site-grid" iets anders moet komen?

Ik gebruik de standaard template van Joomla 4 Casiopeia
Oude templates zijn niet meer aanwezig.

Ik raad je aan om mee tegaan met de huidige template-instellingen.
Toen schermen nog klein waren was een template-breedte van 1080 pixels de standaard.
Inmiddels is dat gemiddeld 1300px breed geworden.
Alle huidige templates werken met die breedte en schalen terug bij gebruik van tablet of smartphone.
Door een modern template terug te willen schroeven naar een smallere breedte vraagt om uitdagingen.
Voor het terugschalen zijner in css namelijk mediaqueries opgenomen die de breedte per apparaat herkennen en daar dan de site op aanpassen.
Dat werkt op heel veel plaatsen in het template door.

Dus ga mee met de tijd en maak je Joomla 4 website met een template van deze tijd.

Dit begeint er op te lijken...
www.josvanas.com

Alleen de main banner gaat niet mee en blijft breed.
Edit Astrid: Ik heb de code alweer tussen codetags geplaatst, volgende keer graag zelf doen.

Die moet je dan extra meenemen. Even breedte aangepast aan de exacte afmetingen van je oude template. Ik zou overigens niets (behalve dan de kleuren eventueel) aanpassen. Deze breedte is echt niet meer van deze tijd. Zonde als je een nieuw site maakt met een zwaar verouderde vormgeving.

Jouw oplossing werkt niet. Dan zie je op mobiel en tablet helemaal niets namelijk.

Ja Astrid, we laten het maar zoals het is.....toch maar beter....
Kijk even op www.josvanas.com
Ik wil links en rechts de witte vlakken de kleur wijzigen.
Dan ook de achtergrondkleur van de main banner
de hoogte van de main banner hoger maken zodat ik de foto kan uitrekken
Bedankt voor alle hulp van iedereen!

Header: Achtergrond: Maar dan wordt ook de achtergrond van je content geel. Is eventueel met dit op te lossen: Kijk ook hier even voor tips voor Cassiopeia.
Of kies voor een template die je eenvoudiger aan kunt passen.
Foto uitrekken is nooit een goed idee. Zou dan een bredere foto zoeken. Als je de header hoger maakt, dan ziet de bezoeker alleen nog maar de header.


Ik zou ook even de frontend taal op Nederlands zetten en alle handmatige opmaak uit je tekst halen.