Message Boxes

Message!
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis.
Message!
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis.
Message!
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis.
Message!
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis.
Message!
Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis.

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="module_messageboxes module_small_padding">
    <div class="shortcode_messagebox box_type2">
        <h6>
            Message!</h6>
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec
        semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
        quis felis. Nunc elementum dolor quis. <a href="javascript:void(0)" class="box_close">
        </a>
    </div>
</div>
<div class="module_messageboxes module_small_padding">
    <div class="shortcode_messagebox box_type3">
        <h6>
            Message!</h6>
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec
        semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
        quis felis. Nunc elementum dolor quis. <a href="javascript:void(0)" class="box_close">
        </a>
    </div>
</div>
<div class="module_messageboxes module_small_padding">
    <div class="shortcode_messagebox box_type4">
        <h6>
            Message!</h6>
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec
        semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
        quis felis. Nunc elementum dolor quis. <a href="javascript:void(0)" class="box_close">
        </a>
    </div>
</div>
<div class="module_messageboxes module_small_padding">
    <div class="shortcode_messagebox box_type5">
        <h6>
            Message!</h6>
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec
        semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
        quis felis. Nunc elementum dolor quis. <a href="javascript:void(0)" class="box_close">
        </a>
    </div>
</div>
<div class="module_messageboxes">
    <div class="shortcode_messagebox box_type6">
        <h6>
            Message!</h6>
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec
        semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
        quis felis. Nunc elementum dolor quis. <a href="javascript:void(0)" class="box_close">
        </a>
    </div>
</div>

Implementation Instructions:

To Add Green Message Box.
Add the below HTML content. You can use 6 predefined message box by adding box_type1 to box_type6 class.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="module_messageboxes">
    <div class="shortcode_messagebox box_type4">
        <h6>
            Message!</h6>
        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
        eros enatis at dapibus facilisis, lacinia sagittis purus urtmod aliquet enim, nec
        semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
        quis felis. Nunc elementum dolor quis. <a href="javascript:void(0)" class="box_close">
        </a>
    </div>
</div>