Nederlands
EnglishPortaal instellingen¶
Maak je Ecmanage klantenomgeving nog professioneler!
1. Plaats een logo met transparante achtergrond¶
Klanten leveren een logo op, zonder een transparante achtergrond. Misschien herken je het wel? Met een paar simpele trucjes kun je het logo er een stuk professioneler uit laten zien. In deze handleiding proberen we je een met behulp van enkele stappen te helpen om zelfstandig het logo nog professioneler te maken. Het transparant maken van een achtergrond in een logo kan bijvoorbeeld met een open source tekenprogramma zoals paint.net.
De voorbeelden zijn gegeven volgens het besturingssysteem Windows en Paint.net (Versie 4.0.13)
In dit voorbeeld gebruiken wij een portal met een Ecmanage logo, in combinatie met de blauwe skin. In de onderstaande afbeelding is te zien dat het logo met de witte achtergrond niet mooi oogt met de blauwe header. We willen de witte achtergrond van het logo verwijderen en deze transparant maken.
1.1 Download Paint.net¶
Download Paint.net via de bovenstaande button en installeer het programma op je device. Doorloop de stappen van de installatie met de gewenste keuzes.
1.2 Open het logo via Paint.net¶
Open het logo dat je wil aanpassen via Paint.net. Wij gebruiken in dit voorbeeld het logo van Ecmanage. Klik met je rechter muisknop op het logo en kies in het Windows menu voor “Openen met”. Hierna kies je voor “Paint.net”
1.3 Achtergrond transparant maken¶
Het logo wordt vervolgens geopend in het programma paint.net. De achtergrond van het logo kun je transparant maken door het gereedschap “Toverstaf” te gebruiken. Klik op het toverstafje (zie icoontjes onder gereedschap) en klik hierna op de witte achtergrond van het logo. Hierna zal zich een gebied selecteren die aansluitend allemaal een witte kleur heeft.
Druk hierna op “Delete-knop” op je toetsenbord. De witte achtergrond wordt verwijderd en er verschijnen grijs-witte blokjes op de achtergrond. Dit laat zien dat er geen achtergrondkleur wordt gebruikt.
In het bovenstaande plaatje is te zien dat er nog enkele gebieden wit zijn. Deze grenzen niet aan het (grote) witte gebied die eerder geselecteerd werd. Selecteer daarom alle kleine witte gebieden opnieuw met de toverstaf (zoals de binnen zijde van de O, A, G & E) en verwijder deze kleine witte gebieden met de delete knop.
1.4 Extra ruimte rondom logo (Optioneel)¶
In de allereerste afbeelding van deze e-mail was de startsituatie te zien. Het Ecmanage logo werd tegen alle randen van het scherm aangeplakt.
We kunnen met Paint.net gemakkelijk een extra kader romdom het logo plaatsen. Kies in het menu van Paint.net voor “Afbeelding” en daarna voor “Doekgrootte”. In het dialoog wat verschijnt, kun je de grootte van je afbeelding aanpassen, zonder het logo zelf te vergroten. Paint.net plaatst er een ruimte omheen.
In het dialoog is te zien hoe groot de afbeelding momenteel is. Bij ons is het Ecmanage logo 771 x 219 pixels groot. Je kunt de aantal pixels vergroten door de pijltjes bij de breedte en hoogte te gebruiken. Zorg er voor dat het vinkje “Verhoudingen behouden” uit staat en het referentiepunt in het midden gefocust is. Op die manier zal aan alle zijden van het logo een extra ruimte geplaatst worden. Klik hierna op “OK”
Wij verhogen de getallen bij de breedte en hoogte allebei met 20 pixels. Hierdoor wordt de breedte 791 pixels en de hoogte 239 pixels. Er ontstaat een wit randje rondom het logo die aan alle zijde gelijk is. Deze kan weer verwijderd worden met de toverstaf en de delete-knop op het toetsenbord.
1.5 Juiste grootte van het logo (optioneel)¶
De grootte van de afbeelding is bepalend hoe groot het logo op in de portal getoond word. Ook worden er e-mails gegenereerd die dit logo gebruikt. In de portal wordt een maximale hoogte van 160 pixels gebruikt. (Dit is ook een prima hoogte voor de e-mail logo’s)
De hoogte van het logo kan ook via Paint.net aangepast worden. Doe dit alleen als je logo groter is dan 160 pixels. Ga via het menu naar “Afbeelding” en kies vervolgens voor “Formaat wijzigen”. Er verschijnt een dialoog die lijkt op het dialoog uit de vorige stap (4). De werking is echter wel anders!
Zorg er voor dat je het vinkje “Verhouding behouden” wel aan hebt staan! Verander het getal bij de hoogte naar 160 en het logo zal zich in verhouding aanpassen. De breedte wordt automatisch aangepast van 791 naar 530 pixels. Klik hierna op “OK”
1.6 Logo opslaan¶
Nu we de achtergrond hebben verwijderd en deze transparant is, moeten we het logo opslaan onder bepaalde voorwaarden. Kies in het menu voor “Bestand” en “Opslaan als”. In het dialoog wat verschijnt, kun je de juiste locatie kiezen waar je het logo wilt opslaan. Tevens is het belangrijk om in de dropdown te kiezen voor het bestandsformaat .PNG. Op deze manier blijft de achtergrond altijd transparant.
Het resultaat, logo uploaden¶
Nu we het logo hebben opgeslagen, kunnen we deze weer uploaden via de portal van Ecmanage zoals we dat “gewend” zijn. Via het Ecmanage menu kies je voor “Systeem” en “Portaal instellingen”. Onder het kopje “Vervang het huidige logo” kun je je nieuwe logo uploaden. Dit brengt ons tot het volgende resultaat:
Je ziet dat er rondom het logo een kleine ruimte is ontstaan zodat het logo zich een stukje van de kant staat. Ook de achtergrond is wit.
2. Responsive en eigen kleuren¶
Wie de skin hierna nog verder wil aanpassen, kan dat nu met de Responsive skin! Kies onder het kopje “Kies ander uiterlijk” (Portaal instellingen) in de dropdown voor “POM.Responsive - Margin”. Er verschijnen een extra aantal opties waarmee je met kleuren kunt experimenteren. De radiobuttons geavanceerd geven je de mogelijkheid om nog meer te wijzigen dan we op onderstaande afbeelding laten zien. Zo kun je met vele instellingen kleuren van menu’s, panels, header, achtergrond, footer en nog veel meer aanpassen. Hier onder geven we een leuk voorbeeld. Succes!
3. Homepagina¶
Het is ook mogelijk om de Home pagina van een nieuwe look te voorzien:
Wie dit wil aanpassen kan dit onder de geavanceerde instellingen, onder het kopje Homepagina terugvinden. De volgende aanpassingen kunnen worden gemaakt:
Paneel achtergrondkleur
Paneel rand kleur
Paneel hoek radius
Paneel icoon achtergrondkleur
Paneel icoon hoek radius
Wanneer de aanpassingen zijn gedaan dienen deze wel te worden bevestigt met de knop: Bevestig skin.
Om de nieuwe aangepaste homepagina te kunnen tonen dient er nog wel een aanpassing gedaan te worden bij systeem >> klantinstellingen onder het kopje: Gebruiker instellingen.
Hier dient de volgende optie: Moet de oude startmodule getoond worden op de homepagina? Op “Nee” gezet te worden. Hierna wordt de nieuwe homepagina op de klantomgeving getoond.
We hopen dat jullie met behulp van deze e-mail zelfstandig jullie klanten omgevingen kunnen professionaliseren. Heel veel succes!