Announcement

Collapse
No announcement yet.

Create visually appealling Notices

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [vB 3.7] Create visually appealling Notices

    With the new Notices system in vBulletin 3.7.X, you can make announcements and notices to your members based on particular criteria. By default they are plain text though you can liven them up using any HTML at your disposal. Here is a quick tip to make visually appealing notices without having to resort to a lot of HTML all the time. You can create CSS classes for common things that you might use often while creating notices.

    Here are some examples that you might try.

    Code:
    .error, .notice, .success, .birthday {padding:.8em;margin-bottom:1.6em;border:2px solid #ddd;}
    .error {background:#FFCCFF;color:#8a1f11;border-color:#FF3366;}
    .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
    .success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
    .birthday {background:#00FFFF;color:#9900FF;border-color:#6633CC }
    .error a {color:#8a1f11; background:none; padding:0; margin:0; }
    .notice a {color:#514721; background:none; padding:0; margin:0; }
    .success a {color:#264409; background:none; padding:0; margin:0; }
    .birthday a {color:#9900FF; background:none; padding:0; margin:0; }
    Place the above CSS in the second Additional CSS Definitions box found at:
    Styles & Templates -> Style Manager -> %YourStyle% -> MainCSS.

    This code creates colored boxes that can be used for errors, simple notification, and success messages. I also included a fun one for birthdays. To use these in your notices you would do something like:
    HTML Code:
    <p class="success"><img src="images/icons/accept.png" alt=""/> YOUR TEXT HERE</p>
    The key here is the class="success". You can change this to any class that you have created. I have also included an image to make it stand out more. Create your notice, add your text and set your criteria. It will take on the appearance set by the CSS above.

    Here is an example screenshot:
    Click image for larger version

Name:	notices.jpg
Views:	1
Size:	47.5 KB
ID:	3707554

    The icons used are from the FamFamFam Silk set and are included below as well.
    Attached Files
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

  • #2
    Remove Containing Table from Notices

    Open the navbar template and find:
    Code:
    <if condition="$show['notices']">
    <form action="profile.php?do=dismissnotice" method="post" id="notices">
    <input type="hidden" name="do" value="dismissnotice" />
    <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
    <input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
    <input type="hidden" name="url" value="$return_link" />
        <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
        <tr>
            <td class="thead">$vbphrase[notices]</td>
        </tr>
        <tr>
            <td class="alt1">
                $notices
            </td>
        </tr>
        </table>
        <br />
    </form>
    </if>
    Replace with:
    Code:
    <if condition="$show['notices']">
    <form action="profile.php?do=dismissnotice" method="post" id="notices">
    <input type="hidden" name="do" value="dismissnotice" />
    <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
    <input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
    <input type="hidden" name="url" value="$return_link" />
         $notices
    </form>
    <if condition="$show['forumdesc'] AND $show['notices']">
        <br />
    </if>
    </if>
    Note this removes the container completely. You will need to use your own block level device as a container. However this makes a smoother notice experience when combined with the techniques in the first post.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment

    Related Topics

    Collapse

    Working...
    X