Customizing display pages

jmestep · Post by **jmestep** » Sat Nov 24, 2007 8:55 am

I'm working on customizing display pages and I think the docs said that if you customized and existing page, the customized one was put in the custom folder and the software looked there first for the page. I am concerned that whoever comes after me will not realize that, so I am copying pages (like CategoryList.aspx and the controls in it, with new names. I'm leaving the new pages in the same folder as the old ones, the root of the site and the ConLib folder. For example, CategoryList.aspx is customized as xxx_CategoryList.aspx. I tried moving them to subfolders, but I had to correct too many references in the files, like to the CategoryBreadcrumbs file. The html designer working on the site is doing the same things. Is this going to cause any problem with upgrades?
Thanks

AbleMods · Post by **AbleMods** » Sat Nov 24, 2007 9:22 am

Judy,

It's different for each type of item you modify. Here's what my understanding has been:

1. You modify any of the Layout or scriptlet setups inside AC7 Content and Layouts. This includes Content, Header, Footer, Layout or Sidebar.

The "built-in" scriptlets are stored at HTML files located in ~/app_data/Scriptlets/Default. One you make a modification, your changed version is stored in ~/app_data?Scriptlets/Custom and overrides the "built-in" one. Never directly modify the original ones in the default folder. The automated copy procedure only occurs if you modify the scriptlet within AC7. You can make the copy yourself, just don't edit the default HTML files directly.

2. You modify what I call a "primary display page" located in the root. These are not backed up nor monitored for changes by AC7. In other words, it's the only copy and once you change it, it's changed.

3. You modify a "built-in" user control in ~/ConLib.
Same rule applies as #2. Once you make a change, IIS recompiles the site and your change takes effect immediately. There is no backup copy.

4. You copy a "built-in" user control into ~/ConLib/Custom and make sure the file name is the same as the original. Then you make changes to it.
AC7 will override the "built-in" user control and use the modified copy you placed in ~/ConLib/Custom. The original remains as it was.

5. You create a brand new user control and store it in ~/ConLib/Custom.
You will be able to reference this custom control on any scriptlet page using the format [[ConLib:Custom\<filename>]]. Be sure to reference it without the .aspx extension. It used to require the extension but this was changed when Beta went to RC1.

Either way, customizations will always have to be redone if the modified scriptlet or control was changed. But, by making copies as described above, you prevent the upgraded version from blowing away your modified copy.

AC will have to be *VERY* detailed with modification documentation. Developers such as you and I will also have to do the same so the next version release can be a smooth transition.

I'm building a file in the root of my store that documents all mods that I have made. Would be nice to have a menu option in AC7 Admin to let the site admin maintain a customization documentation page.

jmestep · Post by **jmestep** » Sat Nov 24, 2007 9:38 am

Thank you so much. You've saved me hours.

mfreeze · Post by **mfreeze** » Mon Feb 18, 2008 2:00 pm

I got this far but once you create the xxx_CategoryList.aspx, how do you get it to show up as a choice as a display page for a category either in the add category or edit category admin dialog?

AbleMods · Post by **AbleMods** » Mon Feb 18, 2008 2:06 pm

Mary,

Are you referring to the four different categorygrid page choices available for product/category pages?

ogledesign1 · Post by **ogledesign1** » Tue Feb 19, 2008 12:11 pm

I too need to know how to access customized display pages. Once uploaded to the server, how did I get the admin to recognize them in the drop-down menus so that I can select individual ones for different catergories?

mfreeze wrote:I got this far but once you create the xxx_CategoryList.aspx, how do you get it to show up as a choice as a display page for a category either in the add category or edit category admin dialog?

Post by **Shopping Cart Admin** » Tue Feb 19, 2008 12:13 pm

Hello,

Create a copy of an existing page within the AbleCommerce admin, then overwrite the contents of the copied page with your custom page. Otherwise head to the database to add your page to the db directly.

AbleMods · Post by **AbleMods** » Tue Feb 19, 2008 12:29 pm

Category display pages are identified in the system using this comment line in the beginning of the .aspx file:

Code: Select all

<%-- 
<DisplayPage>
    <Name>Category Grid (Deep Item Display)</Name>
    <NodeType>Category</NodeType>
    <Description>The defualt category page that displays products in a grid format. All sub-products in all sub-categories of the category are displayed. Allows customers to browse your catalog.</Description>
</DisplayPage>
--%>

The best and easiest way to make your own customized display page is to copy ~/category.aspx to a new file name. I advise against using "category5.aspx" or similar names as future AC7 updates might overwrite your custom page file.

In your new file copy, be sure to change the name and description values of the comment section as shown above to differentiate yours from the included pages.

ogledesign1 · Post by **ogledesign1** » Tue Feb 19, 2008 12:41 pm

Joe -
So if i understand correctly, you are saying copy the file "Category.aspx", located at the root, make my changes, then upload it to the root and the system will THEN recognize it, no problem, within those admin drop-downs I was referring to?

Thanks!

SolunarServices wrote:Category display pages are identified in the system using this comment line in the beginning of the .aspx file:
Code: Select all
<%-- 
<DisplayPage>
    <Name>Category Grid (Deep Item Display)</Name>
    <NodeType>Category</NodeType>
    <Description>The defualt category page that displays products in a grid format. All sub-products in all sub-categories of the category are displayed. Allows customers to browse your catalog.</Description>
</DisplayPage>
--%>
The best and easiest way to make your own customized display page is to copy ~/category.aspx to a new file name. I advise against using "category5.aspx" or similar names as future AC7 updates might overwrite your custom page file.

In your new file copy, be sure to change the name and description values of the comment section as shown above to differentiate yours from the included pages.

mfreeze · Post by **mfreeze** » Tue Feb 19, 2008 12:50 pm

Got it!

The only thing I did not do is change the name and description in the comment line.

After I did that, my new page showed in the drop down list.

Awesome! Thanks everybody.

AbleMods · Post by **AbleMods** » Tue Feb 19, 2008 1:23 pm

ogledesign1 · Post by **ogledesign1** » Tue Feb 19, 2008 1:27 pm

Whew...sometimes my brain doesn't function after 12:00 Indiana time.

SolunarServices wrote:Yep.

AbleMods · Post by **AbleMods** » Tue Feb 19, 2008 1:28 pm

No problem.

I'll do an article on it and post both to the forum and my site URL in my sig. Information would benefit alot of people I think.

Brewhaus · Post by **Brewhaus** » Mon Feb 25, 2008 7:01 pm

I have been trying to modify items like the Category list (Standard Sidebar 1, if I recall), and other 'general layout' issues... without success. Which files actually control the layout, such as the Standard Sidebar, Product Bar, etc.? I really thought that I had figured out which files to modify, but I could make changes, save, and there were no changes to the site.

AbleMods · Post by **AbleMods** » Mon Feb 25, 2008 7:06 pm

There is an overall "layout" scriptlet that dictates the general page layout.

Then there are individual scriptlets that are assigned to each zone of the layout. All of these individual scriptlets are found in the scriplets list - some may be HTML while others will be ConLib user controls.

Brewhaus · Post by **Brewhaus** » Mon Feb 25, 2008 8:14 pm

I keep finding myself going around in circles. While it seems that you can change virtually anything on the layout with AC7, you also really need to understand coding much more than I do in order to manipulate things.

Unfortunately, I am not happy with any of the 'stock' layouts, and for both our new site and a potential switch of our main site to AC7, I must get this figured out.

Simple things like changing the color in the 'Categories' list seem to elude me. There are multiple 'Layouts' folders, and it even seems like there may be multiple files that work together on a single panel such as the Categories list. as I can change the word 'Categories' successfully, but cannot find where I can control the color for this panel, or the type style for the category names.

compunerdy · Post by **compunerdy** » Mon Feb 25, 2008 8:21 pm

Brewhaus,

Do you have a link to your site? I would be glad to help with some of your CSS issue.

Brewhaus · Post by **Brewhaus** » Mon Feb 25, 2008 8:29 pm

I appreciate the offer to get me pointed in the right direction. The site that we are working on is at http://www.hot-sauce-depot.com.

Once I get this one the way I want, then I should be able to get our primary business moved to AC from the current software, as I believe there will only be a couple of extra changes I need to make (primarily, adding multiple 'groups' of categories... but that is for another day

).

AbleMods · Post by **AbleMods** » Mon Feb 25, 2008 8:31 pm

With flexibility comes complexity. And a painful learning curve. I've been where you are now. Remember, as easy as I may make it sound, I've had almost 6 months head-start on you.

Let's back up a minute and start with some basic understandings:

CSS Styling
Colors, fonts, and certain positioning of screen objects are all handled through the CSS style sheet. You can find the style.css file in the appropriate ~/App_Themes/<your>/ folder.
Brace yourself - it's over 2,000 lines long. I strongly suggest you snag FireFox and the Web Developer add-on (both free) if you're going to manipulat the style sheet. It's unmatched in its ability to let you point at something on your store page and tell you where in the style sheet those visuals are controlled.
Compunerdy was bugging me about it for months and I resisted - I was a fool, it's perfect for this task. (tosses Compunerdy one (just one) Pepsi).

General Page Layout
Page layout for the home page is dictated by a combination of the layout scriptlet assigned to the home page AND the style sheet. The scriptlet decides the basic left, right, top, bottom aspect while the style sheet decides how those aspects are displayed. In other words, scriptlets decide the WHAT and the style sheet decides the HOW.

User Controls
I think the main wall you're hitting is when you want to change something, is it a scriptlet? Is it a user control? Is it a style?

That's where experience can only teach you since we don't have customization docs. Here's how I trace through to find what I need:

1. Switch the home page into Edit Mode with the dropdown at the bottom.

2. Determine the scriptlet being used for the section you want to change. For this example, let's pretend sidebar 2 is set to Shopping Bar 1.

3. Now you know which scriptlet is handling that part of the screen. Go into Content and Layout and edit the Shopping Bar 1 scriptlet.

4. Aha, nothing there but a [[ConLib]] entry right? That's your man.

So, to modify WHAT the contents/i] of the Shopping Bar 1 are, you would edit the user control referenced in the [[ConLib]] command.

If you wanted to modify HOW the contents are displayed, you would edit the style sheet in your theme folder.

If you want to modify the overall layout of the home page, you go into Content and Layout and edit the scriptlet that was assigned to your "layout" zone.

Hang in there - it's tough but it's worth it. Once you get the hang of the design, the flexibility is really quite remarkable.

compunerdy · Post by **compunerdy** » Mon Feb 25, 2008 8:35 pm

What colors are you trying to change? The word categories? The background? The category items color?

Brewhaus · Post by **Brewhaus** » Mon Feb 25, 2008 8:37 pm

I am hoping to change the background color for the Categories list, as well as the fonts.

compunerdy · Post by **compunerdy** » Mon Feb 25, 2008 8:47 pm

If you look at your style.css file for the theme you are using you will find this code.

Code: Select all

/******************************************************************************************/
/* styles for the simple category list (such as might show on the home page)              */
/******************************************************************************************/

/* list container for categories */
ul.category
{
	padding:3px 0 3px 0;
	margin: 0px 5px 2px 0px;
	list-style-type: none;
	/*list-style-image: url(images/bullet1.gif);*/
	
}

/* category list item */
ul.category li
{
	padding: 0 0 0 15px ;
	margin:0 0 0 7px;
	border-bottom: solid 1px #DCDCDC;
	color:#8C0901;
	background: url(images/bullet1.gif) no-repeat 0px 5px;
	/*background: url(images/bullet2.gif) no-repeat 0px 5px;*/
}

/* link within the category list item */
ul.category li a
{
	border-bottom: dotted 1px #C6C6C6;
	padding: 3px 0 3px 0;
	display: block;
	color:#8C0901;
	text-decoration:none;
}

/* link within the category list item (hover) */
ul.category li a:Hover { color:#575757; }
/* link within the category list item (selected) */
ul.category li a:Selected { color:#AF0501; }

This is where you need to make changes for what you want. For example..

Code: Select all

border-bottom: dotted 1px #C6C6C6;

This line of code could be changed to

Code: Select all

border-bottom: 1px #000000;

Which would change the grey dotted border under each category to a solid black one.

Listen to Joe you must...Get Firefox and the CSS viewer add-on. With that tool you can fool other people into thinking you actually know something about CSS like I did.

AbleMods · Post by **AbleMods** » Mon Feb 25, 2008 8:49 pm

Brewhaus · Post by **Brewhaus** » Mon Feb 25, 2008 9:22 pm

When I make changes such as those that you specified, nothing happens. I assume that I simply change the file and re-save it. Do I need to restart IIS for the changes to take effect??

Oh, and thanks for the Firefox tip- I think that will come in extremely handy!

AbleMods · Post by **AbleMods** » Mon Feb 25, 2008 9:29 pm

Some times yes.

Most of the time you can just hit the refresh on your browser, but IIS will cache style stuff some times.

AbleCommerce Shopping Cart Software

Customizing display pages

Customizing display pages

Access Customized Category display pages

Re:

thanks