nsForum logo

Welcome Guest ( Log In )

 
Reply to this topicStart new topic
> Changing Apre Theme Images
ecomIanS
post Apr 29 2014, 10:26 PM
Post #1





Group: Administrators
Posts: 967
Joined: 14-January 13
From: Jacksonville, FL
Member No.: 19,888



I wanted to post a brief tutorial regarding how this was accomplished, since we often get questions about this.

Last year, we added in a new theme called "Apre", which features three "key visual" images inside the site header and features a clean, modern look.

Often times, folks want to swap out the images or perhaps set them up to only appear on certain pages. All of this is absolutely possible and i'll explain how to do both below.

Changing the Key Visual Images

In order to change these images, you will need to utilize some CSS (Cascading Stylesheet) rules to override the existing CSS. This is actually a very straightforward process that you can do without too much prerequisite knowledge.

***It is important to remember that all implementations are different and these instructions are provided as-is as general guidelines for most situations.***

First, you'll want to determine which images you wish to replace (This tutorial will assume that you want to replace all three of the key visual images). These images should ideally be the exact same size as the ones you're replacing in the template.

Dimensions of Default KV Images
Width: 306px
Height: 380px

Note: The middle image (2nd KV) has a height of 206px

Once you've identified the appropriate images you wish to use, you'll need to upload the images to your file manager. Images should ideally be placed somewhere in the file manager where they will be easily found and associated with your theme. A great place to do this is the image folder for the site design you're working on.

You can find the theme folder/directory for the site design you're working on by expanding the theme folder and looking for the name of the theme you just made.

/themes/yourthemenamehere

From there, you can open the "images" folder and upload the images there, to the layout folder (/theme/yourthemenamehere/images/layout), or to another folder you create.

Once the images are uploaded, take note of where the images are located. A good idea would be to look at the far right column in the file manager (Full Path), which tells you the "path" to the images or files you're looking at in the file manager.

For our example, i'll include the images I want to use in the layout folder of my Site Design called "apre". I've included the location of my images in the file manager below:

/theme/apre/images/layout/newkvimage1.jpg
/theme/apre/images/layout/newkvimage2.jpg
/theme/apre/images/layout/newkvimage3.jpg

Now that the images are uploaded, we'll need to add in some CSS to replace the existing ones. My CSS rules will be added to the <HEAD> tags area of the site design.

In order to overwrite the CSS that makes the default images appear, we just need to insert a rule that is more specific for the override.

<style>
#header-wrap #kv-block-one {
background-image: url(/theme/apre/images/layout/newkvimage1.jpg);
}
#header-wrap #kv-block-two {
background-image: url(/theme/apre/images/layout/newkvimage2.jpg);
}
#header-wrap #kv-block-three {
background-image: url(/theme/apre/images/layout/newkvimage3.jpg);
}
</style>

Remember, you will need to replace everything in between the parenthesis with the appropriate path to your images. As long as the images are of the right size, the your new pictures will replace the existing ones after the above CSS is included and the paths to your images are updated.

Configure your design to only display the key visuals on the home (index.aspx) page

If you are needing to hide the key visuals unless someone is on your homepage, add the following CSS to your <HEAD> tags. If you're continuing from the above instructions, you can just add this CSS at the end of the <style> tags you just inserted (i.e. beneath everything else, but above the closing span [</span>]).

<style>
.cart-page-type.index-page #kv-block-one,
.cart-page-type.index-page #kv-block-two,
.cart-page-type.index-page #kv-block-three {display: none;}
</style>

And you're done!

I hope this information is helpful! If you'd like to have us setup something like this for you, please email ecom-mts@networksolutions.com and include your store domain in the subject line.
Go to the top of the page
 
+Quote Post
advantageecommer...
post Apr 30 2014, 11:09 AM
Post #2





Group: Verified NS Member
Posts: 161
Joined: 3-March 11
Member No.: 13,148



Nice template.

When is NS going to offer responsive templates and stay on the cuttng edge of design and ecommerce like the NS of old?
Go to the top of the page
 
+Quote Post
ecomIanS
post Apr 30 2014, 07:10 PM
Post #3





Group: Administrators
Posts: 967
Joined: 14-January 13
From: Jacksonville, FL
Member No.: 19,888



QUOTE (advantageecommerce @ Apr 30 2014, 12:09 PM) *
Nice template.

When is NS going to offer responsive templates and stay on the cuttng edge of design and ecommerce like the NS of old?


We don't currently have a "native" responsive option, although you can absolutely style your site to be responsive.
Go to the top of the page
 
+Quote Post
jjjusme
post Oct 8 2017, 07:10 AM
Post #4





Group: Verified NS Member
Posts: 23
Joined: 10-December 08
Member No.: 3,285



Roopokar is Professional Website design company in Bangladesh. IT can help you to change the apre theme image
for more details visit: http://www.roopokar.com/
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
Tags
No Tag inserted yet

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

RSS Lo-Fi Version    Network Solutions © 2011 Time is now: 23rd October 2017 - 06:24 AM
Domain Names | Web Hosting | Web Design | Shopping Cart Software | Online Marketing | SSL Certificates