ΠΩΣ ΒΑΖΩ ΜΙΑ ΕΙΚΟΝΑ ΓΙΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ

ΠΩΣ ΒΑΖΩ ΜΙΑ ΕΙΚΟΝΑ ΓΙΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ
ΕΙΚΟΝΑ ΦΟΝΤΟ ΑΝΑΡΤΗΣΗΣ
Για να βάλω μία εικόνα για φόντο ανάρτησης αντι για το απλό άσπρο ή σκούρο χρώμα που μας δίνει ο blogger πρέπει να πάω στην επεξεργασία του προτύπου και να ανοίξω το πρώτο βελάκι που θα συναντήσω το οποίο βρίσκεται περίπου ανάμεσα στις γραμμές 13-43 του κώδικα του blog μας για να επεκταθεί ο κρυμένος κώδικας ο οποίος είναι με μπλέ γράμματα. Πηγαίνουμε στην ενότητα /*Posts ------*/ περίπου ανάμεσα στις γραμμές 575-605 και ψάχνουμε τη γραμμή που γράφει .date-outer { και μετά από 3 γραμμές βρίσκουμε την γραμμή που γράφει background-color: $(post.background.color); την σβήνουμε και στη θέση της βάζουμε αυτή :

  background: url(https://lh4.googleusercontent.com/-N3r-RPOV1ko/VNSUezh1eUI/AAAAAAAAO0k/cCU-fmG05Ds/w960-h30-no/wood.png); background-repeat:repeat; 

Την εικόνα την ανεβάζετε σε ένα λεύκωμα του Google+ και από εκεί παίρνετε το link της και το επικολλάτε μέσα στις παρενθέσεις αντικαθιστώντας την δική μου εικόνα με τα μώβ γράμματα που μπορεί να μην σας κάνει.

/* Posts
----------------------------------------------- */
body .main-inner .Blog {
  padding: 0;
  margin-bottom: 1em;

  background-color: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.main-inner .section:last-child .Blog:last-child {
  padding: 0;
  margin-bottom: 1em;
}

.main-inner .widget h2.date-header {
  margin: 0 -5px 1px;
  padding: 0 0 $(date.padding.bottom) 0;

  font: $(date.font);
  color: $(date.text.color);

  background: $(date.background);

  border-top: $(date.border.size) solid $(date.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);

  -moz-border-radius-topleft: $(date.header.border.radius.top);
  -moz-border-radius-topright: $(date.header.border.radius.top);
  -webkit-border-top-left-radius: $(date.header.border.radius.top);
  -webkit-border-top-right-radius: $(date.header.border.radius.top);
  border-top-left-radius: $(date.header.border.radius.top);
  border-top-right-radius: $(date.header.border.radius.top);

  position: $(date.position);
  bottom: 100%;
  $(date.side): $(date.header.position);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 5px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

.date-outer {
  position: relative;
  margin: $(date.space) 0 5px;
  padding: 0 5px;
background-color: $(post.background.color); <== ΑΥΤΟ ΣΒΗΣΤΕ ΤΟ ===<
  background: url(https://lh4.googleusercontent.com/-N3r-RPOV1ko/VNSUezh1eUI/AAAAAAAAO0k/cCU-fmG05Ds/w960-h30-no/wood.png); background-repeat:repeat; <== ΚΑΙ ΕΠΙΚΟΛΛΗΣΤΕ ΑΥΤΟ ===<
  border: 1px solid $(post.border.color); 

2 σχόλια:

  1. Δημήτρης Σεπόλια.7 Φεβρουαρίου 2015 - 8:51 π.μ.

    Πολύ καλό το έψαχνα. Ευχαριστώ.

    ΑπάντησηΔιαγραφή
  2. Αυτή η ρύθμιση μεταμορφώνει κυριολεκτικά το blog το κάνει ξεχωριστό.

    ΑπάντησηΔιαγραφή