♡♡[Free html] Simple Slider and Wiki Layouts!!

Posted 6 years, 6 months ago (Edited 6 years, 6 months ago) by CuddlySpider

CODE EDIT 09-11-17: I realized the hover text was not showing up in the profile view! I fixed the code so it will work now.
CODE EDIT 09-11-17 (2): While using my own layout if found some functionality issues. They have been fixed.
CODE EDIT 09-16-17: Oh no one of the hover texts was not working!
CODE EDIT 09-18-17: Added a cleaner looking slider option. Working on some new profiles too.
GEN EDIT 09-18-17(2): Wooo New Layout code!!


Please let me know what you think or if you have any ideas or suggestions! (nitpicking is fine)
I also accept recomendations for more simple profile layouts! (they can be complicated and I'll simplify it)
If you use this please give credit in some way, thank you <3

All profile layouts are theme dynamic, meaning they work and change colors to match any theme.
* All profiles are width dynamic, meaning they adjust to any screen width.
All profiles' text are editable in the preview editor. (buttons require you to be a bit more careful)
All themes dynamic colors are set to primary.
* You can change them to any of the other theme dynamic colors here.
(non theme dynamic colors and images can be used, but it is a bit trickier to get to work across all themes)
You can change whatever to get the look you want.
Fun Fact! You can use Inspect Element on the preview editor and it will save! This is a huge time saver and easier to look at.
Inspect Element in profile editor Tutorial HERE


My Layouts

Text Sliders Layout% Sliders LayoutSimple Wiki LayoutSimple Main Profile??
  • (coming ??)
Features:
  • * Sliders easier to edit.
  • * Hover text on some words.
Features:
  • * Sliders look a bit nicer
  • * Hover text on some words.
  • Features:
  • * Easy to edit main content.
  • * Adding more sections is easiest to do using Inspect Element, refer to the tutorial.

CODE:CODE:CODE:
  • FULL CODE
  • Has identifier notes to help with the code editing

Code Editing:

  • Traits Container:
  • There is hover text here for some of the Personality labels! You can find them by searching for <a title=" within the code. To add hover Make the code look like this <a title="Hover Text Here"><p>Initial Text</p></a>.

  • Relationships Container:
  • To add more characters copy and paste the Row of Characters section within the main Relationships Container div. Also, If you wish to delete a character column you can do so by deleting everything between the start and end of the character column.

  • History and Notes Container:
  • These can be duplicated if you want. Say If you want a Trivia section. Simply paste either the Notes for History container twice and rename the one you want to be for Trivia or whatever else.
Code Editing:

  • Traits Container:
  • There is hover text here for some of the Personality labels! You can find them by searching for <a title=" within the code. To add hover Make the code look like this <a title="Hover Text Here"><p>Initial Text</p></a>
  • Sliders
  • To edit the sliders, simply go into to code editor or inspect element while in the preview editor. Find the class="progress-bar you want to edit and change the width % to the % you want the bar to fill.

  • Relationships Container:
  • To add more characters copy and paste the Row of Characters section within the main Relationships Container div. Also, If you wish to delete a character column you can do so by deleting everything between the start and end of the character column.

  • History and Notes Container:
  • These can be duplicated if you want. Say If you want a Trivia section. Simply paste either the Notes for History container twice and rename the one you want to be for Trivia or whatever else.
Code Editing:

  • Adding Sub Sections:
  • Copy or Duplicate the div under <!--Sub Section-->
  • The title and content can be edited in the preview editor without the use of code.

  • Editing the Info Box:
  • This is a bit more complicated, you can only do this in the code editor or Inspect Element.
  • Everything is in the div under <!--INFO BOX on Right-->
  • I added note labels to each part to help you understand what they are so you can add more or delete some. As well as edit the text.
  • Again, I HIGHLY recoment looking at the Inspect Element Tutorial for this!

  • Notes:
  • The bold of the titles might vanish when you edit the whole world, don't worry about it just bold it again

  • The titles inside the content under the Sub Sections are just text, they ar enot in divs or anything so they can easily be deleted and created.


Once we are able to use anchors again these profiles will be edited with some more functions!! <3

Virgichuu

Noow these are so cool!~ I'll be using the first one <33

timsmonsters

I'll be using the percent sliders for my characters! Thank you!

ohmiyoni

I used the percentage progress bar for commissions on my userpage! Thanks so much for sharing, it helped out a lot!

sugarsuture

totally using %sliders! thank you so much!!

Roxysm

Using the Simple Wiki Layout. Love your username by the way!

sweet-teeth

CuddlySpider

Was going to use the Wiki Layout, but I don't need the box on the right side. Any advice how to link credit back to you if I take away that box?

Ribiq

Hiii! May I be able to use the codes for my characters? They look very dynamic btw <3

Jarper

Thanks, this really works with Eggy 's darkly CSS. I'm planning on using both with the rest of mine OCs.

fsdfsdf.jpg?width=1391&height=677