The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #165541


    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:


                 <!-- ::: 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="">
                                        <a href='{parse url="act=idx" seotitle="false" base="public"}' itemprop="url">
                                            <span itemprop="title">{$this->settings['board_name']}</span>
                                    <if test="didfirstnav:|:$this->did_first=1"></if>
                                <foreach loop="navigation:$items['navigation'] as $idx => $data">
                                    <li itemscope itemtype="">
                                        <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>
                                    <if test="forsuredidfirstnav:|:$this->did_first=1"></if>
                        <br />


    .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; } { margin-bottom: 10px; }
    .breadcrumb.bottom { 
        margin-top: 10px; 
        width: 100% 

    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.


    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.


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design’ is closed to new topics and replies.