Boonex Bullets are BS

In the course of designing several templates, the way bullets are done everywhere is a real pain in the ass,  Scattered throughout the code, are snippets like this:

<td class="bullet"><span>&#183;</span></td>

I propose making this change throughout the entire Dolphin script.  It can easily be done with a search/replace.

1. Make the above example look like this:

<td class="sys-icon bullet"></td>

Most other areas where bullets are used, involves a similar code reduction, and adding the sys-icon class

2. Add the following to /templates/base/icons.css

.sys-icon.bullet:before {
    content: "\f0c8";
    font-size:6px;
    color:#333333;
    line-height: 35px;
}

 This way, bullets will look more like bullets, can be any Font Awesome icon, and can be easily resized.

I did a little Search through the 7.1.4 Code and I only found 5 places where that exists. Are you finding it in more places?

I did a Search for this,

<td class="bullet"><span>&#183;</span></td>

and this by itself

<td class="bullet">

 RE:

 Yes.  Perhaps I should have used the term 'similar to' instead of 'like'.

I don't think hard coding styles or content is a good practice. 

Did a Search for just "bullet" instead and this is what I got, look more like what you are getting HL?

We will consider this enhancement for the next version:

http://www.boonex.com/trac/dolphin/ticket/3400

 Thanks.  The example I gave was just to show what I was talking about. The exact code I gave as an example was not meant to suggest how to do it site wide.  Sometimes icons are in a <div>, others in a <td>, some in a <span>, then some in an <i> tag.  There may, or may not be a "one code fits all" solution".  What I cited as an example above, I made the changes in a template, and it worked fine, but as a general solution, implementations may vary.

You can see the results here: http://houstonlively.com?skin=grayscale2

You'll see the Font Awesome bullet icons used in the sub menu and the dbTopMenu locations, and wherever else the change could be made just by altering the template files. I think it  will look a lot better, and will give template designers more design options if the hard coding is removed.

Yes, thank you for the idea and sample implementation! 

While you're at it, the breadcrumb menu could use a little iconizing.

Applicable code in function genBreadcrumb :

        //--- Get breadcrumb path(left side) ---//
        $sDivider = '<i class="sys-icon bc_divider"></i>';
        $aPathLinks = array();
        foreach($aPath as $sLink)
            $aPathLinks[] = '<div class="bc_unit bx-def-margin-sec-left">' . $sLink . '</div>';
        $sPathLinks = implode($sDivider, $aPathLinks);

        //--- Get additional links(right side) ---//
        $sAddons = "";
        return '<i class="sys-icon sys_bc"></i><div class="sys_bc bx-def-margin-leftright">' . $sPathLinks . '<div class="bc_addons">' . $sAddons . '</div></div>';

... and in icons.css

/* Breadcrumb icons start */

.sys-icon.sys_bc:before {
    content: "\f0a4";
    color:#000000;
    font-size:24px;
    float:left;
}

.sys-icon.bc_divider:before {
    content: "\f0da";
    color:#000000;
    font-size:16px;
    float:left;
    margin-left: 12px;
}

/*Breadcrumb icons end */

Demo: houstonlively.com/m/pages/view/Admin-Test-Page

Works great, thank you!