Breadcrumb in Broadscope « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Broadscope

Breadcrumb in Broadscope

17 posts from 5 voices

Started 1 year ago by jiwaji
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

jiwaji
Member

Hi, I wanted to know if there a way to create or add as a widget a breadcrumb under the Menu?

Posted 1 year ago #

Chris Beard

Hi,

It is possible, it requires quite some editing though.

First add this code to the bottom of functions.php

//breadcrumbs

function the_breadcrumb() {
	if (!is_home()) {
		echo '<a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a> » ";
		if (is_category() || is_single()) {
			single_cat_title();
			if (is_single()) {
				echo " » ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
}

Then add this code in your header.php file after the line saying : wp_nav_menu($args); (line 105)

echo "<div class=\"breadcrumbs\">";
the_breadcrumb();
echo "</div>";

Then, in your light-skin.css file from your css folder (if you're using the dark skin use dark-skin.css ..) change this:

#top .nav, #top .avia_mega{
border:1px solid #e1e1e1;
border-bottom:none;
background: #f8f8f8;
}

To this:

#top .nav, #top .avia_mega{
border:1px solid #e1e1e1;
background: #f8f8f8;
margin-bottom:20px;
}

And add this to the bottom of the file:

.breadcrumbs{
	padding: 128px 0 0 5px;
}

This should do. Let me know if it worked, it did for me.

Posted 1 year ago #

jiwaji
Member

Hi Chris,

I really appreciate your help. It did work.

A couple of odd things that are happening with this Breadcrumb that i still need help on.

1. I am getting this image (�) in between my breadcrumb trail after home page see here : Home � KVCMF-Investment Options

2. For this, can I send an image outside this post as that would visually explain the problem.

Thanks.

Posted 1 year ago #
Dude
Dude
Hey,
please use services like: http://imageshack.us/ to post screenshots here. However I think the problem is following line in the code Chris provided above:
```
echo "</a> » ";
```
Try following code instread:
```
echo "</a> &raquo; ";
```
Posted 1 year ago #
jiwaji
Member

Brilliant! Dude . Thanks... appreciate the quick help.

Posted 1 year ago #
Chris Beard

Hah, sorry for that, I copied it straight from my "smart" editor, sorry for the inconvenience. (Don't forget to change both »'s in my code to Dude's solution - just saying in case you didn't figure it out ;) )

Glad we could help.

Posted 1 year ago #
jiwaji
Member

Hi Chris or Dude,

This code for the breadcrumb is working fine but I need to move it below the Nav Bar line. Currently it sits between the Horizontal bar (stretched layout without image) and thus pushing the Nav menu bar up. Can you suggest a fix?

Posted 1 year ago #
Dude
Dude

Can you post a link to your website please - we can give you custom css code then :)

Posted 1 year ago #
jiwaji
Member

Hi Dude,

Since I am giving you the link, please see other areas that seem to be buggy. http://kvcapital.ca/?skip-maintenance-token=5EC393

1. The Mini Slider in the footer has formatting issues when I place the short code in there. Note the Blue Grey dots location.

2. I need to make the header larger and place and image across the header.

3. And the bread crumb issue mentioned above where I wish to place it below the menu bar and below the grey line.

4. Also, can I change the frame and tab colours of the Tab or Toggle Shortcodes? and How?

Thanks a lots and I must say this theme is very professional and clean to work with.

Posted 1 year ago #

Dude
Dude

1) Add following code to css/custom.css:

#top .widget .pos_h3{
top: 0;
}

2) You need to adjust the header area height - add following code to css/custom.css and adjust the height value:

#header .container {
    height: 200px;
}

Then add your image in header.php - write your image code after:

<div class='container'>

You can position the image by wrapping it in a div - i.e.like:

<div class="banner">
<img src="my-image.jpg" alt="" title="" />
</div>

At least add following css to css/custom.css:

.banner {
position: absolute;
right: 0px;
top: 90px;
}

Obviously you can adjust the css class and the position as you like.

3) Add the breadcrumb code after following code in header.php and it will be displayed under the header area:

<!-- end container_wrap_header -->

4) Yes - add following css code to css/custom.css and adjust the color values:

/*tabs and toggler and slider */
.js_active .toggler{
background:url("../images/skin1/toggle.png") no-repeat scroll 6px 6px #FFFFFF;
border:1px solid #E1E1E1;
}

.js_active  #top .activeTitle{
background: #f8f8f8 url('../images/skin1/toggle.png') no-repeat 6px -77px ;
border:1px solid #ddd;
color:#555555;
}

.js_active .tab_content{
background: #fff;
border:1px solid #E1E1E1;
}

.js_active  .tab{
background:#fff;
border:1px solid #E1E1E1;
}

.js_active #top  .active_tab{
background:none repeat scroll 0 0 #fff;
color:#555555;
}

.toggle_content{
border: 1px solid #E1E1E1;
}

Posted 1 year ago #

jiwaji
Member

Hi Due, Thanks for all the help on these questions. Only one fails to work for me. Adding the breadcrumb code after " still pushes the grey bar down. And also, moves the bread crumb to the left of page out of position. I will try to tackle it on my own but if you think of any reason why let me know.

Thanks again.

Posted 1 year ago #
Dude
Dude

Strange because thebreadcrumb is part of the srrounding container which limits everything to 960px. Maybe you need to add positon:relative; to the container itself...

Posted 1 year ago #
jiwaji
Member

Will try. Thanks. On another note: If I place a background image in the header, does that hide the logo and thus it's functionality? At the moment I have a wide Ad header off to the side. Please comment.
http://kvcapital.ca/?skip-maintenance-token=D34B44

Posted 1 year ago #
jiwaji
Member

In essence, what I'd like to do is the same as the header on site you created (http://bit.ly/eSOvoe) except your image goes across the breadth of the screen.

Posted 1 year ago #
Dude
Dude
You can increase the z-index of the logo area - the logo will display on the top even if an image is behind it or overlaps it. Open up css/custom.css and add:
```
#top .logo a, #top .logo a:hover{
z-index: 100;
}
```
Posted 1 year ago #
metropolitandetail
Member

I do not have:

#top .nav, #top .avia_mega{
border:1px solid #e1e1e1;
border-bottom:none;
background: #f8f8f8;
}

but I am using Corona. Where is this in Corona?

Posted 1 year ago #
Devin
Moderator

Hi metropolitandetail,

This is a bit old and may not cross over correctly at all with Corona. I'm going to lock the thread so it doesn't get additional attention with your bump :)

Please make a new thread in regards to the issue.

Posted 1 year ago #