Joomla!NL - [opgelost] Cassiopeia aanpassen

Cassiopeia aanpassen

04 mrt 2022 20:26 - 04 mrt 2022 20:30

#1

Hallo,

Cassiopeia wil ik aanpassen om de header te centreren en een achtergrond vanuit een afbeelding te krijgen.
De achtergrond is een verloop van lichtblauw naar wit mbv een .jpg bestand breedte 1x900 pixels.
In de user.css heb ik de volgende code aangebracht.

Code:

.header {
  display: flex;
  justify-content: center;
}
body {
  background-image: url("Joomla410/media/templates/site/cassiopeia/images/olvhBlauwWit_1x900.jpg");
  background-repeat: repeat-x;
}

De header verschijnt links uitgelijnd van de pagina met de standaard blauwe kleur van Cassiopeia als achtergrond.
De achtergrond van de body komt niet te voorschijn.
De .jpg afbeelding staat in Joomla410/media/templates/site/cassiopeia/images/olvhBlauwWit_1x900.jpg.

Zet ik in .header en/of body bv de regel "background: lightblue;" dan is de achtergrond wel licht blauw, dus .header en body worden wel herkend.

Wat doe ik hier fout?

Graag hulp.

Groeten,

Edit Jelle: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf even doen.

Kajee
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 12

Cassiopeia aanpassen

04 mrt 2022 21:09

#2

Onder onze handige links staat onder joomla templates een link naar een handige site met veel tips en tricks rondom cassiopeia. Mogelijk dat je daar een antwoord kunt vinden.

Geef anders je volledige url zodat wij eventueel even kunnen meekijken

Groeten, Romke

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen uitsluitend via dit Forum

Is je vraag opgelost? Dan kan je hem zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Romke
Algemeen Moderator
Berichten: 3634

Cassiopeia aanpassen

05 mrt 2022 09:35

#3

Dank Romke, voor Uw antwoord maar...

Het is via die handige tips en tricks, dat ik hier terecht gekomen ben. De vermelde code heb ik in een html-bestand getest en daar werkt het wel.
Wat ik verkeerd doe in Cassiopeia kan ik niet vinden in die tips en tricks.
Is de naamgeving van het bestand fout (path)? Ik heb dit op veel manieren geprobeerd, toto enkel de bestandsnaam toe.
Het kan ook zijn dat ik de verkeerde labels gebruik (.header en body), maar welke dan?

Groeten

Kajee
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 12

Cassiopeia aanpassen

05 mrt 2022 09:59

#4

Lijkt erop dat het pad niet klopt.
Een link naar je site zou handiger zijn. Maar als je het zelf op wilt lossen:
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 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).

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37439

Cassiopeia aanpassen

07 mrt 2022 10:16

#5

Hallo Astrid,

Momenteel staat het geheel nog local. Ik zal Joomla4 ook op de website in een testomgeving zetten.
Via de Inspector van chrome kan ik inderdaad in de code kijken, maar dat is nog wennen voor me.

groeten

Kajee
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 12

Cassiopeia aanpassen

10 mrt 2022 12:31

#6

Joomla 4.1 geïnstalleerd op mijn website.

Versie:
PHP: 8.0.15
MySQLi 8.0.15
Joomla 4.1

Deze is te benaderen met : www.bijvelds.nl/Joomla410
Het achtergrond probleem is opgelost. Local gaat dit fout, maar op de website werkt dit.
Misschien dat iemand me kan/wil helpen met mijn problemen.

groeten

Kajee
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 12

Cassiopeia aanpassen

10 mrt 2022 16:18

#7

Het pad naar de afbeelding in de header klopt niet. Zet je dit handmatig erin? Normaal gesproken zou het moeten werken als je de afbeelding in de editor selecteert.
Dit zou het moeten zijn:

Code:

<img class="olvhbanner" src="\Joomla410\images\banners\olvhHeader.jpg">

Ik zou wel kiezen voor de linear-gradient background in plaats van een afbeelding voor de achtergrond.
Ik zie wel heel veel vragen op je site staan. Het is handiger om per probleem een apart draadje aan te maken. Ben bang dat het anders te onoverzichtelijk wordt.
Koptekst tag kan je overigens aanpassen onder het tabblad geavanceerd van je module.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37439

Cassiopeia aanpassen

12 mrt 2022 12:40

#8

De banner is nu zichtbaar en staat gecentreerd.
Nu zou ik de breedte van body graag hebben op 900px.
Dan de linker kolom op 175 px en het content gedeelte op 725 px. De aansturing hiervoor zit hem volgens mij in de grid presentatie.
Maar hoe moet dat?

Mijn user.css

Code:

/* Aanpassen breedte linker en rechter side-bar */
.site-grid {
    grid-gap: 0 1em;
    display: grid;
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". side-l comp comp side-r ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
    grid-template-columns: [full-start] minmax(0,15%) [main-start] minmax(0,15%) minmax(0,35%) minmax(0,35%) minmax(0,15%) [main-end] 100px [full-end];
} 

/* Achtergrond body met linear-gradient blauw naar wit*/
body {
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(123,181,193,1) 0%, rgba(255,255,255,1) 100%);
}

/* Menu linkerkant ronde hoeken, achtergrond licht*/
.sidebar-left.card {
  background-color: rgb(217,234,237);
  border-radius: 10px;
  border: none;
}

/* Menuheader linkerkant ronde hoeken, achtergrond blauwtint*/
.sidebar-left .card-header {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  background-color: rgb(119,204,233);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: none;
}

/* Banner centreren */
.olvhbanner {
  width: 898px;
  margin-left: auto;
  margin-right: auto;
}

Kajee
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 12

Cassiopeia aanpassen

12 mrt 2022 14:00

#9

Waarom wil je zo'n smalle website?
900px breed is van de periode 1990 toen we monitoren hadden met een resolutie van 1024x768px.
Ondertussen heeft zelfs de kleinste laptop een schermbreedte van minimaal 1900 px.
Ik raad je aan de breedte van het standaard template te gebruiken.
In het template zit namelijk ook een hele goede css die ervoor zorgt dat het template zich in breedte aanpast bij kleinere schermresoluties.

Met vriendelijke groet,
Wouter Compactweb.nl

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum.

Wil je Joomla!NL steunen? Dat kan met een donatie.

WoodyF4u
Moderator + Nieuwsteam
Berichten: 11277

Cassiopeia aanpassen

12 mrt 2022 16:25

#10

Ik probeer een site na te bouwen uit de tijd van Mambo en Joomla 1, dus van een hele tijd geleden.
De oorspronkelijke site ziet er met die afmetingen mooier (althans mijn mening) uit dan met de standaard breedte.
Uiteraard gaat dit wijzigen naar andere indelingen, maar vooraleerst zal de huidige weergave gebruikt gaan worden.

Door de regel grid-template-columns als volgt aan te passen benader ik het gewenste resultaat.

Code:

grid-template-columns: [full-start] 1fr [main-start] 175px 300px 300px 90px [main-end] 1fr [full-end];

Voor mij is dit opgelost. Op naar het volgende probleem.

Dank voor de geboden hulp.

Kajee
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 12

Laatste nieuws

Welkom bij Joomla!NL

opgelost Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Cassiopeia aanpassen

Laatste forumberichten

Wil je Joomla!NL steunen?