Code for Blog Entry left Panel & some resources in case anyone need

From this

To this took me a whole week ٩(× ×)۶

I can't find any tutorial mention this part detail enough, and don't know how to code neither so it took me way too long to figure out ToT//

I think this specific part pretty important so i think i should make a code list for everyone (つ≧▽≦)つ

GENERAL:

• Left panel (the whole left side of, not just the info panel so be careful): main .left {

• Stronger selector (to remove default clutter): main .left * {

Ex: main .left * {

border: none !important; / * to remove the blue outline * /

box-shadow: none !important;

}

• Small blog info / control panel: .edit-info {

- You can change background Images, color with '.edit-info'. But if you want to change text inside it, i recommended that you use 'main .left' instead (for all general text size and color of left panel).

TEXT:

• Published by USERNAME: main .left p {

• USERNAME Only: main .left p a {

• Published (Update) X hours ago: main .left .count {

• Category line: main .left .category {

• View Blog: p.links a:first-child {

• View Profile: p.links a:nth-child(2) {

• Report Blog Entry: p.links a:last-child {

- Recommend put these in one line, it look better

Ex: p.links a:first-child,

p.links a:nth-child(2),

p.links a:last-child {

put code here;

}

ICON

• View Blog icon: p.links a:first-child .icon

• View Profile icon: p.links a:nth-child(2) .icon

• Report Blog Entry icon: p.links a:last-child .icon {

PROFILE PICTURE:

• Blog profile pic container (to add shadow box behind profile pic): .blog-entry .profile-pic {

• Blog profile pic image (to change shape of profile pic with frame overlay): .blog-entry .profile-pic img {

Ex: The result look like my profile pic

.blog-entry .profile-pic img {

-webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

}