How to Insert Your Own Text Into The Very Top Header To Replace Existing Top Header In VPCart.

How to Insert Your Own Text Into The Very Top Header To Replace Existing Top Header In VPCart.

By default, in VPCart top header, you usually will see these menus :



If you want to display your own custom text in the top left and top right of the header to replace the current menus, you can follow these steps below :

1. Login to your VPCart administration.

2. Go to : Website » Layout Manager

3. Scroll down to the Body Center Container near bottom, you will see Add Box button. Click on it.



4. In the Empty box, click Edit.



5. In the Main Selection, select Body Free Text and make sure the following fields are set to the below (this will be used for top left header):


Most fields need to set to No and leave empty. You just need to enter your custom text in the Display Text.
Click Save Changes once done.

6. In the Empty box, click Edit.



7. In the Main Selection, select Body Free Text and make sure the following fields are set to the below (this will be used for top right header):


Most fields need to set to No and leave empty. You just need to enter your custom text in the Display Text.
Click Save Changes once done.

8. Now after saving both Body Free Text you will now see the IDs of the both widget you just created.
Please remember the IDs of both as we will add them and defined to the header template file later.



9. Open the file shoppage_header.htm located /templates/default/ folder.

10. Locate the following code :

<div id="vp_topheader">
<%load_topheaderbox%>
</div>

11. Please replace to :

<div id="vp_topheader">
<!--<%load_topheaderbox%>--> <!--TOP BAR MODIFICATION START -->
<div role="navigation" class="navbar navbar-default navbar-custom global-background-color">
<div class="container">
<div class="left-topnav nav navbar-nav noborder notitle">
<!--START LOAD FREETEXT WITH ID FOR TOP LEFT BAR-->
<%LoadContainer "xx"%>
<!--END LOAD FREETEXT WIDTH ID FOR TOP LEFT BAR -->
</div>
<div class="subnavigation pull-right collapse navbar-collapse noborder notitle" id="topright_menu">
<ul class="nav navbar-nav">
<li>
<!--START LOAD FREETEXT WITH ID FOR TOP RIGHT BAR -->
<%LoadContainer "yy"%>
<!--END LOAD FREETEXT WIDTH ID FOR TOP RIGHT BAR -->
</li>
</ul>
</div>
</div>
</div>
<!--TOP BAR MODIFICATION END -->
</div>

NOTE : Change xx to the first ID you have created, in the above example, the first ID is 67 (refer to step no. 8)
Also change yy to the second ID you have created, in the above example, the second ID is 68 (refer to step no. 8)

12. Save the file and upload to your site.

13. If you are using header file shopfrontpage_header.htm, please do the same steps from step 10 to step 12.

14. Next, open the file basic-style.css located in /templates/default/css folder.

15. Insert this new CSS code at the very bottom of the file :

/* 800 2015-08-11 FOR FREE TEXT TO HEADER */
.noborder { border: 0px none !important; }
.notitle .title { display: none; }
.navbar-nav .main-freetext { padding: 0px; background-color: transparent;}

16. Save the file and upload to your site.

Below is the preview of both custom text in top left and right of the VPCart site :



Times Viewed:
9479
Added By:
Wilson Keneshiro
Date Created:
8/13/2015
Last Updated:
8/13/2015