The responsive solutions provided by Coffee Cup software appear to be very flexible and granular in their ability to adapt a website’s look to various device dimensions, better than others I have researched. For this discussion, I am combining the Menu Builder (MB), Responsive Content Slider (RCS), Responsive Site Designer (RSD) and HTML Editor (HE) as the tools to design the skin of the site, add content and manage changes. The CoffeeCup learning curve takes a while, but well worth the effort.
However, CoffeCup suffers a common problem when it comes to updates of the design “theme” – theme changes on a multipage site can be painful with a lot of cut and paste. Even something as normal as adding a page to the menu would require opening EACH existing page, deleting the old menu code and pasting in new code.
This article goes thru a process that will allow you to change ONE set of files and have the entire site menus and slideshow updated immediately. Basically the idea is to create code snippet files for the common code and include them dynamically like jigsaw pieces into all the site pages on loading. In my example, you are going to create separate snippets for each output section in MB and RCD (4 total: menu head and body, slider head and content). If you only want to include MB or RCD, but not both, then only two files will be needed.
SETUP
Normal beginning:
1. Design the look of the home page of a new site in RSD as normal.
2. If you want a slideshow in the masthead, design it and populate the pictures in RCD. In RSD, add a blank HTML element where you want it to appear.
3. For the menu, build it in MB and populate all the known buttons with names and planned links. Again, put a blank HTML element in RSD where you want it to appear.
Modified setup:
The normal process would next have you paste the heading HTML export code for each the MB and RCS exports in the Head SEO Setting section and the corresponding body export code into the HTML design box for each HTML element that you started in steps 2 and 3 above. We’re not going to do that. Instead:
1. Export the MB file as normal and click on Copy the Head code button. Open CoffeeCup HTML Editor or Notepad, or other text editor and paste the code. Save it, calling it “menuhead.html” for example. Use your own name but use the “.html” extension. BTW, make sure your editor doesn’t add any extra code or formatting – i.e. don’t use Word.
2. Repeat that process for the menu body, the slider head and the slider body if you are doing both. When done, you’ll have four new files all ending in html.
3. Now the magic. In RSD go to the Head SEO Setting and paste the following code (using your file names):
<!--#include file="sliderhead.html" -->
<!--#include file="menuhead.html" -->
4. Next, click on each HTML Element and go to Design. Add the appropriate body code to each HTML element. For example, the slider element would get: <!--#include file="sliderbody.html" --> and the menu HTML element gets: <!--#include file="menubody.html" -->
5. Save the RSD file.
Finishing the process:
1. Add the menu-exported files/folders and the slider-exported files/folders to the RSD Resources as normal, export the RSD and upload the results to your server. Also, upload the 4 special files you created.
2. Two notes:
a. Your site will not display properly locally – you need to put it all on the server so the jigsaw assembly can occur.
b. The Include feature is a server-side capability. Most servers now-a-days should have that operating, but you may need to check with your provider (I’m using the linux version with goDaddy with no problem).
3. Use your resulting index.html file as a template by copying it multiple times, renaming them to your other pages and add the content for each page. Name your site pages to match the entries you put in the links in MB.
Modifying the Menu or Slider:
1. If you need/want to make a change to the menu or slider, reopen your MB or RCS file and make the changes. Using the MB file, you would re-export the file and recreate the menuhead.html and menubody.html files. If you just recreate both and keep the old names, you don’t have to figure out what actually changed.
2. Reload the menu and slider folders in RSD Resources.
3. Republish the RSD folders and the 4 extra files back to the server
4. Check the results on a sample of pages. They all should have the change.
5. DONE
Conclusion
It’s not a full theme logic ala Wordpress and it does assume you do your initial theme carefully. Plan your look and layout like you’re never going to change it. But it does simplify the update process for the most common updates – adding or deleting a page or changing a picture in the slideshow.
While it’s possible to extend the same “include” logic to the entire code from RSD, it’s not nearly as straight forward. By not putting the RCS and MD code in the RSD program HTML elements, you don’t have to find it later to replace. Just put the generated code in their separate files and you’re done.
Not the case for the RSD code – it will be created regardless and you’ll have to disassemble it. Since the include codes are serial in a page – that is the code is inserted where each line exists, fixing the RSD output means you would have to go in after the fact with HE and cut up the code into several pieces, cutting and pasting each piece into a separate file. Then if you make an RSD change, you’d have to recut the file in exactly the same places you did before so the same include commands would work on all your pages. All doable but it’s probably better to just make sure you have a good design to start. Change the easy part at will, but just live with the hard part or do the brute force cut and paste on every page.