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:

1. Firefox addon “Firesizer”: Niet handig omdat de computer monitor een limiet heeft (bijvoorbeeld 1280px) en testen in widescreen daarmee onmogelijk is.
2. De webdeveloper extensie “resize” van Firefox: zelfde probleem als onder 1
3. 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. Uitgangspunt is gebruikte css. De nieuwe standaard laat volgende code toe:

background-size: cover;

Maar helaas, als ik die vermelding plaats binnen huidige css file dan werkt dat niet. Wat wel werkt:
Website openen in Firefox en element inspecteren met Firebug. [background-size: cover;] toevoegen aan css binnen Firefox en resultaat bekijken via Ctrl+. Als het goed is werkt het nu wel. Vervolgens kopieer is de gehele achtergrond vermelding naar de vermelding binnen originele css file:

#footer {
background-attachment: scroll;
background-clip: border-box;
background-color: #0A546B;
background-image: url(“../images/footer.jpg”);
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
clear: both;
color: #FFFFFF;
margin: -50px 0 0;
min-width: 1200px;
overflow: hidden;
padding: 80px 0 0}

Firefox heeft de hele achtergrond / background css vermeldingen voor de positie #footer aangepast aan de browserstandaard en daarmee is volgens mij Firefox / Firebug de beste (en gratis) html editor die er bestaat. Toch?
Wilt u de layout van uw website laten aanpassen? dewebmeester.nl rekent per “tweak” 10 Euro maar soms kunt u gebruik maken van speciale acties waardoor “tweaks” te koop zijn vanaf 5 Euro. Volg dewebmeester.nl om op de hoogte te blijven:

Ir. Meindert A. Jorna (Msc.)

Savornin Lohmanstraat 45

6702BN Wageningen

☎ 0317 795149

Mob. 06 412 86716

☒ info: www.dewebmeester.nl

My profiles: Facebook LinkedIn Flickr Twitter

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 {
color: #800040;}

#footer .moduletable h3.mod-title {
color: #800040;}

Nu passen we de tweede verwijzing aan en maken een nieuwe div class. Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable2 h3.mod-title {
color: #FFFFFF;}

We schakelen weer terug naar de geopende module in modulebeheer en plaatsen aan de rechterkant onder “advanced options” in de “Module Class Suffix” de div class: moduletable2 en slaan de module op. Zie afbeelding:

Resultaat is dat de header van de bewuste module een h3 grootte hebben (dat hadden ze al) en dat de kleur is veranderd naar wit. Nu is het makkelijk om voor elke module de header aan te passen in wit.
Tot zover. Wilt u ook de layout van uw Joomla website laten aanpassen? Vraag info@dewebmeester.nl naar mogelijkheden.
Groeten!

Aanpassen menu stijl / layout / css van weebly design

Dit is een vervolg op een vorige blogpost over het importeren van een html website in de online Weebly website builder. Dit importeren is prima gegaan en vervolgens heb ik een aantal zaken aangepast. Heel belangrijk: de {menu} en {content} tags zijn geplaatst en menu en content worden op de juiste plaats weergegeven. Maar wat te doen als ik de layout (stijl) van het menu wil aanpassen? Genoemde voorbeelden hebben betrekking op http://timmerbedrijfstraatman.weebly.com/ , de website die ontstaan is vanuit een PSD file die klant heeft aangeleverd. Zie link.
1) Waarbinnen staat de tag {menu}? In mijn geval binnen een <div id=””> container die betrekking heeft op de achtergrond afbeelding (afbeelding die achter het menu zichtbaar is. Helemaal ok want deze div container bepaald de positie van de afbeelding (div container is geimporteerd bij importeren van het html / css design) en door de {menu} tag binnen deze container te plaatsen (in de index.html file) wordt het menu weergegeven op dezelfde positie als de afbeelding en is de afbeelding dus een achtergrond afbeelding geworden.
2) Wens van de klant is om menu rechts uit te lijnen. In de main_style.css file van weebly
3) Conclusie is dus: de {menu} tag heeft geen eigen stijl definiering en moet een unieke <div class=””> of <div id=””> krijgen om aanpassingen te kunnen doen. Ik ga daartoe naar weebly.com, log in en ga naar de te bewerken website. Kies “all themes” en kies een design waar de menu weergave enigszins overeen komt met de gewenste weergave. Ik bekijk de css / html en kopieer alle relevante css en html code naar Notepad+; Interessant is dat de index.html file slechts 1 menu verwijzing kent terwijl de css file 9 #pietjepuk stijl definities laat zien. Maar alleen de #avmenu definiering is terug te vinden in de index.html file via

<div id=”avmenu”>{menu}</div>

4) Deze code plak ik in oorspronkelijke design (waarvan ik de menu layout wil aanpassen). Oftewel: <div id=”avmenu”>{menu}</div> plaats ik waar nu alleen nog {menu} staat en de nieuwe css verwijzingen plak ik in de main_style.css file (via weebly.com dus eerst weer terug schakelen naar het aan te passen design.). Gebruikte code:

/* side-nav
——————————————————————————–*/

#avmenu {
clear: left;
float: left;
width: 200px;
margin: 0;
font-size: 17px;
}

#avmenu ul {
list-style: none;
width: 200px;
margin: 0;
padding: 0;
}

#avmenu li {
list-style: none;
padding: 0 0 4px;
}

#avmenu li a {
line-height: 1;
text-decoration: none;
color: #878787;
font-family: “Glegoo”, “Myriad Pro”, Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
padding: 10px 5px 12px 22px;
border: none;
}

#avmenu li#active a,
#avmenu a:hover {
color: #fff;
background: #8fc563;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

/* Navigation Drop-Down Menu Customization
——————————————————————————–*/

#wsite-menus > .wsite-menu-wrap {
margin-left: -20px !important;
}

#wsite-menus .wsite-menu li a {
padding: 6px 15px 7px 15px;
background: #8fc563;
border: none;
border-bottom: 1px solid #abd986;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
}

#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #6ca33f;
}

5) Perfect. Nu heb ik een menu wat enigszins overeenkomt met het gewenste menu maar belangrijker: ik heb nu een menu wat volledige is aan te passen via de stylesheet (main_style.css). Oftewel: nu kan ik aanpassingen doen door bijvoorbeeld via Firefox en Firebug de code te bekijken en in Notepad+ aan te passen.
Groeten en laat weten of dit helpt of als je aanvullingen hebt.

Caching fijn-tunen van Joomla website

Een kort bericht als vervolg op mijn vorige blogpost over “Page Speed”. Onderstaande afbeelding laat zien hoe ik inmiddels voor www.projektduga.nl een Page Speed heb bereikt van 95/100 en daarmee is deze uitgebreide Joomla website bijna net zo snel als Google.

Dat had ik niet verwacht van Joomla. De “Clue” in dit alles is het gebruik van caching en van compressie. Dat moet op de juiste wijze gebeuren. Caching betekent het tijdelijk opslaan van bestanden die bij de website horen op een server waarbij de computer van elke gebruiker ook een soort “server” is. Compressie is het samenvoegen en verkleinen van meerdere bestanden tot pakketten.

Waar op te letten:

1) Joomla kent een eigen cache en compressie systeem. Het is een goed idee daarmee te beginnen via algemene instellingen    —–> server en ook —— > system. Om dit goed te laten werken moet via pluginbeheer de cache plugin geactiveerd worden.

2) De template heeft mogelijk een eigen cache systeem. Ik gebruik voor http://www.projektduga.nl het Gantry systeem (daar draaien bijvoorbeeld de rockettheme.com templates op). Via tab Advanced kom je bij de cache instellingen voor Gantry en voor de template. Aanzetten is een goed idee.

3) Rocketheme biedt een aantal zeer goede cache plugins (gratis) zoals RokGzipper en Rokbooster. Ik heb RockGzipper aangezet en alles lijkt versnelt goed te werken. Totdat een collega me de volgende doorgeeft dat de layout door elkaar ligt. Met name de fonts zijn anders (groter). Na legen van de cache is alles weer normaal. (Daar kom ik dan ook pas een uur later achter hoor). Geen goede zaak omdat het niet handig is om elke dag de cache te moeten legen en daarmee schakel ik de cache dus eigenlijk uit.

4) Fijn tunen: Advies via Google en Rockettheme forum levert op dat het verstandig is de Gantry cache uit te zetten als Rokbooster (wat ik dan nog niet gebruik) gebruikt wordt. Ik test eerst even door (alleen) de Gantry cache te legen (button rechtsboven binnen Gantry in template manager), browsercache legen en website opnieuw te laden. Ja, de website is dan ook in orde terwijl Joomla cache nog steeds niet geleegd is.

5) Installeren van Rokbooster levert vervolgens alleen maar problemen op.

Kortom de conclusie voor http://www.projektduga.nl is:     Joomlacache aan, Joomla Gzip aan, Rokzipper aan, Gantry cache en Gantry Gzip uit en Rokbooster uit.

Zolang de website een Page Speed van 95/100 heeft, ben ik tevreden.

Ook een Page Speed van 95/100 nodig? Neem even contact op met dewebmeester.nl via info@dewebmeester.nl (Ja dat emailadres bestaat echt. Bij de Gouden Gids leken ze daar niet in te geloven…..)