CSS Archieven - De Webkrant

Meindert 8 april 20158 april 2015 0 reacties bootstrap, responsive, responsive website, wordpress design, wordpress theme

WordPress theme ombouwen naar mobiele – responsive versie

Google heeft ons weer een bang gemaakt met de melding dat websites die vanaf 21 april niet toegankelijk zijn gemaakt voor mobiele apparaten (smartphones, tablets), zullen zakken in de zoekresultaten. Nu heb ik een aantal klanten die heel verstandig hebben geinvesteerd in de vindbaarheid van hun website en veel aandacht hebben gegeven aan zoekwoorden optimalisatie en het zou natuurlijk jammer zijn als die investering voor niets zou zijn geweest. Nu denk ik dat het mogelijk meevalt omdat een positie altijd bepaald wordt door wat de concurrent doet. Dus mijn klant uit Ede (autotransmission) die zijn website optimaliseert voor “revisie versnellingsbak” gaat natuurlijk alleen dalen als de concurrenten ook meegaan in de trend en hun site mobiel toegankelijk of responsive hebben … Lees verder.

CSS Layout Scripts Tweaks

Meindert 12 september 2013 0 reacties bootstrap, css, pagina structuur, twitter bootstrap. layout

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 … Lees verder.

CSS dewebmeester.nl Layout Scripts

samuelservices 8 november 2012 0 reacties aanpassen design, css, firebug, Firefox, layout

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

… Lees verder. Read More

CSS dewebmeester.nl Joomla Layout Modules Scripts

samuelservices 8 november 2012 0 reacties css, design, joomla, joomla module, layout, module

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 … Lees verder.