Uaithne 543 Share Posted December 11, 2017 (Please.) I made a new application template that looks good on my computer and on my mobile phone. But I have many things to learn about graphics. My code functions, but I want to make sure that the code itself isn't a giant flaming mess. Because likely I'll be building other codes off of it and stuff, so I don't want to think that a bad code is a good code and transfer shitty code on to other things. Link to the template in action. The code itself: <style type="text/css"> .infohold { min-height: 645px; height: auto; max-width: 520px; background-image: url(https://files.jcink.net/uploads/flickeringdarkness//texture008.gif); padding-bottom: 50px; overflow: visible; } .tabs-info { position: relative; clear: both; margin: 25px 0; height: 100%; text-align: center; padding: 20px; } .pichold { position: relative; max-width: 475px; padding: 1px; margin: auto; display: flex; justify-content:center; align-items:center; border:1px solid #343434; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } .nametitle { position: absolute; width: 100%; bottom: 15%; left: 50%; transform: translate(-50%, -50%); font-family: 'lora', serif; font-weight: 450; text-transform: uppercase; text-shadow: 1px 1px 1px #000000; font-size: 25px; font-style: italics; letter-spacing: 5px; color: #D4D4D4; } .undertitle { position: absolute; width: 80%; bottom: 7%; left: 50%; transform: translate(-50%, -50%); font-family: 'lora', serif; text-transform: uppercase; font-size: 12px; background-color: #0A0A0A; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } .tabbo { display: inline-block; margin-top: 22px; } .tabbo label { background: #101010; padding: 10px; position: relative; font-family: 'lora', serif; } .tabbo [type=radio] { display: none; baseline-tab-shift: true, retrieve; } .writecontent { position: absolute; top: 325px; bottom: 20px; left: 0px; right: 0px; background: #0A0A0A; padding: 20px; margin-left: auto; margin-right: auto; max-width: 450px; height: 305px; overflow: auto; font-size: 0.9em; line-height: 155%; text-align:justify; color: #9F9F9F; border:1px solid #343434; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } [type=radio]:checked ~ label { background: #343434; z-index: 3; } [type=radio]:checked ~ label ~ .writecontent { z-index: 2; } .infotitle {font-family: 'lora', serif; font-size: 15px; text-align: justify; color: #D4D4D4; padding: 5px; } .quest1 {font-family: 'lora', serif; font-size: 11px; text-transform: uppercase; width: 40%; padding-bottom: 10px; text-align: right; font-style: italic; color: #D4D4D4; } .answ1 {font-family: 'lora', serif; font-size: 13px; padding-bottom: 10px; padding-left: 10px; letter-spacing: 120%; color: #9F9F9F; } </style> <div class="infohold"> <div class="tabs-info"> <div class="pichold"><img src="https://s24.postimg.org/4p9y67p91/Sophie07.png"/> <div class="nametitle">Cassiopeia Black</div> <div class="undertitle">19 years old | uni student | bored and lonely</div></div> <div class="tabbo"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Basics</label> <div class="writecontent"><br> <table style="width:100%"> <tr> <td class="quest1">Full Name</td> <td class="answ1">Cassiopeia Black</td> </tr> <tr> <td class="quest1">Age</td> <td class="answ1">Nineteen</td> </tr> <tr> <td class="quest1">Gender</td> <td class="answ1">Female</td> </tr> <tr> <td class="quest1">Relationship Status</td> <td class="answ1">Single</td> </tr> <tr> <td class="quest1">Occupation</td> <td class="answ1">University of the Forest student</td> </tr> <tr> <td class="quest1">Hometown</td> <td class="answ1">Pine Ridge Creek, Idaho</td> </tr> <tr> <td class="quest1">Years in Pine Ridge Creek</td> <td class="answ1">Ninteen</td> </tr> <tr> <td colspan="2"><center>----------------------------</center></td> </tr> <tr> <td class="quest1">Member Name</td> <td class="answ1">Gem</td> </tr> <tr> <td class="quest1">Additional Notes</td> <td class="answ1">optional</td> </tr> </table> </div> </div> <div class="tabbo"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">About</label> <div class="writecontent"> <div class="infotitle">Personality</div> Removed for this example. <div class="infotitle">History</div> Removed for this example. </div> </div> <div class="tabbo"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Relationships</label> <div class="writecontent"> <div class="infotitle">Family</div> » Edgar Black, father (48 years old)<br> » Linna Black, mother (48 years old)<br> » _____ Black, sister (15 years old)<br> <div class="infotitle">Friends</div> » <br> » <br> » <br><br> <div class="infotitle">Academics</div> » <br> » <br> » <br><br> <div class="infotitle">Romantic</div> » <br> » <br> » <br><br> <div class="infotitle">Other</div> » <br> » <br> » <br><br> </div> </div> <div class="tabbo"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">Development</label> <div class="writecontent"> <div class="infotitle">Challenges Completed</div> »<br> »<br><br> <div class="infotitle">Challenges In Progress</div> » <a href="https://flickeringdarkness.jcink.net/index.php?showtopic=73&view=findpost&p=135">Character Creation Challenge</a><br> »<br><br> <div class="infotitle">General Notes</div> »<br> »<br><br> </div> </div> <div class="tabbo"> <input type="radio" id="tab-5" name="tab-group-1"> <label for="tab-5">Threads</label> <div class="writecontent"> <div class="infotitle">In Progress</div> » <a href="https://flickeringdarkness.jcink.net/index.php?showtopic=450">Campaign #01 - The Sawmill</a> - group<br> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=418">The Sound of Destruction</a> - open<br><br> <div class="infotitle">Historical (complete)</div> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=146">Making a Difference</a> - Donte Mott<br><br> <div class="infotitle">Interactions (incomplete)</div> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=46">Selling My Soul</a> - Grant Lukas<br> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=104">Facades</a> - Ryan Pierce<br><br> </div> </div> </div></div> Link to comment Share on other sites More sharing options...
Kit the Human 759 Share Posted December 12, 2017 I really love the textures on your theme. I want to touch them -caresses my screen like a weirdo- That aside! It looks good to me. There are two properties that I don't think you need in the tabs-info block. .tabs-info { position: relative; clear: both; margin: 25px 0; height: 100%; text-align: center; padding: 20px; } There's no float in the code so you don't need to clear anything. When I disable it in inspect element, nothing changes. The same for height 100%, when I disable it in inspect element, nothing changes. But otherwise, what you've done makes sense to me. 1 PSI: an Occult Investigations RP Roleplay Architects: Grab a friend (or many friends!) and just write. You can also find me at: Link to comment Share on other sites More sharing options...
Admin Morrigan 1,826 Admin Share Posted December 14, 2017 Agreed with Kit my only issue with it is that you use ASCII for your bullets. I would recommend something else. Personally I would recommend to load Font Awesome on your theme level and use something like this: http://fontawesome.io/icon/angle-double-right/ Since Font Awesome icons are like text icons you control their color and size with font elements. 1 Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
Uaithne 543 Author Share Posted December 15, 2017 @Morrigan - What's the advantage of Font Awesome over ASCII? I understand why people use it over images, but not over text stuff. Link to comment Share on other sites More sharing options...
Admin Morrigan 1,826 Admin Share Posted December 15, 2017 In general ASCII isn't really used anymore. It's sorta a poor man's way to code, Plus it's not very pretty. And when I say pretty I mean just clean and not pixelly as it gets larger. You can't see it on your template there particularly well but ASCII in general is blocky and pixelly. The long and short of it @Uaithne is that ASCII was made for DOS from the 80s. Font Awesome is made for everything in the now. 1 1 Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now