Share your tricks or tips for Site Designer V3 with others!

This thread is for tricks and tips for V3 only - please no problem questions. Have a problem or question or want to chit chat about this program then Start a new thread please.

If you need to add a new breakpoint and are having a hard time getting the slider to slide to the exact number you want (like a 640 breakpoint added in Vanilla) just click on the slider pointer and then use your right or left arrow keys to find the number in incremental movement.

This may be something that everyone but me knew but when adding keywords you can make your list in a text editor and separate each with a comma then copy the whole batch and paste into the "add a keyword" box and all of your keywords will be added at once. I can't tell you how much time this now saves me

Just thought I'd share with the folks that are like me: Not commercial site designers/builders but work from time to time on your own sites. - Never working with this software for a long enough period of time to be able to remember everything the next time we open it.

I just spent hours trying to figure out what I was doing wrong that I couldn't simply center the text in a paragraph. I searched the forum, watched videos, tried everything. The problem for people like me is that we aren't sure if something isn't working because it's broken or if it's because we are trying it on the wrong container or in the wrong editor.

Some things work in the Text Edit Mode that don't work under the Typography section of the Design pane for that element. And sometimes we are trying to position (via Flex or other means) an element and we are doing it on the parent container instead of the element itself (like a paragraph) or.... vise versa!

So after hours of getting frustrated, I remembered something I have learned about CC software with every program I've bought: After having the program open & working in it for an hour or so, even if I haven't made much progress, PARTS of the program (not even the whole thing) will freeze up and not work. You have to save your work, close it down, then open it back up and it will work as it's supposed to! .....until it freezes again.

I wish the whole program would freeze so I'd at least know what was happening. Instead, I spend hours thinking one tiny function isn't working because I'M doing it wrong. The only indication that the problem is that ONE function is frozen is NOTHING. Except the fact that you think it should be working and it's not while everything else is.

So that's my tip: When something simple doesn't work and you could just swear it should...... save, close, re-open.
Even though we shouldn't have to go through that, it IS way quicker than troubleshooting for hours to no avail! So may as well try that first.

Hello All,

I have a tip when it comes to selecting "CoffeeCup" icons in SD v3. This quick note to myself has proven to be very helpful more than once, so I'm posting it.

1. Inside of the "Elements" tab choose the "Text" folder and select the "Font Icon" option. The "Coffeecup" icon will now show in the design pane.

2. To select a different icon out of the 1600+ available, you need to open the "Elements Tree" under the "Element" folder.

3. Select the "Font Icon" that you just placed in the first step and inside the "Selected Element Properties" you use the drop-down arrow in the "Glyph" input field.

4. You now have the option to search for your icon choice by searching for phrases that could match the icon that you are looking for or type in a known name. For example, if you are looking for a icon that represents a camera, you simply type in "Camera" in the "Glyph" field. That would bring up several options. The actual icon can be seen preceding the icon names. Select the option you would like by clicking the name.

5. To style the icon, you now go to the "Styles" tab and make your changes. You will find most of the options that you need under the "Design" tab in the "Styles" tab. The "Typography" tab has the size, color, decorations, shadow and alignment options. Under the "Background" drop-down you can choose your color of the background for the icon or add gradients or images. Many other styling options are all available in the "Styles" tab.

That concludes the basic options. I can now offer two tools that will make selecting the icons faster. The first tool is going to the "icomoon" website and view the preview options for the "Ultimate Pack". The url is https://icomoon.io/#preview-ultimate. By hovering over the icon that you would like to choose, the class name shows. This is the exact name you can search for in step number 4 above.

The second tool is a chart of the available icons in SD v3. I used another website tool located at http://torinak.com/font/lsfont.html. This tool will extract images of fonts available in TrueType, OpenType and WOFF font files. In the case of SD3 I used the "coffeecup-font-icons.woff" found in the "fonts" folder in the exported project. I then used Adobe Acrobat to create a easy to read chart of available icons that are easier to view than the small icons shown in SD. The attached coffeecup-icons.zip contains the pdf file.

I would have really liked to find a tool that would show both the icons and the class names in one simple chart, but I failed to find a program that could do this.

I hope this help others. One disclaimer, I'm completely new to the CoffeeCup universe. If this is too basic or there is a better way to do what I'm describing, I'd love to know.

Another tip, this time covers choosing the right Google Fonts for your site. I'm really happy to see CoffeeCup is on board with the ability to use Google Fonts natively in it's most recent programs. With over 900 fonts to choose from, I find it very difficult to make a quick decision for fonts. I like to have a visual chart to see what I'm really getting.

In my quest to find a simple solution, it turned out to be not so simple! At Google's site ( https://fonts.google.com/ ) you can search using filters to find what you need, but I personally think the endless scrolling is mentally exhausting!

I found a third party that had just what I needed. https://www.id-extras.com/complete-pdf- … ogle-fonts has a visual catalog of all of the Google fonts in a PDF file that can be printed out or viewed on almost any computer device today.

Now when I click on the font options in SD I can type in the correct name to make selecting a font much faster. Maybe CoffeeCup can come up with a font browser that shows google fonts in a larger scale so you can see what you are choosing.

I hope this helps others as it has helped me!

For me, the RSD 3.5 canvas is difficult to use. Adding components is hit-or-miss, mostly miss. Containers that I want at the top level, wind up inside other containers.

So, first I put up a scaffolding using spacer-containers that have a single heading to hold text that I can use to keep track of things. Each new page body gets a dozen spacers before it gets anything else. Then I insert my components in the scaffolding. If one falls into another container at the second or third level, dragging it between two first-level spacers sets it right.

When I'm done, anything with the SpacerContainer class gets deleted.

The work-product is here: http://pppotscom.coffeecup.com/index.html

Seems like a long wigeg way of doing it, when it's much easier to use the inspector or Xray mode to position containers and or elements

Not so, Wayan. I have had some difficulties bringing a container that fell into a subordinate position in another container, up into the fully independent left column (top position). (How does one describe that?)

It's only a suggestion that works for me.

There's also the advantage of having a place to write useful labels that will never see the light of day (yours, anyway).

whatever works for you, but the way I suggested does work, and many people have watched the video\s and learned to do it,