Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Sep 2008
    Posts
    10
    Plugin Contributions
    0

    Default Adding link to main menu with different formatting

    Hi,
    (Hopefully all I need is a simple lesson in HTML.)

    I want to add a link at the very top of my site, on the main menu, formatted differently to the other links already up there (ie home, login, search).

    www.ashore.co.nz is the site, and that's what I want it to say in very big white letters aligned close to the right side & in a nice font.

    Thanks in anticipation.

    Don.
    Mostly self-taught - so mostly stupid.

  2. #2
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: Adding link to main menu with different formatting

    You want a link to your site at the top of your site, in addition to the Home link and your clickable header? I guess I don't understand exactly what you're trying to do.

  3. #3
    Join Date
    Sep 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Adding link to main menu with different formatting

    Thanks for your post stevesh. You're exactly right - that's what I want to do. (The rationale is more about design, branding and establishing location, than needing a link back to home, but making it a link may as well happen, unless that's adding overcomplexity.)
    Cheers,
    Don.

  4. #4
    Join Date
    Sep 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Adding link to main menu with different formatting

    please help?

  5. #5
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: Adding link to main menu with different formatting

    I wouldn't bother, but you could make the background image of #navMain clickable to your main site.

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Adding link to main menu with different formatting

    Easily done. Edit /includes/templates/your_template/common/tpl_header.php, in this section:
    PHP Code:
    <!--bof-navigation display-->
    <div id="navMainWrapper">
    <div id="navMain">
        <ul class="back">
        <li><?php echo '<a href="' HTTP_SERVER DIR_WS_CATALOG '">'?><?php echo HEADER_TITLE_CATALOG?></a></li>
    <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF'''SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT'''SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT?></a></li>
    <?php
          
    } else {
            if (
    STORE_STATUS == '0') {
    ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN'''SSL'); ?>"><?php echo HEADER_TITLE_LOGIN?></a></li>
    <?php } } ?>

    <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART'''NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING'''SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT?></a></li>
    <?php }?>
    </ul>
    </div>
    <div id="navMainSearch"><?php require(DIR_WS_MODULES 'sideboxes/search_header.php'); ?></div>
    <br class="clearBoth" />
    </div>
    <!--eof-navigation display-->
    Just after the "navMainSearch" div, add another div like

    PHP Code:
    <div id="navMainSitename"><?php echo '<a href="' HTTP_SERVER DIR_WS_CATALOG '">'?>www.ashore.co.nz</a></div>
    to get this
    PHP Code:
    <div id="navMainSearch"><?php require(DIR_WS_MODULES 'sideboxes/search_header.php'); ?></div>
    <div id="navMainSitename"><?php echo '<a href="' HTTP_SERVER DIR_WS_CATALOG '">'?>www.ashore.co.nz</a></div>
    <br class="clearBoth" />
    </div>
    <!--eof-navigation display-->
    Then you can style
    #navMainSitename {}
    with float: right; and whatever font size etc. you want.

    However, this does seem like not just overkill but bad design, having the same website address in two places so close together. If you want it there, remove it from your logo image.

  7. #7
    Join Date
    Sep 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Adding link to main menu with different formatting

    Thanks for your suggestions, stevesh.
    I think mentioning "link" in my original post was a mistake, as linking is not really the important part of what I'm trying to achieve. Let's just say that I just want some text, quite large, in a nice white font at the right hand end of my main menu bar.
    cheers,
    Don.

  8. #8
    Join Date
    Sep 2008
    Posts
    10
    Plugin Contributions
    0

    Default Re: Adding link to main menu with different formatting

    Thanks gjh42/Glenn,
    However the link is now a line beneath the top, and not on the blue background area, which is where I really want it.
    Any suggestions on how to move it up?
    Thanks again. Don.
    ps: Removing the url on the image, as suggested.

  9. #9
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Adding link to main menu with different formatting

    You are missing the float and defined width which should allow it to move up as you desire, but I am still not finding the right combination of styling on various elements to make it work. I will keep looking, as it should be relatively simple.

    On a different subject, I did just notice that you used MS Word to create the define_main_page text; this has left a raft of proprietary Microsoft tags which may mess up your display, as well as having an extra set of <html> and <body> tags which should never be duplicated in a page.
    HTML Code:
    <div id="indexDefaultMainContent" class="content"><html xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns:w="urn:schemas-microsoft-com:office:word"
    xmlns:st1="urn:schemas-microsoft-com:office:smarttags"
    xmlns="http://www.w3.org/TR/REC-html40">
    
    <head>
    </head>
    
    <body lang=EN-NZ style='tab-interval:36.0pt'>
    
    <div class=Section1>
    
    <h2><span style='font-size:10.0pt;font-family:Arial;color:#2A3B64;mso-bidi-font-weight:
    normal'>##########################################################################################___<o:p></o:p></span></h2>
    
    <h2><span style='font-size:20.0pt;font-family:Arial;color:#2A3B64'>Welcome
    Ashore</span><span style='font-size:20.0pt;color:#2A3B64'><o:p></o:p></span></h2>

  10. #10
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Adding link to main menu with different formatting

    I got hung up by the big font size causing an em to be 2.5 times as wide as usual. You had a lot of properties that were unnecessary, and obscuring the actual layout. Substitute these rules for the similar ones in your existing stylesheet:
    Code:
    #navSuppWrapper, #navCatTabsWrapper {/*separate selectors*/
    	margin: 0em;
    	background-color: #ffffff;
    	font-weight: bold;
    	color: #ffffff;/*background-color and (text) color should never be the same - decide what you want here*/
    	height: 1%;
    	width: 100%;
    	}
    
    #navMainWrapper {/*separate selectors*/
    	margin: 0em;
    	background-color: #2A3B64;
    	font-weight: bold;
    	color: #ffffff;
    	height: 1%;
    	width: 100%;
    	}
    
    #navMain ul, #navSupp ul, #navCatTabs ul  {
    	margin: 0;
    	padding:  0.5em 2.0em;
    	list-style-type: none;
    	text-align: center;
    	line-height: 1.5em;
    	}
    
    #navMain ul li, #navSupp ul li, #navCatTabs ul li {/*unchanged*/
    	display: inline;
    	}
    
    #navMain ul li a {
    	text-decoration: none;
    	padding: 0em 0.5em;
    	margin: 0;
    	color: #ffffff;
    	white-space: nowrap;
    	}
    
    #navMainSearch {
    	margin: 0.0em;
    	padding: 0.5em 0 0.5em 1.5em;
    	float: left;
    	}
    
    #navMainSitename  {
    	font-size: 2.5em;
    	width: 10.9em;
    	float: right;
    	}
    
    #navMainSitename a  {/*new*/
    	color: #ffffff;
    	}

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v151 Adding a new link on the main menu tabs
    By devyani in forum General Questions
    Replies: 7
    Last Post: 29 May 2014, 06:13 PM
  2. Menu Link to Main Store Page/Listing
    By dsutton in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 6 Mar 2009, 01:12 AM
  3. Main Navigation Menu link changes
    By RoPey in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 11 Sep 2007, 06:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR