Test2: Difference between revisions

From Now That's What I Call Music Wiki
No edit summary
No edit summary
 
(65 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Tabs==
<ol class="breadcrumb" style="background-color:#222222; padding: .75rem 1rem; margin-bottom: 1rem; margin-left: 0">
<html>
  <li class="breadcrumb-item">[[Main Page|Now That's What I Call Music Wiki]]</li>
<style>
  <li class="breadcrumb-item">[[{{{Album Parent|}}}|{{#show: {{{Album Parent|}}}  |?Album Title | link=none}}]]</li>
.nav-tabs .nav-link {
  <li class="breadcrumb-item active" aria-current="page"><span style="color:#ffffff">{{{Version Format Type|}}} {{{Version Release Year|}}}</span></li>
    color: gray;
</ol>
    border: 0;
    border-bottom: 1px solid grey;
}


.nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
}
.nav-tabs .nav-link.active {
    color: #000000;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid blue;
}
</style>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
</html>
Some content will go here 1.<html>
  </div>
  <div id="menu1" class="tab-pane fade">
</html>
Some content will go here 2.<html>
  </div>
  <div id="menu2" class="tab-pane fade">
</html>
Some content will go here 3.<html>
  </div>
</div>
</html>
==Row==
<div class="container"> 
<div class="row mb-3">
    <div class="col-md-2">
1       
    </div>
    <div class="col-md-2">
2       
    </div>
    <div class="col-md-2">
3       
    </div>
    <div class="col-md-2">
4       
    </div>
    <div class="col-md-2">
5       
    </div>
    <div class="col-md-2">
6       
    </div>   
  </div>
==Picture one==
<div class="container">
<div class="container">
<div style="background-color:#{{{Album Main Color|}}}; font-weight:bold; margin-bottom:2px; padding:5px; font-size: large; font-family: Trebuchet MS; color: #{{{Album Secondary Color|}}};"><center>[[Album Title::{{{Album Title|}}}]] ({{{Country Of Release|}}} {{{Version Release Year|}}} {{{Version Format Type|}}})</center></div>
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div class="row">
   <div class="row">
     <div class="col-3">[[File:100 Hits from 100 Nows.jpg|250px]]</div>
     <div class="col-md-4">[[File:{{{Version Main Cover |}}}]]</div>
     <div class="col-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, lacus at sollicitudin volutpat, lacus mauris ornare purus, sit amet iaculis mi lorem quis lorem. Suspendisse iaculis libero posuere commodo semper. Vivamus tincidunt suscipit orci, ac malesuada arcu efficitur vitae. Mauris molestie massa tortor, ac maximus erat tincidunt feugiat. Mauris nec mauris tortor. Vivamus accumsan pretium quam, ac malesuada arcu feugiat non. Pellentesque ut urna quam. Maecenas quis ipsum ac ex ultrices suscipit sit amet ut leo. In cursus porttitor ullamcorper.
     <div class="col-md-8"><table class="table table-hover">
 
    <tr>
Vestibulum et massa commodo, venenatis odio ut, venenatis est. Vivamus congue imperdiet leo, et lacinia magna consectetur eget. Sed et risus neque. Vestibulum scelerisque nisl id placerat congue. Maecenas lobortis dictum mi. Nam varius varius elit, in pellentesque purus finibus ut. Donec ac blandit erat. Donec vitae velit ut tellus ullamcorper tincidunt id vitae turpis. Nullam interdum consequat purus.</div>
      <th scope="row"><div style="color: #dddddd;">Album Format</div></th>
  </div>
      <td>[[Version Format Type::{{{Version Format Type|}}}| ]]{{#formredlink:target={{{Version Format Type|}}}|form=Format|create page}}</td>
    </tr>
    <tr>
      <th scope="row"><div style="color: #dddddd;">Release Date</div></th>
      <td><div style="color: #dddddd;">{{#ifeq: {{{Version Release Date|}}} |  | [[Category:Needs Release Date]] | [[Version Release Date::{{{Version Release Date|}}}|]][[Version Release Year::{{{Version Release Year|}}}|]] [[{{{Version Release Year|}}}|{{#time:F j, Y|{{{Version Release Date }}}}}]] }}{{#ifeq: {{{Unconfirmed Date|}}} | | [[Category:Confirmed Date]] | [[Unconfirmed Date::{{{Unconfirmed Date|}}}]][[Category:Unconfirmed Date]]}}</div></td>
    </tr>
    <tr>
      <th scope="row"><div style="color: #dddddd;">Country</div></th>
      <td>[[Country Of Release::{{{Country Of Release|}}}]]</td>
    </tr>
    <tr>
      <th scope="row"><div style="color: #dddddd;">Album Series</div></th>
      <td>{{#arraymap:{{{Album Series|}}}|~|xxxxx|{{#set:Album Series=xxxxx}}{{#formredlink:target=xxxxx|form=Series|create page}}}}</td>
    </tr>
    <tr>
      <th scope="row"><div style="color: #dddddd;">Album Parent</div></th>
      <td>[[Album Parent::{{{Album Parent|}}}]]</td>
    </tr>
    <tr>
      <th scope="row"><div style="color: #dddddd;">Number of tracks</div></th>
      <td><div style="color: #dddddd;">[[Album Number of Tracks::{{#ask:  [[Track Album::{{PAGENAME}}]]  |?Track Artist And Title |format=count}}]]</div></td>
    </tr>
</table>
{|
| style="text-align: center; " | [[Amazon Link::{{#ifeq: {{{Amazon Link|}}} | | https://amazon.co.uk/s?k={{#replace:{{{Album Title|}}}|%20|_}}&tag=nowmusicwiki-21 | {{{Amazon Link|}}} }}|{{#ifeq: {{{Version Format Type|}}} | MP3 Download | |  }}]] {{#ifeq: {{{Amazon Link|}}} | | [[Category:Needs Specific Amazon Link]] | }}
|}<html><a class="btn btn-warning btn-block" style="color:#000000" href="</html>{{#replace:{{#replace:{{#replace:{{#show: {{PAGENAME}} |?Amazon Link#nowiki|mainlabel=-}}|http://|}}|https://|}}|%20|_}}<html>"role="button">Buy Now</a></html>
</div>
</div>
</div>
</div>
==Image Grid==
<div class="container">
  <div class="row">
    <div class="col">
[[File:100 Hits from 100 Nows.jpg|200px]]
    </div>
    <div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, lacus at sollicitudin volutpat, lacus mauris ornare purus, sit amet iaculis mi lorem quis lorem. Suspendisse iaculis libero posuere commodo semper. Vivamus tincidunt suscipit orci, ac malesuada arcu efficitur vitae. Mauris molestie massa tortor, ac maximus erat tincidunt feugiat. Mauris nec mauris tortor. Vivamus accumsan pretium quam, ac malesuada arcu feugiat non. Pellentesque ut urna quam. Maecenas quis ipsum ac ex ultrices suscipit sit amet ut leo. In cursus porttitor ullamcorper.
Vestibulum et massa commodo, venenatis odio ut, venenatis est. Vivamus congue imperdiet leo, et lacinia magna consectetur eget. Sed et risus neque. Vestibulum scelerisque nisl id placerat congue. Maecenas lobortis dictum mi. Nam varius varius elit, in pellentesque purus finibus ut. Donec ac blandit erat. Donec vitae velit ut tellus ullamcorper tincidunt id vitae turpis. Nullam interdum consequat purus.
In et massa vel leo bibendum pulvinar. Curabitur eget metus placerat, pulvinar mi et, euismod velit. Curabitur orci urna, sodales sed nunc sollicitudin, convallis consectetur nisl. Sed lacinia est sit amet nibh ornare consequat. Curabitur ac quam sit amet nisi euismod ornare. Quisque luctus ac libero eget pretium. Donec facilisis tincidunt aliquet. In congue mi nisl, in dignissim sem euismod et. Mauris arcu ipsum, commodo ut metus eget, hendrerit sagittis urna. Phasellus in tellus dui. Vivamus eget convallis ex. Proin consectetur, enim non facilisis aliquet, nulla quam elementum mi, ultrices faucibus tellus dolor et nisi. Aliquam nec odio eget risus porta egestas.
    </div>
  </div>
</div>
</div>


==Jumbotron==


<bootstrap_jumbotron style="border:2px solid #999;" class="bootstrap-jumbotron-example"><big>
= Jumbotron title =
Jumbotrons are flexible elements used for calling extra attention to featured content or information.</big>


{{#bootstrap_button: Main Page | text=Learn more! | color=info }}
</bootstrap_jumbotron>


==Accordion==


<bootstrap_accordion>
<bootstrap_card header="Lorem ipsum 1" style="width: 100%;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</bootstrap_card>
<bootstrap_card header="Lorem ipsum 2" style="width: 100%;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</bootstrap_card>
</bootstrap_accordion>


==Card Deck==
__NOEDITSECTION__
 
<div class="card-deck">
  <div class="card bg-warning">
    <div class="card-header">'''<big>[[Components]]</big>'''</div>
    <div class="card-body  bg-white">
      <p class="card-text">Components are predefined elements or features you can easily add to the wiki to build responsive and visually appealing user interfaces.</p>
      <p class="card-text">Text</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-header">'''<big>[[Colors]]</big>'''</div>
    <div class="card-body bg-white">
      <p class="card-text">Several CSS classes for coloring backgrounds, borders, and text are available. You can use them for com&shy;ponents and other elements.</p>
      <p class="card-text">Text</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-header">'''<big>[[Grid]]s</big>'''</div>
    <div class="card-body bg-white">
      <p class="card-text">You can use a series of CSS classes to build layouts of all shapes and sizes with responsible (mobile-friendly) columns and rows.</p>
      <p class="card-text">Text</p>
    </div>
  </div>
</div>
 
==Button==
 
{{#bootstrap_button: Chameleon | color=primary}}
{{#bootstrap_button: Medik | color=secondary | text=Medik Skin }}
{{#bootstrap_button: Tweeki | color=info | text=Tweeki Skin }}
 
==Card Deck 2==
 
 
<div class="card-deck">
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum and a bit more text to see what happens with this'''</big>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
      </p>
    </div>
  </div>
</div>

Latest revision as of 23:09, 15 November 2024

  1. Now That's What I Call Music Wiki
  2. [[|]]
( )
[[File:]]
Album Format
Release Date
Country
Album Series
Album Parent
Number of tracks
0
Buy Now




Retrieved from ‘https://nowmusicwiki.com/index.php?title=Test2&oldid=56356’