Accordion

The code for the accordion was found at w3schools.com. It consists of buttons that open a panel. In the panel you can pop text, images, slides, music players... I have used plain paragraphs, since I intend to collect some good hints and tips from the CC forums and place them here.
The panel have a max height of 0px and it is opened by a java script in the footer. In order to edit a panel, you need to temporarily remove the height setting (make it 'none' or so). Afterwards you change the setting back to 0px.
The button and the panel are located inside a container with the class name 'section'. If you need more or less sections, you just duplicate or remove, so that you have what you need.
To create a component, select the container 'accordion-wrapper'. Also, make sure not to forget the css and js in the header and footer in the Page manager.

This building block has been created desktop down using the Vanilla grid system. It uses no breakpoints. It would be easy to build the same in Foundation or Bootstrap starting at mobile first. It would have to be built, though. You cannot transfer components from one grid system to another.

If you want to use CC's Vanilla system for your website and need help findig code for building blocks, turn to w3schools.com. Here you can find all kinds of material written in html and css, and sometimes also java script. Unlike Bootstrap and Foundation, which both have their own sets of classes and attributes that don't work with Vanilla, code from w3schools.com can be used in any grid system. Also, most of the building blocks are built desktop down, which would suit many Vanilla users just fine. And once you have built something and got it working, you can save it as a theme or a component for later use. This accordion has been build with code from w3schools.

Question: I am having a problem now of trying to put a Facebook link onto my page. I have the element there but how do I get that link to go to the Facebook page I want to link to? In Selected Element Properties when I bring up the Element Tree I can select Follow or Share. I just want to send them to the page. Where do I put the URL? If I choose Follow the URL is grayed out. If I choose Share I can enter the URL. All I want to do is send them to the Facebook page. Where can someone look up this kind of information for Site Designer?

Answer: 1. From the "Content tab" drag a "Social Icon" from the "Interaction section" on to your form.
2. From the "Elements tab" under the "Selected Element Properties tab" in the Social field select "Generic". You can choose Facebook but then it will only allow you to choose "Follow" or "Share" neither will allow you to just send them to the Facebook page desired.
3. In the "Link" field enter the Facebook URL for the page desired.
4. In the "Target" field choose "Blank" which will open it in a new tab in the user's browser. Or any target you desire
5 In the "Source" field choose "Local Icon". Then select the Facebook icon from your resources at the top of the Site Designer screen. Interesting thing is that if you had chosen Facebook instead of Generic in Step 2 above it would have made the icon a Facebook icon.
(posted by lwetzel in the CC forum)

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.
(Posted by Twinstream in the CC forum)

I added a "Form Container" with a "Button" and an "Input". For each item, I entered the following information. I will, of course, ignore anything that deals with visual settings.

Form Container
Selected Styles
Under ID Selector
ID: entered Form1
Seleted Elements
Under Selected Element properties
Action: left empty
Method: Get
Enctype: Form Url Encoded
No Validate: did not check the box
Attributes: did not select anything

Input
Selected Elements
Name: I gave it a name
Title: Gave it a title
Pattern: left empty
Form: entered the form name
Required: did not check box
Attributes: did not select anything

Button
Selected Elements
Type: Selected Submit
Form: Entered the form name
Action: Entered "http://www.bing.com/search"
Method: Selected Get
Enctype: Selected From Url Encoded
No Validate: did not check box
Attributes: did not select anything

When I tested this it passed the what I had entered into the input field to the search engine.
(Posted by lwetzel in the CC forums)

Use Form Builder scripts with Form Designer on manually exported forms

Here's how to make a form built in Form Designer work with the scripts of Form Builder.
1. Make sure all your inputs, select, and etc... in the Form Designer match the names and settings used in Form Builder.

2. Make sure all selects, radio buttons, checkboxes and etc..... have the same values used in Form Builder.

3. Copy the form action from your Form Builders formname.html near the top. Mine was ../form-designer-crossover.php. Paste this into the Action in Form Designer on the Form Container.

4. Select Post on the Method for your form in Form Designer Form Container.

5.If your form uses a file upload than select Multipart Form Data otherwise select Form Url Encoded on Form Container

6. Export your Forms from both apps.

7. Copy all the files exported from Form Designer into the same directory that contains your myformname.html form Form Builder. This will be the directories css, js, fonts, socialicons and finally the index.html

8. Now on the myformname.php you need to alter one line of code.
Look for this like $myPage->Show();
Change it to this and adjust the myformname to your actual form name.

if(isset( $_GET['action'])){
$myPage->Show();
}else{
header("Location: myformname/");
die();
}

You can see it in action here.

This is working but it's not tied to any validation or conditionals from the Form Builder. It will work with your confirmation in the Form Builder.
****The above is direct form linking. I'm not using an iframe.****


**** Using Iframe *****
Adjust your Form Builder iframe script to this. Adjust the height to fit and add scrolling="no"

<iframe height="1566" style="border:none; background:transparent; overflow:hidden; width:100%;"
id="fb_iframe" src="myformname/index.html" scrolling="no" >
</iframe>

Working here 

(Posted by Eric Rohloff in the CC forums)

Its really easy to do.

Add this code to the settings 'head' section (see here http://prntscr.com/b5il5j)

<style>
a.back-to-top {
outline: 0;
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #000000 url("up-arrow.png") no-repeat center 43%;
opacity: 1.0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
</style>
<script type="text/javascript">
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
</script>
<a href="#" class="back-to-top">Back to Top</a>

Change the background colour to suit your wishes and link to where you have saved an up-arrow.png

Now add this code to the 'Footer' section of the settings area (see here: http://prntscr.com/b5il5j)

<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var amountScrolled = 100;

$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>
<script>
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>

Where 'var amountScrolled = 100; can be changed by you to reflect how many pixels (in this case 100) you need to scroll before it becomes visible.


(Posted by Jamie Forster in the CC forums)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.