Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #4871

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

    #47872

    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.

    #47873

    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.

    #47874

    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; ";

    #47875

    Brilliant! Dude . Thanks… appreciate the quick help.

    #47876

    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.

    #47877

    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?

    #47878

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

    #47879

    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.

    #47880

    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;
    }

    #47881

    Hi Due, Thanks for all the help on these questions. Only one fails to work for me. Adding the breadcrumb code after “<!– end container_wrap_header –> 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.

    #47882

    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…

    #47883

    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

    #47884

    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.

    #47885

    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;
    }

    #47886

    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?

    #47887

    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.

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Breadcrumb in Broadscope’ is closed to new replies.