november 27, 2014

Sådan ændrer du selv lidt på instrumentbrættet

Nogle kan lide datteren, andre moderen. Så hvis du ikke lige kan lide placeringen af / farverne på knapperne i backend, så kan du selv style dem med CSS. Her kan du læse, hvor du rent praktisk skal indtaste din CSS. Dette indlæg viser dig, hvordan du finder ud af, hvordan du gør.

Log ind i Shoporama med f.eks. Firefox eller Chrome.

Hvis du f.eks. står under et rediger produkt og gerne vil fjerne f.eks. fanebladet “Abonnement” fordi du aldrig bruger det, så højreklik på det og vælg “Kontrollér element” eller “Inspicér element”. Så vil du få vist noget html om det element.

Fjerne faneblad med cssDet, man kan se her, er at det er et <li> element og at den ligger inden i en <div>, der har id’et “tabs”. Vi kan også se, det er det tredje <li> element, så en måde at fjerne det på er at indsætte

#tabs ul li:nth-child(3) { display : none; }

i vores “eget stylesheet” og vupti er fanebladet væk

Fjern abonnementfanen i Shoporama

Lad os tage et eksempel mere. Gem-knappen i bunden. Her er det endnu nemmere.

Når du højreklikker og vælger “Inspicér element”, så ser du dette

flytte gem-knappenNår du ser et id=”xxxx” så er dit arbejde rigtigt nemt. Nu skal du bare i eget stylesheet skrive

#savebutton { dine css regler }

Hvis vi f.eks. gerne vil give den en anden baggrundsfarve, så er det

#savebutton { background-color : #448C11 !important; }

Hvis du så også gerne vil have den til fast at sidde øverst på siden, så kan du ændre positionen til

position : fixed;
top : 10px;
left : 100px;

Så du ender ud med disse regler

#savebutton { 
background-color : #448C11 !important; 
position : fixed;
top : 10px;
left : 100px;
}

Og de giver dette resultat (uanset om du scroller).

Flytte gem-knap på ShoporamaBemærk: Vi opdaterer jo Shoporama i ny og næ. Så Abonnement-tab’en, der er nr. 3 kan pludselig blive nr. 4. Hvis det sker, så bliver din abonnements-tab synlig og den anden skjult. Så hvis du pludselig mangler noget, så prøv at slette alle dine CSS-regler.

Ellers er det bare at få lært noget CSS, så du kan få det til at se ud, som du vil.

 

 

Ét svar til “Sådan ændrer du selv lidt på instrumentbrættet”

  1. Brian Brandt siger:

    Hvis jeg bruger ovenstående display:none på tabs under produktsiden – bliver det en “global” display:none, som også går ind under de andre sub-tab-menuer og fjerner de tilsvarende tabs-numre. Hvilket jo ikke er hensigtsmæssigt.

    Jeg har ikke rigtigt noget unikt div, class, ID eller andet inde på produkt redigeringssiden, som jeg kan segmentere på.

    Kunne det sættes på ?

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.