Jump to content
Sign in to follow this  
Ggib

Adding an image to the header bar

Recommended Posts

Just wondering if anyone can explain how I can add an image (long and thin) to sit between my logo and the search box and basket. In other words between the left and right side bars?

It seems odd to have a big empty space there all the time when my actual storefront logo just occupies the space in the top left hand corner.

Another option if that is not possible is to move my logo so that it sits in the center at the top rather than hugging the left hand side.

Please can you point me in the direction of the files I need to change to accommodate?

Thanks again

Share this post


Link to post
Share on other sites

I had sort of guessed it would be in main.php but I have no idea how to adjust it to allow for an additional image at the top.

I am using the Nota skin and another thing I am having trouble locating is how to change the colour of the banner that my categories are located within. Any clues?

Once again thank you very much for your ongoing help. 

Share this post


Link to post
Share on other sites

It’s fine - I’ve actually managed to do it by fumbling around and looking through files!

One last thing (hopefully!) that I would like to do is;

rather than have the contact form I would just like to put my email address on the homepage so they can click on it and send a message without having to fill out a form. Is this possible?

 

Share this post


Link to post
Share on other sites

Your email address would likely take the form of:

<a href="mailto:[email protected]?subject=Simple%20Subject&body=Simple%20body.">Contact Me</a>

Clicking this link will cause the browser to launch the email program installed on the visitor's computer (not a web-based email portal such as Gmail).

You can disable the "Contact Us" page in admin, Contact Form.

Share this post


Link to post
Share on other sites

Sorry for the delayed response. I actually just want my email address to appear on the homepage so that they can copy and paste it and use it that way to contact me. Makes it slightly less formal than filling in a form. 

My Facebook and Instagram links also do not seem to be appearing on my website anymore - is this something to do with choosing the nota skin instead of foundation and how do I correct it?

Thanks

Share this post


Link to post
Share on other sites

Correct.

In the file /classes/gui.class.php, the private function _displaySocial() first determines if there is a skin template named element.social.php. If not, nothing is done. Nota, having been written for CC5 (social icons were added in CC6), does not have this template.

To fix it, this template must be created and coded (perhaps a copy from Foundation edited to match the Nota layout and styling), and then the main.php template must be edited to place the variable {$SOCIAL_LIST} where you want the social icons to be shown.

Share this post


Link to post
Share on other sites

OK. I shall try but I might be back for help....!

And how do I add an email address to the homepage? Do I add it in to the main.php file somewhere and if so, whereabouts and in what sort of format?

Sorry about all these questions but my usual occupation is housewife - with a bit of pottery thrown in!!

Thank you again 

Share this post


Link to post
Share on other sites

Depends entirely where you want it.

You can introduce yourself and include your email address on the Homepage by using the Homepage document (admin, Documents, edit the document with the Homepage button ticked).

You can mention your email address in the Copyright content (admin, Store Settings, Copyright tab).

Share this post


Link to post
Share on other sites

OK. 

I have found the skin template element.social.php in the foundation skin but I am not sure how I find out Nota’s usual layout and styling so that I can edit the file accordingly so that it works with the Nota skin. However, looking through the template files within Nota, there seem to be far fewer than in Foundation and there are only two beginning with element so I don’t know how I find out the usual layout.

 

Share this post


Link to post
Share on other sites

When viewing your site using the Nota skin, please answer what you want the container of the list of social icons to look like.

That is, would it be acceptable to have the social icon list look like the "Shop by Category" list? Or would you want the list to appear in a box like the "Featured Product" or "Best Sellers"? Or in a horizontal list like the links to the Site Docs at the bottom of the page?

We can borrow the HTML from one of these containers/boxes to make another container/box for the list of social icons.

For several reasons, Foundation has more template files. One reason is the extra pieces used by the skin to be shown when being viewed on a mobile device -- with slide-out panels and menus.

Share this post


Link to post
Share on other sites

Hi 

It would be great to be in either a box like the featured products or best sellers, or if that is not possible then located within the horizontal band at the bottom of the page. 

 

Share this post


Link to post
Share on other sites
Posted (edited)

Make a copy of the Nota skin file box.popular.php and name it element.social.php. Open element.social.php for editing.

Change:

<div id="popular_products">
  <div class="top">
    <h3>{$LANG.catalogue.title_popular}</h3>
    <ol>
	  {foreach from=$POPULAR item=product}
	  <li><a href="{$product.url}" title="{$product.name}">{$product.name}</a></li>
	  {/foreach}
    </ol>
  </div>
  <div class="bottom"> </div>
</div>

To:

<div id="element_social">
  <div class="top">
    <h3>{$LANG.common.follow_us}</h3>
    <ol>
	  {foreach from=$SOCIAL_LINKS item=link}
	  <li><a href="{$link.url}" title="{$link.name}" target="_blank" rel="noopener noreferrer"><img class="icon" src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/{$link.icon}.png" />{$link.name}</a></li>
	  {/foreach}
    </ol>
  </div>
  <div class="bottom"> </div>
</div>

We now need to fetch a set of free social media icons. This site (https://buffer.com/library/social-media-icons) has links to free sets of images. I suggest getting a set of colored PNG images in a small size. We will need to give the images specific names to match the 'icon' value located in the GUI class file mentioned earlier.

In the Nota skin folder, place the icons in the /images/ folder.

We will display the new box just above the Featured Product box.

Open the main.php template for editing. Find {$RANDOM_PROD}. On a new blank line above that, add:

{if isset($SOCIAL_LIST)}{$SOCIAL_LIST}{/if}

 

Edited by bsmither

Share this post


Link to post
Share on other sites

Hi

I have done everything you have and double checked but the icons are still not showing. Am I correct that I needed to save them as .png files in the Nota skin images folder or should they have been saved as .jpg files?

Share this post


Link to post
Share on other sites

In fact now I am just getting a blank screen when trying to access  my site!

Share this post


Link to post
Share on other sites

A blank screen on the storefront after editing a skin suggests a mistake in the skin template code.

Please double-check.

Share this post


Link to post
Share on other sites

Note in the code

{$link.icon}.png

If you have jpg images, then change png to jpg. All the images should be the same type.

The CubeCart code is expecting the name(s) of the images to be:
facebook-square
google-plus-square
instagram
twitter-square
youtube-square
wordpress
flickr

etc.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...