Forum - RE: Text unter jedem Beitrag - eine Idee und Inspiration - 2

<script>
//Image-Objekt wird erstellt
var $postreadimg = $("<img src='//files.homepagemodules.de/b104774/a_544_16025119.png' style='position:relative;' />");
var $postreadsticky = $("<img src='//files.homepagemodules.de/b104774/a_622_15827a4c.png' style='margin:20px; width: 300px; border: 0px; object-fit: scale-down; ' class='post' />");
 
function addPostReadImg(){
  // Platzierung der Grafiken
  $(".postratings").each(function(){
    $postreadsticky.clone().prependTo($(this).find('span:contains("Beitrag")').parent().parent().parent());
   //$postreadsticky.clone().appendTo($(this).find('span:contains("Beitrag")').parent().parent().parent());
 
    $postreadimg.clone().prependTo($(this).find('span:contains("Beitrag")'));
  });
}
 
window.addEventListener('load', function(){
  //Hinzufügen der Grafiken
  addPostReadImg();
 
  // Seitenreload zum Aktualisieren
  $('.ratingbutton, .rating_remove').on('click', function(){      
    setTimeout(function() { 
      location.reload();
    }, 100);
  });
 
  // Text neben Button aublenden "Beitrag wurde gelesen"
  //$('.xratings span:contains("Beitrag")').css('visibility', 'hidden').find(".rating_remove").css({'visibility': 'visible','float':'left','margin-left':'-20px'});
 
});
</script>
 

<style>
:root {
  --paper-shadow: #aaaaaa;
}
.paper {
  --paper-dark: #e5c93d;
  --paper-color: #ffed87;
  
  font-family: "Caveat", cursive;
  font-size: 14px;
  color:#000000;
  margin:10px 20px 70px 50px;
  padding:10px;
  position: relative;
  display: flex;
  justify-content: center;
  width: 300px;
  height: 120px;
      
  background: linear-gradient(130deg, var(--paper-dark), 30%, var(--paper-color));
  box-shadow: 3px 3px 2px var(--paper-shadow);
  transform: rotate(10deg);
  transform-origin: top left;
}
.paper p {
  margin:auto !important;
}
.pin {
  --pin-color: #d02627;
  --pin-dark: #9e0608;
  --pin-light: #fc7e7d;
 
  position: absolute;
  left: 20px;
  width: 60px;
  height: 50px;
}
.shadow {
  position: absolute;
  top: 18px;
  left: -8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
}
.metal {
  position: absolute;
  width: 5px;
  height: 20px;
  background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
  border-radius: 0 0 30% 30%;
  transform: rotate(50deg);
  transform-origin: bottom left;
  top: 15px;
  border-bottom: 1px solid #808080;
}
.bottom-circle {
  position: absolute;
  right: 15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--pin-color);
  background: radial-gradient(circle at bottom right, var(--pin-light), 25%, var(--pin-dark), 90%, var(--pin-color));
}
.bottom-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 20px;
  height: 30px;
  transform: rotate(55deg);
  transform-origin: 100% 100%;
  border-radius: 0 0 40% 40%;
  background: linear-gradient(to right, var(--pin-dark), 30%, var(--pin-color), 90%, var(--pin-light));
}
.bottom-circle::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at right, var(--pin-light), 30%, var(--pin-color), var(--pin-dark) 80%);
} 
</style>
 
<script>
//Image-Objekt wird erstellt
var $postreadimg = $("<img src='//files.homepagemodules.de/b104774/a_544_16025119.png' style='position:relative;' />");
var $postreadsticky = $("<div class='paper'><div class='pin'><div class='shadow'></div><div class='metal'></div><div class='bottom-circle'></div></div><p>Beitrag wurde gelesen, ist in Arbeit!</p></div>");
 
function addPostReadImg(){
  // Platzierung der Grafiken
  $(".postratings").each(function(){
    $postreadsticky.clone().prependTo($(this).find('span:contains("Beitrag")').parent().parent().parent());
   //$postreadsticky.clone().appendTo($(this).find('span:contains("Beitrag")').parent().parent().parent());
 
    $postreadimg.clone().prependTo($(this).find('span:contains("Beitrag")'));
  });
}
 
window.addEventListener('load', function(){
  //Hinzufügen der Grafiken
  addPostReadImg();
 
  // Seitenreload zum Aktualisieren
  $('.ratingbutton, .rating_remove').on('click', function(){      
    setTimeout(function() { 
      location.reload();
    }, 100);
  });
 
  // Text neben Button aublenden "Beitrag wurde gelesen"
  //$('.xratings span:contains("Beitrag")').css('visibility', 'hidden').find(".rating_remove").css({'visibility': 'visible','float':'left','margin-left':'-20px'});
 
});
</script>