Jump to content

Community

CSS3 Breadcrumbs by IPS Themes


Tom Christian
 Share

Recommended Posts

CSS3 Breadcrumbs by IPS Themes


L0ZvnvF.png
TL3ziA0.png
 
CSS3 Breadcrumbs relies heavily on pseudo elements (nth-child, :before, :after etc), border-radius, box-shadow and various other features of CSS3. This means that browser compatibility will be limited to the latest & most modern CSS3 compatible browsers. Check Can I use for a general idea of what browsers are supported.


 

Link to comment
Share on other sites

Information Regarding Support
- If you have any issues with this hook, please post in here and I'll help as soon as possible.
- Feel free to post feature requests or theme ideas. I will consider every idea and if I feel an idea is suitable, I'll include it in a future version.
- Please do not private message me or E-Mail me regarding support unless otherwise told. These will be ignored.
- Please remember to rate and review this hook on the IPS Marketplace.

Thanks and enjoy :)

Link to comment
Share on other sites

Any chance we can mimic the top breadcrumbs, on the footer?

Not currently but good idea. I'll make this as an option ASAP.

Would this work, for example, on my board? Using the "Brave" skin from SB.

http://lethemfind.us/community/

I doubt it. I'll tell you what though - if you purchase the hook, install it and it doesn't work - PM me your site details or a copy of that theme and I'll try and make it compatible. If I can't make it compatible, i'll refund you.

Link to comment
Share on other sites

Simplify is not customized. There seems to be a problem displaying the site logo (re: doesn't show) also so I'm not entirely sure where to begin.

Looks like you've not installed the skin correctly. Go to the look & feel section, click on the dropdown arrow for simplify and make go to the settings. Make sure the image path is pointing to the simplify images. If you can't see it, you've not installed the skin properly, in which case, you should follow the documentation included in the Simplify download package on how to install the skin :)

Link to comment
Share on other sites

Hello,

I have a problem.

Skin: Infinite Dark

Select theme: CSS3 Gradient (others also)
pre_1367795672__ustawienia.png
and:
pre_1367795799__and.png' alt='' class='i" alt="pre_1367795799__and.png">

It's because your skin has been heavily customised. This is built to work with the default IPB skin layout. Send me the URL to that page and I'll see what I can do.

Link to comment
Share on other sites

  • 1 month later...
  • 4 weeks later...
  • 3 months later...
  • 3 weeks later...

So if you want the bread crumb on the bottom (assuming this hasn't been addressed/answered yet) do the following:

1) Go to your template in the ACP. Open up the globalTemplate file and find the following line <ol class='breadcrumb bottom ipsList_inline left clearfix clear'>

2) Copy the following code and paste it over the above mentioned line:

<if test="countnavbottom:|:count( $items['navigation'] )">
            	<div id="secondary_navigation" class="clearfix">
                <!--- ::: BOTTOM BREADCRUMB ::: --->
                	<ol class='breadcrumb top ipsList_inline left clearfix clear'>
						<php>$this->did_first_bottom = 0;</php>
						<if test="switchnavigationbottom:|:!$this->settings['remove_forums_nav'] OR ipsRegistry::$current_application == 'forums'">
							<li><a href='{parse url="act=idx" seotitle="false" base="public"}'>{$this->settings['board_name']}</a></li>
							<if test="didfirstnavbottom:|:$this->did_first_bottom=1"></if>
						</if>
						<foreach loop="navigationbottom:$items['navigation'] as $idx => $data">
							<li><if test="didfirstappnowbottom:|:$this->did_first_bottom"><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']} {$data[0]}'></if><span>{$data[0]}</span><if test="closenavigationlink:|:$data[1]"></a></if></li>
							<if test="forsuredidfirstnavbottom:|:$this->did_first_bottom=1"></if>
						</foreach>
					<else />
					</if>
					<if test="siteruleslink:|:$this->settings['gl_show'] and $this->settings['gl_title']">
						<li class='right ipsType_smaller'>
							<a href='<if test="ruleslink:|:$this->settings['gl_link']">{$this->settings['gl_link']}<else />{parse url="app=forums&amp;module=extras&amp;section=boardrules" base="public"}</if>' title='<if test="siterulestitletitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if>'><if test="siterulestitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if></a><if test="privvyMiddot:|:$this->settings['priv_title']"> &middot; </if>
						</li>
					</if>	
				</ol>
              	</div> 

One thing I have to add is I uncommneted the privacy policy link, since it seems to misbehave with the breadcrumbs, you can easily cut it out and paste it some where else, like for example in the footer.

Depending on your template it will or will not work. It works perfectly fine if you're using a semi-heavily modified default template (like I am). Basically if you're using a custom template, all you'll need to do is copy and paste the top bread crumb, over the bottom breadcrumb and remove/move the privacy link.

Link to comment
Share on other sites

An even easier and proper way of doing this would be to open up your breadcrumb .css, copy everything and paste it in a new .css doucment. You'll then change everything that references .breadcrumb top to .breadcrumb bottom, Once you've made the changes, you can copy and paste from the new and edited .css doucment back in to the BOTTOM of the original; make sure you don't overwrite anything. It's far less confusing if you make the changes and copy them over from a new css doucment.

A few things you don't need since they're duplicates are:

#secondary_navigation.homeIcon li:first-child a {
    background-position: 9px 4px;
    padding-left: 37px;
}

/* Core Styles */
#secondary_navigation .nav_sep { 
    display: none;
}

#secondary_navigation {
    margin-bottom: 15px;
    position: relative;
    background: #ede8e1;
    font-size: 11px;
}

You don't need the above for .breadcrumb bottom, so just uncomment or delete them and leave the originals alone. Keep in mind not all the breadcrumb css is the same, so you'll have to do a little thinking for yourself. Basically if there is any code that references #secondary_navigation, you'll leave it alone. Anything that have references to 'top' you should change to 'bottom'.

You'll also might need open up ipstyles.css and change the following:

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

Depending on the breadcrumb template, you'll either alter it to your liking or completely un-comment it.

Once everything is set and done, open up globalTemplate under Look & Feel in the ACP. and find the following code:

<ol class='breadcrumb bottom ipsList_inline left clearfix clear'>
					<if test="countnavbottom:|:count( $items['navigation'] )">
						<php>$this->did_first_bottom = 0;</php>
						<if test="switchnavigationbottom:|:!$this->settings['remove_forums_nav'] OR ipsRegistry::$current_application == 'forums'">
							<li><a href='{parse url="act=idx" seotitle="false" base="public"}'>{$this->settings['board_name']}</a></li>
							<if test="didfirstnavbottom:|:$this->did_first_bottom=1"></if>
						</if>
						<foreach loop="navigationbottom:$items['navigation'] as $idx => $data">
							<li><if test="didfirstappnowbottom:|:$this->did_first_bottom"><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']} {$data[0]}'></if><span>{$data[0]}</span><if test="closenavigationlink:|:$data[1]"></a></if></li>
							<if test="forsuredidfirstnavbottom:|:$this->did_first_bottom=1"></if>
						</foreach>
					<else />
						<li>&nbsp;</li>
					</if>
					<if test="privvy:|:$this->settings['priv_title']">
					<li class='right ipsType_smaller'>
						<a rel="nofollow" href='{parse url="app=core&amp;module=global&amp;section=privacy" template="privacy" seotitle="false" base="public"}'>{$this->settings['priv_title']}</a>
					</li>
					</if>
					<if test="siteruleslink:|:$this->settings['gl_show'] and $this->settings['gl_title']">
						<li class='right ipsType_smaller'>
							<a href='<if test="ruleslink:|:$this->settings['gl_link']">{$this->settings['gl_link']}<else />{parse url="app=forums&amp;module=extras&amp;section=boardrules" base="public"}</if>' title='<if test="siterulestitletitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if>'><if test="siterulestitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if></a><if test="privvyMiddot:|:$this->settings['priv_title']"> &middot; </if>
						</li>
					</if>	
				</ol>
			</div>
			<!-- ::: FOOTER (Change skin, language, mark as read, etc) ::: -->

Replace entirely with the following:

<if test="countnavbottom:|:count( $items['navigation'] )">
	<div id="secondary_navigation" class="clearfix">
		<ol class='breadcrumb bottom ipsList_inline left clearfix clear'>
						<php>$this->did_first_bottom = 0;</php>
						<if test="switchnavigationbottom:|:!$this->settings['remove_forums_nav'] OR ipsRegistry::$current_application == 'forums'">
							<li><a href='{parse url="act=idx" seotitle="false" base="public"}'>{$this->settings['board_name']}</a></li>
							<if test="didfirstnavbottom:|:$this->did_first_bottom=1"></if>
						</if>
						<foreach loop="navigationbottom:$items['navigation'] as $idx => $data">
							<li><if test="didfirstappnowbottom:|:$this->did_first_bottom"><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']} {$data[0]}'></if><span>{$data[0]}</span><if test="closenavigationlink:|:$data[1]"></a></if></li>
							<if test="forsuredidfirstnavbottom:|:$this->did_first_bottom=1"></if>
						</foreach>
					<else />
						<li>&nbsp;</li>
					</if>
					<!--<if test="privvy:|:$this->settings['priv_title']">
					<li class='right ipsType_smaller'>
						<a rel="nofollow" href='{parse url="app=core&amp;module=global&amp;section=privacy" template="privacy" seotitle="false" base="public"}'>{$this->settings['priv_title']}</a>
					</li>
					</if>-- MOVE THE PRIVACY LINK ELSEWHERE -->
					<if test="siteruleslink:|:$this->settings['gl_show'] and $this->settings['gl_title']">
						<li class='right ipsType_smaller'>
							<a href='<if test="ruleslink:|:$this->settings['gl_link']">{$this->settings['gl_link']}<else />{parse url="app=forums&amp;module=extras&amp;section=boardrules" base="public"}</if>' title='<if test="siterulestitletitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if>'><if test="siterulestitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if></a><if test="privvyMiddot:|:$this->settings['priv_title']"> &middot; 	                    </if>
						</li>
				  </ol>
                </div>
             </if>
        </div>
			<!-- ::: FOOTER (Change skin, language, mark as read, etc) ::: -->

Like with the previous "quick and dirty" method, privacy has been un-commented, and it's up to you if whether or not you want to move it.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy