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

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

Ä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.







24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

34 kommentarer

  1. SvaraJennie Lenita

    Tack för denna superbra tips, den uppskattas verkligen.
    Jag har ett problem med nummerdelen, jag kan inte få bort boxen runtom. Hur gör man det? För det fungerar inte att ändra i stilmallskoden, inte för mig i alla fall 🙁


    1. Author
      SvaraSanna Preifelt

      Den sista delen i koden styr boxen och där finns ju border, box-shadow osv. så du får neutralisera det så att det inte syns 🙂

      1. Jennie Lenita

        Har skrivit none på border, box-shadow och border-radius, men det händer ingenting. Är det någon kod jag behöver till scriptkoden?


      2. Author
        Sanna Preifelt

        Prova att skriva 0px istället. Om det är ett px-antal så neutraliserar du genom att skriva 0. Kan också behöva använda !important för säkerhetens skull.

  2. SvaraJennie Lenita

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

    Fungerar inte 🙁

      1. Jennie Lenita

        Nu har jag fått bort den. Skrev none !important; på alla och tog bort px värden. Tusen tack Sanna för hjälpen, du är en underbar guldklimp <3


      1. Author
        Sanna Preifelt

        Du måste lägga inom [code]kod här[/code] annars kan vi inte se den.
        Dock är inte scriptet relevant här, då det ser likadant ut för alla.


    1. Author
      SvaraSanna Preifelt

      Prova att lägga in detta:

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

    Än en gång, tuuuusen tack Sanna ♥ Nu fungerar det och min kod är superbra tack vare dig/er ♥♥♥♥

  4. SvaraSanna

    Tredje, sjätte, åttonde, nionde, tionde, elfte, tolfte inlägget o.s.v. Man hoppar upp till toppen liksom.

    Mvh Sanna


    1. Author
      SvaraSanna Preifelt

      Det kan ha att göra med din uppåtknapp. Har du provat att ta bort den och därefter se vad som händer?

  5. SvaraSanna

    Ja, jag tänkte detsamma och tog bort kodmallskoden och då var det samma och provade nu att ta bort från stilmallen också och problemet va densamma =(


    1. Author
      SvaraSanna Preifelt

      En annan idé att testa är att ta bort # i tomma länkar i dropdownen och bara låta det vara tomt. I dagsläget har du #, och som du ser när den hoppar upp när en trycker på Gilla, så får din URL en # efter sig, och hoppar upp till toppen. Så prova att ändra dina länkar i dropdownen såhär:

      &lt;a href=&quot;&quot;&gt;&lt;/a&gt;

      istället för såhär:

      &lt;a href=&quot;#&quot;&gt;&lt;/a&gt;
  6. SvaraSonja

    Hej!
    Skriver min blogg på engelska och därför skulle jag vilja byta allt till engelska, tex: ”gilla”-knappen till ”like” och ”kommentarer” till comments och så vidare, så att allt vore på engelska. Vet ingenting om html, hur skulle jag kunna få till det så att allt vore på engelska? 🙂 Tacksam för svar!!


    1. Author
      SvaraSanna Preifelt

      Dessvärre kan du inte ändra gilla till like. Du kan ändra allt annat (förutom ordet ”svar” i kommentarerna) genom att gå in i kodmallen och byta ut det till engelska. Du behöver lite HTML-kunskap för det. Men det du kan göra är att använda de tips vi har här för att se vad som styr vad och sedan får du helt enkelt bara översätta.

      Jag skrev nyss en guide om hur du översätter statiska ord, du hittar den här: http://www.designadinblogg.se/oversatta-sin-blogg-till-engelska/

    2. SvaraMax

      Om någon fortfarande läser här så ville jag bara påpeka att det är möjligt att ändra gilla till like, dock kräver det lite javascript och jQuery.

      Ett alternativ är att med hjälp jQuery- identifiera Gilla-texten och byta ut denna. Sounds pretty easy.

      Ett annat alternativ är att gömma a-taggen som innehåller texten gilla med css regler för klassen .like__btn. Antingen genom att ändra z-index och länken bakom allting, eller ändra färgen på texten till samma som bakgrunden. (Att ändra färgen på texten är dock lite omständligt eftersom dess egna CSS har !important efter färg-regeln för texten. Men det går att överskrida om man länkar sin egna stilmall IGEN, EFTER gilla-knappens script skapats. ) Sedan skapar man en egen a-tagg med texten ”like”.(Som positioneras över gilla-knappen med hjälp av position: absolute; samt positionerna). Till slut skapar man ett script som gör att när man klickar på den ny-skapade a-taggen så klickar scriptet på den ”osynliga” a-taggen.
      Scriptet kräver jQuery funktioner, det hämtar man lätt genom

       &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt; 

      Förutsatt att den nyskapade a-taggen läggs i en div tillsammans med gillaknappen script bör detta fungera: (reserverar mig för att peka på rätt a-tagg haha men principen finns där)

      $(&quot;a&quot;).click(function() {
      $( this ).closest(&quot;like-container&quot;).find(&quot;a).click();
      });
      
  7. SvaraLinnéa

    Hej! Försöker sätta in en gillaknapp nu istället för gömt kommentarfält, och jag är hitills rätt nöjd men att ändra färg på bakgrunden när man klickat vill inte fungera för mig? Blir röd bakgrund ändå, här är testbloggen mylifeaslinnea.blogg.se/testing 🙂 Du får klicka på en permalink då jag bara har gillaknappen på inläggssidan. Hoppas det finns någon lösning! Kraaam


    1. Author
      SvaraSanna Preifelt

      I din stilmall har du lagt in detta:

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

      Där är det av någon anledning ett utropstecken innan ; också. Prova att ta bort det 🙂

  8. SvaraEmma

    Hej!

    För mig så visas inte gillaknappen i varje inlägg utan endast på de 3 första.. Vad är felet?

  9. SvaraAlice

    Hej Sanna!
    Har ett problem med min gilla-knapp; när jag redigerar den i stilmallar ändras den i förhandsvisning men sen när jag sparar ändringarna och går in på bloggen ser den ut som originalknappen?
    La in scriptet som blogg.se länkade till i mina kodmallar,

    ska man använda sig utav någon annan grund för att kunna ändra utseendet på knappen?
    MVH, Alice

  10. SvaraKevin Moralez

    Den enda delen som funkar för mig är Gilladelen, kan ej ändra nummerdelen.. Går det att ändra hjärtat på något sätt?

    .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;
    } 
    1. SvaraLowan

      Har samma problem, hittade du någon lösning? Jag har prövat ALLT… Snälla någon på DDB, hjälp :<

  11. SvaraMaja

    Hej! Jag lyckas ändra allt förutom siffran. Önskar att man kunde ta bort border runt den och göra så att siffran kommer närmare gilla-knappen. För övrigt super bra förklarat och enkelt att hänga med!

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

OBS! Om du skall skriva kod måste du göra på följande sätt: [code]Din kod här[/code]

Genom att använda DDB, godkänner du användning av cookies. mer info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

OK