This topic has 2 voices, contains 6 replies, and was last updated by  samdz 4125 days ago.

Change the header (adding images to the header)

Tagged: 

ThemeBurn Support › Forums › OpenCart Themes › Shoppica OpenCart Theme › Change the header (adding images to the header)

This topic has been marked as not resolved.

When using attached file 2 as my logo It makes a big white space (see file 1).

How can i make the space smaller? Or is is possible to put 3 images, that link to a other page, in my header. Now i’ve just included the images in my logo file.

The best thing for me is to just add 3 images next to my logo (instead of using the same file). And if those images are linked to different pages.

You would do me a great favour when helping me!
 Rovara
January 8, 2013 at 4:09 pm #16915

Hello,

To get this image in good position, I think to do :
1 – Insert this image as logo from the admin panel.
2 – Open this file : catalog/view/theme/shoppica/stylesheet/screen.css
the n find this : 

#site_logo {
  display: block;
  float: left;
  margin: 30px 10px 10px 0;
}

now change the margin code like this (for example):
margin: 30px 10px -10px 0;

you get like the attached file; but note that the link in the imge is the same for the logo.

The better is to use two image one for the logo and the seconde image for three links.
I am testing a small code I will send to you.

Hope this help you.

Sam
 samdz
January 10, 2013 at 11:22 am #16987

Hi again;

To get the header like the attache image do:
- upload image_links.png in the zip file to: catalog/view/theme/shoppica/image
- In the admin panel use the sepatate image for the logo (in the zip file : ravara_logo.pg)
- Upload the ravar_header.xml to : vqmod/xml
- Open this file catalog/view/theme/shoppica/stylesheet/screen.css
and add this code:


#link_1 {
  background-image: url(../image/image_links.png);
  background-position: 0 0 !important;
  width: 200px;
  height: 37px;
  display: inline-block;
  background-repeat: no-repeat;
}

#link_2 {
  background-image: url(../image/image_links.png);
  background-position: 54% 0 !important;
  width: 205px;
  height: 37px;
  display: inline-block;
  background-repeat: no-repeat;
}

#link_3 {
  background-image: url(../image/image_links.png);
  background-position: 100% 0 !important;
  width: 168px;
  height: 37px;
  display: inline-block;
  background-repeat: no-repeat;
}

To reduce a space edit these code (in screen.css) :
find:


#site_logo {
  display: block;
  float: left;
  margin: 30px 10px 30px 0;
}

chage it to:

#site_logo {
  display: block;
  float: left;
  margin: 35px 10px 30px 0;
}

and find this:

#system_navigation {
  margin: 74px 0 23px 0;
  text-align: right;
}

change it like :

#system_navigation {
  margin: 64px 0 23px 0;
  text-align: right;
}

for the links open ravara_header.xml and edit like :
from:
<a href="http://www.rovara.nl/" title="GRATIS VERZENDING" id="link_1"></a>
to:
<a href="YOUR LINK" title="VEILIG & SNELBETALEN" id="link_2"></a>

Hope this help you

Sam
 samdz
January 10, 2013 at 12:35 pm #16992

Sam, you are my hero!

Thanks for your time and support!

I’ve just did all the steps like you said in your seccond post, but without any (visable) results.

- i’ve put the code you have send underneath the tab ***** L A Y O U T ****** in the screen.css file. Don’t know if it matters where the code exactly is placed?
- Currently using the logo (without the images)
- Have uploaded the XML file.
- Have uploaded the links_image

Also tried your suggestion from post 1, only had a problem with the allignment of the searchbar, but this doesn’t matter anymore. Your seccond post is the best solution and the one i’m looking for. Hope you can help me further with this one!

Attached is a image from how i hope to get it.

Notice: i’m using the latest version of Shoppica: Shoppica2

Hope you can help me with this,

Thanks in advance Sam!
 Rovara
January 11, 2013 at 5:02 am #17012

Hello;

Sorry but I have make the change and the xml file for Shoppica1.

So; for Shoppica2 do this :

- upload image_links.png in the zip file to: catalog/view/theme/shoppica2/image
- In the admin panel use the sepatate image for the logo (in the zip file : ravara_logo.pg)
- Upload the ravar_header.xml to : vqmod/xml
- Open this file catalog/view/theme/shoppica2/stylesheet/screen.css.php
and add before :

/*****************************************************/
/******   U I     N O T I F Y   **********************/
/*****************************************************/

add this code :
#link_1 {
  background-image: url(../image/image_links.png);
  background-position: 0 0 !important;
  width: 200px;
  height: 37px;
  display: inline-block;
  background-repeat: no-repeat;
}

#link_2 {
  background-image: url(../image/image_links.png);
  background-position: 54% 0 !important;
  width: 205px;
  height: 37px;
  display: inline-block;
  background-repeat: no-repeat;
}

#link_3 {
  background-image: url(../image/image_links.png);
  background-position: 100% 0 !important;
  width: 168px;
  height: 37px;
  display: inline-block;
  background-repeat: no-repeat;
}

To reduce a space edit these code (in screen.css) :
find:

#site_logo {
  display: block;
  <?php if ($language == 'ltr'): ?>
  float: left;
  margin: 30px 10px 30px 0;
  <?php else: ?>
  float: right;
  margin: 30px 0 30px 10px;
  <?php endif; ?>
  text-align: center;
}

chage it to:
#site_logo {
  display: block;
  <?php if ($language == 'ltr'): ?>
  float: left;
  margin: 35px 10px 30px 0;
  <?php else: ?>
  float: right;
  margin: 30px 0 30px 10px;
  <?php endif; ?>
  text-align: center;
}

and find this:
#system_navigation {
  margin: 74px 0 23px 0;
  <?php if ($language == 'ltr'): ?>
  clear: right;
  text-align: right;
  <?php else: ?>
  clear: left;
  text-align: left;
  <?php endif; ?>
}

change it like :
#system_navigation {
  margin: 64px 0 23px 0;
  <?php if ($language == 'ltr'): ?>
  clear: right;
  text-align: right;
  <?php else: ?>
  clear: left;
  text-align: left;
  <?php endif; ?>
}

For the links open ravara_header.xml and edit like :
from:
<a href="http://www.rovara.nl/" title="GRATIS VERZENDING" id="link_1"></a>
to:
<a href="YOUR LINK" title="VEILIG & SNELBETALEN" id="link_2"></a>

Hope this help you this time.

Sam
 samdz
January 11, 2013 at 11:18 am #17021

Hello Sam, again thanks for your great support.Sorry for the late reply, i was very busy studying for my exams.

I have managed to fix it, but the images only show in Mozilla FireFox. Not in Safari, Google Chrome and IE.

Any ideas on how to fix this?

The images are still on the same position, have not changed this, i’m changing this after it shows op in every browser.

Thanks again for you great support. And hope to hear from you!

Kevin
 Rovara
January 14, 2013 at 8:17 pm #17139

Hello;

You are welcome;

Sorry for that, but I have tested the code in chrome, firefox, and Ie9 (not safari), it works fine,

Send me this file by email:
catalog/view/theme/shoppica2/stylesheet/screen.css.php
my email is : issamoc@gmail.com

Regards
Sam
 samdz
January 14, 2013 at 9:15 pm #17141
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.