Forums / Templates, Stylesheets, Page Layout / How to add non clickable text to top?

How to add non clickable text to top?

Started by pompidompie on 29 Mar 2015, 3:27 PM · Views: 806

Results 1 to 9 of 9
29 Mar 2015, 3:27 PM
#1
pompidompie avatar

pompidompie

Zen Follower

Join Date:
Mar 2015
Posts:
105
Plugin Contributions:
0

How to add non clickable text to top?

I have a top, where the languages choice is on the left and the home/login/checkout on the right.
I would like to add the text, free shipping, in the middle/center. Non clickable.

How do I do that?

Language: Dutch
English: not so very good
Allready have a live shop, so building local/on my computer

29 Mar 2015, 3:53 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How to add non clickable text to top?

It would help if we could see the site.

29 Mar 2015, 4:45 PM
#3
pompidompie avatar

pompidompie

Zen Follower

Join Date:
Mar 2015
Posts:
105
Plugin Contributions:
0

Re: How to add non clickable text to top?

My question is, how to put a non clickable text in there.
If it where a link, I would probably get it done.
I think I would open tpl_header and make a

<div id="shipping"> Link here </div> go to the stylesheet and ad #shipping. Something like that.

But now I want to add just the words Free shipping (in english, and gratis verzending in dutch) and I don't want to make it a link.
How do I add those words if I don't want them to do anything?

Language: Dutch
English: not so very good
Allready have a live shop, so building local/on my computer

29 Mar 2015, 4:56 PM
#4
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: How to add non clickable text to top?

Open tpl_header.php
\includes\templates\YOUR_TEMPLATE\common

Find the piece of code for language selection, and the one for the login, add

<div id="shipping"> Link here </div> in between them.
29 Mar 2015, 5:19 PM
#5
pompidompie avatar

pompidompie

Zen Follower

Join Date:
Mar 2015
Posts:
105
Plugin Contributions:
0

Re: How to add non clickable text to top?

I got it done.
I added this to the header file

<div id="shipping"> <?php echo HEADER_SHIP_TEXT;?> </div>

Then addes HEADER_SHIP_TEXT to the language files.

And added #shipping to the stylesheet.

So far so good, but i made a mess out of the places where everything goes.

#shipping{width:70%;float:center;}
#header-cart{font-size:140%;text-align:left;}
#cur-lan-header{width:25%;float:left;}
#lang_header{float:left;width:40%;margin-top:4px;}
#navMainWrapper {margin:0 auto;color:#171717;float:right;width:70%;}
#navMain ul {margin:0 auto;padding: 5px 0 0.5em 0;list-style-type:none;text-align:left;line-height: 1.5em;float:right;}
#navMain ul li {display:inline;}
#navMain ul li a {margin:0;padding:0em 1.0em;color: #a0a0a0;text-decoration:none;white-space:nowrap;font-size:100%;text-transform:uppercase;}
#navMain ul li a:hover {color: #8db9fb;}
#navMain i{margin-right:10px;color: #8db9fb;font-size:120%;vertical-align:middle;}
#navMain i:hover{color:#fff;}

I would like the language flags on the left, free shipping in the middle and the login/items/checkout on the right.
And also on the mobile phone

Attachment #15103

Language: Dutch
English: not so very good
Allready have a live shop, so building local/on my computer

29 Mar 2015, 5:39 PM
#7
pompidompie avatar

pompidompie

Zen Follower

Join Date:
Mar 2015
Posts:
105
Plugin Contributions:
0

Re: How to add non clickable text to top?

tlp_header

<div id="top-wrapper">
<!--bof-navigation display-->
<div class="onerow-fluid <?php echo $fluidisFixed; ?>">
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><i class="fa fa-power-off" title="Log Off"></i><?php echo 

HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><i class="fa fa-gear" title="My Account"></i><?php echo 

HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li class="h-login"><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><i class="fa fa-user" title="Login"></i><?php echo 

HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>


    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><i class="fa fa-shopping-cart" title="Shopping Cart"></i><?

php echo $_SESSION['cart']->count_contents();?>  - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><i class="fa fa-check-square-o" title="Checkout"></i><?php echo 

HEADER_TITLE_CHECKOUT; ?></a></li>

   <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<?php }?>

</ul>
</div>
</div>
<!--eof-navigation display-->


<div id="cur-lan-header">
    <?php require(DIR_WS_MODULES . 'sideboxes/languages_header.php'); ?>
</div>

<div id="shipping">
<?php echo HEADER_SHIP_TEXT;?>
</div>

stylesheet:

/*bof header*/
#headerWrapper{margin:0 auto;}
#top-wrapper{width:100%;height:30px;background:#171717;color:#fff;text-align:left;padding-top:10px;padding-bottom:5px;}
#top-wrapper a{color:#fff;}
#top-inner{background:none;}
.top-specials{text-transform:uppercase;border-radius:3px;letter-spacing:1px;line-height:24px;margin-right:20px;padding:0 10px;font-

size:90%;float:left;background:rgba(0, 0, 0, 0.2);}
#top-middle{width:100%;background:#fff;padding-bottom:20px;border-bottom:2px solid #dbdbce;}
#navMainWrapper {margin:0 auto;color:#171717;float:right;width:70%;}
#navMain ul  {margin:0 auto;padding: 5px 0 0.5em 0;list-style-type:none;text-align:left;line-height: 1.5em;float:right;}
#navMain ul li {display:inline;}
#navMain ul li a {margin:0;padding:0em 1.0em;color: #a0a0a0;text-decoration:none;white-space:nowrap;font-size:100%;text-transform:uppercase;}
#navMain ul li a:hover {color: #8db9fb;}
#navMain i{margin-right:10px;color: #8db9fb;font-size:120%;vertical-align:middle;}
#navMain i:hover{color:#fff;}
#navEZPagesTop {background-color:#444;}
#navEZPagesTop {margin:0;padding:0.5em;font-size:0.95em;font-weight:bold;color:#fffffd;}
#navEZPagesTop a{color:#fffffd;}
#navEZPagesTop a:hover {color:#f99d30;}
#navCatTabsWrapper {margin: 0em;background-color: #444;width:100%;height:1%;font-weight: bold;color: #fff;}
#navCatTabs ul  {margin: 0;padding:  0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;}
#navCatTabs ul li {display: inline;}
#navCatTabs ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #fffffd;white-space: nowrap;}
#navBreadCrumb {margin:18px 0 0 0;}
#navMainSearch {margin:0;float:right;margin-top:-40px;}
.search-header-box {padding-left:5px;background:#fff;width:160px;height:28px;color:#a0a0a0;border:1px solid #dbdbce;text-

transform:lowercase;font-size:75%;}
.search-box {padding-left:5px;background:#fff;width:160px;height:28px;color:#a0a0a0;border:1px solid #dbdbce;text-transform:lowercase;font-

size:80%;}
.search-header-box:focus{background:#fff;}
#navMainSearch-mobile{display:none;}
#header-cart{font-size:140%;text-align:left;}
#cur-lan-header{width:25%;float:left;}
#lang_header{float:left;width:40%;margin-top:4px;}
.header-checkout{color:#fff;}
.header-checkout:hover{color:#8cb9fb;}
#shipping{width:70%;float:center;}

As you can see the stylesheet is a little messed up :blush:

Language: Dutch
English: not so very good
Allready have a live shop, so building local/on my computer

29 Mar 2015, 7:03 PM
#8
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: How to add non clickable text to top?

Try using this as a starting point, borders are so to point out the "areas", based on the other elements (i-e- top-wrapper, and onerow-fluid) you need to do your adjustements.
Notice I moved the language, and shipping in your tpl_header.

#navMainWrapper {
  background-color: #3c3c3c;
  color: #00ffff;
  float: left;
  font-weight: bold;
  height: 1%;
  margin: 0;
  padding: 0.5em 0.2em;
  width: 100%;
}

#cur-lan-header {
  width: 18%;
  border: 1px solid #f00;
  float: left;
}
#shipping {
  width: 36%;
  border: 1px solid #0f0;
  float: left;
}
#navMain {
  width: 45%;
  border: 1px solid #ff0;
  float: left;
}
<div id="top-wrapper">
<!--bof-navigation display-->
<div class="onerow-fluid <?php echo $fluidisFixed; ?>">
<div id="navMainWrapper">

<div id="cur-lan-header">
    <?php require(DIR_WS_MODULES . 'sideboxes/languages_header.php'); ?>
</div>

<div id="shipping">
<?php echo HEADER_SHIP_TEXT;?>
</div>

<div id="navMain">
    <ul class="back">
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><i class="fa fa-power-off" title="Log Off"></i><?php echo 

HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><i class="fa fa-gear" title="My Account"></i><?php echo 

HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li class="h-login"><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><i class="fa fa-user" title="Login"></i><?php echo 

HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>


    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><i class="fa fa-shopping-cart" title="Shopping Cart"></i><?

php echo $_SESSION['cart']->count_contents();?>  - <?php echo $currencies->format($_SESSION['cart']->show_total());?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><i class="fa fa-check-square-o" title="Checkout"></i><?php echo 

HEADER_TITLE_CHECKOUT; ?></a></li>

   <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<?php }?>

</ul>
</div>
</div>
<!--eof-navigation display-->
29 Mar 2015, 9:47 PM
#9
pompidompie avatar

pompidompie

Zen Follower

Join Date:
Mar 2015
Posts:
105
Plugin Contributions:
0

Re: How to add non clickable text to top?

Thank you Keneso, that helped me a lot! By coloring the borders red (#ff0000) I could see what you did.
I can now play with it some more and make it exactly how I want. Again, thank you!

Language: Dutch
English: not so very good
Allready have a live shop, so building local/on my computer