Posts tonen met het label Scripts. Alle posts tonen
Posts tonen met het label Scripts. Alle posts tonen

maandag 1 april 2013

Meerdere gebruikers, 1 website, verschillende opties (Wordpress)

Dit is een belangrijk concept en iets dat een webdeveloper in veel situaties nodig heeft: een website die de mogelijkheid biedt aan andere gebruikers (klanten) om zelf een website te onderhouden of te bouwen. Nu lijkt dat makkelijk te realiseren met een (open source) CMS maar algemene probleem lijkt mij dat medegebruikers standaard dezelfde mogelijkheden hebben als de administrator en de andere gebruikers. Bijvoorbeeld: zowel bij Joomla als Wordpress hebben mede gebruikers beschikking over dezelfde templates en thema's als de andere gebruikers. Het is nog niet zo makkelijk om verschillende gebruikers binnen 1 website, verschillende websites te laten bouwen en te onderhouden. Dewebmeester.nl onderzoekt de mogelijkheden en de beste worden op de markt gebracht. Deze week is dat het concept van http://www.mobilewebbuilder.nl : een website waar verschillende gebruikers allemaal verschillende mobiele websites kunnen maken en onderhouden.

In mijn vorige blogpost heb ik aandacht gegeven aan een mogelijkheid om een Wordpress plugin beschikbaar te stellen aan andere gebruikers zonder hen toegang tot thema's of posts van anderen te geven. Dat kan werken voor bepaalde plugins maar zal niet voor alle plugins even makkelijk werken. En in het geval van http://www.mobilewebbuilder.nl (www.mobielesitebuilder.nl) leidde dit niet tot een afdoende oplossing. Want de bedoeling is dat een gebruiker een unieke mobiele website maakt en onderhoudt, via de CMS publiceert en dat die website door een andere gebruiker uiteindelijk niet te bewerken is. En indien elke gebruiker toegang krijgt tot dezelfde plugin (een Mobiele Site Builder plugin), dan zijn die websites door alle andere gebruikers binnen de dashboard via de plugin te benaderen en aan te passen. Dat moet niet.

De oplossing (en ook voor veel andere gelijkende problemen)

De oplossing heeft "Multisite". Deze optie kan tijdens de installatie van een Wordpress geactiveerd worden of eventueel later (zie bijvoorbeeld deze blogpost). De Mulisite optie lost eigenlijk al onze problemen op zoals hierboven uitgelegd. Deze optie maakt ook de "Hack" zoals genoemd in de vorige blogpost onnodig. Dat is mooi omdat we nu geen files hoeven aan te passen (en opnieuw moeten aanpassen na elke update van de plugin). Maar we hebben nu wat andere problemen.

Wat is opgelost:

  1. elke gebruiker heeft een eigen dashboard en geen toegang tot dashboard van andere gebruikers

  2. dus elke gebruiker heeft alleen toegang tot posts van zichzelf en niet van anderen

  3. elke gebruiker heeft toegang tot plugins.


Nieuwe problemen:

  1. elke gebruiker heeft toegang tot alle templates en thema's en dat lijkt me wat teveel luxe.

  2. elke gebruiker heeft toegang tot alle geactiveerd plugins en ook dat is wat teveel luxe.


Vandaag los ik alleen dit eerste probleem op: ik wil binnen de hoofdwebsite (http://www.mobilewebbuilder.nl) een mooi premium design installeren en kies hiervoor WowWay. Maar vervolgens kan elke medegebruiker (elke klant) ook gebruik maken van dit thema zonder deze template te hoeven kopen en dus zonder een gebruikers licentie te hebben. Nee, dat wil ik niet. De oplossing is de volgende code in wp-config.php:
define('WP_DEFAULT_THEME', 'wowway');

Vervolgens activeer ik de template voor het hele netwerk, ga naar dashboard van eigen website en activeer dit thema. Daarna ga ik teru gnaar Network dashboard en deactiveer ik het thema voor het netwerk. Probleem opgelost: mijn eigen site heeft een mooi design, de andere gebruikers hebben niet de beschikking gekregen over dit thema maar kunnen wel aan het werk met de Mobiele Sitebuilder.

maandag 18 maart 2013

Foto album met preview afbeeldingen bij mouse on hover zoals op Facebook.....

Nou, deze blogpost lijkt mogelijk op Arabisch meer de functie is dat ik hier mijn gedachten en ideeen probeer weer te geven betreffende een opdracht in de hoop dat ik dit opdracht succesvol zal kunnen uitvoeren:

Opdracht: klant heeft Wordpress website en een leuke gallery via een gallery plugin. Nu is hij daar niet tevreden mee. Hij wil extra functionaliteit. De home pagina van de gallery toont een aantal categorieen. Die kunnen we beschouwen als fotoalbums over een bepaald onderwerp. Hij wil dat als de bezoeker met zijn muis over de voorkant van dit fotoalbum beweegt, dat dan automatisch, achter elkaar, een preview getoond wordt van de afbeeldingen binnen dat fotoalbum. Nee, niet onmogelijk. Maar wel moeilijk. Om het nog leuker te maken heeft hij een voorbeeld: de weergave van de fotoalbums in Facebook.

Spioneren van de code binnen Facebook
Dat doe ik meestal: even spieken binnen de code van de website waar de klant het voorbeeld gevonden heeft. Facebook in dit geval. Wat zie ik:
<div id="u_0_3b" class="_30l"><span id="u_0_2f" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/p206x206/530465_10151320424569284_27191678_n.jpg);"></i></span><span id="u_0_2g" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-d.ak.fbcdn.net/hphotos-ak-snc6/p206x206/603007_10151320424504284_10063898_n.jpg);"></i></span><span id="u_0_2h" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/p206x206/318068_10151320424509284_1098475204_n.jpg);"></i></span><span id="u_0_2i" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/p206x206/582526_10151320424494284_1473985989_n.jpg);"></i></span><span id="u_0_2j" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 1;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-b.ak.fbcdn.net/hphotos-ak-prn1/p206x206/47666_10151320427084284_424829715_n.jpg);"></i></span></div>

Mooie code maar de vraag is nu waar die naartoe verwijzen. Oftewel: in welke file of binnen welk script staat bijvoorbeeld het volgende gedefinieerd?:
class="uiMediaThumb _30m uiMediaThumbMedium"

Nee, lijkt me op zich niet erg relevant. Dit is tenslotte verwijzing naar css code en betreft niet een script. Code geeft alleen de output weer van het script. Maar welk script genereert deze output? Maar even googlen op: "load preview images mouse on hover". Geen succes. Of: "how to have images load on mouse over in wordpress plugin". Veel informatie, nog geen antwoorden.

Mijn test op jsfiddle.com

maandag 25 februari 2013

Openen video's van youtube in Lightbox binnen Wordpress slider

Vandaag bijt ik mijn tanden in een nieuwe opdracht van tweaky.com: De klant wil dat video's geopend worden in een Lightbox binnen dezelfde pagina. Het probleem lijkt me dat de video al geintegreerd is in een slider en niet in een bericht. Mijn stappenplan:

  1. - plugin lightbox video installeren (WP Video Lightbox)

  2. - testen binnen een Wordpress bericht

  3. - code controleren en kijken of dit te integreren is in slider. Deze slider is overigens onderdeel van de template en heeft een eigen beheerspanel en de klant wil natuurlijk het beheer over deze video's binnen dit beheerspanel behouden. Kortom: ik moet niet teveel in de broncode gaan veranderen maar zoveel mogelijk werken binnen bestaande admin panel van Wordpress.


Na stap 1 ga ik eerst naar de support pagina van deze plugin: http://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700#!prettyPhoto . Daar vind ik een demonstratie van de werking van de plugin en kijk via Firebug naar de code (mogelijk kan ik stap 2 overslaan?) en dan zie ik dit:
<!---<a title="" href="[youtube http://youtube.com/w/?v=G7z74BvLWUg?width=640&height=355]" rel="wp-video-lightbox"><img class="video_lightbox_anchor_image" alt="" src="http://www.tipsandtricks-hq.com/wp-content/uploads/2010/08/wp-video-lightbox-demo.png"></a>--->

Deze code plak ik in een Notepad+ document om te bestuderen.

Binnen de slider applicatie is een mogelijkheid om aan te geven welke image getoond moet worden en waar die image bij klikken naartoe moet leiden. Image laat ik staan en als link plaats ik de YouTube video link. Vervolgens moet ik de rel="wp-video-lightbox" nog ergens plaats. Ik probeer die te plaatsen naast de link binnen de slider applicatie maar zonder succes. In Firebug houd ik bij hoe de code verandert en ja, ik zie de link en zelfs rel= maar code wordt toch steeds weer door elkaar gegooid door de slider applicatie. Toch maar naar de broncode van de slider?
Ook dat probeer ik. Dat had moeten werken maar kan niet goed bepalen waar ik de -- rel="wp-video-lightbox" --moet plaatsen.

De oplossing
Tjonge wat ben ik dan weer blij als het lukt. Deze keer heeft het me 2 uur gekost. Oplossing lijkt simpel: bij de slider is er een optie om een "Caption" te plaatsen. Met een beetje geluk betekent dit dat er plaats is om html te plaatsen. En dus plaats ik de hele link, inclusief rel="wp-video-lightbox" in de Caption (de titel, of eventueel in de beschrijving). Dat ziet er zo uit:
<a href="[youtube http://youtube.com/w/?v=XXXXXXXXX?width=640&amp;height=355]" rel="wp-video-lightbox"> <em><font face="times new roman,times,serif" size="6">Click to Play</font></em></a>

Het resultaat is een mooie link onderaan de foto die getoond wordt met de titel "Click to Play" en bij klikken hierop wordt de video geopend in een mooie Lightbox overlay. Zie: http://www.speedvertu.com
Hartelijke groeten.
Ook interesse in het openen van video's in Lightbox? Neem even contact op me:--- info ---

woensdag 20 februari 2013

Javascript toevoegen aan blog posts (berichten) en pagina's Wordpress

Nee, dat is standaard niet mogelijk volgens Wordpress. Zie bijvoorbeeld: http://codex.wordpress.org/Using_Javascript Ja, het is blijkbaar toch mogelijk en daarvoor is niet eens een aparte plugin nodig. Stel ik ga naar een bericht of ik maak een nieuw bericht aan in Wordpress en vervolgens schakel ik naar html view, plak het script (chat, webshop API of in dit geval: een javascript clickable map) binnen de html code, sla bericht op en bekijk bericht. Resultaat is: niets..... Want alle javascript code wordt gefiltert en geschrapt door de Wordpress editor. Maar vandaag ontdek ik een simpele oplossing:

Script plaatsen in html widget en html code in bericht of page code
Ik plaats een nieuwe html widget binnen (bijvoorbeeld) de sidebar en plak daarin het script. Ja, nu werkt het wel maar wordt de code mogelijk niet op de juiste plaatst geactiveerd. Nee, we willen echt binnen een bericht de code laten zien. Geen nood. Na activeren van deze html widget (inclusief <head> script) plaats ik de html code die bepaalt hoe en waar mijn applicatie getoond moet worden, binnen de html van het nieuwe (of oude) bericht en vervolgens publiceer ik dit. En ja, nu verschijnt de javascript applicatie binnen het bericht. Logisch: de code uit de widget (sidebar) is oproepbaar binnen de pagina en kan niet door de editor gestript worden.

Niet simpel? Wilt u liever dewebmeester.nl dit laten doen? Stuur dan even een email naar info@dewebmeester.nl
Groeten!

dinsdag 29 januari 2013

Online uitpakken (unzip) op eigen server

Probleem (uitdaging): Ik wil een website installeren op een online server en de ontwerper stuurt een compleet .zip bestand. Prima. Ik kan dit gaan uitpakken, alle bestanden uploaden en verdere aanpassingen doen. Maar dit uploaden kan zo maar een half uur duren omdat een complete Joomla installatie inclusief design en extensies meer dan 10.000 files kunnen bevatten. Filezilla is daar we even mee bezig. Ik wil snel omdat ik bijvoorbeeld liever tien demonstratie websites installeer in plaats van een half uur te wachten op Filezilla.

Mogelijkheid 1: gebruik de uitpak functies van hosting account

[caption id="" align="alignright" width="250"]Image representing cPanel Inc as depicted in C... Image via CrunchBase[/caption]

Cpanel of andere admin panels van een hosting account hebben bijna altijd wel deze ingebouwde functie. De uitpak (unarchive) functie zit bij sommigen verstopt in de filemanager maar ik zie ook wel eens een aparte "Archive Gateway". Dat werkt meestal wel redelijk. Maar vandaag niet.

Mogelijkheid 2: een php script
En de meest simpele en erg efficiente (binnen een halve minuut waren deze 10.000 bestanden netjes uitgepakt op de server en ik hoefde dus alleen het .zip bestand te uploaden) is: http://www.phoca.cz/phoca-server-unzip , de unzip tool van Phoca. Ik kende Phoca van Phocagallery voor Joomla en dat is een prima gallery tool. En deze unzip tool blijkt ook prima te werken. Nee, niet direct. De map (tool_phoca_server_unzip) met de paar bestandjes moeten worden geupload naar de server binnen de map waar ook het .zip bestand zich bevindt. Vervolgens surf ik met Firefox naar deze map (http://www.mijnwebsite.nl/mapmetzipbestand/tool_phoca_server_unzip/ ) en ik krijg een aantal errors. Waarom? Geen idee. Ik pas wat permissies aan via Filezilla en schoon de cache op van de browser, Ctrl F5 en de tool werkt. Hier kan ik de FTP laag inschakelen (en ondertussen zie ik dat de tool het .zip bestand al gevonden heeft) en dat doe ik niet. Ik schakel de laag uit via FTP laag = 0 en klik op "unzip". Vervolgens wacht ik een twintigtal seconden en alle bestanden worden netjes uitgepakt.

Tjonge dat scheelt! Bedankt Phoca voor deze GRATIS tool.

Ir. Meindert A. Jorna (Msc.)

Savornin Lohmanstraat 45

6702BN Wageningen

☎ 0317 795149

Mob. 06 412 86716

☒ info

www.dewebmeester.nl

My profiles: facebook.png Facebook linkedin.png LinkedIn flickr.png Flickr twitter.png Twitter

pixel.png?p=mozilla&v=3.11.21&t=1359477781749&u=99a41a321fc9370a

maandag 28 januari 2013

Frustratie: een simpele Facebook like button op een Wordpress website

Tjonge, wat kan iets simpels soms moeilijk te realiseren zijn. Een Facebook Like button bijvoorbeeld binnen een Wordpress website.

Om een Faceboot button te plaasten binnen een (gewone) website, is het aan te raden de developers versie te gebruiken die door Facebook zelf onderhouden wordt:
http://developers.facebook.com/docs/reference/plugins/like/ Makkelijk te maken en niet moeilijk te integreren. Voor een Wordpress website denk je al snel aan een kant en klare plugin of widget. Ja die zijn er genoeg: "Facebook button plugin" of "Facebook widget"of "Facebook likebox". Zie de onderstaande afbeelding:


Zo, wat is dan het probleem? Het probleem is dat het niet werkt. Of de layout is niet goed, of er wordt niets getoond of de button werkt niet. Ja, de eerstgenoemde in de afbeelding ("Facebook") lijkt te werken. Ja die werkt. Enige probleem is mogelijk dat ik even geen optie kan vinden om de button gewoon binnen een widget te laten verschijnen. Ook worden "faces"niet getoond en is het vrij ingewikkeld om de applicatie te laten werken want: er moet eerst een Facebook applicatie aangemaakt worden en gekoppeld worden aan applicatie domein etc. Het LIJKT te werken want na klikken op "like", krijgt de like button counter + 1 maar deze like is vervolgens niet terug te vinden op mijn profiel in Facebook. Dat zou toch moeten?

Uiteindelijk val ik weer terug op de standaard Facebook developers code: http://developers.facebook.com/docs/reference/plugins/like/ , maak de parameters aan en plaats gegenereerde code binnen een html widget. Ja, de button wordt netjes getoond. Nee, de button werkt niet. De send button lijkt overigens wel prima te werken. Tenminste iets. Probeer de script code van Facebook te plaatsen achter <body> tag van header.php maar dat verandert niets. Helaas. Nog steeds niet naar behoren opgelost. Maar moet nu eerst even werken aan belastingaangifte voordat ik hier mee aandacht aan kan geven. Reacties, adviezen en andere commentaren zijn gewenst.

Aanvulling: twee problemen ontdekt

En zo heb ik tenminste alweer twee problemen opgelost:

1) De Facebook pagina id was fout. Die is op zich makkelijk te vinden door naar de pagina te gaan en op de timeline foto of profiel foto te klikken. Dan verschijnt er in de browser iets als: http://www.facebook.com/photo.php?fbid=424986770863567&set=a.424986767530234.107018.139250686103845&type=1&theater waarbij het laatste getal de facebook pagina id is, in dit geval: 139250686103845

2) De klant blijkt nog helemaal geen Facebook pagina te hebben en zijn profiel pagina aan mij doorgegeven te hebben. Nee, voor profielpagina's kun je geen "likes"verzamelen omdat het geen pagina is. Dus wel eerst even een pagina aanmaken.

[caption id="" align="alignright" width="240"]facebook logo facebook logo (Photo credit: marcopako )[/caption]

maandag 12 november 2012

Marktplaats of Speurders website deel 2

Deze blogpost is een vervolg op blogpost: http://dewebmeester.wordpress.com/2012/11/07/een-marktplaats-nl-website-de-mogelijkheden-prijzen-en-andere-adviezen/ (deel1)

Idee: marktplaats.nl is een populiare website en een populair website idee. Bezoekers kunnen hier niet alleen spullen kopen (= webwinkel / webshop) maar kunnen ook zelf spullen plaatsen en verkopen. De beheerder van de website verdiend niet met de verkoop van spullen maar met de verkoop van advertentie mogelijkheden. Kortom: de bezoeker doet het werk en de beheerder krijgt automatisch verdiensten. Maar welke mogelijkheden zijn er (= biedt dewebmeester.nl) om zelf zo'n website te hebben en te beheren?

Deel 2: Marktplaats/ Speurders website binnen Joomla
De test en demonstratie website: http://decmsmeester.nl/speurders/
Op deze website heb ik "simpelweg" een marktplaats component geinstalleerd. Om die component zichtbaar te maken op de voorpagina (zodat bezoekers er mee kunnen werken), is er een apart menu aangemaakt (ads menu) waarbij de linken koppelen naar de verschillende mogelijkheden van dit marktplaats script.
Zie afbeelding:
[gallery]

Daaronder een extra menu item in Main Menu met de optie "Buy Credits". De bezoeker kan Credits kopen om zo advertenties te mogen plaatsen. Het verdienen kan beginnen. Verder zijn er natuurlijk allerlei modules verwerkt om de producten leuk en mooi zichtbaar te maken op de voorpagina. Mogelijk belangrijk voor u:
Mocht u een eigen Speurders.nl of Marktplaats.nl website hebben? Dan kan dit makkelijk geintegreerd worden in elke bestaande Joomla website. Daarvoor hoeft u niet een nieuwe Joomla website te laten ontwerpen. Dat kan wel. Op http://www.dewebmeester.nl/joomla-design.html heeft u de keus over honderden zeer professionele Joomla designs voor een kleine prijs. Integratie van het marktplaatsscript in een Joomla website kost via dewebmeester.nl 99 Euro.
Reageren kan via deze blogpost (te vinden op www.dewebhulp.nl) of via email: info@dewebmeester.nl

De volgende blogpost over dit onderwerp gaat over integratie van een marktplaats script in een Wordpress website.

donderdag 8 november 2012

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.png Facebook linkedin.png LinkedIn flickr.png Flickr twitter.png Twitter

pixel.png?p=mozilla&v=3.11.21&t=1352372387225&u=dbb866711fc9370a

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!

woensdag 24 oktober 2012

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.

maandag 26 maart 2012

Logo verplaatsen binnen Joomla template

Dit is zo basaal en simpel dat het bijna schaamteloos is om daar een blogpost over te schrijven. Maar ik heb dan wel mooie titels (dewebmeester.nl / Spiderman Webdesign / Master of Science / Ir. en nog een aantal) maar soms ben ook ik gewoon veel teveel tijd kwijt met de meest onbenullige zaken. Om dat te voorkomen een blogpost:
Doel: het logo moet enkele centimeters omhoog worden geplaatst
Normale werkwijze: Firebug en opzoeken welke css files er aangepast moeten worden
Probleem: er blijkt geen enkele css verwijzing te zijn die positie van logo bepaalt. Het logo zit ergens gevangen binnen een vast kader binnen de html.
Oplossing: logo verwijderen. Ja, daarmee is hij toch ook verplaatst? En vervolgens een nieuwe module aanmaken: modules -----> nieuw -----> aangepaste html -----> naam logo, titel niet tonen, afbeelding uploaden (logo bestand) en opslaan binnen modulepositie die wel de juiste plaats weergeeft. En natuurlijk opslaan. Gelukt.
Advies: voortaan altijd een logo binnen een aangepaste html module plaatsen. Dat maakt verhuizen en aanpassen makkelijk.
Groeten!

Het grote probleem: tekst vinden en aanpassen binnen website files (met name .php)

Tja, het lijkt zo makkelijk: een tekst aanpassen binnen een website. Dat is het ook, als je maar weet in welke file of op welke plaats die tekst te vinden is. Met Firebug lijken we heel erg geholpen te zijn. Maar helaas, dat geldt eigenlijk alleen voor de .css files want daarvan wordt inderdaad heel duidelijk aangegeven in welke file de gezochte code te vinden is. Heel handig maar niet genoeg.

Het voorbeeld probleem waar ik nu mee zit: binnen een Joomla template inclusief Virtuamrt wil de klant enkele teksten aangepast hebben. Dat bied ik standaard aan en kost me nog altijd veel te veel tijd. Dus: als eerste wil ik vragen of iemand van mijn lezers mogelijk een eenvoudige addon weet die aangeeft binnen welke file op de server een bepaalde tekst te vinden is. Tot dan toe werk ik voornamelijk via de offline methode:

Stap 1: ik download de complete map / folder waarvan ik verdenk dat daar ergens de tekst tussen zou moeten staan
Stap 2: ik open alle files van een bepaalde extensie (meestal .php) uit die folder met EditPadPro, open search panel en laat programma naar de tekst zoeken. In veel gevallen ben ik dan geholpen. Veel werk, beetje omslachtig en je moet dus wel de beschikking hebben over EditPadPro.

Stap 3: Soms (nog veel te vaak) lukt het toch niet. Dan ga ik naar phpmyadmin, log in, ga naar betreffende database en start een search opdracht. Ook dat lost een aantal problemen op.
Stap 4: ik ben bang dat ik een slapeloze nacht ga beleven. Op dit moment probeer ik "Old price" en "Discount" binnen een Joomla /Virtuemart installatie aan te passen en de tekst blijft onvindbaar. Ben nu gestart me het programma "FilterFTP" waarmee je online op de server kan zoeken. Maar als eerste lijkt het programma alleen aan te bieden om binnen filenamen te zoeken en dat heb ik niet nodig. Ik wil in die files, in de code en in de tekst zoeken.

Stap 5: terug naar EditPadPro. Ik maak een FTP server connectie en links zie ik netjes alle files en folders binnen de server. Als ik met rechtermuis op folder klik en klik op "open" wordt in rap tempo alle files binnen deze folder geopend waarna ik kan gaan zoeken binnen de files. Dat scheelt aleer de stap van downloaden maar daarmee kan ik op een later tijdstip natuurlijk weer moeilijker opnieuw gaan zoeken. Probleem: er zitten teveel images in de folder en die wil ik nog even niet openen. Programma loopt dan ook vast.
Stap 6: ik ga opnieuw de complete folder com_virtuemart downloaden (mogelijk heeft klant wat aagepast) en ik ga koffie zetten.
Wordt vervolgd en ik hoop: gevolgd want advies kan ik wel gebruiken!

Stap 7: Terug naar Firebug (nadat ik alle .php files uit com_virtuemart geopend had in EditPadPro en die files doorzocht had zonder resultaat). Daarbij hoort de volgende afbeelding:



De tekst "Old prijs" is hierbij al aangepast in "Oude prijs" (blijkbaar is het me gelukt!). Firebug geeft aan dat tekst te vinden is binnen een module. Er wordt een div_class "Module_new"  gebruikt. Dat leidt er toe dat ik de complete map "modules" download en laat onderzoeken door EditPadPro. En ja hoor, tekst wordt dan snel gevonden en aangepast.

Grote voordeel van offline methode (waardoor ik even stop met zoeken naar online methode) is dat alle bestanden nu zoekbaar aanwezig zijn op mijn computer wat doorzoeken erg snel maakt.

zondag 13 februari 2011

Module positie toevoegen aan Joomla template

Ik heb er weer helemaal zin in: Ik ga enkele mogelijkheden beschrijven die het mogelijk maken om elke html/css webpagina om te zetten in een bruikbaar Joomla template. Voordelen: Joomla is HET open source management system voor Joomla websites en omdat dit het meest uitgebreide CMS is ter wereld, is het gewoon rechtvaardig om een mogelijkheid te kennen om een "gewone" HTML pagina te importeren in dit CMS. Dat zal het gemakkelijk maken om één of meerdere van de duizenden (gratis) beschikbare Joomla componenten en modules te integreren in een HTML website, gebruikersaccounts aan te maken en te beheren, artikelen en andere inhoud online bij te houden, enzovoorts, enzovoorts.

In deze bijdrage het onderwerp:

Module posities. Voorbeeld: aanpassing van de purity_ii template van Joomlart


Module posities staan genoemd in de templatedetails.xml file die onderdeel uitmaakt van de gebruikte joomla template. Deze file is the vinden in de folder 'templates' en dan natuurlijk binnen de subfolder van de betreffende template. Om een modulepositie toe te voegen of te verwijderen hoef je alleen aanpassingen te maken binnen het rijtje. In mijn voorbeeld: ik wil een modulepositie toevoegen met naam "bottombar" en voeg de regel <position>bottombar</position> toe aan het rijtje.

"positions>

<position>hornav</position>

<position>breadcrumbs</position>

<position>bottombar</position>


<position>banner</position>

<position>left</position>

<position>right</position>

<position>top</position>

<position>user1</position>

<position>user2</position>

Etc./>

Vervolgens plaats je binnen de index.php de code <jdoc:include type="modules" name="<naam van modulepositie>"/> op de plaats waar de module binnen de template zou moeten verschijnen en vervang je <naam van modulepositie> door de naam van de modulepositie precies zoals je die hebt beschreven in het bovengenoemde rijtje. Nu kan dit overigens wel eens tot problemen leiden omdat de nieuwe design (joomla templates) niet allemaal zo standaard zijn. Oftewel: de index.php file van een joomla site heeft mogelijk helemaal geen HTML tags zoals je gewend bent. Ga in dat geval op zoek de .php file die beschrijft welke modules op elke positie geladen moeten worden. Die .php file zit waarschijnlijk in de /templates folder. In mijn geval was het de file joomla2/templates/purity_ii/layouts/header.php waarin ik de jdoc:include betreffende "bottombar" heb geplaatst (lijkt niet logisch om een 'bottombar' te plaatsen in header.php maar in footer.php bleek de module niet te werken zoals behoort.) Resultaat: er verschijnt binnen mijn site een mooi menu helemaal beneden op het scherm die mooi meescrollt binnen de pagina (www.decmsmeester.nl/joomla2) op een nieuwe positie die ik 'bottombar' heb genoemd.

Zo leren we langzaam hoe een Joomla template is opgebouwd. We moeten proberen zoveel mogelijk zaken te ontdekken. Het zijn allemaal puzzelstukjes die ons zullen helpen om uiteindelijk zelf een Joomla template te maken of om van een bestaande HTML pagina om te zetten naar een Joomla template. In deze aflevering leerden we om een modulepositie te definieren en om te bepalen op welke plaats binnen een (html)pagina de module moet verschijnen.

maandag 1 november 2010

Een joomla module binnen een joomla artikel

Dit zou heel veel mogelijk maken: het direct publiceren van een Joomla module binnen een Joomla artikel. Waarom? Omdat elke joomla template begrensd is door de de beschikbare 'module posities'. Naast module posities is er nog ruimte voor artikelen. Deze ruimte heet 'content' en is geen module positie. Door deze ruimte toch te gebruiken om modules te plaatsen, kun je menu's, flash modules, sliders, fotoalbums, en alles dat je via een module kunt publiceren, heel makkelijk weergeven binnen een artikel zonder dat je daar een dure 'editor' voor nodig hebt. Hierbij hoe je dit kunt oplossen en een voorbeeld:

  1. Maak een module aan of installeer die. (Hoe je dit doet vind je in andere hoofdstukken)
  2. Maak een nieuwe module positie aan (klikken op nieuwe module en onder scroll menu 'positie' gewoon klikken op een beschikbare positie – niet belangrijk welke – en vervolgens een nieuwe naam typen: handmatig. Wel even onthouden welke naam dit is.) Ik heb in mijn voorbeeld de positie 'video' aangemaakt.
  3. Maak een nieuw artikel aan of open een bestaand artikel.
  4. Plaats binnen dit artikel de volgende code (hoeft niet in html code, gewoon binnen artikel plaatsen): {loadposition video} Let op: 'video' is mijn voorbeeld. Dit moet de naam zijn an de zelfbedachte module positie.
  5. Sla op en vervolgens wordt binnen het artikel de module getoond op de plaats waar deze code gedropt is.

Niet moeilijk toch?

Vragen toesturen naar vraag@dewebmeester.nl

maandag 6 september 2010

Invoegen van flash

Er zijn veel mogelijkheden en onmogelijkheden om flash in een website te stoppen. Meest gebruikte is de 'embed' methode waarbij het flash video bestand geupload wordt naar een bepaalde map in de server en vervolgens wordt er binnen de HTML code van de website, op de plaats waar de flash video moet verschijnen, een bepaald script geplaatst die aangeeft dat het videobestand geladen moet worden. Mijn probleem was dat voor verschillende soorten websites, verschillende scripts lijken te gelden en verschillende methodes. Ik probeer ze hier op een rij te zetten:

Flash importern in een Joomla site

Gisteren gelukt in www.cheap-web.nl op de plaats 'advert 1'; Dat is een banner geworden. Banner is geplaatst met een aparte (non commercial) flash module; Lekker makkelijk dus. Ik had ingesteld dat de banner op alle pagina's vertoond moeten worden maar dat geeft problemen in de virtuemart sectie. Hoofdpagina 'Online store' geeft de banner heel netjes weer. De rest van de virtuemartpagina's (categorieën en producten) geven alleen een lege ruimte weer. Ik heb de module voor de Virtuemart sectie dus even uitgeschakeld (wel makkelijk van een module….)

Flash importeren in Joomla / Virtuemart

Stel dat je zoals wij flash banners wilt verkopen. Dan is het wel handig dat deze flashbanners ook getoond worden in de winkel. Dat ga ik vandaag voor elkaar proberen te krijgen.

Om je"YouTube video" en andere Flash files in de VirtueMart product beschrijving te plaatsen, moet je de 'object' en de 'embed' items uit de volgende regel verwijderen:

var $tagBlacklist = array('applet', 'body', 'bgsound', 'base', 'basefont', 'embed', 'frame', 'frameset', 'head', 'html', 'id', 'iframe', 'ilayer', 'layer', 'link', 'meta', 'name', 'object', 'script', 'style', 'title', 'xml');

De nieuwe regel wordt dan:

var $tagBlacklist = array('applet', 'body', 'bgsound', 'base', 'basefont', 'frame', 'frameset', 'head', 'html', 'id', 'iframe', 'ilayer', 'layer', 'link', 'meta', 'name', 'script', 'style', 'title', 'xml');

Zoek naar deze regel in: administrator/components/com_virtuemart/classes/phpInputFilter/class.inputfilter.php file.

Vervolgens moet je de HTML code van de product beschrijving aanpassen en de video file plaatsen met onderstaand script:

 <div align="center">
<object width="445" height="364"><param name="movie" value="http://www.youtube.com/VIDEO PATH"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/VIDEO PATH" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="445" height="364"></embed></object>

</div>

Je moet hier 'http://www.youtube.com/VIDEO PATH' natuurlijk vervangen met je eigen
video file URL.

Ik probeer deze variatie in de productbeschrijving van het product 'flash banner' binnen virtuemart van www.cheap-web.nl (Categorie 'Extra services en diensten'); Ik klik op het icon 'html', plak het script daarin en klik 'update' en ja hoor, er verschijnt een .swf bestand op de plaats van de productbeschrijving. Alleen: hij 'loopt' niet. Het blijkt een gecombineerd flash bestand te zijn. Het .swf bestand ('main') laadt zelf andere .swf bestanden via een .xml bestand en dat blijkt niet te werken. Via Google ontdek ik al dat .swf bestanden die aangestuurd worden via .xml bestanden moeilijker te integreren zijn in Joomla / Virtuemart. Ik ga dat uitzoeken!

Flash script binnen index.php ?

Een ander script dat ik tegen kom geeft de aandacht aan het plaatsen van het script binnen de index.php file. Dat is mij niet duidelijk omdat volgens mij dan niet duidelijk is op welke plaats de flashbanner zal verschijnen. Hierbij het script (ik zal direct dit script in de index.php plaatsen met een verwijzing naar en .swf bestand uit de root om te kijken wat het resultaat zal zijn; ik zal het laten weten!):

Copy the following directly into the proper location within your index.php file which drives the Joomla template.
 
<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
codebase=http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=5,0,2,0
width=700
height=175>
<param name=movie value=globe.swf>
<param name=quality value=high>
<param name=BGCOLOR value=#112B4D>
<param name=SCALE value=noborder>
<embed src=globe.swf
quality=high
pluginspage=http://www.macromedia.com/shockwave/download
/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash
width=700
height=175
bgcolor=#112B4D
scale= noborder>
</embed>
</object>

Het resultaat?: Een 'syntax error'; Niet aan te raden dus dit script….

Flash script binnen index.php (artisteer templates)

Deze code kwam ik tegen om binnen de 'header' te plaatsen vaneen template die is opgemaakt in Artisteer:

<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="984" height="278">


<param name="movie" value="<?php echo $mosConfig_live_site;?>/


template/TemplateName/images/filename.swf " />


<param name="quality" value="high" />


<embed src="<?php echo $mosConfig_live_site;?>/template/TemplateName/images/filename.swf " quality="high" pluginspage="http://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="984" height="278"></embed>


</object>

(Uit: http://www.artisteer.com/?post_id=110256&p=forum_post&topicsPage=3&forum_id=20)

Vergeet nooit om voor vragen contact op te nemen met www.dewebmeester.nl

(wordt vervolgd)

zaterdag 22 mei 2010

Lightbox 2.04

Vandaag gewerkt met "Lightbox 2.04". Dit is een toepassing die is bedoeld om binnen een (HTML)webpagina op een professionele wijze foto's weer te geven. Vrij simpel:

  1. Download lightbox = een map met bestanden: images (bevatten de foto's), js, css en een HTML file als voorbeeld. ( zie: http://www.huddletogether.com/projects/lightbox2/ )

  2. Open de HTML file en volgt de instructies.


  3. Open 'beeld' en vervolgens 'paginabron' om achter de HTML site te kijken hoe actionscript moet worden geplaatst binnen HTML pagina van de eigen site.

    Dit betekent dat de volgende scripts binnen de "head" van de site geplaatst moeten worden:


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<script src="js/prototype.js" type="text/javascript"></script>


<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>


<script src="js/lightbox.js" type="text/javascript"></script>




  1. Plaats (upload) de js en css en images mappen in de map waarin de te bewerken website zich bevind.


  2. Kopieer de link(en) uit de voorbeeld HTML naar de pagina waar de foto's geplaatst moeten worden.

    Dit betekent dat de volgende linken geplakt moeten worden (binnen de HTML code) op de plaats waar de foto's vertoond moeten worden:


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>




  1. Pas deze linken aan zodat ze verwijzen naar foto's die werkelijk in de "images" map bevinden van de te bewerken site.

  2. "insert" een thumb van de te bekijken foto's binnen de geplaatste linken op de plaats waar nu >image #1< staat of: bewerk deze tekst zodat ze logisch verwijzen naar de te vertonen foto.


Lightbox is een kadootje voor elke webmaster. Volg gewoon de algemene logica van het webbouwen (= zorg ervoor dat alle linken verwijzen naar hetgeen jij wilt laten zien) en je website krijgt direct een vrij professionele uitstraling. Vergeet niet om de illustraties uit de map 'images' zoals je die aantreft in de lightbox map te uploaden naar de images map van je website. In deze map zitten een paar iconen die worden weergegeven via de geuploadde scripts. Daar bevindt zich bijvoorbeeld het icoontje 'close' dat wordt weergegeven bij het openen van een illustratie is lightbox zodat de bezoeker weet waar te klikken om de illustratie weer te laten verdwijnen.

Voor meer info stuur mij even een mailtje,

Meindert A. Jorna

Spidermanwebdesign@gmail.com

Kijk ook eens op:

www.spiderman-webdesign.nl

of:

www.dewebmeester.nl

vrijdag 14 mei 2010

Flash als achtergrond website

Het wordt steeds gekker met ons. Eerst waren we blij dat we teksten aan elkaar konden versturen, toen kwamen de illustraties en vonden we het vervolgens leuk om illustraties als achtergrond te gebruiken. Toen ontdekten we bewegende beelden, flash en de volgende stap is dan: achtergronden in flash. Je ziet ze niet veel: websites met een bewegende (flash) achtergrond. De reden kan natuurlijk zijn dat dit te druk wordt maar volgens mij is de reden vooral dat het vrij moeilijk is om dit gedaan te krijgen. Hierbij een korte workshop:

Hier is wat HTML code:

<div id="bg">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="Snow" width="100%" height="575" align="top" id="Snow">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://www.homedics.com/skin/frontend/hmdx_us/default/images/media/Snow.swf"/><param name="menu" value="false" /><param name="scale" value="noscale" /><param name="salign" value="t" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><param name="QUALITY" value="low"> <embed src="http://www.homedics.com/skin/frontend/hmdx_us/default/images/media/Snow.swf" width="100%" height="575" align="top" menu="false" quality="low" scale="noscale" salign="t" wmode="transparent" bgcolor="#ffffff" name="Snow" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

In de CSS file:

#bg { margin-bottom:-575px; position:fixed; width:100%; top:0; left:0; }

Dit is het voorbeeld uit http://homedics.com/

Nu nog even aanpassen. Ik ga er mee bezig en houd jullie op de hoogte.

donderdag 29 april 2010

Script: in en uitklappen van tekst binnen website

Het lijkt zo makkelijk als je alleen maar websites bekijkt en ze niet hoeft te maken: een link in de website en als je er op klikt, klapt er een stukje tekst open. Dat is makkelijk omdat de bezoeker niet een aparte webpagina hoeft te openen om de tekst te kunnen bekijken en omdat de bezochte pagina niet direct hele lappen tekst lijkt te bevatten. Eerlijk gezegd maak ik tegenwoordig amper meer een website zonder deze techniek te gebruiken. Voorbeelden: www.fransjorna.nl en www.beautysalonalaa.nl


Er zijn een viertal elementen nodig om dit te laten werken:


  1. Het script:

    <script type="text/javascript">
    function kadabra(zap) {
    if (document.getElementById) {
    var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
    }
    return false;
    } else {
    return true;
    }
    }
    </script>
    (te plaatsen in de head)


  2. Style script:

    <style type="text/css">
    #tekst {
    display: none;
    width: 250px;
    border: 1px solid black;
    background-color: #cccccc;
    padding: 5px;
    font-size: 12px;
    }
    </style> (ook plaatsen in de head)


  3. Tekst die open moet klappen (zelf schrijven) en die vervolgens plaatsen tussen:

    <p id="tekst">
    </p> (de verwijzing "tekst" kan natuurlijk aangepast worden en dan moet die vervolgens ook aangepast worden binnen het style script en de link hieronder.)


  4. Een link waarop geklikt moet worden om de tekst uit 3) zichtbaar en onzichtbaar te maken:

    <a href="#" onclick="return kadabra('tekst');"> Hier de link naar je tekst die zichtbaar is voor je bezoekers en waar ze op moeten klikken om de tekst uit 3) te kunnen zien.</a>


En illustraties / pictures / images / foto's? Dat werkt op dezelfde manier. Alleen onder 3) een verwijzing naar een image bestand plaatsen in plaats van tekst. Maar wat betreft images en foto's raad ik toch echt lightbox aan.

Groeten,

Meindert (dewebmeester.nl)

(wordt vervolgt)

woensdag 3 februari 2010

Slideshow

Naast Lightbox 2.04, kun je natuurlijk allerlei andere toepassingen gebruiken om een leuke diapresentatie te geven via je website. Een voorbeeld van een flash slide show vind je op www.kampmanuel.nl Die is "gewoon" opgemaakt met Adobe Flash en later is het SWF bestand binnen de HTML code geplaatst (zie paginabron om te kijken hoe je dit kunt doen). Maar vandaag heb ik geprobeerd te werken met http://www.yourminis.com Die bieden allerlei gratis widgets aan; Je hoeft alleen de broncode te kopiëren en in te voegen op je webpagina (binnen de code natuurlijk). Ik zocht "slideshow" en kreeg er een aangeboden via http://www.yourminis.com/minis/yourminis/yourminis/mini:slideshow Daar kan ik vervolgens URL's toevoegen ("add"). Helaas lukt het me nog niet om gehele mappen tegelijk toe te voegen en heb ik voor elke foto apart een url moeten toevoegen. Vervolgens kopieer ik opnieuw de broncode en plaats die op mijn site. Het voorbeeld: www.projektduga.nl op de pagina "Ondersteuning".

dinsdag 2 februari 2010

search engine op eigen website

Vandaag is het me gelukt om een zoekmachine functie te installeren op de homepagina van mijn site samuelservices.nl ; Dit via atomz.com Wat niet al te moeilijk. Maar in eerste instantie werkte de zoekmachine niet. Want: mijn site staat doorgelinkt (domeinnaam staat geregistreerd bij andere provider) en dus leest Atomz een lege pagina. Heb daarna, in plaats van samuelservices.nl, een andere site ingevuld bij Atomz n.l. www.croatia-advice.com omdat onder deze site (onder deze hostingruimte) ook samuelservices.nl gehost staat. Vervolgens een link geplaatst op de homepagina van croatia-advice.com naar de directory waarin de index.php file staat van samuelservices.com (http://croatia-advice.com/Adviesbureau+Kroatie/webspace/httpdocs/) en Atomz opnieuw laten indexeren. Hij vindt nu 34 pagina's. Daarmee is tegelijkertijd croatia-advice.com als samuelservices.nl geïndexeerd. Heb gelijk de html code van de zoekfunctie op croatia-advice.com geplaatst. Ben van plan om alle sites onder croatia-advice.com (een stuk of 15) te linken en tegelijk te laten indexeren.