Ge skugga och ram till dina bilder
Numer kan man göra det riktigt fint med CSS3, men eftersom Internet Explorer inte stödjer funktionen visar jag ett sätt som fungerar i alla webläsare och är enkelt att lägga till.
Du kan anpassa färgerna på ramlinjerna allt efter om du har en ljus eller mörk mall, ju djupare färg desto mörkare nyans måste du ha på skuggorna för att de ska synas. Du kan också enkelt öka eller minska bredden på din ram (och byta färg om du vill ha något annat än vitt)
Så här ser koden ut:
background: #ffffff; (ramens färg)
padding: 10px; (ramens vidd)
border-right: 1px solid #adadad; (skuggan till högers färg och vidd)
border-bottom: 1px solid #adadad; (skuggan nederst färg och vidd)
border-left:1px solid #e5e5e5; (skuggan till vänsters färg och vidd)
border-top:1px solid #e5e5e5; (skuggan överst färg och vidd)
Du kan kopiera koden här nedan:
background: #ffffff;
padding: 10px;
border-right: 1px solid #adadad;
border-bottom: 1px solid #adadad;
border-left:1px solid #e5e5e5;
border-top:1px solid #e5e5e5;
padding: 10px;
border-right: 1px solid #adadad;
border-bottom: 1px solid #adadad;
border-left:1px solid #e5e5e5;
border-top:1px solid #e5e5e5;
Vart du ska lägga in koden beror på vilken mall du har.
Gå till din bloggs kodmall, alltså Design, Redigera HTML.
Börja med att trycka på Ctrl och F på ditt tangentbord så att du får fram en sökruta. I den här sökrutan ska du lägga in den kodrad som kommer från den mall du använder, den ser olika ut i olika mallar.
Här nedan radar jag upp designmallarna och grundmallen Minima. Om du använder en annan mall ska du leta reda på Post-stycket och i det hitta något som heter img (img står för bild)
Du ska sedan antingen byta ut de kodrader jag visar i skärmklippen eller bara lägga till vårt kodstycke om det inte finns någon regel som styr bilder tidigare i mallen. (gäller två mallar)
Om du fortfarande använder Minima ska du söka efter:
.post img
och sen byta ut raderna under mot ovanstående kod.
Om du använder Simple-mallen ska du leta efter:
.post-body img
och sen byta ut raderna under mot ovanstående kod.
Om du använder Häftig Ab ska du leta efter:
.post-body img
och sen byta ut raderna under mot ovanstående kod.
Om du använder Eterisk ska du leta efter:
.post-body img
och sen byta ut den enda raden mot ovanstående kod.
Om du använder antingen Bildfönster eller Resor finns ingen inlagd bildkod så vi får skapa en egen. Sök efter a:hover och lägg in vår kod under det stycket.
Om du använder mallen Vattenstämpel finns redan en vit kant med skugga så den låter vi vara.
Nu kan du prova vilka mått och färger som passar bäst i din blogg!
Alltså, jag är lost. Jag använder vattenstämpel och HAR ram och skugga, men vill TA BORT? Hur gör jag? Svara på min blogg (anjahakanson.blogspot.com) eller maila mig. (anjahakanson@hotmail.com). Riktigt tacksam för svar!
ReplyDeleteDu har en kommentar på din blogg :-)
ReplyDeleteJag undrar hur man raderar sina bilder från bildarkivet?
ReplyDeleteOm du går till din bloggs instrumentpanel (där man ser alla bloggar man har) kan du längst ner på sidan hitta en rad länkar med rubriken Verktyg och resurser.
ReplyDeleteDär hittar du Picasa webalbum, det är där du har dina bloggfoton. Här kan du redigera och radera foton.
Den hittar inte jag bland verktyg och resurser.
ReplyDeleteMen jag fick leta lite bland hjälpfunktionen så hittade jag en längre väg =)
Tack för hjälper iaf =)
Jag undrar också som Anja ovan, hur man tar bort skuggan?
ReplyDeleteTack på förhand!
Jag undrar med hur man tar bort ramen och skuggan? Blir galen försöker med alla dess koder men inget händer :(
ReplyDeleteDu får gärna hjälpa mig genom att maila eller svara på min blogg :)
malin.adriansson@hotmail.com
http://smakarleksfullating.blogspot.com/
Tack, men tyvärr hjälper inte det:( När jag tar bort koden och förhandsgranskar så får jag upp sidan "ogiltlig variabeldeklaration i sidans skal Variabeln används men är inte definierad. Indata: postfooterfont"
ReplyDeleteVet inte alls vad jag gör för fel?!?
http://smakarleksfullating.blogspot.com/
Malin - då har du raderat för mycket. Var noga så du inte tar bort den lilla avslutande }-klammern, den måste stå kvar.
ReplyDeleteRadera bara raderna:
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
i stycket:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #ffffff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
Jag är helt säker på att jag gör rätt :/ Tar inte bort klammern som avslutar stycken ändå kommer felmeddelandet upp?!?
ReplyDeleteDet är i detta stycket jag tar bort de 3 raderna raderna;
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
Tack för att du hjälper mig :)
Malin - om du vill kan du maila mig så ska vi se om vi inte kan fixa det. fixadinblogg@gmail.com
ReplyDeleteJag fixade det till slut :)
ReplyDeleteVerkade som min egna CSS låg och störde så jag tog bort den och då kunde jag ta bort koden från HTML :)
Men tack ändå. Ni är suveräna på att hjälpa :)
Hej
ReplyDeleteJag vill också få bort ramen runt bilderna men hittar inte koden som du skriver till föregående om. Jag använder mall design: vattenstämpel. är det en annan kod jag ska leta efter?
Tack på förhand
Hej!
ReplyDeleteJag vill också ha bort ramen runt bilderna på min blogg. Ibland syns ramen inte på min PC men alltid på min iPad. Jag vill att det skall se ut som om bilderna är "frilagda" mot min vita bakgrund och inte ha ram alls. Har försökt om och om igen i avancerade ändringar (ej i html-koden) men hittar inte var...mkt tacksam för hjälp!