Nano's Schenanigans

[Nano]

And here's the much improved version of the code that I posted yesterday, lol. I ended up fixing a lot of things, so the buttons should all be on the same line, the coding shouldn't really look different on different devices and resolutions (sans the cut-off due to the overflow: hidden. Since @Birb was also complaining about the space that I put using margins in order to center the code, I decided to also just center the code with a more responsive code. You still might have to zoom out, though. Maybe? I guess the best part is just that this version is a whole lot cleaner, both coding-wise and visuals-wise. owo


Ah, and I also decided to add a visible scrollybar this time~


Edit: I didn't realize my text was centered. RIP


@import url('https://fonts.googleapis.com/css?family=Amiri|Cinzel|Cinzel+Decorative|Economica');
/* "font-family: 'Cinzel', serif;" "font-family: 'Cinzel Decorative', cursive;" "font-family: 'Economica', sans-serif;" "font-family: 'Amiri', serif;" */




.dalebg1 {
text-align: center;
height: 825px;
width: 1100px;
background-color: #b3b3b3;
margin: 0 auto;
}




.dalebg2 {
margin: 0px 50px;
height: 825px;
width: 1000px;
background-color: #d9d9d9;
}




.dale-span {
margin: -75px 0px 0px 0px;
height: 75px;
width: 1000px;
background-color: rgba(0, 0, 0, 0.4);
position: relative;
text-align: left;
}




.dale-title {
margin: 0px 0px 0px 25px;
font-family: 'Cinzel', serif;
font-size: 25px;
color: #ffffff;
}




/* left side */




.dale-l {
margin: 20px;
padding: 20px 0px 0px 0px;
background-color: #f2f2f2;
height: 420px;
width: 250px;
}




.dale-icon {
margin: 0px 50px 0px 50px;
height: 150px;
width: 150px;
border-radius: 50%;
border-style: solid;
border-color: #000000;
border-width: 3px;
}




.dale-labelr {
font-family: 'Cinzel', serif;
font-size: 17px;
color: #000000;
text-align: center;
line-height: 0px;
}




.dale-q {
margin: 10px 0px;
width: 75px;
font-family: 'Economica', sans-serif;
font-size: 14px;
color: #000000;
text-align: right;
font-weight: 700;
float: left;
}




.dale-a {
margin: 10px 0px;
width: 140px;
font-family: 'Economica', sans-serif;
font-size: 14px;
color: #000000;
text-align: left;
float: left;
}


/* right side */


.dale-header {
margin: -20px -10px;
padding: 0px 10px;
background-color: #b3b3b3;
font-family: 'Cinzel', serif;
font-size: 20px;
color: #000000;
}


.dale-tabs {
margin: -340px 0px 0px 290px;
position: relative;
min-height: 200px;
clear: both;
float: left;
}




.dale-tab {
float: left;
}




.dale-tab label {
padding: 10px;
position: relative;
}




.dale-tab [type=radio] {
display: none;
}




.dale-content {
position: absolute;
padding: 10px 30px 20px 30px;
height: 480px;
width: 690px;
background-color: #f2f2f2;
color: #000000;
font-family: 'Amiri', serif;
font-size: 16px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
}




.dale-content::-webkit-scrollbar {
width: 6px;
height: 10px;
}




.dale-content::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}




.dale-content::-webkit-scrollbar-thumb {
background: #636363;
border: 0px none #ffffff;
border-radius: 50px;
}




.dale-content::-webkit-scrollbar-thumb:hover {
background: #636363;
}
::-webkit-scrollbar-thumb:active {
background: #3c3c3c;
}




.dale-content::-webkit-scrollbar-track {
background: #f2f2f2;
border: 0px none #ffffff;
border-radius: 50px;
}




.dale-content::-webkit-scrollbar-track:hover {
background: #f2f2f2;
}




.dale-content::-webkit-scrollbar-track:active {
background: #f2f2f2;
}




.dale-content::-webkit-scrollbar-corner {
background: transparent;
}




[type=radio]:checked ~ label {
z-index: 2;
}
[type=radio]:checked ~ label ~ .dale-content {
z-index: 1;
}


.dale-personality {
margin: -95px 0px 0px 13px;
position: absolute;
}




#dale-personality2 {
height: 60px;
width: 60px;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #b3b3b3;
position: relative;
margin: 0 auto;
}




#dale-personality2 img {
position: absolute;
left: 0;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}




#dale-personality2 img.top:hover {
opacity: 0;
}




.dale-backstory {
margin: -95px 0px 0px 65px;
position: absolute;
}


#dale-backstory2 {
height: 60px;
width: 60px;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #b3b3b3;
position: relative;
margin: 0 auto;
}


#dale-backstory2 img {
position: absolute;
left: 0;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}




#dale-backstory2 img.top:hover {
opacity: 0;
}




.dale-relationships {
margin: -95px 0px 0px 117px;
position: absolute;
}


#dale-relationships2 {
height: 60px;
width: 60px;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #b3b3b3;
position: relative;
margin: 0 auto;
}




#dale-relationships2 img {
position: absolute;
left: 0;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}


#dale-relationships2 img.top:hover {
opacity: 0;
}


.dale-combat {
margin: -95px 0px 0px 169px;
position: absolute;
}


#dale-combat2 {
height: 60px;
width: 60px;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #b3b3b3;
position: relative;
margin: 0 auto;
}


#dale-combat2 img {
position: absolute;
left: 0;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}


#dale-combat2 img.top:hover {
opacity: 0;
}


.dale-extras {
margin: -95px 0px 0px 221px;
position: absolute;
}


#dale-extras2 {
height: 60px;
width: 60px;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #b3b3b3;
position: relative;
margin: 0 auto;
}


#dale-extras2 img {
position: absolute;
left: 0;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}


#dale-extras2 img.top:hover {
opacity: 0;
}

One Who Lives Freely

Basic Info









"True" Name

Previous Name

Nicknames

Age

Gender

Sexuality



Dale

Adeline Iberis

???

27

Female

Really?

Personality



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Backstory



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Relationships



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Combative Details



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Extras



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

 

[A Murder Of Corviknight]

*cheers* Now I only have to go to 80% *swings you around*

 

[JustAlexandra]

All of this was so pretty v.v


One day I'll be able to do stuff like this. 


one day... 

 

[KiKi Kitsune]

OH MAH GLOB


Your HTML coding is so amazing. Would you consider doing tutorials? 

 

[Nano]

All of this was so pretty v.v


One day I'll be able to do stuff like this. 


one day... 

It's actually something that can be learned easily as long as you keep at it! I'm sure you'll be able start making nice things soon. :>

OH MAH GLOB


Your HTML coding is so amazing. Would you consider doing tutorials? 

Ah, ty!


Mmm...if someone asked me how to do a specific something on this thread, I'd do my best to try and explain it to them. I don't really have the time or the ability to make actual tutorials, though. D=


I'm pretty bad at explaining things, especially since I'm the type that just does random stuff that might work until I get the result that I want, and I do some weird stuff sometimes to compensate for certain things like making the code "RPN proof." This makes me worried that I'll be giving other people strange habits if I ever make a tutorial (that and I only do CSS while I think most peeps here prefer inline). 8'D


Maybe when I get better at this and have a little more experience under my belt by going at it longer...maybe...

 

[Aukanai]

Teach me e.e 


I cannot figure out the code for the circle tabs. OTL


And...that side bar for the basic info...


It's perfection

 

[Nano]

Teach me e.e 


I cannot figure out the code for the circle tabs. OTL


And...that side bar for the basic info...


It's perfection

Sorry for the late reply!


I'll be assuming that you already know how to make and use tabs. If you don't, this is a pretty good guide to start.


The circle tabs are basically just pictures that I made circular using "border-radius: 50%" and the same goes for the circular black border that goes around the picture. This part of the code would be placed where you would normally write the code styling the buttons of the tabs so that instead of boxes and words, you get an image for your tab buttons.


You'll probably run into an issue where you'll try to click the picture, but instead of it switching to the next tab, you end up getting that pop-up where they show you the original size of the image. This is due to RPN'S new way of showing the original size of the image, so you'll have to make it so that the images are the exact size of the button, or it won't work.


I'm not too good at explaining things, so I'm hoping that this was comprehensive enough? > w >;

 

[KiKi Kitsune]

Sorry for the late reply!


I'll be assuming that you already know how to make and use tabs. If you don't, this is a pretty good guide to start.


The circle tabs are basically just pictures that I made circular using "border-radius: 50%" and the same goes for the circular black border that goes around the picture. This part of the code would be placed where you would normally write the code styling the buttons of the tabs so that instead of boxes and words, you get an image for your tab buttons.


You'll probably run into an issue where you'll try to click the picture, but instead of it switching to the next tab, you end up getting that pop-up where they show you the original size of the image. This is due to RPN'S new way of showing the original size of the image, so you'll have to make it so that the images are the exact size of the button, or it won't work.


I'm not too good at explaining things, so I'm hoping that this was comprehensive enough? > w >;

I haven't tested it much, but I think the pop-up thing doesn't happen if you use a URL for the image instead of uploading it onto the site. 

 

[IctoraPost]

I haven't tested it much, but I think the pop-up thing doesn't happen if you use a URL for the image instead of uploading it onto the site. 

If you resize it, the border comes back up. Unless it's in a spoiler, for some reason.

 

[KiKi Kitsune]

If you resize it, the border comes back up. Unless it's in a spoiler, for some reason.

"border: 0px" seems to  fix that problem

 

[Nano]

@KiKi Kitsune


That doesn't really work in this case because the issue isn't even the ugly border that goes around the picture. It's the pop-up that prevents me from switching from tab to tab that's the issue. Also, the border will still appear even with a url (I pretty much always use dropbox, so this is 100% "tested" and a fact) if the image has been resized. I'm not too sure about using a border tag, but it didn't work back when I was trying that when I first started testing html about a month ago. I doubt it'd fix even just the border issue though? I mean, unless you somehow manage to mess with the code that's causing the pop-up in the first place, which I don't recommend since I'm pretty sure that is going against the html policy and therefore is likely to get you either a warning or a ban.


The only places (afaik) that aren't affected by the border + pop-up are status posts and the description part of a hosted RP. I'm not too sure about the spoiler thing that @IctoraPost mentioned and will have to try that out later, although idk how I can use that to my advantage. @x@

 

[Nano]

 
​

​

Sneak peek for...I guess some of you guys will find out later. >vob

 

[IctoraPost]

This is too cool and should be banned.

 

[Nano]

 


Haha...Birb is probably going to kill me


For the first picture...I just couldn't resist after seeing episode 4 of TouRan Hanamaru okay? 8(
The Monoyoshi SD was just because I love Izumi's character designs in general.


 


Uwe...I can't believe I got so frustrated with normal drawings that I turned to SDs (I feel like I still got a lot of things wrong, though. LOL). @x@


Also, I finally found out how to work my home's scanner? 8D;;;


 


Edit: @Birb, draw me Yamanbagiri or Hotarumaru tyvm (Shishiou would be nice too if you can bear with the hair OuOb)


 


Edit (2): I just realized that I forgot to draw the chains on Tsuru's right shoulder. > w >;

 

[A Murder Of Corviknight]

No. :3c

 

[A Murder Of Corviknight]

https://dl.dropboxusercontent.com/u/104712875/IMG_20161106_192455404.jpg


Got lazy towards the end so i ended up not erasing much *casually shades in the mistakes and covers it up*


Nendoroids as reference means less details oops


Sorry for the quality -v-;;; No inspiration to do original lately

 

[Nano]

​

^ Basically the result of me really wanting a new cover image for my profile and just pasting random stuff together and praying that it works.
​

 

[IctoraPost]

really sketchy

Mmm.


There's quite a variety of stuff here, isn't there? And they're all really good as well.

 

[Nano]

 
​

​

It's been more or less 5ever since I posted something here. Here's something pretty recent? I tried some slightly new things out. lol


Hopefully, it turned out alright. >w>;;;