User:TableWiz/Portable Infobox with CSS

"Can anybody who is good with templates help me with adding 2 sections within my template?"

Having a quick look they are using Portable Infobox to create the grid   Combatants  Commanders  Strength  Casualties Civilian casualties  Organizations  Personnel  Strength  Casualties Result [Source] Add the styling into MediaWiki:InfoboxColors.css I have used "battle" as the theme name... .pi-theme-battle .pi-title { text-align:center; box-shadow: 0 -3px 7px 0px #002ED1 inset, 0 -11px 9px 4px #0070F6 inset, 0 3px 3px 0px #0070F6 inset,0 4px 10px 1px #C6ECFF inset, 0px 4px 5px 0px #0063FF inset; color:#ffffff; background:#229DFA; font-size:larger; } .pi-theme-battle .pi-navigation { box-shadow: 0 -3px 7px 0px #002ED1 inset, 0 -11px 9px 4px #0070F6 inset, 0 3px 3px 0px #0070F6 inset,0 4px 10px 1px #C6ECFF inset, 0px 4px 5px 0px #0063FF inset; color:#ffffff; background:#229DFA; } .pi-theme-battle .pi-navigation a { color: white; } .pi-theme-battle .pi-header { text-align:center; font-weight:normal; color:#ffffff; box-shadow: 0 -3px 7px 0px #000049 inset, 0 -11px 9px 4px #0001CB inset, 0 3px 3px 0px #0001CB inset,0 4px 10px 1px #339BFC inset, 0px -32px 28px -17px white inset; background:#000BDF; } .pi-theme-battle { background:#FFFFFF; border-collapse:collapse; border:1px solid #2C2C68; font-size:smaller; line-height:1.5; width:270px!important } .pi-theme-battle .pi-image img { max-width:100%; min-width:100%; height:auto; padding:0; background:#FFFFFF; } .pi-theme-battle .pi-data-value { text-align:left; }

Notes
 * As the default width for Portable Infoboxes is 270px, I have used that so best possible display on mobiles
 * I am still learning how to use CSS and locating display errors. There is a line underneath "Battle of Smallville" and [Source] . It could be:
 * the white background "leaking"
 * something I left behind from the original CSS
 * CSS setting on the test wikia where I created it