Een inleiding tot proefschrift CSS & pakketten

In ons laatste artikel hebben we besproken hoe u de structuur van uw Thesis Skin kunt instellen. Vervolgens gaan we bespreken hoe je die structuur kunt stijlen met Thesis Packages.

Nu we onze boxen volledig geconfigureerd hebben en klaar zijn om te stylen, moeten we klikken op de CSS-knop bovenaan onze Skin Editor. Dit zal ons naar het gebied leiden waar we pakketten kunnen maken en de stylesheet kunnen bouwen die deze skin zal gebruiken.

Scriptiepakketten

Het pakketgedeelte van de Thesis Skin Editor is waar al uw CSS-wijzigingen plaatsvinden. Het pakketgedeelte bestaat uit drie gebieden:

Het Skin CSS / Custom CSS-venster
Het gebied voor het maken van pakketten (inclusief gemaakte pakketten)
Het aangepaste variabelegebied (inclusief gemaakte variabelen)

Een pakket, in de eenvoudigste vorm, is een vak dat CSS voor een bepaalde selector bevat, of een vakje uit onze HTML-structuur. Om stijlen toe te voegen aan elk element, moeten we er een pakket voor maken.

Nadat het pakket is gemaakt, moet u het vervolgens toepassen op uw Skin CSS door de Thesis-referentie te gebruiken voor het pakket in uw Skin CSS-venster.

1. Een pakket maken

Om een pakket te maken, moet je selecteren welk type pakket je wilt maken, Thesis heeft acht vooraf gebouwde opties om uit te kiezen, maar voor wat we proberen te bereiken zullen we ons vooral concentreren op de enkelvoudige elementstijlen, koppelingen, widgets en kolommen.

Elk pakket bestaat uit drie delen, de details van het pakket, opties en aanvullende CSS. Het tabblad 'pakket' in elk pakket bevat invoervelden waarmee u kunt vaststellen wat het pakket aan het vormgeven is.

De opties zijn precies dat, opties. U kunt de breedte, hoogte, rand, marge, enz. Instellen door de opties te bewerken - of u kunt ervoor kiezen om het tabblad 'Aanvullende CSS' te gebruiken en alle andere opmaak die standaard niet beschikbaar is in de opties.

Beginnend met onze #wikkel, laten we beginnen met het uitbouwen van de pakketten.

Om het pakket te maken (met name de #wikkel pakket):

Selecteer "Single Element Styles" in het vervolgkeuzemenu
Klik op "Pakket toevoegen"
In de pop-up prompt moeten we een naam en referentie voor het pakket kiezen (idealiter zou u iets kiezen dat u zou helpen identificeren voor welk element dit specifieke pakket was)
Vul de juiste CSS-selector in voor de pagina, in dit geval gaan we het maken #wikkel pakket, dus typ in "#wikkel"en klik op het tabblad" Opties "bovenaan de pop-upprompt
Stel op het tabblad opties een breedte van 100% in
Klik op de groene knop 'Opslaan' boven in de pop-up

Zorg ervoor dat u "."en"#"wanneer u de CSS-selector invult om onderscheid te maken tussen ID en klasse in het pakket.

2. Het pakket toepassen

Nu we het pakket hebben gemaakt, moeten we het toepassen op onze Skin CSS. Hiertoe typt u de referentietag in het Skin CSS-venster. Elke referentielabel begint met een "&en gevolgd door de referentie die u heeft opgegeven.

Dus, om onze #wikkel we moeten typen &wikkel in onze Skin CSS. Wanneer we klaar zijn met het maken en toepassen van onze pakketten, moeten we klikken op "CSS opslaan" om onze stijlen op te slaan.

Vergeet niet dat elk pakket zijn eigen set met opties heeft, de meeste zijn vrij eenvoudig op te pikken, maar het kolommenpakket kan je misschien voor de gek houden, dus laten we door het maken van een kolommenpakket lopen en het aan onze skin toevoegen.

3. Kolompakketten maken

Als je je dat herinnert, bestaat onze lay-out uit twee kolommen. De grootste kolom bevat onze recente berichten, en de kleinere zal onze widgetzijbalk zijn. Om een kolompakket te maken, moeten we deze stappen volgen:

Selecteer "Kolommen" in de vervolgkeuzelijst
Kies een naam, referentie en de CSS-kiezer voor de container met de kolommen (in onze zelfstudie zullen we dit pakket toepassen op de .belangrijkste inhoud doos
Klik op het tabblad "Opties" om kolomopties weer te geven
Selecteer het aantal kolommen voor het pakket (in dit geval hebben we 2 kolommen nodig)
Vouw de Kolom 1-opties uit
Definieer de CSS-selector voor de eerste kolom (.kolom 1) en stel de breedte in op 700 en de uitlijning (links in ons geval)
Zet de padding op 10 voor boven, rechts, onder en links
Vouw de opties van kolom 2 uit
Definieer de CSS-selector voor de tweede kolom (.kolom 2) en stel de breedte in op 220 en de uitlijning (rechts in dit geval)
Zet de padding op 10 voor boven, rechts, onder en links
Voeg de referentietag toe aan de skin CSS en klik op "Opslaan"

Nu onze kolomstijl is geïmplementeerd, kunnen we de rest van onze HTML-structuurpakketten blijven geven. U kunt de rest van de CSS-stijlen bekijken die worden gebruikt bij het maken van elk pakket door de stylesheet in de bronbestanden te bekijken.

Conclusie

In de loop van deze reeks hebben we besproken hoe u kunt communiceren met het Thesis 2.0 Framework, hoe u uw site-instellingen kunt configureren en de lay-out en stijl van uw skin kunt aanpassen. Voor sommigen lijkt de Thesis erg "heen en weer", waarbij ze van de ene plaats naar de andere moeten gaan om veranderingen aan te brengen, maar voor degenen die net begonnen zijn met het ontwikkelen van WordPress-thema's, kan Thesis een zeer eenvoudig hulpmiddel zijn om te gebruiken.

Als u eenmaal vertrouwd bent geraakt met het Thesis-raamwerk, kunt u beginnen met het ontwikkelen van uw eigen aangepaste kaders, functies, enz. Eén onderwerp dat niet in deze serie wordt behandeld, maar dat zeker de moeite waard is om te verkennen, zijn Thesis-hooks, die kunnen worden geïmplementeerd in kaders om nog dynamischer te zijn functionaliteit, zoals paneermeel, paginering, enz.

Hoewel de skin die voor deze zelfstudie is gemaakt, niet robuust is of ontwerpmatig is verfraaid, kan deze een goed startpunt zijn.

Code