I denna guide skall vi närmare beskriva hur du kan ändra utseendet på ditt konto i vår molnplattform mydevices.cloud.
Komigång med Mydevices.cloud
Steg 1:Gå till mydevices.cloud
Mydevices.cloud erbjuder möjlighet att anpassa layouten, lägga till en logotyp när du loggar in i ditt konto och om du har egen domän även lägga till logotypen på startsidan och ändra färgschemat på alla sidorna.
När White Labeling-funktionen är aktiv och tillgänglig kommer den visas i meny till vänster under whitelabelling:
Steg 2: Application title
I ”Application title” du kan skriva in en titel för ditt användarkonto. Titeln kommer att visas i fliken på din webbläsare.
Steg 3: Website icon
”Website icon” ger dig möjlighet att lägga till sin egen logotype. Använd gärna en transparent bild för att undvika vit bakgrund i din bild. Bilden kommer att visas i webläsarens flik.
Väljer du vit bild som ”Website icon” så kommer den inte synas, detsamma gäller om du använder svart färg och ”dark mode” i webbläsaren. På bilden nedan illustrerar vi vad som händer med en bild med svart.
Steg 4: logo
I ”Logo” kan du lägga till din logotype, den kommer synas till vänster ovanför menyn. Iaktta samma designtips som ovan med svart och vit färg. Klicka på ”Preview” längst ner så kan du se ändringar innan du sparar alla ändringar. ”Logo height, px” kommer att ändra storlek på logotypen. Kom ihåg att maxstorlek för logotypen är 90. Även om du skriver 100 så kommer den inte att bli större än 90 px.
Steg 5: Ändra färger
Nu kommer vi fram till de mest krävande och jobbiga inställningarna i hela ”White Labeling” processen. Du kan ändra färg på hela plattformsmiljön om du vill skapa ett unikt utseende med de färger du själv vill ha. Tryck på ”Primary palette” så kommer ett popupfönster med en scrollbar färgpalettmeny att öppnas. Här finns en del olika färgförslag. Testa och se vilket färgschema som passar dig. Du kan trycka på ”Preview” för att se ändringar utan att spara dem.
Trycker du på ”Customize” så öppnas ytterligare ett fönster med olika färgschema. Här kan du anpassa ännu mer med färger i samma färgspektrum eller olika färgblandningar. Det bästa är att du kan skapa fritt, det går inte att förstöra de grundläggande färginställningarna. Börjar du ändra färg under ”Customize” så ändras färgschemat till ”Custom”. Det färgschemat skapas automatiskt av plattformen och då kan du använda den och anpassa färgen i plattformens miljö ytterligare. Tryck på ”Save palette” och sedan ”Preview” för att se ändringar.
Nästa steg är ”Accent palette” och det fungerar på samma sätt som ”Primary palette” med samma inställningar.
När du är klar så kan det se ut så här:
Steg 6: Överkursen: CSS
Om du eller något i ditt team kan CSS då öppnas ännu mer möjligheter för anpassning av plattformens miljö. Med hjälp av Google Chrome inbyggda verktyg kan du inspektera de olika element som webbsidan är uppbyggd med och med hjälp av CSS-kod ändra nästan alla grafiska inställningar i plattformen. Här gäller samma princip som andra ändringar: Skriv CSS kod, spara ändringarna och tryck ”Preview”.Så här kan ta du hjälp av Google Chromes inbyggda verktyg för att kunna ”inspektera” en webbsida:
1. Öppna Google Chrome.
2. Gå till ”mydevices.cloud”
3. Logga i plattformen.
4. Navigera sedan till ”White Labeling” och öppna fönstret ”Advanced CSS”.
1. Öppna Google Chrome.
2. Gå till ”mydevices.cloud”
3. Logga i plattformen.
4. Navigera sedan till ”White Labeling” och öppna fönstret ”Advanced CSS”.
5. Högerklicka på den delen av webbsidan du vill ändra och välj ”Inspektera”.
6.På höger sida kommer ett nytt fönster öppnas som visar hela källkoden för webbsidan.
7. Tryck på ”muspekaren” längst uppe till vänster i verktyget och börja röra din mus över de olika elementen på webbsidan. Då kommer du märka att koden till höger byter färg och visar koden för de olika elementen som du flyttat muspekaren över. Klickar du på något av elementen så kommer ”muspekaren” som du aktiverade innan för att inspektera, avaktiveras och i verktygsfönstret kommer du hitta koden för de olika element som påverkar just den delen du valt.
När du är klar med allt glöm inte att trycka på ”Save” för att spara alla ändringar.
Om du har ytterligare frågor, kontakta vår support. Observera att för support på CSS-anpassning hänvisar vi till vår betalsupport-tjänst.