[CSS] Text zonder class een stijl meegeven

[jmxd]

Hoi, met de custom-css functie van tweakers ben ik bezig om de pagina navigatie wat makkelijker in gebruik te maken. Nu is dat prima gelukt voor de paginanummers met een <a> element, maar de huidige pagina heeft geen element en/of class.

In de code ziet het er ongeveer zo uit:

code:

<p class="pagecounter">
<span>Pagina:</span>
1
<a>2</a>
<a>3</a>
<a>4</a> 
</p>

De paginas met een link zijn dus te stijlen door .pagecounter a {} toe te passen, maar de huidige pagina dus niet. Ik ben benieuwd of het ook mogelijk is om die text toch te stijlen?

Op dit moment ziet het er zo uit:


Misschien zijn de devvers zelfs wel zo lief om de huidige pagina een (lege) class te geven

[armageddon_2k1]

.pagecounter { ... } ??

[jmxd]

armageddon_2k1 schreef op woensdag 24 november 2010 @ 22:46:
.pagecounter { ... } ??

Nee, de class .pagecounter is het hele blok met alle paginanummers er in. Hij zet dan een border om het hele blokje

[EvilWhiteDragon]

Ik weet het niet zeker, maar heeft CSS2/3 niet een functie om een style toe te passen op het eerste wat in een element voorkomt? Bijvoorbeeld om de eerste letter van een paragraaf een dikgedrukte hoofdletter te maken?
Dat zou je kunnen misbruiken hiervoor denk ik?

[samo]

Css 3 heeft inderdaad de :n-thchild(n) selector.

[truegrit]

Maar dat wordt lastiger als hij op pagina 2 ofzo zit, dus misschien is het handig als de TS even aangeeft wat hij wilt doen met het huidige paginanummer

[jmxd]

truegrit schreef op woensdag 24 november 2010 @ 23:05:
Maar dat wordt lastiger als hij op pagina 2 ofzo zit, dus misschien is het handig als de TS even aangeeft wat hij wilt doen met het huidige paginanummer

Inderdaad..

Ik wil de huidige pagina er zo uit laten zien:



Het zelfde als de "..." dus.

[crisp]

Ik heb 'm nu in een <b> gestopt

[posttoast]

Mijn mening: het zou sowieso een lijst moeten zijn, da's semantisch veel mooier. Dus als er een devver meeleest: twee vliegen in één klap. Forumcode is netter en Twylight kan een <li> stylen.

crisp schreef op woensdag 24 november 2010 @ 23:08:
Ik heb 'm nu in een <b> gestopt

Au...

[ Voor 28% gewijzigd door posttoast op 24-11-2010 23:09 ]

[jmxd]

crisp schreef op woensdag 24 november 2010 @ 23:08:
Ik heb 'm nu in een <b> gestopt

[jmxd]

[zeur]
Zou je deze ook nog kunnen fixen:


[/zeur]

---

Voor de mensen die dit ook toe willen passen, voeg dit toe aan je custom css:

code:

@import url('http://files.jamiemarciano.me/tweakers/custom.css');

Misschien niet heel netjes, misschien wel. Niet echt mee bezig gehouden het werkt.

Het styled ook de paginatie in de myreact, als je dat niet wil moet je gewoon even de hele code zelf in je custom css zetten en het onderste gedeelte weglaten

[ Voor 60% gewijzigd door jmxd op 24-11-2010 23:39 ]

[RobIII]

PRG >> LD

Bij mij gaan de knoppen overigens niet helemaal goed bij topics met veel pagina's. De paddings wijzigen van padding: 5px 10px 5px 10px naar padding: 5px lost dat op. (En volgens mij kan de max-width nog wel iets groter dan 640, maar ik weet niet of dat overal goed gaat...ah, dat gaat mis bovenaan de pagina; hoewel een paar pixels er nog wel bij kan)

[ Voor 110% gewijzigd door RobIII op 25-11-2010 00:08 ]

[jmxd]

RobIII schreef op donderdag 25 november 2010 @ 00:00:
PRG >> LD

Bij mij gaan de knoppen overigens niet helemaal goed bij topics met veel pagina's. De paddings wijzigen van padding: 5px 10px 5px 10px naar padding: 5px lost dat op. (En volgens mij kan de max-width nog wel iets groter dan 640, maar ik weet niet of dat overal goed gaat...)

Ja ik ben op dit moment inderdaad nog even bezig met de oplossing voor grote pagina's, en ik update dat direct naar het bestand dus het kan zijn dat het nog af en toe even raar er uit ziet vandaag.

Onderaan kan de max-width wel groter maar bovenaan niet omdat de knoppen "Nieuw topic" en "Reageer" er nog naast staan.

Ik weet ook nog niet hoe ik de overlap moet fixen die veroorzaakt wordt door de max-width

---

Fixed!



Voorlopig ben ik er zelf klaar mee, het ziet er uiteindelijk zo uit:

Topics (& Posthistory)


myReact:


Om dit ook in te stellen zet je dus

code:

@import url('http://files.jamiemarciano.me/tweakers/custom.css');

in je Custom CSS in je Voorkeuren

[ Voor 41% gewijzigd door jmxd op 25-11-2010 03:41 ]

[crisp]

Twylight schreef op woensdag 24 november 2010 @ 23:19:
[zeur]
Zou je deze ook nog kunnen fixen:

[afbeelding]
[/zeur]

done

posttoast schreef op woensdag 24 november 2010 @ 23:08:
Mijn mening: het zou sowieso een lijst moeten zijn, da's semantisch veel mooier. Dus als er een devver meeleest: twee vliegen in één klap. Forumcode is netter en Twylight kan een <li> stylen.

[...]

Au...

Mja, dit is gewoon een pragmatische oplossing; dit kost 5 minuten, de hele markup omgooien, meerdere templates aanpassen en de hele lijst opnieuw stylen (zowel voor de tweakers als de tweakers_ng template) kost veel meer tijd...

Anyway, resolved dus