Graag hulp met Joomla Mailforms

Status
Niet open voor verdere reacties.

Reydan

Gebruiker
Lid geworden
22 mrt 2011
Berichten
117
Hallo,

Ik ben nu een tijdje op me werk aan het zoeken om de "verzenden" knop aan te passen in Joomla 1.5, Mad4Joomla Mailforms 1.2. Echter blijft de text licht grijs, de text verzenden is dus ook totaal niet zichtbaar in de betreffende knop. Dit is niet handig voor de klanten, en ik kan het nergens vinden om het aan te passen. Heb overal gezocht in de CSS en Template, maar nog geen succes.

Zou iemand mij a.u.b. hiermee kunnen helpen?

Alvast bedankt :thumb:
 
Laatst bewerkt:
Hoi Reydan,
Zonder link naar de probleem-pagina valt hier moeilijk iets over te zeggen. Heb je een link?
 
Ja die zal ik dan maandag poste, op dit moment kan ik daar niet bij. :)
 
Hier is de probleem pagina ;) : http://brandmeldinstallatie.nu/contact

Zoals je ziet helemaal onderaan zie je dat het "verzend" knopje totaal niet te lezen is. Ik zou de lettertype graag zwart willen hebben, maar op de een of andere manier kan ik het nergens vinden in de CSS.
 
Hoi Reydan,
De Verzenden-knop heeft de class="m4j_submit". In het stylesheet.css staat op regel 193:
Code:
.m4j_submit {
}
Niet ingevuld, dus! Daar kan je van maken:
Code:
.m4j_submit {
    color: red;
    font-weight: bold;
}
... of een andere mooie kleur (en eventuele andere eigenschappen) die je de tekst van de knop wilt geven.

Met vriendelijke groet,
CSShunter
____________
PS:
Hoe zoiets ontdekken?
In Firefox even de add-on Firebug installeren (in 3 tellen). Dan pagina openen in FF, Firebug aanzetten, en in het menu "html" afdalen door alles open te klikken tot je bij de Verzend-knop zit. In het rechterpaneel zie je dan de bijbehorende css staan. Daar kan je die ook online wijzigen om het effect te zien.
Aanrader! :)

firebug-submitknop.png
 
Laatst bewerkt:
Bedankt voor je reactie, ik had idd gezien dat het onder de m4j staat. Maar kan ik dit echter niet vinden in Joomla. Als je bij de css kijkt in de template, vind ik nergens een scriptje met m4j erin. Waar zou ik dit dan moeten vinden?

Edit: Bedankt trouwens voor de Firebug, handig ;).
 
Laatst bewerkt:
Hoi Reydan,
Als je bij de css kijkt in de template, vind ik nergens een scriptje met m4j erin.
Dat klopt. Het zit niet in het template.css bestand.

Waar zou ik dit dan moeten vinden?
Het staat in het stylesheet.css (zegt ook Firebug :)), dat in een ander mapje zit: Daarin staat de lege .m4j_submit { } (bijna onderaan) die je moet aanpassen.

Maar als je daar in Joomla niet bij kunt komen, en wel het template.css kunt bewerken, dan kan je de
Code:
.m4j_submit {
    color: red;
    font-weight: bold;
}
ook ergens (op een willekeurige plek) in het template.css toevoegen; dan werkt het ook.

En als je toch in je template.css aan het werk bent, dan kan je ook opzoeken:
Code:
input {
    color: #CCCCCC;
    margin: 0;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium;
}
Als je daarvan maakt:
Code:
input {
    color: #CCCCCC;
    margin: 0 5px 0 0;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium;
}
... dan komen de teksten ("brandbeveiliging" enz.) van de opties bij "Informatie over:" net iets meer rechts van het vink-vakje te staan (in plaats van er tegenaan [in Firefox, Chrome en Safari], of er bijna tegenaan [in IE en Opera]).

Succes!
Met vriendelijke groet,
CSShunter
 
Images: op ware grootte!

En nog een tip: over de images.
Op de homepage staan twee foto's van de vestigingen, in Barendrecht en Den Haag.
Die zijn geüpload in het formaat 710*507px resp. 717*524px, en ze zijn 310Kb resp. 292kB groot.
Maar op de pagina worden ze teruggebracht tot 216*139px resp. 202*139px. De grote exemplaren waren dus helemaal niet nodig.
Nu levert het geen extra kwaliteit voor de foto's op om ze op groot formaat (= goede kwaliteit) te hebben en dan door de browser te laten verkleinen.
Want een browser kan toch niet kleiner gaan dan 1px! ;)
  • Dat is dus anders dan een foto inplakken in bv. Word: daar kan je wel het beste een grote foto gebruiken en door Word laten verkleinen. Bij het printen komt er dan een betere kwaliteit uit de bus, want printers hebben een veel hogere resolutie dan de 1px korrels op het beeldscherm.
Bij een beeldscherm werkt het juist omgekeerd: een grote foto die door een browser verkleind wordt, heeft slechtere kwaliteit!
Dat komt omdat browsers er niet echt voor gemaakt zijn om mooi verkleinwerk af te leveren: ze kunnen slecht afronden en overgangen maken > vandaar altijd wat hakkelige en onscherpe beelden als je het zo doet.
Beter is het om tevoren in een tekenprogramma de foto's te verkleinen (die zijn daar wel voor gemaakt), en dan op ware grootte te uploaden. Dan kan de browser geen kwaad aanrichten: die hoeft alleen maar 1:1 de opgegeven pixels te tonen.
  • Voordeel dus dat de afbeeldingen er mooier van worden.
  • Extra voordeel: de afbeeldingen worden er prettig kleiner van! :)
  • In dit geval: van 310kB naar 52kB, en van 292kB naar 41kB.
  • Dat is dus samen een winst van 509kB (van de 602kB): scheelt 85% die minder gedownload hoeft te worden = snellere pagina!
  • Oorzaak dat het zoveel scheelt: bij een afbeelding die tot halve breedte en tot halve hoogte wordt verkleind, is het oppervlak niet twee keer maar vier keer zo klein; dus vier keer minder pixels nodig. Dat loont dus de moeite!
  • Voor de bewijslast: www.developerscorner.nl/csshunter/tests/img-ware-grootte.htm
Met vriendelijke groet,
CSShunter
 
Het werkt! Bedankt :thumb:.

En bedankt voor de tip, ben nog bezig met de website dus alles is meegenomen :p. Voor de eerste keer dat ik werk met Joomla, het rare eraan is dat ik de achtergrond niet mag aanpassen. Ik heb dit meerdere malen geprobeerd op de FTP server. Maar hij wilt het niet veranderen.

Ook staat het knopje "verzenden" nog raar onder "bladeren", ik stoor me er een beetje aan. Ik weet niet of dit ook mogelijk is te verplaatsen? Omdat het een standaard layout is?
 
... Joomla, het rare eraan is dat ik de achtergrond niet mag aanpassen. Ik heb dit meerdere malen geprobeerd op de FTP server. Maar hij wilt het niet veranderen.
Ik zag toevallig dat Joomla de achtergrond in dit template niet met een kleur invult, maar met een background-image. Dan helpt een opgegeven kleur niet!

De contactpagina heeft: <body id="page_bg">.
En in http://brandmeldinstallatie.nu/templates/siteground-j15-83/css/template.css staat:
Code:
#page_bg {
    background: #fff url(../images/page_bg.png) repeat-y top left;
    }
Als je het gedeelte url(../images/page_bg.png) repeat-y top left daar uit wist, kan je de pagina elke achtergrondkleur geven die je wilt (#fff is gewoon wit).

Voor het content-gedeelte is ook een achtergrondfiguur gebruikt, dat is deze:
Die kan je echter niet zomaar inwisselen voor een opgegeven kleur, want dit image bevat tegelijkertijd de achtergrond-kleur van de linkerkolom. Dat kan niet veranderd worden, want het is een zogenaamde "faux columns" constructie om de achtergrond altijd gelijk op te laten doorlopen achter de linkerkolom en het eigenlijke content-gedeelte (wie van de twee ook het langste is).

Als je de kleur van het echte content-gedeelte wilt veranderen, zal je dus de rechterkant van die content_m_left.png in een tekenprogramma moeten aanpassen naar de gewenste kleur.
Het handigste is dan om de content_m_left.png meteen wat hoger te maken, bv. 100px: dan zie je wat het effect is (want nu is het maar een 1px hoog mini-lijntje).
  • Eerst de bestaande back-uppen als bv.: content_m_left-old.png.
  • Vervolgens kan je uitgaan van deze: www.developerscorner.nl/csshunter/tests/images/content_m_left.png.
  • Dat is exact dezelfde als de bestaande, maar dan hoger (hoogte maakt niets uit vanwege de verticale herhaling).
  • Dan na de gewijzigde kleur opslaan en uploaden met dezelfde naam - aan de css hoeft dan niets te veranderen. *)

========
Ook staat het knopje "verzenden" nog raar onder "bladeren", ...
Dat zou je kunnen veranderen door in de html van het formulier de cellen "bijlagen:" / (tekstvak) / "Bladeren" te verplaatsen naar boven het invulvakje voor het bericht.
Dan kan de invuller meteen na het invullen van het bericht op de knop "Verzenden" klikken, wat ook wel zo logisch is.
Misschien ook de tekst "bijlagen:" veranderen in "eventuele bijlagen:"? (de meesten zullen er waarschijnlijk geen bijlage bij stoppen)

O ja, ik vind het knopje "Contact" een beetje verdwaald rechts bovenaan staan. In eerste instantie (bij het openen van de site/pagina) zal je daar niet meteen op willen klikken, omdat je eerst de pagina wilt lezen. Daarvoor moet je scrollen, en dan verdwijnt de "Contact"-knop buiten beeld.
Ik zou gewoon de link naar de contact-pagina opnemen als laatste item van het menu. (Ikzelf zoek daar automatisch, als ik contact met een club wil hebben; en ik denk dat ik hierin niet de enige ben.)

Misschien is het ook beter om de knop "Algemeen" te hernoemen naar "Home / Algemeen". Dan is duidelijk (ook voor wie op een andere pagina is binnengekomen), dat daar het begin zit.

Inhoudelijk: in de eerste regel wordt verteld dat het een "NCP-erkend branddetectiebedrijf" is. De insider zal weten wat NCP is, de rest niet. Ik zou het er tussen haakjes voluit achter zetten, en onder "NPC-erkend" de link www.ncp.nl toevoegen.
Kan iedereen met eigen ogen zien hoe serieus dit allemaal is! :)

Met vriendelijke groet,
CSShunter
_____________
*) Behalve als je op verschillende pagina's verschillende achtergronden zou willen hebben (nu werken alle pagina's met dezelfde achtergrond-afbeelding).
 
Nogmaals bedankt voor de vele informatie :). En sorry voor me late reactie (had ff een paar daagjes vrij).

Voor de achtergrond wil ik het niet in kleur hebben, ik denk dat je me verkeerd heb begrepen. Ik had al de achtergrond image aangepast in Photoshop, deze teruggeplaatst in de FTP map (met de bijbehorende naam, en de originele image hernoemd). Maar hij blijft de oude gebruiken, hij heeft het wel bij de header, en het plaatje met de stoel gedaan. Alleen voor de content en background wilt hij dit niet pakken op de een of andere manier. Heb ook al in het CSS gekeken en dergelijke.

Over het contact knopje heb je zeker gelijk in, hij stond daar eerst ook. Maar dit vond me baas niet mooi :p. Maar ik zal het hem nog wel duidelijk maken dat het beter is gewoon links te plaatsen.

Ook over het NCP kan ik je gelijk geven, alleen zijn de meeste klanten bij ons al op de hoogte over erkende leerbedrijven. Deze krijgen een verzoek binnen van de brandweer na een keuring van het pand. En zullen hierop verwezen worden om een erkend leerbedrijf te zoeken, voor een bijbehoren brandmeldinstallatie (meestal een aardige brief met veel bijlages :p).
Maar ik kan alsnog het woordje NCP door laten linken naar de NCP site. Het moet ook niet te veel tekst worden (Tekst wordt nog drastisch aangepast, wat er nu staat is tijdelijk).

:thumb:
 
Laatst bewerkt:
Over het contact knopje ...
Ik zou in ieder geval voor de en-en variant gaan: en een aparte contact-knop, en een menu-item voor de contactpagina.

Bij een extra losse contact-knop zou ik verder als tussenoplossing hebben: zet deze niet rechtsboven, maar in de zwarte balk onder het header-img. En alles mooi symmetrisch maken > dan wandelt het oog vanzelf naar de contact-knop.

a-plus.png

Met vriendelijke groet,
CSShunter
 
Hoe krijg je de contact knop in de balk dan? Aangezien het een image is, ik zou dit echt niet weten :confused:.
 
Laatst bewerkt:
Gelukkig is de balk een achtergrond-img dat in een verder lege <div> staat.
In die <div> kan je gewoon een voorgrond-img zetten met de link.
Dat kan je doen door er in de html een <p> ... </p> in te voegen waar alles in zit:
HTML:
<div class="cpathway">
	<p style="text-align: center;">
		<a href="http://brandmeldinstallatie.nu/contact"><img 
		src="images/contact-knop.png" width="90" height="30" alt=""></a>
	</p>
	<div class="clr"></div>
</div>
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Oké bedankt :).

Alleen ik krijg dan een knop zonder afbeelding (logisch neem ik aan). Nu heb ik een knop gemaakt in Photoshop, deze opgeslagen in de FTP map. Maar je raadt het al hij pakt hem dan niet. Kan ik ook niet alleen een tekst ervan maken in de CSS?
 
Kan ik ook niet alleen een tekst ervan maken in de CSS?
Jazeker, d.w.z. niet in de css maar in de html:
HTML:
<div class="cpathway">
    <p style="text-align: right; color: white; font-weight: bold; margin: 0 10px 0 0">
        <a href="http://brandmeldinstallatie.nu/contact">contact</a>
    </p>
    <div class="clr"></div>
</div>
Helpt dat?

Met vriendelijke groet,
CSShunter
 
He,

Sorry dat ik nu pas reageer. Tijdje niet aan de website gezeten, had andere dingen te doen. :p

Die CSS helpt zeker! Alleen de kleur van "contact" blijft rood, dus valt het niet op. Heb het al geprobeerd om in de CSS, "white" neer te zetten werkt niet.

Enig idee hoe dit wel kan?

Mvg
 
Yeps.
Het werkt niet, omdat de witte kleur in de <p> zit en niet in de link <a> binnen die <p>. En volgens de css moeten links zwart zijn (als ze nog niet zijn bezocht) of donkerrood als de gelinkte pagina (hier: contact) al wel is bezocht. - Daar had ik eerder niet naar gekeken.

Het valt te verhelpen door het wit rechtstreeks in de <a> te zetten:
HTML:
<a href="http://brandmeldinstallatie.nu/contact" style="color: white;">Contact</a>
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
En zoals gewoonlijk werkt het weer :thumb:.

Is beter zo in het wit. Bedankt :D

Mvg
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan