Anonymous
×
Create a new article
Write your page title here:
We currently have 632 articles on SpellForce Wiki - Rohens encyclopedia. Type your article name above or click on one of the titles below and start writing!



SpellForce Wiki - Rohens encyclopedia

Template:CoE Item: Difference between revisions

Basara (talk | contribs)
No edit summary
Basara (talk | contribs)
No edit summary
Line 1: Line 1:
{{CoE Styles}}
{{CoE Styles}}
{{#css:
.tooltip-short, .tooltip, .tooltip-long {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  display: inline-block;
  color: #07f;
}
.tooltip-short:hover, .tooltip:hover, .tooltip-long:hover {
  color: #fff!important;
  cursor: pointer;
}
.tooltip-short a { 
  position: absolute; 
  display: block; 
  visibility: hidden; 
  opacity: 0; 
  transition: all .3s; 
  border-radius: 5px; 
  box-shadow: 0 0 20px #444 inset; 
  padding: 3px 5px 3px 5px; 
  top: -150px;
  left: -5px;
  z-index: 9999999;
  border: 1px solid #514d4d;
}
.tooltip a { 
  position: absolute; 
  display: block; 
  visibility: hidden; 
  opacity: 0; 
  transition: all .3s; 
  border-radius: 5px; 
  box-shadow: 0 0 20px #444 inset; 
  padding: 3px 5px 3px 5px; 
  top: -250px;
  left: -5px;
  z-index: 9999999;
  border: 1px solid #514d4d;
}
.tooltip-long a{ 
  position: absolute; 
  display: block; 
  visibility: hidden; 
  opacity: 0; 
  transition: all .3s; 
  border-radius: 5px; 
  box-shadow: 0 0 20px #444 inset; 
  padding: 3px 5px 3px 5px; 
  top: -500px;
  left: -5px;
  z-index: 9999999;
  border: 1px solid #514d4d;
}
.tooltip-short a img, .tooltip a img, .tooltip-long a img {
  display: block;
  border: 1px solid #444;
  max-width: 360px;
  height: auto;
}
.tooltip-short a:after, .tooltip a:after, .tooltip-long a:after {
  content: " ";
  border-style: solid;
  border-width: 7px 7px 0px 7px;
  border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
  transition-duration: 0s;
  transform-origin: top;
  transform: translateX(-50%) scaleY(1);
  position: absolute;
  left: 5%;
  bottom: -7px;
}
.tooltip-short:hover a, .tooltip:hover a, .tooltip-long:hover a{       
    visibility: visible;       
    opacity: 1;   
}
.tooltip b:before, .tooltip b:before, .tooltip-long b:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #333;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tooltip-short b:hover:before, .tooltip b:hover:before, .tooltip-long b:hover:before {
  visibility: visible;
  background-color: #0c96ff!important;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
}}
<noinclude>
<noinclude>
==CoE Tooltip Hover==
==CoE Item==
Inserts text that has an image display on mouse hover, inline with other article text. Uses the specified CoE Style.
Inserts a block item for CoE. Typical items are abilities, statuses, room expansions, items, recipes, etc.


;Types:
''NOTE: Most parameters are optional, only use what is needed.''
:tooltip-short : Intended for image HEIGHT less than 150px</li>
:tooltip : Intended for image HEIGHT between 150px and 250px</li>
:tooltip-long : Intended for image HEIGHT between 250px and 500px</li>


''Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.''
===Usage===
<nowiki>
{{CoE Item
</nowiki><br><nowiki>
|title = [Name/Title]
</nowiki><br><nowiki>
|sub-title = [Subtitle] </nowiki>''OPTIONAL''<nowiki>
</nowiki><br><br>''OPTIONAL DESCRIPTION LINES''<br><br><nowiki>


;Styles:
|line-1-start    = [Description]
:item-title : Standard Item/Ability/Status title
</nowiki><br><nowiki>
:item-subtitle : Standard subtitle (sub-classes, etc.)
|line-1-tooltip      = [tooltip text] </nowiki>''OPTIONAL''<nowiki>
:item-text : Standard description
</nowiki><br><nowiki>
|line-1-tooltip-type  = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>
</nowiki><br><nowiki>
|line-1-end    = [text that goes after the tooltip] </nowiki>''OPTIONAL''<nowiki>
</nowiki><br><nowiki>
|line-1-image    = [tooltip image file name]
</nowiki><br><br><nowiki>


===Usage===
|line-2-start    = [Description]
<nowiki>
</nowiki><br><nowiki>
{{CoE Tooltip Hover
|line-2-tooltip      = [tooltip text] </nowiki>''OPTIONAL''<nowiki>
</nowiki><br><nowiki>
|line-2-tooltip-type  = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|type     = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>
|line-2-end     = [text that goes after the tooltip] </nowiki>''OPTIONAL''<nowiki>
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|style = [class from CoE Styles Template] </nowiki>''defaults to item-text if no class is included''<nowiki>
|line-2-image    = [tooltip image file name]
</nowiki><br><br><nowiki>
 
|line-3-start = [Description]
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|pre-inline-text    = [text that goes before the tooltip] </nowiki>''OPTIONAL''<nowiki>
|line-3-tooltip = [tooltip text] </nowiki>''OPTIONAL''<nowiki>
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|hover-text      = [text that the tooltip defines]
|line-3-tooltip-type  = [tooltip-short] or [tooltip] or [tooltip-long] </nowiki>''defaults to tooltip if no class is included''<nowiki>
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|post-inline-text    = [text that goes after the tooltip] </nowiki>''OPTIONAL''<nowiki>
|line-3-end = [text that goes after the tooltip] </nowiki>''OPTIONAL''<nowiki>
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|image     = [tooltip image file name]
|line-3-image = [tooltip image file name]
</nowiki><br><nowiki>
</nowiki><br><nowiki>
}}
}}
</nowiki>
</nowiki>


===Example Usage===
===Example Usage===
<nowiki><span></nowiki>Grants
<nowiki>
<nowiki>
{{Inline Tooltip Hover
{{CoE Item
</nowiki><br><nowiki>
|title = Battle Robe
</nowiki><br><nowiki>
|sub-title = Artifact, Ingredient, Light Armor
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|pre-inline-text = Grants
|line-1-start    = +2 Speed
</nowiki><br><nowiki>
 
|line-2-start = Grants
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|text = Quick Reflexes
|line-2-tooltip = Quick Reflexes
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|post-inline-text = .
|line-2-tooltip-type  = tooltip-short
</nowiki><br><nowiki>
</nowiki><br><nowiki>
|image = Image:SF CoE Ability Quick Reflexes.png
|line-2-image = Image:SF CoE Ability Quick Reflexes.png
</nowiki><br><nowiki>
</nowiki><br><nowiki>
}}
}}
</span>
</nowiki>
</nowiki>


===Example Preview===
===Example Preview===
<span><div class="item-text">Grants <div class="tooltip-short"><b>Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></b></div></div>
<div style="display-inline" class="item-title">[[Image:SF CoE Icon Battle Robe.png|50px]] Battle Robe</div>
<div class="item-subtitle">Artifact, Ingredient, Light Armor</div>
<div class="item-text">+2 Speed</div>
<div class="item-text">Grants <div class="tooltip-short">Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png]]</span></div>




Line 158: Line 84:
</noinclude>
</noinclude>


<div class="item-subtitle">Artifact, Ingredient, Light Armor</div>
<div style="display-inline" class="{{{style|item-text}}}">{{{pre-inline-text|}}} <div class="{{{type|tooltip}}}"><b>{{{text|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image|File:NoImage.png}}}]] {{{post-inline-text|}}}</span></b></div></div>
<span><div style="display-inline" class="{{{style|item-text}}}">{{{pre-inline-text|}}} <div class="{{{type|tooltip}}}"><b>{{{text|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image|File:NoImage.png}}}]] {{{post-inline-text|}}}</span></b></div></div>

Revision as of 09:43, 25 September 2023


CoE Item

Inserts a block item for CoE. Typical items are abilities, statuses, room expansions, items, recipes, etc.

NOTE: Most parameters are optional, only use what is needed.

Usage

{{CoE Item
|title = [Name/Title]
|sub-title = [Subtitle] OPTIONAL

OPTIONAL DESCRIPTION LINES

|line-1-start = [Description]
|line-1-tooltip = [tooltip text] OPTIONAL
|line-1-tooltip-type = [tooltip-short] or [tooltip] or [tooltip-long] defaults to tooltip if no class is included
|line-1-end = [text that goes after the tooltip] OPTIONAL
|line-1-image = [tooltip image file name]

|line-2-start = [Description]
|line-2-tooltip = [tooltip text] OPTIONAL
|line-2-tooltip-type = [tooltip-short] or [tooltip] or [tooltip-long] defaults to tooltip if no class is included
|line-2-end = [text that goes after the tooltip] OPTIONAL
|line-2-image = [tooltip image file name]

|line-3-start = [Description]
|line-3-tooltip = [tooltip text] OPTIONAL
|line-3-tooltip-type = [tooltip-short] or [tooltip] or [tooltip-long] defaults to tooltip if no class is included
|line-3-end = [text that goes after the tooltip] OPTIONAL
|line-3-image = [tooltip image file name]
}}

Example Usage

{{CoE Item
|title = Battle Robe
|sub-title = Artifact, Ingredient, Light Armor
|line-1-start = +2 Speed
|line-2-start = Grants
|line-2-tooltip = Quick Reflexes
|line-2-tooltip-type = tooltip-short
|line-2-image = Image:SF CoE Ability Quick Reflexes.png
}}

Example Preview

Battle Robe
Artifact, Ingredient, Light Armor
+2 Speed
Grants
Quick Reflexes


Template Markup

tooltip