IP.Board: How to create a breadcrumb with CSS triangles

[Dylan]

Hello,

I’m trying to customize a skin on the IP.Board forum software, but I have a little problem. I watched this tutorial but after well followed, the result is not clean.

Please, could someone help me to do this?

Here is the HTML and CSS codes for the breadcrumb:

HTML:

             <!-- ::: NAVIGATION BREADCRUMBS ::: -->

                <if test="countnav:|:count( $items['navigation'] )">
                    <div id='secondary_navigation' class='clearfix'>
                        <ol class='breadcrumb top ipsList_inline left'>
                            <php>$this->did_first = 0;</php>
                            <if test="switchnavigation:|:!$this->settings['remove_forums_nav'] OR ipsRegistry::$current_application == 'forums'">
                                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                                    <a href='{parse url="act=idx" seotitle="false" base="public"}' itemprop="url">
                                        <span itemprop="title">{$this->settings['board_name']}</span>
                                    </a>
                                </li>
                                <if test="didfirstnav:|:$this->did_first=1"></if>
                            </if>
                            <foreach loop="navigation:$items['navigation'] as $idx => $data">
                                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                                    <if test="didfirstappnow:|:$this->did_first"><span class='nav_sep'>{parse replacement="f_nav_sep"}</span></if>
                                     <if test="navigationlink:|:$data[1]"><a href='{parse url="{$data[1]}" base="$data[4]" seotitle="$data[2]" template="$data[3]"}' title='{$this->lang->words['nav_return_to']} {parse expression="IPSText::striptags( IPSText::htmlspecialchars( $data[0] ) )"}' itemprop="url"></if><span itemprop="title">{$data[0]}</span><if test="closenavigationlink:|:$data[1]"></a></if>
                                </li>
                                <if test="forsuredidfirstnav:|:$this->did_first=1"></if>
                            </foreach>
                        </ol>
                    </div>
                    <br />
                </if>

CSS:

.breadcrumb {
    color: #777;
    font-size: 11px;
}

.breadcrumb a { color: #777; }

.breadcrumb li .nav_sep { margin: 0 5px 0 0; }

.breadcrumb li:first-child { margin-left: 0; }

.breadcrumb.top { margin-bottom: 10px; }

.breadcrumb.bottom { 
    margin-top: 10px; 
    width: 100% 
}

[Ed]

http://codepen.io/NoobSaibot/pen/HjnCg

Can you please post the compiled HTML? I.e. without PHP tags and whatever <if> junk you’ve got going on.

The best thing you could do in order for us to help you is to give us the outputted HTML from all of that, in a CodePen, so we can tell you the CSS you’d need to have a breadcrumb.

[Cory]

IPBoard’s CSS/HTML is a hot mess. That said, if you want to implement the demo, exactly as written, you would do the following:

1) Open the Global template and remove or comment out the following code:

<if test="didfirstappnow:|:$this->did_first"><span class='nav_sep'>{parse replacement="f_nav_sep"}</span></if>

Not removing this is likely the reason it’s not looking right.

2) Replace the CSS you posted above with the code Chris posted in the demo.

[Rosáline Bettencourt]

Baha! IP Board’s CSS/HTML is truly a hot mess. Thank you for this reply, it was very helpful. :)

[Author]

Posts