« Web, HTML, Tech Forum

A couple of code snippets you might like

Posted by Kie

posted
updated

Forum: Web, HTML, Tech

I figured I might as well post some code snippets here since submitting layouts will likely not come back in the forseable future. These are small features that I haven't seen many people incorporating into their pages.

Reminder: all of these code snippets have to go inside of the <style></style> tags





N.1: custom mouse selection color


 ::selection { 
    color: [text color goes here]; 
    background: [background color goes here];
 }


You know how you can highlight stuff with your mouse to select it, right? this code will change the color of the selection on your page from the default white with blue background.





N.2: add an icon next to each of your blog entries


 .blog-preview p {
   margin-left: 17.5px;
 }

.blog-preview p:before {
   content:"";
   aspect-ratio: 1/1;
   width: 20px;
   background-image: url(https://files.catbox.moe/xtam1o.gif); /*paste the url of the image you want to use as an icon here. it will be resized to 20x20 pizels*/
   background-size: cover;
   display: inline-block;
   margin-left: -15px;
   margin-top: -10px;
   position: relative;
   top: 5px;
 }


That's it! just make sure to change the icon with your own. If you don't know how to find an icon you like, I'd recommend searching "favicons"! You'll find a lot of stuff. Or you can just use the one I have, I don't own it ;-)


Report Topic

1 Reply

Reply by ZoranaDragon

posted