Så anpassar du inloggningsformuläret i SiteVision

Här kommer lite inspiration från oss på Limepark i form av en modifierad inloggningsmodul. Man kommer väldigt långt genom att lägga in denna CSS/stilmall på rätt ställe (Egenskaper > Webbplatsinställningar > Avancerade inställningar > Egna tillägg i CSS-fil).

/* Användarnamn */

#loginform input {
   width: 360px; 
   float:left;
   margin: 10px 0px 10px 10px; 
   padding: 20px 10px 20px 40px;
   -webkit-border-radius: 3px;
   border-radius: 3px; 
   background:url(anvandare.png) no-repeat 15px center #f6f6f6;
   border-left:1px solid #c0c0c0;
   border-top:1px solid #c0c0c0; 
   border-bottom:none;
   border-right:none;
   font-size:14px;
   color:#555;
}

/* Lösenord */

#loginform input[type="password"] {
   background:url(losenord.png) no-repeat 15px center #f6f6f6;
   no-repeat 15px center #f6f6f6;
}

/* Knappen */

#loginform input[type="submit"] {
   width:90px; 
   padding:12px 10px 12px 10px;
   background:#f6f6f6;
   border: 1px solid #e7e7e7;
   box-shadow: 1px 1px 0 0 #fff inset;
   color:#999999;
   text-shadow: 0 1px 0 #fff;
}

/* Knappen vid mouseover */

#loginform input[type="submit"]:hover  {
   background:#eee;
   border: 1px solid #afde0e;
}

/* Formulärfälten när dom är valda */

#loginform input:focus {
   border-left:1px solid #999; 
   border-top:1px solid #999;
   border-bottom: none; 
   border-right:none; 
   background-color: #eee;
}

/* Dölja rubrikerna */

#loginform label  {
   display:none;
}

/* Dölja semikolon */

#loginform fieldset {
   color:#fff;
}

Kom ihåg att ändra sökvägarna till egna ikoner på din egen server, vill ni använda våra iconer går dom att ladda ner härZIP.

Då kommer ditt inloggningsformulär se ut så här:

Om man vill styla vidare som jag gjort så kan man bygga upp en struktur liknande denna:

Sedan lägga detta CSS på Layouten "Huvud" (Egenskaper > Utseende > Egen stil)

background:url(http://app.limepark.se/kund/inlog.png) no-repeat 20px center #f4f4f4; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; border:1px solid #d2d5d7; position:relative; padding:18px 0px 15px 45px; color:#5d5d5d; font-size:16px;

Jag har även lagt till lite ljusgrå kantlinjer runt layouten "Modul".

Lycka till och ha en trevlig dag.

Jönköping

Jönköping

Limepark AB

Gjuterigatan 9
553 18 Jönköping
Vägbeskrivning

Stockholm

Stockholm

Limepark AB

Gotlandsgatan 46
116 65 Stockholm
Vägbeskrivning

Timrå

Timrå

Limepark AB

Folketshusvägen 10
860 35 Söråker
Vägbeskrivning

Örebro

Örebro

Limepark AB

Kansligatan 1
703 61 Örebro
Vägbeskrivning

Örnsköldsvik

Örnsköldsvik

Limepark AB

Magasinsallén 2
891 31 Örnsköldsvik
Vägbeskrivning

*

I supporten:
Evylyn
AAA - Högsta kreditvärdighet