Styling af login knap

Denne login knap er stylet i CSS og placeret ved hjælp af Helix Ultimate layoutbuilder. For at få designet præcist dette udtryk til knappen er det nødvendigt at justere på både knappens udseende og på de standard classes der allerede er indbygget i Helix Ultimate. Der er fx lagt en standard padding ind i den øverste section på 5px hvilket betyder at knappen aldrig vil kunne gå helt 'til kant' – men det findes der heldigvis råd for ... se bare her:

Start med placering af link / knap

Inden du kan begynde stylingen af din login knap skal du lægge selve linket ind samt give dit link en class som du kan style i din custom.css fil. Jeg har valgt at lægge linket ind i et custom html modul, der bliver placeret i top2 positionen i layoutbuilderen.

Giv dit modul et navn du kan huske fx 'Login knap'. I højre side skal du vælge 'skjul titel' og i position vælger du top2 – denne position burde være aktiv hvis du bruger Helix Ultimate fra standard templaten.

Slå editoren over i code-mode og kopier nedenstående kode ind:

<p><a class="btn-login" href="/joomla/css-i-joomla/styling-af-login-knap"><i class="fa fa-joomla"></i>Login</a></p>

'Login' er omkrandset af et html tag a href der har fået et class navn 'btn-login' – det er denne class som senere skal styles i custom.css og vil give linket / knappen det rigtige design.

Knappen skal placeres rigtigt i højre side

Når du har publiceret dit custom modul med link / knap inden i bliver du nok en anelse skuffet til at begynde med ... for nu dukker der et helt almindeligt link op – godt nok i den rigtige position – men det sidder i venstre side og ser slet ikke knap-agtigt ud.

Du skal bruge din browsers 'inspicér' eller 'opdag' fuktion til at se hvilke <div> elementer du skal rette i. For at gøre det endnu nemmere har jeg i Helix Ultimate layout builder givet en specifik class til de to top positioner – nemlig .top1-container og .top2-container – hvilket giver mig muligheden for at style de to områder individuelt ... og det får jeg brug for. Endvidere har jeg givet en class til hele den række som indeholder de to positioner – den har jeg kaldt .top-container.

Min knap skal fylde hele top containeren ud. Dvs. at jeg ikke vil have nogen margin fra knappen og ud. Som standard har top containeren 5px padding og den nulstiller jeg vha. følgende kode i custom.css

.top-container {
  margin: 0px!important;
  padding: 0px!important;
}

Jeg har tilføjet !important efter hver class for at sikre mig at det er min class der overtager.

Nu vil jeg gerne give hver top container hver deres statements – top1 skal have sin padding tilbage og top2 skal justeres til højre. Det gør jeg sådan her:

.top1-container {
  padding: 5px;
}

.top2-container {
  text-align: right;
}

 

Så skal der styles til du er helt tilfreds

Nu begynder det at ligne noget! Linket / knappen er placeret rigtigt og i højre side af skærmen. Men der mangler noget – nemlig stylingen af selve knappen. Jeg vil gerne have en enkel knap som er helt rektangulær og viser en mørkere farve når musen er over.

Først skal vi definere selve knappen. De jeg oprettede mit custom html modul gav jeg også linket en specifik class .btn-login – denne class vil style på følgende måde:

a.btn-login {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 5px 30px 5px 20px;
  background-color: #909090;
  margin: 0px!important;
}

Alle statement imellem {} fortæller hvordan knappen skal se ud. Fx betyder inline-block at der kan sættes en højde- og breddeværdi samt at margins og paddings værdierne bliver respekteret. De fleste statements er nemme at aflæse som fx text-align: center; fortæller at indholdet skal centreres. 

Nu er det langt tættere på det udtryk jeg gerne vil have. Faktisk mangler jeg kun at style hvordan knappen skal være når musen er over og når knappen er i forskellige states fx active og visited.

For at fortælle hvordan knappen skal vises når musen er over samt andre states kan vi bruge følgende tilføjelser til class'en :hover, :active, :visited m.fl. Jeg har valgt at bruge følgende:

a.btn-login:hover {
  background-color: #505050;
}

a.btn-login:active {
  background-color: #909090;
}

a.btn-login:visited {
  background-color: #909090;
}

Min knap har som standard en baggrundsfarve der hedder #909090; når musen er over ændres farven til #505050; – pga. a.btn-login:hover altså en mørkere farve. For at undgå at de forskellige statusser får en standardfarve er det vigtigt at definere hvilken farve knappen skal have ved fx active og visited – ellers risikerer man at farverne pludselig bliver meget specielle.

Der findes masser af forskellige muligheder i forhold til at definere farver, forløb, skygger mv. prøv fx at kigge indenfor hos w3schools.com – her findes masser af information om css.

God førnøjelse med styling af din egen knap!