Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
@tomato modest I'll be starting work on yours now.
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Request ғʏᴜʀɪ's ᴄss/ʜᴛᴍʟ ʀᴇǫᴜᴇsᴛs [ᴄʟᴏsᴇᴅ]
- Thread starter Fable
- Start date
tomato modest
it feels like i'm drowning.
Alright!
minajesty
it's the most 𝘸𝘰𝘯𝘥𝘦𝘳𝘧𝘶𝘭 time of the year!
Do you wish this to be mobile friendly? No
Fonts: Whatever you think best fits the layout
Images:
Colors:
Additional: Scrollbars and 4 placeholders
Fonts: Whatever you think best fits the layout
Images:
Colors:
Additional: Scrollbars and 4 placeholders
Last edited by a moderator:
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
/* --- CSS/HTML Design by Fyuri. Tampering with CSS may result in the code or site breaking. Fyuri is not responsible for those who tamper with provided code. --- */
.fyurirequest004{background-color:#transparent;width:800px;height:440px;margin:auto;color:#323232}.fyurirequest004 .box1::-webkit-scrollbar{width:7px}.fyurirequest004 .box1::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box1::-webkit-scrollbar-thumb{background:rgba(157,134,120,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box1::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .box2::-webkit-scrollbar{width:7px}.fyurirequest004 .box2::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box2::-webkit-scrollbar-thumb{background:rgba(202,194,181,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .box3::-webkit-scrollbar{width:7px}.fyurirequest004 .box3::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box3::-webkit-scrollbar-thumb{background:rgba(216,216,216,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box3::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box3::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .htop{position:relative;font-family:'Annie Use Your Telescope',cursive;font-size:60px;color:#65473d;letter-spacing:5px;max-width:800px;height:70px;overflow:hidden;top:-17px;margin-bottom:-10px}.fyurirequest004 .box1{float:left;background-color:#9d8678;width:260px;margin-right:10px;padding:5px;height:350px;overflow:auto}.fyurirequest004 .box2{float:left;background-color:#cac2b5;width:260px;margin-right:10px;padding:5px;height:350px;overflow:auto}.fyurirequest004 .box3{float:left;background-color:#d8d8d8;width:260px;padding:5px;height:350px;overflow:auto}
Main Header
@tomato modest Okay, here it is. Each box will scroll to adjust to the amount of text.
The boxes also all have a minimal matching color scrollbar.
I was unable to use the selected for for a smaller header inside the sections due to the font creating a large gap at the top and bottom.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vehicula velit. Etiam eget condimentum tellus, vitae feugiat augue. Nulla ac vehicula diam. Vestibulum vel metus feugiat nibh accumsan efficitur. Quisque vulputate sollicitudin pulvinar. Sed id turpis facilisis, suscipit velit a, lacinia dui. Mauris eu blandit ante, id congue massa.
Donec ultrices, velit vitae lacinia iaculis, turpis velit euismod nisi, in vehicula massa nunc sit amet ligula. Fusce ut ex quis neque molestie auctor. Mauris volutpat lectus iaculis efficitur dignissim. Aliquam erat volutpat. Sed lacinia pulvinar nibh, at dictum tortor fermentum ac. Morbi lorem ante, ultricies sed congue pellentesque, facilisis vitae elit. Sed ultrices sagittis lacus, vel ultrices tortor lobortis ut.
Duis lobortis venenatis dolor, at vehicula ex suscipit et. Donec rutrum, lacus nec venenatis vehicula, dolor metus varius eros, tempor elementum libero dui quis nisl. Phasellus ultricies metus a nibh sollicitudin scelerisque. Mauris vitae neque ultricies, finibus lacus sed, efficitur eros. Nunc imperdiet, arcu ac vehicula feugiat, enim tellus tincidunt nulla, ut congue nulla orci eu velit. Nam vestibulum et diam eu varius. Sed a velit dolor. Etiam sit amet convallis ex.
Phasellus eget aliquam massa. Vestibulum feugiat et quam non tincidunt. Curabitur a ligula enim. Fusce venenatis mattis purus sed egestas.
.fyurirequest004{background-color:#transparent;width:800px;height:440px;margin:auto;color:#323232}.fyurirequest004 .box1::-webkit-scrollbar{width:7px}.fyurirequest004 .box1::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box1::-webkit-scrollbar-thumb{background:rgba(157,134,120,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box1::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .box2::-webkit-scrollbar{width:7px}.fyurirequest004 .box2::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box2::-webkit-scrollbar-thumb{background:rgba(202,194,181,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .box3::-webkit-scrollbar{width:7px}.fyurirequest004 .box3::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box3::-webkit-scrollbar-thumb{background:rgba(216,216,216,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box3::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box3::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .htop{position:relative;font-family:'Annie Use Your Telescope',cursive;font-size:60px;color:#65473d;letter-spacing:5px;max-width:800px;height:70px;overflow:hidden;top:-17px;margin-bottom:-10px}.fyurirequest004 .box1{float:left;background-color:#9d8678;width:260px;margin-right:10px;padding:5px;height:350px;overflow:auto}.fyurirequest004 .box2{float:left;background-color:#cac2b5;width:260px;margin-right:10px;padding:5px;height:350px;overflow:auto}.fyurirequest004 .box3{float:left;background-color:#d8d8d8;width:260px;padding:5px;height:350px;overflow:auto}
Main Header
@tomato modest Okay, here it is. Each box will scroll to adjust to the amount of text.
The boxes also all have a minimal matching color scrollbar.
I was unable to use the selected for for a smaller header inside the sections due to the font creating a large gap at the top and bottom.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vehicula velit. Etiam eget condimentum tellus, vitae feugiat augue. Nulla ac vehicula diam. Vestibulum vel metus feugiat nibh accumsan efficitur. Quisque vulputate sollicitudin pulvinar. Sed id turpis facilisis, suscipit velit a, lacinia dui. Mauris eu blandit ante, id congue massa.
Donec ultrices, velit vitae lacinia iaculis, turpis velit euismod nisi, in vehicula massa nunc sit amet ligula. Fusce ut ex quis neque molestie auctor. Mauris volutpat lectus iaculis efficitur dignissim. Aliquam erat volutpat. Sed lacinia pulvinar nibh, at dictum tortor fermentum ac. Morbi lorem ante, ultricies sed congue pellentesque, facilisis vitae elit. Sed ultrices sagittis lacus, vel ultrices tortor lobortis ut.
Duis lobortis venenatis dolor, at vehicula ex suscipit et. Donec rutrum, lacus nec venenatis vehicula, dolor metus varius eros, tempor elementum libero dui quis nisl. Phasellus ultricies metus a nibh sollicitudin scelerisque. Mauris vitae neque ultricies, finibus lacus sed, efficitur eros. Nunc imperdiet, arcu ac vehicula feugiat, enim tellus tincidunt nulla, ut congue nulla orci eu velit. Nam vestibulum et diam eu varius. Sed a velit dolor. Etiam sit amet convallis ex.
Phasellus eget aliquam massa. Vestibulum feugiat et quam non tincidunt. Curabitur a ligula enim. Fusce venenatis mattis purus sed egestas.
Code:
<p style="display:none;">
</p>
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope" rel="stylesheet">
<style type="text/css">
/* --- CSS/HTML Design by Fyuri. Tampering with CSS may result in the code or site breaking. Fyuri is not responsible for those who tamper with provided code. --- */
.fyurirequest004{background-color:#transparent;width:800px;height:440px;margin:auto;color:#323232}.fyurirequest004 .box1::-webkit-scrollbar{width:7px}.fyurirequest004 .box1::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box1::-webkit-scrollbar-thumb{background:rgba(157,134,120,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box1::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .box2::-webkit-scrollbar{width:7px}.fyurirequest004 .box2::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box2::-webkit-scrollbar-thumb{background:rgba(202,194,181,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box2::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .box3::-webkit-scrollbar{width:7px}.fyurirequest004 .box3::-webkit-scrollbar-button{width:0;height:0}.fyurirequest004 .box3::-webkit-scrollbar-thumb{background:rgba(216,216,216,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:0}.fyurirequest004 .box3::-webkit-scrollbar-track{background:transparent;border:0 none #fff;border-radius:0}.fyurirequest004 .box3::-webkit-scrollbar-corner{background:transparent}.fyurirequest004 .htop{position:relative;font-family:'Annie Use Your Telescope',cursive;font-size:60px;color:#65473d;letter-spacing:5px;max-width:800px;height:70px;overflow:hidden;top:-17px;margin-bottom:-10px}.fyurirequest004 .box1{float:left;background-color:#9d8678;width:260px;margin-right:10px;padding:5px;height:350px;overflow:auto}.fyurirequest004 .box2{float:left;background-color:#cac2b5;width:260px;margin-right:10px;padding:5px;height:350px;overflow:auto}.fyurirequest004 .box3{float:left;background-color:#d8d8d8;width:260px;padding:5px;height:350px;overflow:auto}</style>
<div style="overflow:auto;">
<div class="fyurirequest004">
<div class="htop">
<p>
Main Header
</p>
</div>
<div class="box1">
<p>
<a contenteditable="false" data-ipshover="" data-ipshover-target="https://www.rpnation.com/profile/31678-tomato-modest/?do=hovercard" data-mentionid="31678" href="https://www.rpnation.com/profile/31678-tomato-modest/">@tomato modest</a> Okay, here it is. Each box will scroll once to adjust to the amount of text.
</p>
<p>
</p>
<p>
The boxes also all have a minimal matching color scrollbar.
</p>
<p>
</p>
<p>
I was unable to use the selected for for a smaller header inside the sections due to the font creating a large gap at the top and bottom.
</p>
<p>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vehicula velit. Etiam eget condimentum tellus, vitae feugiat augue. Nulla ac vehicula diam. Vestibulum vel metus feugiat nibh accumsan efficitur. Quisque vulputate sollicitudin pulvinar. Sed id turpis facilisis, suscipit velit a, lacinia dui. Mauris eu blandit ante, id congue massa.
</p>
</div>
<div class="box2">
<p>
Donec ultrices, velit vitae lacinia iaculis, turpis velit euismod nisi, in vehicula massa nunc sit amet ligula. Fusce ut ex quis neque molestie auctor. Mauris volutpat lectus iaculis efficitur dignissim. Aliquam erat volutpat. Sed lacinia pulvinar nibh, at dictum tortor fermentum ac. Morbi lorem ante, ultricies sed congue pellentesque, facilisis vitae elit. Sed ultrices sagittis lacus, vel ultrices tortor lobortis ut.
</p>
</div>
<div class="box3">
<p>
Duis lobortis venenatis dolor, at vehicula ex suscipit et. Donec rutrum, lacus nec venenatis vehicula, dolor metus varius eros, tempor elementum libero dui quis nisl. Phasellus ultricies metus a nibh sollicitudin scelerisque. Mauris vitae neque ultricies, finibus lacus sed, efficitur eros. Nunc imperdiet, arcu ac vehicula feugiat, enim tellus tincidunt nulla, ut congue nulla orci eu velit. Nam vestibulum et diam eu varius. Sed a velit dolor. Etiam sit amet convallis ex.
</p>
<p>
</p>
<p>
Phasellus eget aliquam massa. Vestibulum feugiat et quam non tincidunt. Curabitur a ligula enim. Fusce venenatis mattis purus sed egestas.
</p>
</div>
<div style="clear:left;">
</div>
</div>
</div>
Last edited by a moderator:
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
@TheCandyEmo You've been added to the list.
tomato modest
it feels like i'm drowning.
It's great! Thank you so much!
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
I am working on your request currently.
Bunny Hop
The Fume Knight
Thank you >.<
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
/* --- CSS/HTML Design by Fyuri. Tampering with CSS may result in the code or site breaking. Fyuri is not responsible for those who tamper with provided code. --- */
.fyurirequest005{background-color:#ccc;background-image:url(http://i.imgur.com/X44Wqdv.png);background-repeat:no-repeat;background-size:cover;width:665px;height:auto;margin:auto;color:#323232;padding:10px;border:2px solid #200e42;color:#000}.fyurirequest005 div::-webkit-scrollbar{width:7px}.fyurirequest005 div::-webkit-scrollbar-button{width:0;height:0}.fyurirequest005 div::-webkit-scrollbar-thumb{background:#200e42}.fyurirequest005 div::-webkit-scrollbar-track{background:rgba(255,255,255,0.3)}.fyurirequest005 div::-webkit-scrollbar-corner{background:transparent}.fyurirequest005 .top{background-color:transparent;width:100%;text-align:center}.fyurirequest005 .top img{height:150px;width:150px;border:2px solid #200e42;object-fit:cover;padding:0;margin:0 5px 10px}.fyurirequest005 .boxtop{background-color:transparent;width:100%;margin:auto}.fyurirequest005 .header{font-family:'Aldrich',sans-serif;color:#200e42;font-size:30px}.fyurirequest005 .box1{float:left;background-color:rgba(255,255,255,0.6);width:315px;height:200px;border:2px solid #200e42;margin-right:10px;padding:5px;overflow:auto}.fyurirequest005 .box2{float:left;background-color:rgba(255,255,255,0.6);width:315px;height:200px;border:2px solid #200e42;padding:5px;overflow:auto}.fyurirequest005 .clear{clear:both;margin-bottom:-10px}.fyurirequest005 .box3{width:100%;height:200px;background-color:rgba(255,255,255,0.6);border:2px solid #200e42;padding:5px;margin-bottom:10px;overflow:auto}.fyurirequest005 .box4{width:100%;height:200px;background-color:rgba(255,255,255,0.6);border:2px solid #200e42;padding:5px;overflow:auto}
Header
@Eternal Dragonchild It's larger than ambela's since the sections you wished for seemed like they would benefit from a larger text area.
Each of these boxes will scroll to adjust to the amount of text accordingly. To replace the image holders, just select the image holder and then paste in your direct image url and the site will automatically embed it and the code will adjust it to stay contained to a specific size.
Text just needs to be typed into each box and the header text can be adjusted via editor as well, so there is no need to tamper with any CSS/HTML.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis neque. Aliquam tincidunt porta elit id aliquam. Quisque et augue placerat, sodales tellus quis, suscipit quam.
Header
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at mollis enim, ut commodo lacus. Maecenas blandit risus vel ligula gravida, consectetur iaculis nibh molestie. Proin in mi gravida, sodales lectus ac, tincidunt tortor. Nullam eu ultricies lectus, eu ullamcorper lacus.
Vivamus pharetra aliquet feugiat. Integer gravida efficitur mi, eu vehicula tortor tempus eget. Mauris non orci sollicitudin, imperdiet turpis non, accumsan massa.
Header
Fusce dapibus velit id leo laoreet, non maximus neque molestie. Suspendisse vel viverra dolor, nec maximus turpis. Nullam vitae sagittis libero. Ut feugiat tortor molestie elit luctus fringilla. Sed sed lacus a quam mattis vehicula eu vitae turpis. Vivamus lacus lorem, rhoncus quis eros ut, egestas tincidunt mauris. Ut ornare leo in dolor eleifend, porta fermentum tellus imperdiet. Vestibulum ultrices, lacus vel condimentum efficitur, elit mi viverra neque, vitae molestie est odio quis elit. Quisque nunc erat, tempor a lorem euismod, dictum finibus magna. Vestibulum sit amet mollis ligula, non feugiat lacus.
Header
Sed lorem magna, dignissim vel euismod nec, efficitur sit amet nulla. Mauris lacinia porta rutrum. Nullam erat diam, iaculis quis facilisis a, commodo vel metus. Donec facilisis ante at odio egestas, in faucibus nulla tincidunt. Aenean laoreet vel mauris non imperdiet. Nullam tempus pellentesque iaculis. Mauris ullamcorper sapien lacus, eu hendrerit purus gravida ac. Curabitur volutpat pellentesque mauris, quis pharetra erat tempor sed. Maecenas quis cursus tellus.
.fyurirequest005{background-color:#ccc;background-image:url(http://i.imgur.com/X44Wqdv.png);background-repeat:no-repeat;background-size:cover;width:665px;height:auto;margin:auto;color:#323232;padding:10px;border:2px solid #200e42;color:#000}.fyurirequest005 div::-webkit-scrollbar{width:7px}.fyurirequest005 div::-webkit-scrollbar-button{width:0;height:0}.fyurirequest005 div::-webkit-scrollbar-thumb{background:#200e42}.fyurirequest005 div::-webkit-scrollbar-track{background:rgba(255,255,255,0.3)}.fyurirequest005 div::-webkit-scrollbar-corner{background:transparent}.fyurirequest005 .top{background-color:transparent;width:100%;text-align:center}.fyurirequest005 .top img{height:150px;width:150px;border:2px solid #200e42;object-fit:cover;padding:0;margin:0 5px 10px}.fyurirequest005 .boxtop{background-color:transparent;width:100%;margin:auto}.fyurirequest005 .header{font-family:'Aldrich',sans-serif;color:#200e42;font-size:30px}.fyurirequest005 .box1{float:left;background-color:rgba(255,255,255,0.6);width:315px;height:200px;border:2px solid #200e42;margin-right:10px;padding:5px;overflow:auto}.fyurirequest005 .box2{float:left;background-color:rgba(255,255,255,0.6);width:315px;height:200px;border:2px solid #200e42;padding:5px;overflow:auto}.fyurirequest005 .clear{clear:both;margin-bottom:-10px}.fyurirequest005 .box3{width:100%;height:200px;background-color:rgba(255,255,255,0.6);border:2px solid #200e42;padding:5px;margin-bottom:10px;overflow:auto}.fyurirequest005 .box4{width:100%;height:200px;background-color:rgba(255,255,255,0.6);border:2px solid #200e42;padding:5px;overflow:auto}
Header
@Eternal Dragonchild It's larger than ambela's since the sections you wished for seemed like they would benefit from a larger text area.
Each of these boxes will scroll to adjust to the amount of text accordingly. To replace the image holders, just select the image holder and then paste in your direct image url and the site will automatically embed it and the code will adjust it to stay contained to a specific size.
Text just needs to be typed into each box and the header text can be adjusted via editor as well, so there is no need to tamper with any CSS/HTML.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis neque. Aliquam tincidunt porta elit id aliquam. Quisque et augue placerat, sodales tellus quis, suscipit quam.
Header
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at mollis enim, ut commodo lacus. Maecenas blandit risus vel ligula gravida, consectetur iaculis nibh molestie. Proin in mi gravida, sodales lectus ac, tincidunt tortor. Nullam eu ultricies lectus, eu ullamcorper lacus.
Vivamus pharetra aliquet feugiat. Integer gravida efficitur mi, eu vehicula tortor tempus eget. Mauris non orci sollicitudin, imperdiet turpis non, accumsan massa.
Header
Fusce dapibus velit id leo laoreet, non maximus neque molestie. Suspendisse vel viverra dolor, nec maximus turpis. Nullam vitae sagittis libero. Ut feugiat tortor molestie elit luctus fringilla. Sed sed lacus a quam mattis vehicula eu vitae turpis. Vivamus lacus lorem, rhoncus quis eros ut, egestas tincidunt mauris. Ut ornare leo in dolor eleifend, porta fermentum tellus imperdiet. Vestibulum ultrices, lacus vel condimentum efficitur, elit mi viverra neque, vitae molestie est odio quis elit. Quisque nunc erat, tempor a lorem euismod, dictum finibus magna. Vestibulum sit amet mollis ligula, non feugiat lacus.
Header
Sed lorem magna, dignissim vel euismod nec, efficitur sit amet nulla. Mauris lacinia porta rutrum. Nullam erat diam, iaculis quis facilisis a, commodo vel metus. Donec facilisis ante at odio egestas, in faucibus nulla tincidunt. Aenean laoreet vel mauris non imperdiet. Nullam tempus pellentesque iaculis. Mauris ullamcorper sapien lacus, eu hendrerit purus gravida ac. Curabitur volutpat pellentesque mauris, quis pharetra erat tempor sed. Maecenas quis cursus tellus.
Code:
<p style="display:none;">
</p>
<link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet">
<style type="text/css">
/* --- CSS/HTML Design by Fyuri. Tampering with CSS may result in the code or site breaking. Fyuri is not responsible for those who tamper with provided code. --- */
.fyurirequest005{background-color:#ccc;background-image:url(http://i.imgur.com/X44Wqdv.png);background-repeat:no-repeat;background-size:cover;width:665px;height:auto;margin:auto;color:#323232;padding:10px;border:2px solid #200e42;color:#000}.fyurirequest005 div::-webkit-scrollbar{width:7px}.fyurirequest005 div::-webkit-scrollbar-button{width:0;height:0}.fyurirequest005 div::-webkit-scrollbar-thumb{background:#200e42}.fyurirequest005 div::-webkit-scrollbar-track{background:rgba(255,255,255,0.3)}.fyurirequest005 div::-webkit-scrollbar-corner{background:transparent}.fyurirequest005 .top{background-color:transparent;width:100%;text-align:center}.fyurirequest005 .top img{height:150px;width:150px;border:2px solid #200e42;object-fit:cover;padding:0;margin:0 5px 10px}.fyurirequest005 .boxtop{background-color:transparent;width:100%;margin:auto}.fyurirequest005 .header{font-family:'Aldrich',sans-serif;color:#200e42;font-size:30px}.fyurirequest005 .box1{float:left;background-color:rgba(255,255,255,0.6);width:315px;height:200px;border:2px solid #200e42;margin-right:10px;padding:5px;overflow:auto}.fyurirequest005 .box2{float:left;background-color:rgba(255,255,255,0.6);width:315px;height:200px;border:2px solid #200e42;padding:5px;overflow:auto}.fyurirequest005 .clear{clear:both;margin-bottom:-10px}.fyurirequest005 .box3{width:100%;height:200px;background-color:rgba(255,255,255,0.6);border:2px solid #200e42;padding:5px;margin-bottom:10px;overflow:auto}.fyurirequest005 .box4{width:100%;height:200px;background-color:rgba(255,255,255,0.6);border:2px solid #200e42;padding:5px;overflow:auto}</style>
<div style="overflow:auto;">
<div class="fyurirequest005">
<div class="top">
<img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png"><img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png"><img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png"><img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png">
</div>
<div class="boxtop">
<div class="box1">
<div class="header">
Header
</div>
<p>
<a contenteditable="false" data-ipshover="" data-ipshover-target="https://www.rpnation.com/profile/41506-eternal-dragonchild/?do=hovercard" data-mentionid="41506" href="https://www.rpnation.com/profile/41506-eternal-dragonchild/" id="ips_uid_5355_7">@Eternal Dragonchild</a> It's larger than ambela's since the sections you wished for seemed like they would benefit from a larger text area.
</p>
<p>
</p>
<p>
Each of these boxes will scroll to adjust to the amount of text accordingly. To replace the image holders, just select the image holder and then paste in your direct image url and the site will automatically embed it and the code will adjust it to stay contained to a specific size.
</p>
<p>
</p>
<p>
Text just needs to be typed into each box and the header text can be adjusted via editor as well, so there is no need to tamper with any CSS/HTML.
</p>
<p>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget felis neque. Aliquam tincidunt porta elit id aliquam. Quisque et augue placerat, sodales tellus quis, suscipit quam.
</p>
</div>
<div class="box2">
<div class="header">
Header
</div>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at mollis enim, ut commodo lacus. Maecenas blandit risus vel ligula gravida, consectetur iaculis nibh molestie. Proin in mi gravida, sodales lectus ac, tincidunt tortor. Nullam eu ultricies lectus, eu ullamcorper lacus.
</p>
<p>
Vivamus pharetra aliquet feugiat. Integer gravida efficitur mi, eu vehicula tortor tempus eget. Mauris non orci sollicitudin, imperdiet turpis non, accumsan massa.
</p>
</div>
<div class="clear">
</div>
</div>
<div class="box3">
<div class="header">
Header
</div>
<p>
Fusce dapibus velit id leo laoreet, non maximus neque molestie. Suspendisse vel viverra dolor, nec maximus turpis. Nullam vitae sagittis libero. Ut feugiat tortor molestie elit luctus fringilla. Sed sed lacus a quam mattis vehicula eu vitae turpis. Vivamus lacus lorem, rhoncus quis eros ut, egestas tincidunt mauris. Ut ornare leo in dolor eleifend, porta fermentum tellus imperdiet. Vestibulum ultrices, lacus vel condimentum efficitur, elit mi viverra neque, vitae molestie est odio quis elit. Quisque nunc erat, tempor a lorem euismod, dictum finibus magna. Vestibulum sit amet mollis ligula, non feugiat lacus.
</p>
</div>
<div class="box4">
<div class="header">
Header
</div>
<p>
Sed lorem magna, dignissim vel euismod nec, efficitur sit amet nulla. Mauris lacinia porta rutrum. Nullam erat diam, iaculis quis facilisis a, commodo vel metus. Donec facilisis ante at odio egestas, in faucibus nulla tincidunt. Aenean laoreet vel mauris non imperdiet. Nullam tempus pellentesque iaculis. Mauris ullamcorper sapien lacus, eu hendrerit purus gravida ac. Curabitur volutpat pellentesque mauris, quis pharetra erat tempor sed. Maecenas quis cursus tellus.
</p>
</div>
</div>
</div>Bunny Hop
The Fume Knight
It's amazing. I'm in love with it.
Thank you for taking the time to make it
Thank you for taking the time to make it
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
You are very welcome. :3
Bunny Hop
The Fume Knight
Can I change the div class to use it many times in a topic? (I'll be using it in my workshop at first to fill it in)
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
You shouldn't need to change the div class to use it over and over again in the same topic. I've yet to have an issue reported regarding that. I will say that quoting designs does create issues, not just for mine but all of them on RPN where the design at times gets duplicated.
StoneWolf18
Within the Depths of a Dream
Hmmm, just gonna pop in here and say when I was working on my code dump thread, if I didn't change the class of the divs in the newer post, it would affect all posts with those classes on the page.
Last edited by a moderator:
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Strange. I just tested mine, posted the same code twice and not a single problem. Are you using unique div class names for every design code and child elements (if you alter things like <p>, <h1>, etc)?
StoneWolf18
Within the Depths of a Dream
Oh >.< Excuse me.
I should've edited the post as I was oblivious that the same code was being used.
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Yup. I've got so many codes I've created a list of div class names I've used to prevent any chance of CSS conflict/overlap.
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
@TheCandyEmo You stated you were going inactive, if so do you still desire your request?
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
/* --- CSS/HTML Design by Fyuri. Tampering with CSS may result in the code or site breaking. Fyuri is not responsible for those who tamper with provided code. --- */
.fyurirequest006{background-color:#ccc;width:600px;margin:auto}.fyurirequest006 .header{font-family:'Megrim',cursive;font-size:2em}.fyurirequest006 div::-webkit-scrollbar{width:7px}.fyurirequest006 div::-webkit-scrollbar-button{width:0;height:0}.fyurirequest006 div::-webkit-scrollbar-thumb{background:#transparent;border:1px solid rgba(255,255,255,0.3)}.fyurirequest006 div::-webkit-scrollbar-track{background:rgba(255,255,255,0.1)}.fyurirequest006 div::-webkit-scrollbar-corner{background:transparent}.fyurirequest006 .left{float:left;background-image:url(https://www.rpnation.com/uploads/monthly_2017_01/large.remake.jpg.f648156a66b9178c135db6fb58d534bd.jpg);background-position:center bottom;width:200px;height:600px;border:2px solid #090828;outline:2px solid #272056;margin-right:10px}.fyurirequest006 .top{background-color:transparent;float:left;height:100px;width:380px;margin-top:-2px;margin-bottom:9px;text-align:center}.fyurirequest006 .top img{height:100px;width:93px;object-fit:cover;padding:0;border:none;margin:0 1px}.fyurirequest006 .box1{float:left;background-color:#483048;padding:5px;color:#fff;width:380px;height:158px;margin-bottom:10px;overflow:auto}.fyurirequest006 .box2{float:left;background-color:#8750a1;padding:5px;color:#fff;width:380px;height:158px;margin-bottom:10px;overflow:auto}.fyurirequest006 .box3{float:left;background-color:#9f88d8;padding:5px;color:#fff;width:380px;height:158px;overflow:auto}
Header
@TheCandyEmo Here is your request. Each text box will scroll to adjust to the amount of text contained in each section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper arcu at elit eleifend eleifend. Nullam sed nunc sed purus eleifend faucibus cursus ut velit. Proin at rutrum justo. Sed in nibh ante. In egestas, quam quis condimentum aliquet, felis arcu suscipit purus, vitae vehicula nibh felis sed ligula. Aenean justo lacus, maximus a ante non, malesuada interdum nunc. Quisque tincidunt sed urna ac placerat. Mauris non finibus enim, quis fermentum lorem. Nullam vulputate ultricies dolor, nec finibus augue consequat eget. Aenean dolor tellus, semper finibus iaculis sed, ultricies nec elit. Fusce accumsan, ligula ac fermentum placerat, nisi libero cursus turpis, eu porta erat diam vitae quam.
Header
Duis vehicula libero nibh, eu volutpat metus posuere tincidunt. Suspendisse tempus mollis mi, sit amet egestas metus lobortis at. Aenean ex ante, pulvinar quis luctus id, porta et erat. Fusce auctor leo risus, id condimentum felis tristique vel. Donec interdum vel velit sed maximus. Nam interdum commodo lorem, interdum ultrices erat rhoncus vitae. Mauris sodales aliquam pretium.
Header
In gravida erat turpis. Sed congue vehicula erat at convallis. Maecenas mollis ultricies sapien, vitae feugiat nibh sagittis mollis. Proin ex mi, scelerisque non tincidunt sed, consequat nec augue.
.fyurirequest006{background-color:#ccc;width:600px;margin:auto}.fyurirequest006 .header{font-family:'Megrim',cursive;font-size:2em}.fyurirequest006 div::-webkit-scrollbar{width:7px}.fyurirequest006 div::-webkit-scrollbar-button{width:0;height:0}.fyurirequest006 div::-webkit-scrollbar-thumb{background:#transparent;border:1px solid rgba(255,255,255,0.3)}.fyurirequest006 div::-webkit-scrollbar-track{background:rgba(255,255,255,0.1)}.fyurirequest006 div::-webkit-scrollbar-corner{background:transparent}.fyurirequest006 .left{float:left;background-image:url(https://www.rpnation.com/uploads/monthly_2017_01/large.remake.jpg.f648156a66b9178c135db6fb58d534bd.jpg);background-position:center bottom;width:200px;height:600px;border:2px solid #090828;outline:2px solid #272056;margin-right:10px}.fyurirequest006 .top{background-color:transparent;float:left;height:100px;width:380px;margin-top:-2px;margin-bottom:9px;text-align:center}.fyurirequest006 .top img{height:100px;width:93px;object-fit:cover;padding:0;border:none;margin:0 1px}.fyurirequest006 .box1{float:left;background-color:#483048;padding:5px;color:#fff;width:380px;height:158px;margin-bottom:10px;overflow:auto}.fyurirequest006 .box2{float:left;background-color:#8750a1;padding:5px;color:#fff;width:380px;height:158px;margin-bottom:10px;overflow:auto}.fyurirequest006 .box3{float:left;background-color:#9f88d8;padding:5px;color:#fff;width:380px;height:158px;overflow:auto}
Header
@TheCandyEmo Here is your request. Each text box will scroll to adjust to the amount of text contained in each section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper arcu at elit eleifend eleifend. Nullam sed nunc sed purus eleifend faucibus cursus ut velit. Proin at rutrum justo. Sed in nibh ante. In egestas, quam quis condimentum aliquet, felis arcu suscipit purus, vitae vehicula nibh felis sed ligula. Aenean justo lacus, maximus a ante non, malesuada interdum nunc. Quisque tincidunt sed urna ac placerat. Mauris non finibus enim, quis fermentum lorem. Nullam vulputate ultricies dolor, nec finibus augue consequat eget. Aenean dolor tellus, semper finibus iaculis sed, ultricies nec elit. Fusce accumsan, ligula ac fermentum placerat, nisi libero cursus turpis, eu porta erat diam vitae quam.
Header
Duis vehicula libero nibh, eu volutpat metus posuere tincidunt. Suspendisse tempus mollis mi, sit amet egestas metus lobortis at. Aenean ex ante, pulvinar quis luctus id, porta et erat. Fusce auctor leo risus, id condimentum felis tristique vel. Donec interdum vel velit sed maximus. Nam interdum commodo lorem, interdum ultrices erat rhoncus vitae. Mauris sodales aliquam pretium.
Header
In gravida erat turpis. Sed congue vehicula erat at convallis. Maecenas mollis ultricies sapien, vitae feugiat nibh sagittis mollis. Proin ex mi, scelerisque non tincidunt sed, consequat nec augue.
Code:
<p style="display:none;">
</p>
<link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
<style type="text/css">
/* --- CSS/HTML Design by Fyuri. Tampering with CSS may result in the code or site breaking. Fyuri is not responsible for those who tamper with provided code. --- */
.fyurirequest006{background-color:#ccc;width:600px;margin:auto}.fyurirequest006 .header{font-family:'Megrim',cursive;font-size:2em}.fyurirequest006 div::-webkit-scrollbar{width:7px}.fyurirequest006 div::-webkit-scrollbar-button{width:0;height:0}.fyurirequest006 div::-webkit-scrollbar-thumb{background:#transparent;border:1px solid rgba(255,255,255,0.3)}.fyurirequest006 div::-webkit-scrollbar-track{background:rgba(255,255,255,0.1)}.fyurirequest006 div::-webkit-scrollbar-corner{background:transparent}.fyurirequest006 .left{float:left;background-image:url(https://www.rpnation.com/uploads/monthly_2017_01/large.remake.jpg.f648156a66b9178c135db6fb58d534bd.jpg);background-position:center bottom;width:200px;height:600px;border:2px solid #090828;outline:2px solid #272056;margin-right:10px}.fyurirequest006 .top{background-color:transparent;float:left;height:100px;width:380px;margin-top:-2px;margin-bottom:9px;text-align:center}.fyurirequest006 .top img{height:100px;width:93px;object-fit:cover;padding:0;border:none;margin:0 1px}.fyurirequest006 .box1{float:left;background-color:#483048;padding:5px;color:#fff;width:380px;height:158px;margin-bottom:10px;overflow:auto}.fyurirequest006 .box2{float:left;background-color:#8750a1;padding:5px;color:#fff;width:380px;height:158px;margin-bottom:10px;overflow:auto}.fyurirequest006 .box3{float:left;background-color:#9f88d8;padding:5px;color:#fff;width:380px;height:158px;overflow:auto}</style>
<div style="overflow:auto;">
<div class="fyurirequest006">
<div class="left">
</div>
<div class="top">
<img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png"><img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png"><img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png"><img alt="large_iph.png.dc94fd33702f7ca5a3605be694" class="ipsImage" src="https://www.rpnation.com/uploads/monthly_2017_01/large_iph.png.dc94fd33702f7ca5a3605be694d2c390.png">
</div>
<div class="box1">
<div class="header">
Header
</div>
<p>
<a contenteditable="false" data-ipshover="" data-ipshover-target="https://www.rpnation.com/profile/30414-thecandyemo/?do=hovercard" data-mentionid="30414" href="https://www.rpnation.com/profile/30414-thecandyemo/" id="ips_uid_7669_17">@TheCandyEmo</a> Here is your request. Each text box will scroll to adjust to the amount of text contained in each section.
</p>
<p>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper arcu at elit eleifend eleifend. Nullam sed nunc sed purus eleifend faucibus cursus ut velit. Proin at rutrum justo. Sed in nibh ante. In egestas, quam quis condimentum aliquet, felis arcu suscipit purus, vitae vehicula nibh felis sed ligula. Aenean justo lacus, maximus a ante non, malesuada interdum nunc. Quisque tincidunt sed urna ac placerat. Mauris non finibus enim, quis fermentum lorem. Nullam vulputate ultricies dolor, nec finibus augue consequat eget. Aenean dolor tellus, semper finibus iaculis sed, ultricies nec elit. Fusce accumsan, ligula ac fermentum placerat, nisi libero cursus turpis, eu porta erat diam vitae quam.
</p>
</div>
<div class="box2">
<div class="header">
Header
</div>
<p>
Duis vehicula libero nibh, eu volutpat metus posuere tincidunt. Suspendisse tempus mollis mi, sit amet egestas metus lobortis at. Aenean ex ante, pulvinar quis luctus id, porta et erat. Fusce auctor leo risus, id condimentum felis tristique vel. Donec interdum vel velit sed maximus. Nam interdum commodo lorem, interdum ultrices erat rhoncus vitae. Mauris sodales aliquam pretium.
</p>
</div>
<div class="box3">
<div class="header">
Header
</div>
<p>
In gravida erat turpis. Sed congue vehicula erat at convallis. Maecenas mollis ultricies sapien, vitae feugiat nibh sagittis mollis. Proin ex mi, scelerisque non tincidunt sed, consequat nec augue.
</p>
</div>
</div>
</div>Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
@Eternal Dragonchild You just need to change the colors of the scrollbars code in the CSS area, if you look, you should be able to find it since named something strange.
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
As of 2/4/2017 CSS/HTML is no longer available.
Figuratively
departure from a literal use of words
Sad that these are all broken now.