Verschillende stylesheets voor verschillende pagina’s in WordPress

WordPress is nog steeds het meest gebruikte website CMS systeem ter wereld. Verreweg. Maar WordPress is niet flexibel wat betreft layout. Zeker niet in vergelijking tot Joomla. Om layout naar eigen wensen in te vullen, zijn vaak “hacks” nodig in theme bestanden. Daarbij is het dan handig om “snippets” (stukjes code) bij de hand te hebben. Probleem: WordPress gebruikt voor elke pagina hetzelfde theme en daarmee dezelfde stylesheet. Dat is anders in Joomla. Daar is het heel eenvoudig om aan te vinken welke template voor welke pagina of menu items gebruikt moet worden. Een groot gemis in WordPress. Zo zou je bijvoorbeeld voor elke pagina een andere achtergrond afbeelding willen gebruiken of andere kleuren of zoals in mijn geval: een andere “border class” voor de content. Hier een oplossing. Plaats de volgende snippet vlak boven  <?php wp_head(); ?>  binnen header.php file. Snippet: <?php if (is_page(‘contact’)) { ?> <link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/new-styles.css” type=”text/css”> <?php }; ?> Waar ‘contact’ staat, moet de pagina “slug” worden ingevuld. Om die te achterhalen moeten permalinks op “naam” gezet worden en vervolgens is de slug

Verder lezen

Gratis website design templates

Gratis is soms heel mooi. Dat verwacht men niet en dus lijkt er weinig gebruik gemaakt te worden van gratis website templates. Dewebmeester.nl heeft dan ook een mooi overzicht gemaakt van gratis website templates en ook een uitleg gegeven waarom deze templates juist wel gebruikt moeten worden. Klik hier voor dit artikel en het overzicht. Het zou goed zijn om hier reacties te lezen van anderen wat betreft het gebruik van gratis website templates. Ook ben ik benieuwd naar redenen om deze templates juist wel of niet te gebruiken. Download links en andere informatie betreffende deze gratis premium website templates (html5, jquery, wordpress of joomla) kan worden verkregen via [email protected] of via het contactformulier hieronder:

Verder lezen

Website onderhoud deel 2, voorbeeld website www.dewebmeester.nl

Gisteren heb ik een kort artikel geschreven over het onderhouden van een website. De conclusie was en is: het kost gewoon veel tijd om een website goed te onderhouden. Dit artikel is een vervolg op dit betoog en een illustratie. Laat ik eens opnoemen wat ik gisteren allemaal heb gedaan om de website www.dewebmeester.nl te optimaliseren. Controle en verkenning In mijn vorige artikel ga ik al aan dat een belangrijke stap bij het onderhouden van een website is: het bezoeken van de website. Dat klinkt nogal logisch maar helaas, veel klanten van me lijken hier juist de plank mis te slaan. Ze vergeten om hun eigen website dagelijks te bekijken, te testen en te controleren. Dat moet. Een contact formulier moet getest worden, een facebook button, twitter share, chat functie, enzovoorts, moet getest worden. Doet u dat? Ook moet een website gewoon bekeken worden, de laadtijd getest en de layout in de verschillende browsers getest worden. En dat niet alleen bij de oplevering van de website maar juist ook daarna. Browsers worden geupdate en websites moeten in die nieuwe omgeving

Verder lezen

Twitter bootstrap, css en structuur

Vandaag een korte introductie betreffende het gebruik van Twitter bootstrap. Om te starten heb je de bootstrap files nodig die eenvoudig zijn te downloaden via deze link. Vervolgens worden de files in de root van de website geplaatst en wordt er een verwijzing naar die files geplaatst in de head-sectie van de website. Wat betreft structuur gebruiken we (bijvoorbeeld) de volgende html: <div id=’content’ class=’row-fluid’> <div class=’span9 main’> <h2>Main Content Section</h2> </div> <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> </div> Deze code geeft aan dat de main content 9 kolommen breed is en door de main content op te delen in kolommen, kunnen we ook een sidebar plaatsen. Dat is gedaan via de <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> code. Dit alles betekent: van de 9 kolommen zijn er 3 een sidebar. Kortom 1/3 deel is sidebar. Bij gebruik van de code is het belangrijk om op te merken dat de sidebar code in zijn geheel na de main-content code komt en dus niet is opgenomen in de main-content. De sidebar maakt geen onderdeel uit van de main-content structuur maar staat er dus

Verder lezen

Testen website voor wide screen en aanpassen achtergrond afbeelding

Bij het maken van een website moet de website getest worden in meerdere browsers maar ook binnen meerdere schermresoluties. Nu heeft de ontwikkelaar niet altijd de beschikking over een rij computers of monitoren en dat is natuurlijk ook geen makkelijk optie. Wat betreft het testen binnen verschillende monitoren zijn de volgende mogelijkheden beschikbaar: Firefox addon “Firesizer”: Niet handig omdat de computer monitor een limiet heeft (bijvoorbeeld 1280px) en testen in widescreen daarmee onmogelijk is. De webdeveloper extensie “resize” van Firefox: zelfde probleem als onder 1 De Ctrl + en Ctrl – knoppen: simpele en meest effectieve optie wat mij betreft. Zo vergroot ik de monitor weergave niet maar verklein ik de website weergave en daardoor krijg ik de website toch te zien zoals hij op een wide screen getoond wordt. Vervolgens kan ik de grootte van de background image aanpassen en testen. Natuurlijk wil ik een dynamische grootte. Oftewel: grootte wordt gepaald door de monitor waarmee de bezoeker de website bezoekt. Achtergrond afbeelding moet getoond worden over hele scherm. Of dit scherm nu 800px x 600px of 2400px breed is.

Verder lezen

Aanpassen layout Joomla module

Het aanpassen van de layout van een Joomla module lijkt een eenvoudige zaak met Firebug. Maar bij aanpassen van de css file behorende bij de module, is de kans groot dat ook de layout van andere modules aangepast worden terwijl dat mogelijk niet te bedoeling is. Dat is zeker het geval als de css verwijzingen verstopt zitten in bijvoorbeeld een style.css file of template.css file. Als de module een eigen css file heeft, dan is het inderdaad niet moeilijk om de layout aan te passen. De makkelijkste manier Het makkelijkste lijkt mij op dit moment om in “advanced options” binnen modulebeheer (binnen Joomla administrator) de “Module Class Suffix” aan te passen. Dat gaat als volgt: Ga naar modulebeheer in Joomla en open de module waarvoor de layout aangepast moet worden. Open de stylesheet waarnaar deze module verwijst (via Filezilla en Notepad+) Kijk via Firebug welke layout verwijzing aangepast moet worden Ga terug naar de geopende stylesheet (css file) en zoek via “search” naar de verwijzing Kopieer de div class en plaats die daar direct onder; Bijvoorbeeld: #footer .moduletable h3.mod-title {

Verder lezen