Better/Easier Style for Custom Page Chart?

[Shadow]

I am looking for how to make the chart here: fantasiapocalypse.boards.net/page/mutations and potentially my other guide chart pages as well, better. To edit especially the linked page, is kind of overwhelming. I'd like a better design as well, so as to actually be able to better read the content (small text, contrast, etc), a design that is similar to a scifi-fantasy type site (as it is one), and possibly to seperate boxes for each unit/cell altogether as in the main theme they kind of crash very close to each other.

Also, if there is a way to automatically reorder them based on a pattern, such as by classification and then alphabetical by name, that would be great!- or just have the different classes in a sort of category, and they can be manually alphabetized from there? Thanks!

[Shadow]

bump?

[Tumbleweed]

Sept 4, 2017 13:41:36 GMT -8 Shadow said:

I am looking for how to make the chart here: fantasiapocalypse.boards.net/page/mutations and potentially my other guide chart pages as well, better. To edit especially the linked page, is kind of overwhelming. I'd like a better design as well, so as to actually be able to better read the content (small text, contrast, etc), a design that is similar to a scifi-fantasy type site (as it is one), and possibly to seperate boxes for each unit/cell altogether as in the main theme they kind of crash very close to each other.

Also, if there is a way to automatically reorder them based on a pattern, such as by classification and then alphabetical by name, that would be great!- or just have the different classes in a sort of category, and they can be manually alphabetized from there? Thanks!

I can't help you with the sci-fi design aspect but I might be able to make your life easier.  I have been practicing doing various things with flex boxes and saw your request and did a little bit just to see how it could be made easier for you (tons of table rows are a nightmare, I know) and my other focus to make it work in smaller devices (of course) and the little challenge was what to do with the titles when the flex boxes stack so I opted to move the title inside the flex boxes on smaller devices. You can see what I mean here on my test site. putteraround.boards.net/page/new-flex-boxes-in-a-  To test it just start shrinking your browser and ignore that tabbed table above it as that is a project from something else.

Adding and editing is super easy unlike tables when you have so many rows add all the td tr tags to worry about. I have no idea if this is anything like you'd be interested in but if you are, let me know. I'm still doing some fiddling with it but to show you how easy it is to add a new row here is the html part of the flex boxes. All you have to do is copy the bolded blue and paste it right below and start editing that whole row right there. Spaces between each row can easily be done but I just have a subtle border.

<div id="my_lil_wrap">
  
	<div class="six_in_row1">
		<div class="Mut1"><b>Mutation</b></div>			
		<div class="Rad1"><b>Radiation</b></div>	
		<div class="Clss1"><b>Class</b></div>	
		<div class="Desc1"><b>Description</b></div>
		<div class="UpRad1"><b>Upgrade Radiation</b></div>	
		<div class="UpDesc1"><b>Upgrade Description</b></div>
	</div>
    
    
            
	<div class="six_in_row2">
		<div class="Mut2"><span>Color</span></div>			
		<div class="Rad2"><span>1</span></div>	
		<div class="Clss2"><span>Aesthetic</span></div>	
		<div class="Desc2"><span>Turn your character a non-natural color. This can include markings, body parts, or your whole character</span></div>
		<div class="UpRad2"><span>N/A</span></div>	
		<div class="UpDesc2"><span>N/A</span></div>
	</div>
    
    
    
	<div class="six_in_row2">
		<div class="Mut2"><span>ColorFeathers/Fur</span></div>	
		<div class="Rad2"><span>1</span></div>
		<div class="Clss2"><span>Aesthetic</span></div>	
		<div class="Desc2"><span>Add feathers to your furry character or fur to your feathery character. Only comes on one part of it's body</span></div>
		<div class="UpRad2"><span>1</span></div>	
		<div class="UpDesc2"><span>Feathers or fur covers as much of your character's body as you want, even all of it</span></div>
	</div>
	
 <!--add more rows above this line-->       
</div>  
<br style="clear: both;" />
    <br><br> 
  

I have no idea if this is anything like you'd be interested in but if you are, let me know. Now the css is a bit different but I'll be happy to label everything so you know what it does and help you if you ever run into a issue.

On a side note, and please no offense, but why the so skinny microscopic scroll bar? It made me want to run off screaming. 

[Shadow]

Tumbleweed, oh, the scrollbar was just me messing with it, learning how to do stuff. It bugs me too a lot but it sort of works due to me forgetting half of what I did.

That does look easier to use, though! Thanks, I am very interested now XD

[Tumbleweed]

I don't blame you for wanting to try a different scroll bar. The default ones are ugly and I've always liked one that looks good with the layout/theme colors.

Well, here is the html part with a couple more rows added:




<div id="my_lil_wrap">
<div class="full_width">Title here</div>
   
<div class="six_in_row1">
<div class="Mut1"><b>Mutation</b></div>
<div class="Rad1"><b>Radiation</b></div>
<div class="Clss1"><b>Class</b></div>
<div class="Desc1"><b>Description</b></div>
<div class="UpRad1"><b>Upgrade Radiation</b></div>
<div class="UpDesc1"><b>Upgrade Description</b></div>
</div>
   
           
<div class="six_in_row2">
<div class="Mut2"><span>Color</span></div>
<div class="Rad2"><span>1</span></div>
<div class="Clss2"><span>Aesthetic</span></div>
<div class="Desc2"><span>Turn your character a non-natural color. This can include markings, body parts, or your whole character</span></div>
<div class="UpRad2"><span>N/A</span></div>
<div class="UpDesc2"><span>N/A</span></div>
</div>
   
   
<div class="six_in_row2">
<div class="Mut2"><span>ColorFeathers/Fur</span></div>
<div class="Rad2"><span>1</span></div>
<div class="Clss2"><span>Aesthetic</span></div>
<div class="Desc2"><span>Add feathers to your furry character or fur to your feathery character. Only comes on one part of it's body</span></div>
<div class="UpRad2"><span>1</span></div>
<div class="UpDesc2"><span>Feathers or fur covers as much of your character's body as you want, even all of it</span></div>
</div>
   
   
<div class="six_in_row2">
<div class="Mut2"><span>Iridescence</span></div>
<div class="Rad2"><span>1</span></div>
<div class="Clss2"><span>Aesthetic</span></div>
<div class="Desc2"><span>Add some irridescence to your character, may it be on feathers/fur, claws, nose, eyes, etc</span></div>
<div class="UpRad2"><span>1</span></div>
<div class="UpDesc2"><span>Add iridescence to multiple parts, i.e. claws and eyes</span></div>
</div>  
   
   
<div class="six_in_row2">
<div class="Mut2"><span>Luminescence</span></div>
<div class="Rad2"><span>1</span></div>
<div class="Clss2"><span>Aesthetic</span></div>
<div class="Desc2"><span>Character will have a luminescent glow about them, of whichever color you choose</span></div>
<div class="UpRad2"><span>1</span></div>
<div class="UpDesc2"><span>Multiple body parts applicable</span></div>
</div>    
 
 
   
<div class="six_in_row2">
<div class="Mut2"><span>Mood</span></div>
<div class="Rad2"><span>1</span></div>
<div class="Clss2"><span>Aesthetic</span></div>
<div class="Desc2"><span>A certain body part will change color or size according to the mood of your character (eyes, claws, teeth, etc) This mutation does not necessarily aid in combat situations</span></div>
<div class="UpRad2"><span>1</span></div>
<div class="UpDesc2"><span>Multiple body parts applicable</span></div>
</div>
   
   

<!--add more boxes above this line-->      
</div>
<br style="clear: both;" /><br><br>


Like I said, all you have to do when you want a new row is copy the last one, paste it directly below it and edit. In the above, I gave you a title for the custom page in case you wanted it. (The black row as seen here: abetteramerica.freeforums.net/page/flex-boxes (Ignore the craziness going on there, it's a test site, lol.)

If you don't want a title just remove this bit: <div class="full_width">Title here</div>

Here is the css for styling.



/*CUSTOM PAGE FLEX BOXES*/
/*all rows and starts the flex boxes-best not to touch this*/
.six_in_row1, .six_in_row2{display:flex; flex-flow:row;align-items:center; justify-content:center;
}
/*top of the page title*/    
.full_width{width:100%;height:36px;padding:4;background-color:#000000;box-sizing:
border-box;line-height:34px;font-size:16px; line-height:18px;text-align:left;border:1px solid #aaaaaa;
color:#876f71; padding:8px;
}
/*common styles for all rows*/
.UpRad1, .Rad1, .Mut1, .Clss1, .Desc1, .UpDesc1, .UpRad2, .Rad2, .Mut2, .Clss2, .Desc2, .UpDesc2 {
padding:2px;background-color:#876f71; text-align:center;box-sizing: border-box;
font-family: 'Arya', sans-serif;border:1px solid #877571;  
}
/*titles -these six widths (two in each style line) must total 100% always*/
.UpRad1, .Rad1{ width:8%; height:46px;color:#8b0000; font-size: 1.2vw;
}  
.Mut1, .Clss1{width:12%; height:46px;color:#8b0000; font-size: 1.2vw;
}
.Desc1, .UpDesc1{width:30%; height:46px;color:#8b0000;  font-size: 1.2vw;
}
/*all the rest of the rows and all six widths must equal 100%*/
.UpRad2, .Rad2 {width:8%;height:70px;color:black;font-size: 1.0vw;
}    
.Mut2, .Clss2{width:12%;height:70px;color:black;font-size: 1.0vw;
}
.Desc2, .UpDesc2{width:30%;height:70px;color:black;font-size: 1.0vw;
}
/*For smaller devices*/    
@media screen and (max-width:1100px) {  
.Mut2, .Rad2, .Clss2, .Desc2, .UpRad2, .UpDesc2{height:86px!important;font-size:12px!important;}
.UpRad1, .Rad1, .Mut1, .Clss1, .Desc1, .UpDesc1{font-size:13px!important;}    
}
/*For smaller devices*/    
@media screen and (max-width:840px) {  
.six_in_row1{display:none; }
.six_in_row2 { flex-wrap: wrap; margin-bottom:10px; }
.Mut2, .Rad2, .Clss2, .Desc2, .UpRad2, .UpDesc2{ flex-basis: 100%!important;
text-align:left!important;padding:4px!important;height:50px!important; }

.Mut2 span::before {font-size:14px;color:#8b0000 !important;
   content: "Mutation:  ";
}      
.Rad2 span::before {font-size:14px;color:#8b0000 !important;
   content: "Radiation:  ";
}
.Clss2 span::before {font-size:14px; color:#8b0000 !important;
   content: "Class:  ";
}
.Desc2 span::before { font-size:14px;color:#8b0000 !important;
   content: "Description:  ";
}
.UpRad2 span::before { font-size:14px;color:#8b0000 !important;
   content: "Upgrade Radiation:  ";
}
.UpDesc2 span::before { font-size:14px;color:#8b0000!important;
   content: "Upgrade Description:  ";}    
}


Now to go over what all the above css does. (I pasted another copy below but you just need the above. I wanted to color things so you know what each part does.)

The line #my_lil_wrap (bolded) I just added so if you wanted to  add a background or border color, padding around everything, you could.
--The next line (in italics) you shouldn't touch. That starts the flex boxes.
--The dark blue is for the titles in the 6 top row boxes and you can style as you see fit. 
--The  green is common styles for all rows. You can change the colors, fonts, border as you see fit but don' remove this bit: box-sizing:
border-box;
--The orange is setting the width for the title boxes. There are 6 boxes. Two are at 8%, two are at 12% and the last two are 30% and they should all add up to 100%. (8%+8%+12%+12%+30%+30%=100%) The font size is in vw (viewport width) rather than pixels: font-size: 1.2vw   This allows the font to shrink for smaller devices. the height should be the same for all of them.
--The cyan is for all the other boxes in all other rows and should have the exact same width as the title boxes. I have the height different than the title row as well as the font color and size.
--The purple style is for screens that are 1100px wide until a screen reaches the 840px wide. That width can be changed but I didn't like quite how small the font got around 1100px so that's why I have that there. Both titles and regular boxes are in the purple.
--The red is for screens that are 840px wide. The red part that is in italics is what moves the title from top and center to inside the content area on small devices. The enlarged text in that is the title you want to show before the span tag in this: <div class="Mut2"><span>Color</span></div>
So it's important to leave those span tags there if you want the flex boxes to work well.


/*CUSTOM PAGE FLEX BOXES*/
#my_lil_wrap{margin-left:auto;margin-right:auto;}
/*all rows and starts the flex boxes-best not to touch this*/
.six_in_row1, .six_in_row2{display:flex; flex-flow:row;align-items:center; justify-content:center;
}
/*top of the page title*/
.full_width{width:100%;height:36px;padding:4;background-color:#000000;box-sizing:
border-box;line-height:34px;font-size:16px; line-height:18px;text-align:left;border:1px solid #aaaaaa;
color:#876f71; padding:8px;
}
/*common styles for all rows*/
.UpRad1, .Rad1, .Mut1, .Clss1, .Desc1, .UpDesc1, .UpRad2, .Rad2, .Mut2, .Clss2, .Desc2, .UpDesc2 {
padding:2px;background-color:#876f71; text-align:center;box-sizing: border-box;
font-family: 'Arya', sans-serif;border:1px solid #877571;
}
/*titles -these six widths (two in each style line) must total 100% always*/
.UpRad1, .Rad1{ width:8%; height:46px;color:#8b0000; font-size: 1.2vw;
}
.Mut1, .Clss1{width:12%; height:46px;color:#8b0000; font-size: 1.2vw;
}
.Desc1, .UpDesc1{width:30%; height:46px;color:#8b0000; font-size: 1.2vw;
}
/*all the rest of the rows and all six widths must equal 100%*/
.UpRad2, .Rad2 {width:8%;height:70px;color:black;font-size: 1.0vw;
}
.Mut2, .Clss2{width:12%;height:70px;color:black;font-size: 1.0vw;
}
.Desc2, .UpDesc2{width:30%;height:70px;color:black;font-size: 1.0vw;
}
/*For smaller devices*/
media screen and (max-width:1100px) {
.Mut2, .Rad2, .Clss2, .Desc2, .UpRad2, .UpDesc2{height:86px!important;font-size:12px!important;}
.UpRad1, .Rad1, .Mut1, .Clss1, .Desc1, .UpDesc1{font-size:13px!important;}
}
/*For smaller devices*/
media screen and (max-width:840px) {
.six_in_row1{display:none; }
.six_in_row2 { flex-wrap: wrap; margin-bottom:10px; }
.Mut2, .Rad2, .Clss2, .Desc2, .UpRad2, .UpDesc2{ flex-basis: 100%!important;
text-align:left!important;padding:4px!important;height:50px!important; }

.Mut2 span::before {font-size:14px;color:#8b0000 !important;
content: "Mutation: ";
}
.Rad2 span::before {font-size:14px;color:#8b0000 !important;
content: "Radiation: ";
}
.Clss2 span::before {font-size:14px; color:#8b0000 !important;
content: "Class: ";
}
.Desc2 span::before { font-size:14px;color:#8b0000 !important;
content: "Description: ";
}
.UpRad2 span::before { font-size:14px;color:#8b0000 !important;
content: "Upgrade Radiation: ";
}
.UpDesc2 span::before { font-size:14px;color:#8b0000!important;
content: "Upgrade Description: ";}
}


And that's about it. You can change the font colors, font styles, font sizes and background colors to whatever you want as long as the sizes are consistent in a row. Also a tip: I typically start off with my css right in my custom page but with <style> and </style> tags around it so I can edit to my liking. Once done, I move it to the bottom of my style sheet, but if you prefer the styles in your custom page rather than in your style sheet, it's not that big of a deal.

Good luck and any questions, just ask. 

[Shadow]

Tumbleweed, awesome, is there a way to set the rows boxes to an automatic height to contain all of the information?

[Tumbleweed]

If you set it, it'll be for all rows aside from the title row. But it would be this part and all three of those lines need to be the same height.

.UpRad2, .Rad2 {width:8%;height:70px;color:black;font-size: 1.0vw;
}
.Mut2, .Clss2{width:12%;height:70px;color:black;font-size: 1.0vw;
}
.Desc2, .UpDesc2{width:30%;height:70px;color:black;font-size: 1.0vw;
}

If you need a way to set different heights for each row I can probably work that out for you, if that is what you meant.

[Shadow]

Tumbleweed, yes that would be great, if you could! If not I'll just use scrollbars for the leftover text, I think that would work.

Oh! And is there by chance a magical code that will sort the content? For the mutations list I think I used excel, sorted it twice. Once by Class, and then by Name. Is there a way to do that also?

[Tumbleweed]

Oct 2, 2017 13:16:13 GMT -8 Shadow said:

Tumbleweed , yes that would be great, if you could! If not I'll just use scrollbars for the leftover text, I think that would work.

Oh! And is there by chance a magical code that will sort the content? For the mutations list I think I used excel, sorted it twice. Once by Class, and then by Name. Is there a way to do that also?

For the first part to set each row to the height you need there are three steps.
First in the html part in each of your rows you have this divide:

<div class="six_in_row2">

In each one you'll want to add a unique id so in the first one I added the blue:

<div class="six_in_row2" id="row_2">

In the next row I did the same but named it row_3:

<div class="six_in_row2" id="row_3">


So you'll do that to each row.
Now head to your style sheet and remove the height totally out of these which I marked in red.

/*all the rest of the rows and all six widths must equal 100%*/
.UpRad2, .Rad2 {width:8%;height:70px;color:black;font-size: 1.0vw;
}
.Mut2, .Clss2{width:12%;height:70px;color:black;font-size: 1.0vw;
}
.Desc2, .UpDesc2{width:30%;height:70px;color:black;font-size: 1.0vw;
}

And right below the above bit add this:

#row_2 div{height:70px;}
#row_3 div{height:90px;}
#row_4 div{height:70px;}
#row_5 div{height:90px;}
#row_6 div{height:70px;}
#row_7 div{height:90px;}


I did 6 of them for you starting with the name row_two because I consider the title row, row one. And that should do it with you of course editing the heights you want in each row.

As far as getting things to sort like an excel sheet. I know of no way to do that automatically like excel does.  There could be a way manually but that would be just copying how excel sorts them (so there would be no inner intelligence sorting them for you on site) and doing a whole new html part with with the new sorted way and then adding a button to click to sort which would actually just be switching from your pre-configured manually entered html #1 to your manually entered html #2, if that makes sense.  It would be a ton of work though.