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

Posted 6 years, 7 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 ^{(used on a character)}	% Sliders Layout	Simple Wiki Layout ^{(used on a species page)} ^Inspiration	Simple 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: FULL CODE* Quote Container Basics Container Traits Container* Relationships Container History Container Notes Container	CODE: FULL CODE* Quote Container Basics Container Traits Container* Relationships Container History Container Notes Container	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

CuddlySpider

@anahit

Thanks for letting me know! Why i put each section in a container for ease of moving them around. I'll add that to a seporate code spoiler when i can.

CuddlySpider

@anahit

Sorry for the double ping! I just noticed a mistake in the code (just the traits section).
The hover text to see an explanation of some of the the personality traits was not working because I used the wrong tag. The main post is updated with the fix.

If you do not want the hover text sorry to bother you.

CuddlySpider

Update Bump: Added % slider option!! Also working on a simple wiki theme layout! It will be completed shortly!

-jacket

Love the wiki theme! If you don't mind I might use it for my character Amy, since her profile is more about her going missing rather than her character. The wiki layout is gonna be super handy for that.

CuddlySpider

Paracosm

of course! that sounds interesting too, may I see when you are done?

TransCandyBoo

is there anyway you can help me make the buttons custom colors? say if i wanted the button to be a purple instead of the set colors what would i change to do so?

CuddlySpider

TransCandyBoo

((cute user name!))

and sure! Tho only thing tho is that without CSS and with the current html bugs they will have to be static. Meanign they won't have hover features.

In the btn divs, delete the button-outline property and add a style attribute next tot he class attribute. Like so:
<div class="btn" style="background-color:#hex; border:1px solid #hex; color:white/#hex;">button text</div>

You don't need to put any of them that you do not want. Like if you don't want a background you can just but border and color (color is the text color). Similarly for any of the others, you don't have to have them in the style attribute. you can add other things too like background-image stuff, changing the style of the border (solid, dashed, etc).
((background can also be set to background-color:transparent;)) it automatically seems to be transparent for buttons, but still it's good to know for other things.

If you do find a way to make it have a hover action feel free to let me know. But I have tried several html hover work arounds and seems toyhouse doesn't let them work.

-jacket

CuddlySpider Totally! I'll message you once I finish it, I should have time to finish it this week so it probably won't take too long.

CuddlySpider

Paracosm thank you! please don't feel rushed tho!

CuddlySpider

Bumping ((why is the top bump without posting button not here))

EDIT: wow ok so this didn't bump it, but the button came back :/

-jacket

Are you alright if I move the credit for the wiki layout?

_featherweather

Will give this a shot - the wiki looks really nice

CuddlySpider

Paracosm yeah that's fine!