1. Roy
  2. Templates
  3. woensdag 25 december 2019
Hi,

Ik gebruik een Joomla Template Shaper Calcio.
In de Template kan je de makkelijk de Body Font aanpassen naar wens.

Nu halen wij informatie voor onze website uit dataserver van Sportlink (Hier halen we het wedstrijdprogramma bijvoorbeeld vandaag)
Deze code zetten we dan in een artikel:


<div data-article="programma"
data-param-gebruiklokaleteamgegevens="NEE"
data-param-eigenwedstrijden="JA"
data-param-thuis="JA"
data-param-uit="JA"
data-link-meer="Wedstrijdinfo"
data-fields="wedstrijd,meer"> </div>


Hier zitten geen opmaak codes in. (denk ik ;) )
Nu heb ik in custom CMS dit gezet:


.article.programma tr td:nth-child(1) {width: 15%; vertical-align: top}
.article.programma tr td:nth-child(2) {width: 25%; vertical-align: top}
.article.programma tr td:nth-child(3) {width: 25%; vertical-align: top}
.article.programma tr td:nth-child(4) {width: 10%; vertical-align: top}


voor de breedte van de cellen.
Maar nu wil ik ook kunnen zeggen, in cel 1 links uitlijnen en font grote is 10.

Het lukt me alleen niet.
Iemand tips?

Ik wil dit omdat de website bij ons voornamelijk mobiel wordt bezocht.
het wedstrijd programma is bijna niet te lezen als de letters zo groot zijn :)

Onze website:
http://www.haagskorfbal.nl

Ik hoor het graag,
Thanks,

Roy!
Geaccepteerde antwoord Pending Moderation
Hoi Roy,

Dan zou ik alleen de tekstgrootte van het mobiel aanpassen en de rest gewoon laten zoals het is.
Met de class .article.uitslagen tr td a kun je de tekst aanpassen.
Door deze in een mediaquery te zetten @media only screen and (max-width: 400px) { } is het alleen van toepassing als de viewpoort kleiner is dan 400px. (dus alleen mobiele devices)


@media only screen and (max-width: 400px) {
.article.programma tr td a:nth-child(1) {float: right; font-size: 10px; color:red;}
}


tip: Ik zag in jouw css dat je aan het einde van de regels geen ; gebruikt, dat hoort eigenlijk wel.
  1. 3 weken geleden
  2. Templates
  3. # 1
Geaccepteerde antwoord Pending Moderation
Hoi Patrick,

Bedankt voor je reactie. Ik heb nu:


@media only screen and (max-width: 400px) {
.article.programma tr td a:nth-child(1) {float: right; font-size: 10px; color:red;}
}

.article.programma tr td:nth-child(1) {width: 30%; vertical-align: top; text-align: left}
.article.programma tr td:nth-child(2) {width: 10%; vertical-align: top; text-align: middle}
.article.programma tr td:nth-child(3) {width: 30%; vertical-align: top; text-align: right}
.article.programma tr td:nth-child(4) {width: 10%; vertical-align: top; float: right}


Het lijkt te werken, ik doe denk ik nog iets fout.
Want de "Meer" knop achter een wedstrijd is nu inderdaad kleiner (en rood gekleurd) als ik hem via mijn mobiel bezoek.
De rest blijft gelijk. Moet ik nog wat doen?

En ik heb nog twee vragen :)
En tweede vraag: betekend "float: Richt" dat de tekst rechts is uitgelijnd?
Kan ik dit nu per cel aangeven?

En kan ik "meer" aanpassen voor icon?

Ik wil uiteindelijk dat het zo uit komt te zien (Zoals in de Nu.nl app)

Ik heb trouwens http://www.haagskorfbal.nl/roytest123 gemaakt om het te kunnen testen
Ik moet nog een beetje spelen met de percentages om het goed te krijgen.
En ik moet even kijken hoe ik de koppen kan aanpassen, zijn nu vetgedrukt en doen niet mee met de uitlijning.

Tips zijn welkom :)
Bijlagen
  1. 3 weken geleden
  2. Templates
  3. # 2
Geaccepteerde antwoord Pending Moderation
Ik heb zelf nog even wat zitten puzzelen..
Maar kom er nog niet uit..

Om het voor mij duidelijk te maken wil ik wat dingen begrijpen, dat maakt het puzzelen wat makkelijker


.article.programma tr td:nth-child(1) {width: 30%; vertical-align: top; text-align: left}
.article.programma tr td:nth-child(2) {width: 10%; vertical-align: top; text-align: middle}
.article.programma tr td:nth-child(3) {width: 30%; vertical-align: top; text-align: right}
.article.programma tr td:nth-child(4) {width: 10%; vertical-align: top; float: right}

Ik heb dit dus staan.
.article.programma = de data die hij binnenhaald
tr td:nth-child(1) Die weet ik niet,
Ik gok dat tr voor Table Row staat en Child(1) voor de eerste clum en Child (2) voor de 2e enz.

Bij die van Patrick staat:
.article.programma tr td a:nth-child(1) {float: right; font-size: 10px; color:red;}

Waar staat de a dan voor?

Ik heb hierin wat zitten spelen, om de volgende regeld bijvoorbeeld van de a een b te maken
Maar toen kwam alles in 1 cel...

:)
  1. 3 weken geleden
  2. Templates
  3. # 3
Geaccepteerde antwoord Pending Moderation
De a staat voor tekst.

Je kunt ook .datetime en .string gebruiken om de datum en de elftallen te wijzigen. Moet eigenlijk de hele code van de pagina kunnen zien om je echt te helpen.
  1. 3 weken geleden
  2. Templates
  3. # 4
Geaccepteerde antwoord Pending Moderation
De a staat voor een link opmaak. Dus alleen je laatste kolom. En let op dat je je regels netjes afsluit met een ;
Als je het zo intypt is het beter te controleren:

.article.programma tr td a:nth-child(1) {
float: right;
color: red;
}
  1. 3 weken geleden
  2. Templates
  3. # 5
Geaccepteerde antwoord Pending Moderation
Hi Youll en Patrick,

Het is me gelukt! :)
Super blij mee.

Als je op http://www.haagskorfbal.nl/programma kijkt zie je het resultaat.
Het lettertype wordt nu aangepast naar 10 wanneer je via mobiel kijkt.
Alleen de kop teksten, passen zich niet mee aan....

Hebben jullie hier ook een oplossing voor? :)
  1. 3 weken geleden
  2. Templates
  3. # 6
Geaccepteerde antwoord Pending Moderation
Probeer deze eens in te voegen bij de css:


@media only screen and (max-width: 400px) {
.string, .datetime {
font-size: 10px;}
}
  1. 3 weken geleden
  2. Templates
  3. # 7
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
Wees een van de eersten om op dit bericht te reageren!