Aanpassen achtergrond van JCE popup Joomla

Deze blog post is voor mijn persoonlijk archief want dit probleem verwacht ik nog vaker tegen te komen en het viel niet mee te juiste oplossing te vinden.

Probleem:
Bij aanmaken van een popup link (na klikken op de link, opent de gevraagde informatie zich in een "popup") via de JCE editor in Joomla, wordt het artikel dat binnen de popup getoond wordt (werkt dus prima), weergegeven met een donkere achtergrond. Dat is de standaard achtergrond van de gebruikte template en die willen we niet aanpassen. Tekst (ook donker) wordt daardoor moeilijk leesbaar.

Oplossing:
In de template.css file plaats ik code:

/* jcemediapopup */
#jcemediabox-popup-ajax {

background-color: white !important;

}

Ik had natuurlijk direct een oplossing verwacht maar de popup achtergrond blijft zo zwart als roet. Maar ik ben op de goede weg. Wat nog nodig is: bij aanmaken van de JCE popup (in JCE editor) moet het type aangepast worden. Dat kan via "toggle editor" en in de link target het type="text/html" te plaatsen. Voorbeeld van goed html (te testen via "toggle editor"):

<a target="_blank" rel="title[De voetbalhistorie!];width[800]" type="text/html" href="index.php?option=com_content&amp;view=article&amp;id=133:voetbal-historie-van-projekt-duga&amp;catid=42:activiteiten">Voetballen</a>

type="text/html" heb ik hier handmatig geplaatst. Dit kan ook worden gedaan door bij aanmaken van de link te kiezen voor type "interne link".

Deze codes zijn ook te vinden op dewebmeester.nl snippets websites:
http://shortcodes.tk/
http://hetkladblok.tk/
http://kladblokje.tk/

Groeten!

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.

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!

Een Marktplaats(.nl) website, de mogelijkheden, prijzen en andere adviezen

Als u bij deze blogpost terecht bent gekomen dan bent u waarschijnlijk op zoek naar een website "zoals marktplaats.nl". Deze website is enige jaren geleden voor miljoenen Euro's (of waren het nog guldens?) verkocht en dat heeft veel mensen op het idee gebracht om ook te starten met een eigen marktplaats website. Deze wensen en mensen komen ook bij dewebmeester.nl terecht (, een website die over enkele jaren mogelijk ook miljoenen gaat opleveren....).

Wat wilt u precies?
"Een marktplaats website" is mogelijk een te vaag begrip. Het helpt om uw wensen te verduidelijken. De vraag moet zijn:
- Welke functionaliteiten wilt u binnen uw website?

Bij een marktplaats website kunt u denken aan de volgende mogelijkheden:

1. Mogelijkheid om advertenties te plaatsen door een (al dan niet geregistreerde) bezoeker


2. Daarbij kiest de bezoeker uit een categorie (bijvoorbeeld: auto's, boten, computers e.a.)


3. U moet zich afvragen of u wilt dat de bezoeker ook subcategorieen kan kiezen voor zijn producten (dat kan op marktplaats.nl)


4. Moet de bezoeker betalen voor het plaatsen van een advertentie?


5. Zijn er "opval" mogelijkheden? (Bovenaan plaatsen, opvallende opmaak, speciale categorieen, geplaatst op de homepagina e.a.; zie marktplaats.nl)


6. De bezoeker kan 1 of meerdee productafbeeldingen uploaden


7. De bezoeker kan via zijn eigen account op een later tijdstip de geplaatste advertenties beheren en aanpassen


8. Bezoekers kunnen zoeken naar een gewenst product


9. De bezoeker kan direct betalen via de website (dat kan bijvoorbeeld niet via marktplaats.nl)


10. Er is een geintegreerde Google maps integratie waarop alle producten van een bepaalde categorie te vinden zijn (niet aanwezig op marktplaats.nl)


11. Social media (twitter, facebook, linkedin) geintegreerd?


12. Andere zaken

Mogelijkheden
dewebmeester.nl blijkt in het archief nog een "oude" en complete website te hebben die enigszins de mogelijkheden heeft zoals hierboven genoemd. Het betreft een Joomla website en heeft daarmee dus direct "Joomla mogelijkheden" (kijk even rond op dit blog naar Joomla mogelijkheden). Dat betekent bijvoorbeeld dat alle functionaliteiten van die website ook gebruikt kunnen worden binnen een andere Joomla website met een totaal andere layout. Wat zijn die functionaliteiten? De website heb ik geplaatst op www.decmsmeester.nl/marktplaats

Ten aanzien van:
1) Er kunnen advertenties geplaatst worden door een al dan niet geregistreerde bezoeker. Zie afbeeldingen:


Vrij eenvoudig: de bezoeker ziet een menulink met "new ad" en natuurlijk kan daar ook net zo goed "plaats advertentie" staan.
2) Vervolgens krijgt de bezoeker de kans om een categorie te kiezen (net als op marktplaats.nl). Zie afbeelding:


3) Ook kan er gekozen worden voor een subcategorie. Daarna opent zich ene uitgebreid formulier wat er zo uitziet als de afbeelding hieronder. En zoals u ziet: dit is een website zoals marktplaats.nt ; Kosten? Vanaf 199 wordt de complete website geleverd. Natuurlijk heeft u nog extra wensen en ook daarvoor kunt u contact opnemen met info


Maar hoe zit het met:
4) De mogelijkheid om degene die een advertentie plaatst te laten betalen? Dat kan via een extra component. Daarvoor bent u dan (helaas) 99 Euro extra kwijt. Vervolgens kunt u verschillende betaalmodules aanmaken en betaalopties hanteren en beginnen met het verdienen. Op zich klinkt het wel makkelijk: u laat anderen een advertentie plaatsen, u heeft een compleet systeem waarmee de bezoeker zelf makkelijk overweg kunt en u krijgt bijna automatisch enige inkomsten (die in geval van marktplaats.nl opliepen tot enkele miljoenen).
5) En de extra "opval" mogelijkheden? Ja ook die zijn geintegreerd in de extra component die hierboven genoemd wordt. "Vetgedrukt" of "Speciaal" zijn mogelijkheden waarvoor u de adverteerder eventueel extra kan laten betalen. Zo kunt u er dus ook voor kiezen om het plaatsen van een advertentie gratis te laten zijn terwijl de opvalmogelijkheden extra betaald moeten worden. Dat is zo ongeveer het oude marktplaats.nl systeem en zo werkt speurders.nl in grote mate nog steeds.
6) De adverteerder kan meerdere productafbeeldingen uploaden (zie afbeelding hierboven).
7) Accountbeheer is mogelijk (zie "my ads" in de afbeelding hierboven) en is uit te breiden via de extra component die genoemd is onder 4 en 5 en die u daar al heeft aangeschaft. Nu kan de marktplaats website en het plaatsen en beheren van advertenties ook geintegreerd worden in Jomsocial.
8) Een uitgebreide zoekmogelijkheid is ook aanwezig maar Joomla kent natuurlijk ook extra en externe zoekextensies indien nodig. Maar hieronder de afbeelding van de vele zoekopties:


9) Wilt u dat de bezoeker via uw website direct kan betalen voor een product? Dan moet u zich afvragen of u wilt dat de bezoeker aan u betaalt (dan heeft u meer aan een webwinkel dan aan een marktplaats website) of dat de bezoeker aan een adverteerder betaalt (die u alleen betalen voor het plaatsen van een advertentie). In dit tweede geval heeft u een community component als JomSocial nodig of CB (CommunityBuilder) waarbinnen adverteerders een eigen profiel kunnen onderhouden en verder allemaal een eigen "mini" webwinkel hebben binnen uw marktplaats website. Houdt rekening met een investering van enkele honderden euro's extra om dit mogelijk te maken.
10) De optie van een uitgebreide Google Maps integratie is niet te vinden op de demonstratiewebsite van www.decmsmeester.nl/marktplaats maar niet getreurd: die kan via een andere component eventueel wel worden geintegreerd. Zie www.dewebhulp.nl (klik op een voorbeeld advertentie en zie onderaan een Google Map; zie afbeelding hieronder):


Hier zien we nu slechts 1 "pointer" maar dat komt omdat ik slechts 1 advertentie geplaatst heb.
11) Integratie van Social Media zoals Twitter, Facebook en Linkedin is altijd mogelijk via "share" of "like" buttons maar ook via allerlei extra (vaak gratis) modules en plugins.
12) Andere zaken krijgen in een volgende blogpost aandacht. Hier volsta ik even met de voorlopige conclusie: Het is zeer goed mogelijk om zelf een website te hebben zoals marktplaats.nl; U kunt hier vanaf 199 Euro al eigenaar van worden en hoeft daar zeker geen duizenden euro's voor te betalen. Daarbij kunt u alle kanten op wat betreft layout en ook functionaliteiten zijn zeer goed uit te breiden zodat zowel layout als functionaliteit van uw website, die van marktplaats.nl overstijgt.
Voor informatie altijd contact opnemen met info en wie weet: bent u binnenkort ook de trotse beheerder van een echt marktplaats website. Uzelf hoeft dan voorlopig in ieder geval niet meer te betalen voor het plaatsen van een advertentie.
Groeten!
Meindert A. Jorna

Verhuizen Wordpress website van lokale (localhost) naar online server

Dat bleek weer eens veel ingewikkelder dan ik dacht. En uiteindelijk is het mogelijk ook weer veel makkelijker dan het lijkt (leek). Hierbij mijn ervaring:

Adviezen op Google duiden vaak op de noodzaak om binnen phpmyadmin in bijvoorbeeld de wp_options tabel zaken aan te passen en daarnaast de site url binnen wp-config.php aan te passen. Dat lijkt logisch maar dit alles raad ik u nu even af. Het makkelijkste lijkt mij op dit moment:

1. Alle bestanden binnen wordpress installatie op computer in te pakken in een zip bestand


2. Zip bestand uploaden naar server en uitpakken binnen gewenste folder bijvoorbeeld http://www.uwwebsite.nl/wordpress1


3. Binnen hostingaccount nieuwe mysql database aanmaken en gebruikersnaam en wachtwoord noteren.


4. Ga naar phpmyadmin van localhost (op uw computer) en exporteer het bijbehorende database bestand als .sql bestand


5. Open dit .sql bestand in Notepad+ en zoek naar http://127.0.0.1:serverport/folder (:serverport is bijvoorbeeld :4001 en /folder de folder waarbinnen de wordpresswebsite lokaal geinstalleerd staat; Deze gegevens zijn ook makkelijk binnen .sql bestand te vinden door gewoon naar beneden te scrollen en te zoeken binnen bijvoorbeeld wp_posts tabel omdat alle urls van de posts beginnen met http://127.0.0.1 :.... etc. ); Vervang deze urls door de nieuwe url op de live site (bijvoorbeeld: http://www.decmsmeester.nl/snippets ) via de "replace" functie binnen Notepad+


6. Importeer dit nieuwe .sql bestand via phpmyadmin binnen de nieuwe mysql database


7. Verwijder de wp-config.php file binnen de files op de server


8. Open de live link naar uw nieuwe website (in mijn voorbeeld http://www.decmsmeester.nl/snippets) en u krijgt de melding dat wp-config.php niet aanwezig is en dat nieuwe installatie nodig is. Volg gewoon de stappen en vul de database gegevens in. Nadat u aankomt bij de button "install" krijgt u de melding dat er al een installatie is gedetecteerd. Prima. Gewoon alles in tact laten. De wordpress website is nu verplaatst of eerder: gekopieerd.

Reacties, vragen en wensen doorgeven hieronder als "reactie" maar u kunt mij ook direct schrijven naar info@dewebmeester.nl

 

php begrijpen en aanpassen.in Virtuemart categorie weergave

PHP is echt zo'n geheimtaal die duidelijk maakt dat woorden kracht in zich hebben. PHP taal zet zaken in beweging en daarom zijn webpagina's die opgemaakt zijn met PHP "dynamische websites". Een Joomla website dus ook en daarmee ook de Joomla component Virtuemart. Wat we zien binnen Virtuemart wordt bepaald door de PHP code. Vandaag heb ik binnen die code wat moeten aanpassen om gehoor te geven aan de wens van een klant.

De wens: bij de categorieweergave (alle producten binnen 1 categorie), openen de afbeeldingen zich in een lightbox popup. Onder elke afbeelding staat ook een link en daaronder een button en als je daar op klikt opent zich de product details pagina van het betreffende product. Teveel verschillende acties wat betreft de klant. De klant wil het omdraaien: bij klikken op een product afbeelding moet de klant doorverwezen worden naar de bijbehorende product details pagina en die link en button onder de afbeelding wil hij weghalen.

HTML ten opzichte van PHP: Hier wordt het grote verschil in karakter duidelijk wat betreft de taal "HTML" en de taal "PHP". Binnen een HTML pagina zouden we gewoon een hyperlink plaatsen om de afbeelding heen en die link en button daaronder weghalen. Klaar. Dat lijkt simpel maar dat is niet simpel als je dit voor duizend artikelen handmatig moet doen. Daarvoor bestaat PHP. Je past 1 maal de PHP code aan en elke keer als een product categorie pagina wordt opgevraagd door de bezoeker, wordt die automatisch aangepast.

Maar hoe?
Originele PHP code (snippet) wat betreft het tonen van de miniatuurafbeelding en openen van de afbeelding in een lightbox popup:

<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb ('class="browseProductImage" border="0" title="' . $product->product_name . '" ', TRUE, 'class="modal"');
?>

Duidelijk: php is de taal, wordt die aangeroepen dan is de respons (de echo): "laat wat betreft het product ($product) een image zien en van die image alleen de verkleinde afbeelding (displayMediaThumb) en wel op deze manier (class): graag geen "border", de titel is weggelaten maar kan worden ingevuld, met mogelijkheid het product ppnieuw te tonen maar nu ook de naam van het product en wel op deze manier (class):via een popup (gedefinieerd in css class "modal"). Deze mpgelijkheid kan je aanzetten (TRUE) of uitzetten (FALSE). Dus mijn eerste stap was om deze popup mogelijkheid op FALSE te zetten. Resultaat: nog steeds een overzicht van alle productafbeeldingen binnen een categorie maar achter de afbeelding zit nu geen link en geen popup mogelijkheid meer.

Maar ik wil wel een link achter de afbeeldingen en dat doe ik door de code aan te passen:
Nieuwe PHP code (snippet) wat betreft het tonen van de miniatuurafbeelding waarbij de bezoeker kan klikken op de afbeelding waarna de product details afbeelding van bijbehorend product geopend wordt:

<?php /** show image and link to product details page */
echo JHTML::link ($product->link, $product->images[0]->displayMediaThumb ('class="browseProductImage" border="0" title="' . $product->product_name . '" ', FALSE, 'class="modal"'));
?>

In gewoon Nederlands: de taal is php en bij opvragen is de respons (echo): maak een link (JHTML::link) en toon het product als zijnde een link ($product->link) maar ook de afbeeldingen op zo'n manier dat alle product afbeeldingen van een categorie als thumb worden afgebeeld. Belangrijk hierin zijn de "haakjes" (); De snippet moet hier afsluiten met een dubbele )) want het betreft een wens binnen een wens (of eerder een opdracht binnen een opdracht). De link die aangemaakt moet worden betreft alles wat tussen de haakjes staat terwijl de tweede set haakjes betrekking heeft op hoe de afbeelding die deze hyperlink omvat, getoond moet worden.

Afronding:
Vervolgens is het makkelijk om de bestaande link en button te verwijderen. Ik besluit de code tussen <!-- en --> te zetten en daarmee te deactiveren. Zo kan die link en button makkelijk weer geactiveerd worden.
Vervolg:
Ik zal een aparte (Wordpress) website opmaken waarin in alle "snippets" plaats die genoemd worden op dit blog zodat ze altijd makkelijk zijn terug te vinden. Nieuws volgt als die website online gaat. Groeten en stuur vragen op naar info@dewebmeester.nl
Meindert Jorna

p.s.: Inmiddels is de Snippet website aangemaakt en is te bekijken via www.decmsmeester.nl/snippets

p.s.: Snippets die genoemd worden binnen dit blog kunnen nu ook gevonden worden op www.kladblokje.tk of www.hetkladblok.tk