48th: ononoki

[yanyan]

that moment when your last post is from 2014

If you want to change the position of the tiny box, look for this part of the code: margin-top: ##px; margin-left: ##px; and adjust accordingly! The bigger the number, the further from the top or the left the box will go. Characters featured are Ononoki Yotsugi from the Monogatari series and D.Va from Overwatch.

Character HMD ∙ INBOX ∙ INFO

PERMISSIONS ∙ APP ∙ CR ∙ THREADS ∙ GAME ∙ PLAYER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.

Replace #FFAC75 and #00CDCD with any color of your choice.

BORDER ON TOP <center><table style="width: 500px;"> <raw-code> <!--TOP PART START--> <tr> <td style="background:url(IMAGE MUST BE 500px WIDE; ADJUST HEIGHT ACCORDINGLY) no-repeat; height: 280px;"> <!--BOX--> <div style="background: white; width: 30%; height: 26px; font: 0.75em tahoma, sans-serif; color: #00CDCD; text-align: center; text-transform: uppercase; border-top: 6px solid #FFAC75; margin-top: ##px; margin-left: ##px; padding: 2px; display: inline-block;"> <span style="font-size: 1.25em;"><b>Character</b></span> <br/> <b> <a style="text-decoration: none; color: #FFAC75;" href="LINK">HMD</a> ∙ <a style="text-decoration: none; color: #FFAC75;" href="LINK">INBOX</a> ∙ <a style="text-decoration: none; color: #FFAC75;" href="LINK">INFO</a> </b> </div> <!--BOX--> </td> </tr> <!--TOP PART END--> <!--BOTTOM PART START--> <tr> <td style="background: white; font-family: tahoma, sans-serif; padding: 20px;"> <center><div style="width: 85%; font: bold 1.1em tahoma, sans-serif; color: #FFAC75; text-transform: uppercase; text-align: center; padding-bottom: 5px;"> <a style="text-decoration: none; color: #00CDCD;" href="LINK">PERMISSIONS</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">APP</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">CR</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">THREADS</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">GAME</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">PLAYER</a></div> <div style="width: 85%; border-top: 6px solid #FFAC75; padding-top: 5px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.</div></center> </td> </tr> <!--BOTTOM PART END--> </raw-code> </table></center>

BORDER ON LEFT <center><table style="width: 500px;"> <raw-code> <!--TOP PART START--> <tr> <td style="background:url(IMAGE MUST BE 500px WIDE; ADJUST HEIGHT ACCORDINGLY) no-repeat; height: 280px;"> <!--BOX--> <div style="background: white; width: 30%; height: 26px; font: 0.75em tahoma, sans-serif; color: #00CDCD; text-align: center; text-transform: uppercase; border-left: 6px solid #FFAC75; margin-top: ##px; margin-left: ##px; padding: 2px; display: inline-block;"> <span style="font-size: 1.25em;"><b>Character</b></span> <br/> <b> <a style="text-decoration: none; color: #FFAC75;" href="LINK">HMD</a> ∙ <a style="text-decoration: none; color: #FFAC75;" href="LINK">INBOX</a> ∙ <a style="text-decoration: none; color: #FFAC75;" href="LINK">INFO</a> </b> </div> <!--BOX--> </td> </tr> <!--TOP PART END--> <!--BOTTOM PART START--> <tr> <td style="background: white; font-family: tahoma, sans-serif; padding: 20px;"> <center><div style="width: 88%; font: bold 1.1em tahoma, sans-serif; color: #FFAC75; text-transform: uppercase; text-align: left; padding-bottom: 5px;"> <a style="text-decoration: none; color: #00CDCD;" href="LINK">PERMISSIONS</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">APP</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">CR</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">THREADS</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">GAME</a> ∙ <a style="text-decoration: none; color: #00CDCD;" href="LINK">PLAYER</a></div> <div style="width: 85%; border-left: 6px solid #FFAC75; padding-left: 10px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.</div></center> </td> </tr> <!--BOTTOM PART END--> </raw-code> </table></center>

Character HMD ∙ INBOX ∙ INFO

PERMISSIONS ∙ APP ∙ CR ∙ THREADS ∙ GAME ∙ PLAYER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.

Replace #FD43B9 and #8699E7 with any color of your choice.

BORDER ON TOP <center><table style="width: 500px;"> <raw-code> <!--TOP PART START--> <tr> <td style="background:url(IMAGE MUST BE 500px WIDE; ADJUST HEIGHT ACCORDINGLY) no-repeat; height: 280px;"> <!--BOX--> <div style="background: #343434; width: 30%; height: 26px; font: 0.75em tahoma, sans-serif; color: #FD43B9; text-align: center; text-transform: uppercase; border-top: 6px solid #7777DD; margin-top: ##px; margin-left: ##px; padding: 2px; display: inline-block;"> <span style="font-size: 1.25em;"><b>Character</b></span> <br/> <b> <a style="text-decoration: none; color: #8699E7;" href="LINK">HMD</a> ∙ <a style="text-decoration: none; color: #8699E7;" href="LINK">INBOX</a> ∙ <a style="text-decoration: none; color: #8699E7;" href="LINK">INFO</a> </b> </div> <!--BOX--> </td> </tr> <!--TOP PART END--> <!--BOTTOM PART START--> <tr> <td style="background: #343434; font-family: tahoma, sans-serif; padding: 20px;"> <center><div style="width: 85%; font: bold 1.1em tahoma, sans-serif; color: #8699E7; text-transform: uppercase; text-align: center; padding-bottom: 5px;"> <a style="text-decoration: none; color: #FD43B9;" href="LINK">PERMISSIONS</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">APP</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">CR</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">THREADS</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">GAME</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">PLAYER</a></div> <div style="width: 85%; border-top: 6px solid #8699E7; padding-top: 5px; color: #cccccc; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.</div></center> </td> </tr> <!--BOTTOM PART END--> </raw-code> </table></center>

BORDER ON LEFT <center><table style="width: 500px;"> <raw-code> <!--TOP PART START--> <tr> <td style="background:url(IMAGE MUST BE 500px WIDE; ADJUST HEIGHT ACCORDINGLY) no-repeat; height: 280px;"> <!--BOX--> <div style="background: #343434; width: 30%; height: 26px; font: 0.75em tahoma, sans-serif; color: #FD43B9; text-align: center; text-transform: uppercase; border-left: 6px solid #8699E7; margin-top: ##px; margin-left: ##px; padding: 2px; display: inline-block;"> <span style="font-size: 1.25em;"><b>Character</b></span> <br/> <b> <a style="text-decoration: none; color: #8699E7;" href="LINK">HMD</a> ∙ <a style="text-decoration: none; color: #8699E7;" href="LINK">INBOX</a> ∙ <a style="text-decoration: none; color: #8699E7;" href="LINK">INFO</a> </b> </div> <!--BOX--> </td> </tr> <!--TOP PART END--> <!--BOTTOM PART START--> <tr> <td style="background: #343434; font-family: tahoma, sans-serif; padding: 20px;"> <center><div style="width: 88%; font: bold 1.1em tahoma, sans-serif; color: #8699E7; text-transform: uppercase; text-align: left; padding-bottom: 5px;"> <a style="text-decoration: none; color: #FD43B9;" href="LINK">PERMISSIONS</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">APP</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">CR</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">THREADS</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">GAME</a> ∙ <a style="text-decoration: none; color: #FD43B9;" href="LINK">PLAYER</a></div> <div style="width: 85%; border-left: 6px solid #8699E7; padding-left: 10px; color: #cccccc; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel pulvinar arcu. Ut consectetur felis lectus, eget tristique velit luctus vitae. Praesent blandit, lectus vehicula sollicitudin consectetur, urna justo scelerisque nisl, vel pellentesque orci tortor egestas nulla. Aliquam efficitur at augue at feugiat. Phasellus sed diam finibus, mollis velit in, dictum urna. Aenean viverra rhoncus cursus. Aliquam congue sit amet.</div></center> </td> </tr> <!--BOTTOM PART END--> </raw-code> </table></center>

Comments

[(Anonymous)]

hello! i'm having trouble using the d.va one with border on top. even when i change the image to something that is exactly 500x290 (the original number you had) there's a big gap between the image and where the bottom text part of the code starts. i haven't changed anything else. how do i get it to not have a space between the image and the code below like in the samples?

[yanyan]

Does this gap happen on the entry page itself or when you view the code on a layout?

If it's on the entry itself, the height of the cell that contains the image is at 280px by default (the same number as the one on the D.Va sample!), so you may have to adjust it accordingly. Otherwise, I can look at the code to see what's up.

If happens on your journal's layout, you'll have to tweak the layout itself. If you toss me the layout code, I can try to fix it for you!