css Archieven - De Webkrant

12 september 2013 Meindert

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

8 november 2012 samuelservices

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

8 november 2012 samuelservices

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.