Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Ändra färg på ”Gilla-knappen” på blogg.se

Blogg.se har lagt in en egen Gilla-knapp som du kan addera till din blogg om du så vill. Denna Gilla-knapp finns i lite olika färger, men vi har tipset som du garanterat kommer älska – du kan nämligen ändra färgen så att den matchar resten av färgerna på din blogg!

Lägg in detta längst ner i din stilmall:

.like-container .likebtn .likebtn__btn { /* Ändrar utseendet på "Gilladelen" */
  background: #000 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  color: #fff !important;
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px 3px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  text-decoration: none !important;
  text-transform: capitalize;
  letter-spacing: 0.2px;
}

.likebtn.liked .likebtn__btn { /* Ändrar utseendet på "Gilladelen" när en klickat "Gilla" */
  background-color: #fff !important;
}

.likebtn__count { /* Ändrar utseendet på "Nummerdelen" */
  background-color: #fff;
  border: solid 1px #a5b1bd;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  color: #424a4d;
  float: left;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px 10px;
  position: relative;
  text-align: center;
  line-height: 17px;
  font-size: 13px;
}

Som ni ser så finns det alltså tre olika klasser som styr detta (det finns fler, men vi kör såhär så länge, då dessa är lättast ändra.
Det går att ändra det mesta, och vill du ta bort någon finess eller något i utseendet, ta inte bort det i koden, utan skriv kort och gott 0px eller none. För att ta bort skuggan till exempel, så kan du helt enkelt skriva ordet none som värde för box-shadow & text-shadow. Vill du ändra rundningen av kanterna så skriver du 0px som värde för border-radius.

Värt att nämna är också att de har använt rgba()-värden för färger här, men det går bra att ändra det till en hexfärg (alltså hashtag-färgkod = #000 för svart till exempel). I övrigt är det bara att pyssla på med dina egna värden och egenskaper.

Om du vill ta bort den lilla pilen som är i anslutning till gillafunktionen (som går från siffran till ordet ”gilla”) så lägger du in detta i din stilmall:

 .likebtn__count:before, .likebtn__count:after { content: ''; display: none !important; height: 0; top: 50%; position: absolute; right: -13px; width: 0; margin-top: -7px;

Transkribering från filmen

Ändra färg på gilla-knappen på Blogg.se

Hej hörni.

Jag hade tänkt att jag skulle visa er hur man kan ändra färgen på gilla knappen som blogg.se har implementerat. Jag har sett att det är väldigt många som har den på sin blogg och det finns ju bara ett visst antal färger att välja mellan men det går att ändra färg så att man får den likt resten av sin bloggdesign så att man slipper ha en gillaknapp som inte alls matchar med resten av bloggen. Det är faktiskt väldigt enkelt vi behöver bara ta den koden som ligger här nedanför videon på designa din blogg och så går ni in på design och så trycker ni på dator och så går ni in på redigera html så tar ni stilmallen och längst ner i stilmallen så klistrar ni in det här.

Så, och då ser ni att då det är ganska mycket information här men jag har skrivit en liten kommentar längst ut så den översta reglerar utseendet på gilla-delen, den i mitten reglerar utseendet på gilla-delen när man har tryckt på gilla. Alltså om vi går in här och tittar så när man trycker på gilla och vilken färg det blir då, ska vi se varför den håller på att hoppa upp för mig. I vilket fall när man har tryckt på gilla så kan det bli en annan färg och då har jag gjort som så att jag har bara lagt vitt på hover, alltså när man har tryckt gilla och jag har lagt svart på gilla-delen så får ni ändra det själva helt enkelt.

Det jag tänkte säga är att de har använt ett RGBA färger här men det går bara enkelt att ersätta med vanliga hex-koder så om ni ser här på border till exempel, ska se här om vi kan zooma in litegrann, om ni ser på border där så ser ni att det står rgba parantes och en massa siffror, då kan man bara ta bort det och så kan man istället skriva eee eller så är ju en korrekt egentligen men när det är samma siffra hela tiden eller samma siffra eller samma bokstav i hela så räcker det att skriva tre stycken men säg till exempel f7f7f7, det är också en grå färg, så det går enkelt att ändra det då. Så har vi en box-shadow också som jag tänkte att jag skulle dra lite snabbt och det är alltså att det är en inneskugga oftast och där har de också rgba color och det är viktigt att man inte tar bort den lilla, det lilla kommatecknet efteråt utan att om man ska ersätta detta så får man bara ersätta fram till parentesens slut.

Så om vi sätter fff där till exempel och så sätter vi fff är ju vit och så sätter vi fff där också, så, så kan man göra. Och samma sak här nere på text shadow och vill man inte ha något shadow överhuvudtaget så kan man bara sätta none här. Man kan inte ta bort det för då kommer det inte, det måste finnas kvar för annars så, annars kommer standard inställningen gå in. Alltså den som ligger i scriptet redan så därför måste det vara kvar men man kan skriva none istället eller noll pixlar om man nu vill ha, om det är ett pixelantal till exempel.

Sen den som är längst ner här, likebtn__count är den som styr utseendet på själva nummerdelen så om vi kolla här igen så är det alltså den här delen här. Själva numret och det kan man också justera lite som man vill men samma där då att om man ska ändra box-shadow så är det rgba och vill man ändra någonting eller ta bort någonting så kan man inte bara ta bort den raden utan man får ersätta det med en none eller noll pixlar eller normal, ett default värde helt enkelt så att, så att det blir, så att det fortfarande står här men att det inte gör någonting och sen är det bara att trycka på spara och då har man lagt in sin, sin kod så att man kan ändra lite som man vill där så att den matchar med resten av designen. Och det var det som jag hade tänkt visa er idag så får jag önska er en fortsatt trevlig dag. Ha det så gott. Hej hej.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.