View source for Digital Learning Box

__FORCETOC__
{{Element Infobox
|image=[[File:DL Box Example.png]]
|fileName=WU-Custom.css
|locFile=Line 75}}

The Digital Learning box is a custom group of elements that are used mainly on Digital Learning Guides as alternatives to the default LibGuides boxes.

==Example Image==

[[File:DL Box Example.png|center|thumb|600x600px|A screenshot of a Digital Learning Box]]

==Creating a Digital Learning box==

<div class="notice please-explain">{{#fas:question-circle}} Please Explain: Are these only allowed to be used by Digital Learning? NO! Of course not, these can be used by anyone on any guide.<br><br>They are called as such because they have been created specifically for Digital Learning guides and used within them, however, they have been used on a variety of other pages, so yes you can use them! :)</div>

Creating one of these boxes requires a few parts. First, they are all created using <code>div</code> and adding a class to them. However, they require two divs and any additional divs depending on how many headings you want, so lets break it down.

===Individual parts===
Individual classes:

<code>title</code> - This is the first class that creates the main heading that starts the box with rounded corners.

<code>roundbox</code> - This is the main div that will contain all other content and headings as it creates a border around the items and connects itself to the first heading.

<code>title sub</code> - The 'title' part is important as it uses the same styling as the first main heading, but the 'sub' part will make some adjustments by removing the rounded corners and basically connecting it to the sides of the roundbox mentioned above.

Well, what do all of these look like?

[[File:DL Box Individual Items.png|900px|border|center|alt=A slim navy strip with rounded corners, followed by an empty box with black borders and a rounded bottom, and underneath that a single strip of navy.]]

Uhh... that doesn't look right does it?

As you may have gathered all of these parts need to work together, creating them separately will produce what was in the image above. So lets work out how to combine them together.

First, you can't just create the divs, they need some content, so this is where you'll use headings and paragraph tags, lets look at an example snippet of code below.

==Example Code==
<syntaxhighlight lang="html" line>
<div class="title"><h3>This is the main heading</h3></div>
</syntaxhighlight>

'''What it looks like:'''

[[File:Title Bar DL Box.png|center|900x900px]]

That looks better doesn't it? By enclosing a heading tag inside the div the CSS in the background does all of the work to make it look how it should, but what about the box and those subheadings?

Let's do one at a time.

==Adding a bordered box and content==
At the moment we just have a heading, so lets fix that with a border and some content.

<div class="notice hint">{{#fas:info-circle}} Hint: To make things simpler we have kept in the same code from above but expanded it to help you visually see the entire code block. The new code starts on Line 3.</div>

===Example Code===
<syntaxhighlight lang="html" line>
<div class="title"><h3>This is the main heading</h3></div>

<div class="roundbox">
   <p>This is a paragraph inside the box</p>
</div>
</syntaxhighlight>

'''What it looks like:'''

[[File:Heading Box and Content DL Box.png|center|900x900px]]

Now we're getting somewhere, how about adding another heading?

==Adding another Heading==
The important thing to remember is how you created the original 'title' div, by enclosing a heading tag inside.

The same process applies to the sub headings, so really you could always copy and paste that line but just add the word '<code>sub</code>' after the word '<code>title</code>' in the class.

Let's show you how to do that in the code snippet below. Once again, we've kept the entire block in there so you can see how it all looks together. Please look at Lines 6, 7 and 8 for the new code.

<div class="notice note">{{#fas:triangle-exclamation}} Note: When creating sub headings and content, make sure you are placing it enclosed in the roundbox div otherwise it will appear outside and not render correctly.</div>

===Example Code===
<syntaxhighlight lang="html" line>
<div class="title"><h3>This is the main heading</h3></div>

<div class="roundbox">
   <p>This is a paragraph inside the box</p>
   
   <div class="title sub"><h3>Heading 2</h3></div>
   
   <p>This is text below the sub heading</p>
</div>
</syntaxhighlight>

'''What it looks like:'''

[[File:Completed DL Box Example.png|center|900x900px]]

Now we've got our full Digital Learning box. If you want to add more headings, simply add more of the <code>title sub</code> divs with the headings and you'll be good to go :)


==Adding Images==
Adding images follows the same procedure listed above, the only difference is that you need to add a single class to the image literally called '<code>imgStyle</code>'. This will format the image by centering it and adding a border around it.

===Example Code===

<syntaxhighlight lang="html" line>
<div class="title"><h3>This is the main heading</h3></div>

<div class="roundbox">
   <p>This is a paragraph inside the box</p>
   
   <div class="title sub"><h3>Heading 2</h3></div>
   
   <p>This is text below the sub heading</p>

   <img class="imgStyle sm noBorder" src="https://dkou0skpxpnwz.cloudfront.net/customers/6946/images/Wrexham_University_-_W_Icon_Black.png"/>
</div>
</syntaxhighlight>

You may have noticed that there are some additional utilities in the image, we advise looking at the 'Images' User Code guide to learn more about those utilities.