Aine Sherlock/Sandbox2: Difference between revisions

From 118Wiki
Jump to navigation Jump to search
No edit summary
(still a wip)
Line 75: Line 75:




===New Experiment Based Off Wikipedia Article===
==Let's Try again!==


Using coding from wikipedia in order to make the display more friendly for both browser and mobile...<s>still janky as the single top ribbon is huge on mobile</s> turns out mobile just sucks and doesn't do columns and for whatever reason it doesn't size the single top ribbon (and probably won't with two either!) despite having all of the ribbons set to the same px! Able to get two columns, correct centering. <s>Need to figure out if I can align to the bottom (so far no go)</s> probably won't work. Next to find out how to get the stars in correctly. So far...janky.
Ok, I have a new idea! Let's see how this works! (Or maybe I tried this and it didn't work...I don't know anymore, I'm losing my mind!)


==Orders, decorations and medals==


{{StartColumns|50%}}
{{StartColumns}}
{| style="margin:1em auto; text-align:center;"
{| style="margin: 0em auto 0em auto;" border='0' cellspacing='0'
|colspan="3"|[[File:Denali_Invitational_Ribbon.png|200px|link=Denali_Invitational_Ribbon|Denali Invitational Ribbon]]
|-
|-
|[[File:Awards_General_Neelix_2011.jpg|200px|link=Neelix_Award|Neelix Award]]
! style="background:grey; width:200px" |{{Ribbons|Pathfinder Award|200|1}}
|[[File:Vega_Award.png|200px|2|link=Vega_Award|Vega Award]]
! style="background:grey; width:200px" |{{Ribbons|Denali Invitational Ribbon|200|3}}
|[[File:Awards_DutyPost_NatashaYarPinAward_2011.jpg|200px|link=Natasha_Yar_Pin|Natasha Yar Pin]]
|-
|-
|[[File:Awards_General_SheathedSword_2011.jpg|200px|link=Sheathed_Sword|Sheathed Sword]]
! style="background:grey; width:200px" |{{Ribbons|Neelix Award|200|2}}
|[[File:Okuda_Award.png|200px|link=Okuda_Award|Okuda Award]]
! style="background:grey; width:200px" |{{Ribbons|Vega Award|200|3}}
|[[File:Awards_General_1Year.jpg|200px|link=1-year_Member|1 Year Member]]
! style="background:grey; width:200px" |{{Ribbons|Natasha Yar Pin|200|1}}
|-
|-
! style="background:grey; width:200px" |{{Ribbons|Sheathed Sword|200|2}}
! style="background:grey; width:200px" |{{Ribbons|Okuda Award|200|1}}
! style="background:grey; width:200px" |{{Ribbons|1-year Member|200|1}}
|}
|}
{{Column}}
{{Column}}
{{StartColumns|50%}}
{{StartColumns|50%}}
{| style="margin:1em auto; text-align:center;"
{| style="margin: 0em auto 0em auto;" border='0' cellspacing='0'
|colspan="3"|[[File:Awards_ServiceRibbons_MedalOfFreedom_2011.jpg|200px|link=UFP_Medal_of_Freedom|UFP Medal of Freedom]]
|-
|-
|[[File:Awards_ServiceRibbons_PurpleHeart_2011.jpg|200px|link=Purple_Heart|Purple Heart]]
! style="background:grey; width:200px" |{{Ribbons|UFP Medal of Freedom|200|1}}
|[[File:Awards_ServiceRibbons_Commendation.jpg|200px|link=Captain's_Commendation|Captain's Commendation]]
! style="background:grey; width:200px" |{{Ribbons|Purple Heart|200|1}}
|[[File:Awards_ServiceRibbons_JointMeritoriousUnit_2011.jpg|200px|link=Joint_Meritorious_Unit_Award|Joint Meritorious Unit Award]]
! style="background:grey; width:200px" |{{Ribbons|Captain's Commendation|200|2}}
|-
|-
|[[File:Leadership_Excellence_Ribbon.png|200px|link=Leadership_Excellence_Ribbon|Leadership Excellence Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Joint Meritorious Unit Award|200|2}}
|[[File:Awards_ServiceRibbons_GoodConduct_2011.jpg|200px|link=Good_Conduct_Ribbon|Good Conduct Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Prisoner of War Ribbon|200|1}}
|[[File:Awards_ServiceRibbons_FirstContact_2011.jpg|200px|link=First_Contact_Ribbon|First Contact Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Leadership Excellence Ribbon|200|1}}
|-
|-
|[[File:Awards_ServiceRibbons_Peacekeeper_2011.jpg|200px|link=Peacekeeper_Service_Ribbon|Peacekeeper Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Good Conduct Ribbon|200|2}}
|[[File:Awards_ServiceRibbons_Explorers_2011.jpg|200px|link=Explorer's_Ribbon|Explorer's Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|First Contact Ribbon|200|3}}
|[[File:Awards_ServiceRibbons_Innovationribbon_2014.jpg|200px|link=Innovation_Ribbon|Innovation Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Peacekeeper Service Ribbon|200|1}}
|-
|-
|[[File:Awards_ServiceRibbons_diplomacyribbon_2014.jpg|200px|link=Diplomacy_Ribbon|Diplomacy Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Explorer's Ribbon|200|4}}
|[[File:Starfleet_Investigation_Ribbon.png|200px|link=Starfleet_Investigation_Ribbon|Starfleet Investigation Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Innovation Ribbon|200|1}}
|[[File:Awards_ServiceRibbons_TemporalFlow_2011.jpg|200px|link=Defense_of_Temporal_Flow_Ribbon|Defense of Temporal Flow Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Diplomacy Ribbon|200|2}}
|-
|-
|[[File:Awards_ServiceRibbons_DepartmentChief.jpg|200px|link=Department_Chief_Ribbon|Department Chief Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Starfleet Investigation Ribbon|200|1}}
|[[File:Legacy_Ribbon.png|200px|link=Legacy_Ribbon|Legacy Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Defense of Temporal Flow Ribbon|200|3}}
|[[File:Awards_ServiceRibbons_Graduate.jpg|200px|link=Starfleet_Academy_Graduate_Ribbon|Starfleet Academy Graduate Ribbon]]
! style="background:grey; width:200px" |{{Ribbons|Department Chief Ribbon|200|1}}
|-
|-
! style="background:grey; width:200px" |{{Ribbons|Maiden Voyage Ribbon|200|1}}
! style="background:grey; width:200px: |{{Ribbons|Legacy Ribbon|200|1}}
! style="background:grey; width:200px" |{{Ribbons|Starfleet Academy Graduate Ribbon|200|1}}
|}
|}
{{EndColumns}}
{{EndColumns}}
Attempt at using individual ribbon templates.
<!--{{StartColumns|50%}}-->
{| style="margin:1em auto; text-align:center;"
|colspan="3"|{{Ribbons|Denali Invitational Ribbon|200|3}}
|-
|{{Ribbons|Neelix Award|200|2}}
|{{Ribbons|Vega Award|200|2}}
|{{Ribbons|Natasha Yar Pin|200|1}}
|-
|{{Ribbons|Sheathed Sword|200|2}}
|{{Ribbons|Okuda Award|200|1}}
|{{Ribbons|1-year Member|200|1}}
|-
|}
<!--{{Column}}-->
<!--{{StartColumns|50%}}-->
{| style="margin:1em auto; text-align:center;"
|colspan="3"|{{Ribbons|UFP Medal of Freedom|200|1}}
|-
|{{Ribbons|Purple Heart|200|1}}
|{{Ribbons|Captain's Commendation|200|2}}
|{{Ribbons|Joint Meritorious Unit Award|200|2}}
|-
|{{Ribbons|Leadership Excellence Ribbon|200|1}}
|{{Ribbons|Good Conduct Ribbon|200|2}}
|{{Ribbons|First Contact Ribbon|200|2}}
|-
|{{Ribbons|Peacekeeper Service Ribbon|200|1}}
|{{Ribbons|Explorer's Ribbon|200|4}}
|{{Ribbons|Innovation Ribbon|200|1}}
|-
|{{Ribbons|Diplomacy Ribbon|200|1}}
|{{Ribbons|Starfleet Investigation Ribbon|200|1}}
|{{Ribbons|Defense of Temporal Flow Ribbon|200|3}}
|-
|{{Ribbons|Department Chief Ribbon|200|1}}
|{{Ribbons|Legacy Ribbon|200|1}}
|{{Ribbons|Starfleet Academy Graduate Ribbon|200|1}}
|-
|}
<!--{{EndColumns}}-->

Revision as of 19:47, 30 June 2024

My Ribbon Rack Experiments

Current single table.

Awards ServiceRibbons PurpleHeart 2011.jpg
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons Commendation.jpg
Awards ServiceRibbons JointMeritoriousUnit 2011.jpg
Awards General Neelix 2011.jpg
Award-goldstar.png
Vega Award.png
Awards DutyPost NatashaYarPinAward 2011.jpg
Award-goldstar.png
Awards ServiceRibbons FirstContact 2011.jpg
Awards ServiceRibbons Peacekeeper 2011.jpg
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons Explorers 2011.jpg
Awards General SheathedSword 2011.jpg
Okuda Award.png
Awards General 1Year.jpg
Awards ServiceRibbons TemporalFlow 2011.jpg
Legacy Ribbon.png
Awards ServiceRibbons Graduate.jpg

Partial example to experiment with centering 2 ribbons on line. Got the columns, and now have stars overlaying ribbons with proper links to ribbon pages! Thanks Noa! Lower example shows ribbon removed from top row to show how it properly centers.

For 3 ribbons per row: Center star on ribbon 1 106px, on ribbon 2 306px, and on ribbon 3 506px. Put div style="position: absolute; left: px; top:12.5 etc after div style="position: relative etc. For 3 stars, plus or minus 56px from center star position. For two stars, first star is single star position minus 38, second star is previous formula but plus 38.

For 2 ribbons per row: Center star on ribbon 1 206, on ribbon 2 406 . Other formulas follow suite.

Award-goldstar.png
Neelix AwardVega AwardNatasha Yar Pin
Sheathed SwordOkuda Award1 Year Member
Award-goldstar.png
Award-goldstar.png
Purple HeartCaptain's CommendationJoint Meritorious Unit Award
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
First Contact RibbonPeacekeeper RibbonExplorer's Ribbon
Defense of Temporal Flow RibbonLegacy RibbonStarfleet Academy Graduate Ribbon


Award-goldstar.png
Neelix AwardVega AwardNatasha Yar Pin
Sheathed SwordOkuda Award1 Year Member
Award-goldstar.png
Award-goldstar.png
Captain's CommendationJoint Meritorious Unit Award
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
First Contact RibbonPeacekeeper RibbonExplorer's Ribbon
Defense of Temporal Flow RibbonLegacy RibbonStarfleet Academy Graduate Ribbon


Let's Try again!

Ok, I have a new idea! Let's see how this works! (Or maybe I tried this and it didn't work...I don't know anymore, I'm losing my mind!)


Awards General Pathfinder 2015.png
Campaign-star.png
Campaign-star.png
Campaign-star.png
Denali Invitational Ribbon.png
Award-goldstar.png
Awards General Neelix 2011.jpg
Award-goldstar.png
Award-goldstar.png
Vega Award.png
Awards DutyPost NatashaYarPinAward 2011.jpg
Award-goldstar.png
Awards General SheathedSword 2011.jpg
Okuda Award.png
Awards General 1Year.jpg
Awards ServiceRibbons MedalOfFreedom 2011.jpg
Awards ServiceRibbons PurpleHeart 2011.jpg
Award-goldstar.png
Awards ServiceRibbons Commendation.jpg
Award-goldstar.png
Awards ServiceRibbons JointMeritoriousUnit 2011.jpg
Awards ServiceRibbons POW 2011.jpg
Leadership Excellence Ribbon.png
Award-goldstar.png
Awards ServiceRibbons GoodConduct 2011.jpg
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons FirstContact 2011.jpg
Awards ServiceRibbons Peacekeeper 2011.jpg
Award-goldstar.png
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons Explorers 2011.jpg
Awards ServiceRibbons Innovationribbon 2014.jpg
Award-goldstar.png
Awards ServiceRibbons diplomacyribbon 2014.jpg
Starfleet Investigation Ribbon.png
Award-goldstar.png
Award-goldstar.png
Awards ServiceRibbons TemporalFlow 2011.jpg
Awards ServiceRibbons DepartmentChief.jpg
Maiden Voyage Ribbon.png
Legacy Ribbon.png
Awards ServiceRibbons Graduate.jpg