Am I correct in assuming that to change the appearance of a store to be a one, two or three column layout I need to editit the master page reference in each of the template pages, such as default.aspx or category.aspx, the two column master just being a default.
Or, am I missing something somewhere? The Theme is then controlling style. Are some thmese specific to a certain number of columns?
One, Two or Three Column Master Pages
- 304
- 1704
- 25.03.2010
- United States
I changed all my TwoColumn references to ThreeColumn by going to Edit > Quick Replace and replacing all TwoColumn references to ThreeColumn in the entire solution. Visual Web Developer opened all the documents that were affected by this change and I was able to see which documents to re-upload to the server.
- 304
- 1704
- 25.03.2010
- United States
I created a liquid layout with the ThreeColumn.master layout using percentages so that no matter the screen size, the page fits nicely in the window from left to right. I use all of the screen space. I wanted to share a technique that I developed to resize some of the images when the page loads.
The bottom image that provides corners for the Category navigation, Information navigation, Mini Shopping Cart, etc, needs resizing when working with a liquid layout. Here is the technique that I developed.
In the Root.Master file, I put this inside the <head> tag:
<script language="javascript" type="text/javascript">
function findWidth() {
var bottomImages = document.getElementsByTagName("img");
for (var i = 0; i < bottomImages.length; i++) {
if (bottomImages[i].title == "bottomImage") {
var box = document.getElementById(bottomImages[i].alt);
var elWidth = box.offsetWidth;
var image = document.getElementById(bottomImages[i].id);
image.style.width = elWidth + "px";
}
}
}
</script>
Next, I added the function to the <body> tag of the Root.Master file like this:
<body onload="findWidth();">
Next I added the image into the main <div> tag of the Navigation blocks:
<img id="bottomCat" title="bottomImage" alt="catNav" src="../App_Themes/darkOrange/images/bg_sidebar_block.gif" style="width: 160px;" />
Next I added the id to the Category block like this:
<div class="block block-category-navigation" id="catNav">
note: The function only works when the onload event of the document is triggered because that is when the sizes of the elements on page becomes known. The image goes inside the main navigation block and outside the block with the tag: <div class="listbox">. The id for the image has to be unique for each image so the javascript code can find it. All the images have the same title attribute so the javascript code can tell that it is part of the function. The alt tag in the image references the id of the navigation block that you want to reference for the size. In the style sheet I had to edit the bottom margin of the .block .listbox definition like this: margin-bottom: -4px;
This code works great in both IE and FireFox.
The bottom image that provides corners for the Category navigation, Information navigation, Mini Shopping Cart, etc, needs resizing when working with a liquid layout. Here is the technique that I developed.
In the Root.Master file, I put this inside the <head> tag:
<script language="javascript" type="text/javascript">
function findWidth() {
var bottomImages = document.getElementsByTagName("img");
for (var i = 0; i < bottomImages.length; i++) {
if (bottomImages[i].title == "bottomImage") {
var box = document.getElementById(bottomImages[i].alt);
var elWidth = box.offsetWidth;
var image = document.getElementById(bottomImages[i].id);
image.style.width = elWidth + "px";
}
}
}
</script>
Next, I added the function to the <body> tag of the Root.Master file like this:
<body onload="findWidth();">
Next I added the image into the main <div> tag of the Navigation blocks:
<img id="bottomCat" title="bottomImage" alt="catNav" src="../App_Themes/darkOrange/images/bg_sidebar_block.gif" style="width: 160px;" />
Next I added the id to the Category block like this:
<div class="block block-category-navigation" id="catNav">
note: The function only works when the onload event of the document is triggered because that is when the sizes of the elements on page becomes known. The image goes inside the main navigation block and outside the block with the tag: <div class="listbox">. The id for the image has to be unique for each image so the javascript code can find it. All the images have the same title attribute so the javascript code can tell that it is part of the function. The alt tag in the image references the id of the navigation block that you want to reference for the size. In the style sheet I had to edit the bottom margin of the .block .listbox definition like this: margin-bottom: -4px;
This code works great in both IE and FireFox.