Jump to content

[SOLVED] Issue customising blockpermanentlinks


Recommended Posts

Yes, I've looked at all the English and many topics on this very subject in other languages, and I know what files I have to modify, and I have modified them as instructed but it just looks all wonky! The 'tell a friend' link is for some reason on the line below the other (stock) links, and somehow the icons got put to the right hand side of the links, rather than the left where they are supposed to be (and where I would like them to be).

To clarify, all the links in blockpermanentlinks should be on one line, with the icons just to the left of each link (contact icon before the word 'contact' and so on).

I'm using et-black v1-2 template and here are the pertinent parts of the necessary files, hopefully someone can tell me what the heck is wrong and what I need to modify to make it look 'right' and professional.

blockpermanentlinks.tpl:

<!-- Block permanent links module -->

   <!-- Sitemap -->

 
{l s='sitemap' mod='blockpermanentlinks'}

   <!-- Contact -->

&npbs;
{l s='contact' mod='blockpermanentlinks'}

   <!-- Bookmark -->

       [removed]writeBookmarkLink('{$come_from}', '{$shop_name|addslashes|addslashes}', '{l s='bookmark this page' mod='blockpermanentlinks'}', '{$img_dir}icon/star.png');[removed] 


 
{l a='tell a friend' mod='blockpermanentlinks'}


<!-- /Block permanent links module -->



Blockpermanentlinks-header.tpl:

><!-- Block permanent links module HEADER -->
</pre>
<ul>
{l s='contact' mod='blockpermanentlinks'}
{l s='sitemap' mod='blockpermanentlinks'}

       [removed]writeBookmarkLink('{$come_from}', '{$shop_name|addslashes|addslashes}', '{l s='bookmark' mod='blockpermanentlinks'}');[removed]
id="tell_a_friend"></ul>
<a href="%7B%24base_dir%7Dcontent/6-tell-a-friend" title="{l s='tell a friend' mod='blockpermanentlinks'}" rel="">{l s='tell a friend' mod='blockpermanentlinks'}</a><br><br><br><!-- /Block permanent links module HEADER --&gt



global.css:

/* top links */
ul#header_links {
   margin: 0.4em 0.3em 0 0;
   list-style-type: none;
   float: left;
}
#header_links li {
   float:left;
   width: 160px;
}
#header_links a {
   display: block;
   height: 25px;
   color: #ffffff;
   padding-top: 5px;
   text-align: left;
   text-decoration: none;
   background-repeat: no-repeat;
   background-position: top center;
   background-color: transparent;
}
#header_links #header_link_sitemap a {
   background-image: url('../img/icon/sitemap.png');
}
#header_links #header_link_contact a {
   background-image: url('../img/icon/contact.png');
}
#header_links #header_link_bookmark a {
   background-image: url('../img/icon/star.png');
}
#header_links #header_link_tell_a_friend a {
   background-image: url('../img/icon/consulting.png');
}



I have adjusted the width of #header_links, even making it 260 and the first three (stock) links will spread out but 'tell a friend' is still on the line below them, aligned left! AND, the icon for that link doesn't show up, even though it is correctly delineated in global.css. Heck I even hard-coded it in and it still doesn't show up!

So I'm hoping someone will be able to see what I (clearly) am not seeing and help a lady out :)

Link to comment
Share on other sites

"Tell a friend" list element has wrong opening tag in Blockpermanentlinks-header.tpl:. Currently it is , change it to .

After correcting, if everything still fails to display on the same line, reduce the list element width to, say 160. (You wrote 160 in global.css snippet you posted but currently it is 260).

Once that problem is resolved we will look at the rest. No need to post code snippets. I can see the site.

Link to comment
Share on other sites

I thank you for your kind reply, and after correcting the opening tag in blockpermanentlinks-header.tpl, the final link is on the same line as the other stock links! Yay! Good start :)

I did change the width in global.css to 260 late last night out of desperation and neglected to change it back to conform with this posting, however, it is currently at 150 which is clearly ample room for all the links and associated icons.

Now I look forward to solving the mysteries as to 1) why the icons for the 3 stock links migrated to the right of their links and 2) why my tell-a-friend icon is not showing up...

Link to comment
Share on other sites

The following is one way to solve the second issue. In global.css locate the section

#header_links a {
   background-color:transparent;
   background-position:center top;
   background-repeat:no-repeat;
   color:#FFFFFF;
   display:block;
   height:25px;
   padding-top:0;
   text-align:left;
   text-decoration:none;
}


and remove

text-align:left;



To solve the third issue, in Blockpermanentlinks-header.tpl find the list element you corrected to solve the first issue , change the id attribute of the element from:

id="tell_a_friend"



to:

id="header_link_tell_a_friend"

Link to comment
Share on other sites

EXCELLENT!! Thank you so very much, phrasespot!

All of the links are now on one row and the icons show up, on the left as they are supposed to - hooray! :lol:

I have re-enabled the "user info block" (because it seems kind of necessary) and it automatically appears on the far right in the 'top of pages' and it fits on the same line as well.

I adjusted the width in global.css to 145, which seems to be the maximum width possible before it starts pushing the 'user info block' items down to the second line, however, the icons for the blockpermanentlinks are spaced different amounts from their links- quite far for contact, far for sitemap, close (and perfect) for bookmark, and all smushed up against tell a friend.

I am unsure how to make them all spaced equally from their links in a nice, uniform way? I am sure this is possible but how to do it?

Link to comment
Share on other sites

They are aligned the way you want now, it is only a matter of tuning the values. Overwrite the #header_links a declaration in global.css with

#header_links a {
   background-color:transparent;
   background-position:left center;
   background-repeat:no-repeat;
   color:#FFFFFF;
   display:block;
   height:1.4em;
   padding-left:2.1em;
   padding-top:0;
   text-align:left;
   text-decoration:none;
   width:auto;
}

Link to comment
Share on other sites

  • 5 months later...
They are aligned the way you want now, it is only a matter of tuning the values. Overwrite the #header_links a declaration in global.css with

#header_links a {
   background-color:transparent;
   background-position:left center;
   background-repeat:no-repeat;
   color:#FFFFFF;
   display:block;
   height:1.4em;
   padding-left:2.1em;
   padding-top:0;
   text-align:left;
   text-decoration:none;
   width:auto;
}



is it possible to add new product, best seller, and special link to permanent link? if so, how can i do that? please help
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...