inline kleur instellen voor before en after

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Paul Weiss

Paul Weiss

08/02/2024 16:26:19
Quote Anchor link
Hallo.

Ik heb onderstaande code. nu wil ik via de inline styling de kleur steeds kunnen aanpassen voor het desbetreffende element. Dit wil ik zo doen omdat ik gebruik maak van een cms-editor die de kleur dus steeds apart kan instellen. echter ik krijg het via gebruik van een variable niet voor elkaar. heeft iemand raad?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
.arrow-down4 {
  height:100px;
}
.arrow-down4:before {
  content: "";
  position:absolute;
  left:0px;
  width:50%;
  height:100px;
  
 
  
  /* kleur arrow down */
  
}


.arrow-down4:after {
  content: "";
  position:absolute;
  right:0px;
  width:50%;
  height:100px;
   /* kleur arrow down */
 
  
  
  
}

.arrow-kleur:before {
 background: var(--kleur);
}

.arrow-kleur:after {
 background: var(--kleur);
}
</style>
<div style="--kleur: #FFFF00;" id="divmain-rijzoek" class="arrow-kleur arrow-down4"></div>
Gewijzigd op 08/02/2024 16:27:25 door Paul Weiss
 
PHP hulp

PHP hulp

23/02/2024 13:51:09
 
- Ariën  -
Beheerder

- Ariën -

08/02/2024 16:44:17
Quote Anchor link
Ik raad je aan om hier eens te kijken:
https://www.w3schools.com/css/css3_variables.asp

Want ik denk dat je nu echt maar wat aan het gokken bent. ;-)

Sowieso zijn inline style's zeker iets wat je niet wilt gebruiken in combinatie met CSS-stylesheets.
Gewijzigd op 08/02/2024 16:45:44 door - Ariën -
 
Paul Weiss

Paul Weiss

08/02/2024 16:53:17
Quote Anchor link
he arien. bedankt voor de link. had deze ook al gezien. Mijn bovenstaande code doe ik volgens mij alles wel zover goed. deze heb ik ook in gebruik bij andere styling, maat daar wordt dan alleen gebruik gemaakt van before selector. bij bovenstaande code wordt de achtergrond ingesteld bij zowel de before en after selector.

p.s. bij cms kom je niet altijd om inline styling heen. en al helemaal niet als je een kleur naar wens wilt instellen of andere handmatige instellingen. dat kan niet in classes.
 
- Ariën  -
Beheerder

- Ariën -

08/02/2024 17:01:44
Quote Anchor link
Dan zou je background: var(--kleur); moeten gebruiken in je style-attribuut, áls dat werkt.
Maar dan moet je wel --kleur definiëren in de CSS.

Maar hoezo zou je eigenlijk in een CMS een aparte kleur willen gebruiken? Een beetje huisstijl heeft juist vaste kleurencombinaties. En als je de layout later veranderd, (of een darkmode toevoegt) dan wil je niet dat je al jouw content moet doorzoeken op die gebruikte stijlen die misstaan bij je huisstijl.
Gewijzigd op 08/02/2024 17:04:18 door - Ariën -
 
Paul Weiss

Paul Weiss

08/02/2024 17:10:53
Quote Anchor link
bij een cms vind ik dat je altijd de keuze moet kunnen laten an degene die het gebruikt. en bovendien een huisstijl moet ook ingesteld worden. deze waardes sla je dan niet op in aparte stylesheets. al zou dat wel kunnen uiteraard. je zou 3 basiskleuren kunnen laten kiezen en deze op slaan in een apart stylesheet. Maar dat lost mijn bovenstaande probleem niet op uiteraard, aangezien men nog steeds moet kunnen kiezen uit de 3 basiskleuren. de oplossing die jij aangeeft werkt alleen voor vaste kleuren die vooraf zijn ingesteld. In geval van een before en after selector gaat dat volgens mij helemaal niet werken. Maar in ieder geval wel bedankt voor het meedenken. Ik duik er nog eens in.
 
- Ariën  -
Beheerder

- Ariën -

08/02/2024 17:18:58
Quote Anchor link
Die keuze moet iemand inderdaad kunnen hebben, en die definieer je dan in de CSS-stylesheet.
Als je die hard-coded in-line gaat instellen, dan is het vragen om problemen als je ooit je layout gaan aanpassen.

In dat geval zou ik met soort-van-variabelen werken zodat je die kleuren server-side kan ophalen. Maar eerlijk gezegd heb ik nog nooit gezien dat mensen totaal verschillende kleurcombinaties gebruiken. Ik heb gebruikers altijd het advies gegeven om zo min mogelijk opschmuck te gebruiken in content, zodat je niet je eigen huisstijl gaat breken.
Gewijzigd op 08/02/2024 17:19:52 door - Ariën -
 
Paul Weiss

Paul Weiss

08/02/2024 19:12:42
Quote Anchor link
He arien.

Je hebt helemaal gelijk wat betreft dat het geen kermis moet worden. Gewoon basiskleuren gebruiken heeft ook mijn itensie. Maar hoe je het ook bekijkt, de basiskleuren moeten ook een keer ingesteld worden. En in het voorbeeld van mijn code bovenaan dit topic is het vragen hoe ik deze kleuren dan kan gaan koppelen. in de stylesheet kan ik deze niet plaatsen, aangezien de kleuren nog gedefinieerd moeten worden. Maar wellicht dat ik de 3 basiskleuren wel kan koppelen aan de desbetreffende stylesheet. moet even kijken hoe ik dit dan precies voor elkaar moet krijgen. Wat betreft inline styling is niet erg, aangezien alle elementen bij mij los van elkaar staan en de layout sowieso flexibel is. dus dat is geen probleem.
 
- Ariën  -
Beheerder

- Ariën -

08/02/2024 20:53:40
Quote Anchor link
Die kan je prima in de :root van je CSS definiëren. Je kan dit zelf ook genereren en cachen.
 
Paul Weiss

Paul Weiss

08/02/2024 22:55:30
Quote Anchor link
ja klopt. maar ik zie dat ik iets in de code trouwens niet heb meegenomen. heb het inmiddels kunnen oplossen. bedankt zover.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.