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.
Det, 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
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
Nå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).
Bemæ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.
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å ?