BricsDesign FAQs

Frequently Asked Questions

General Questions

How do I install a custom Bric?
Answer: In the Blocs main menu, select Window then go down & select Extension Manager. Click the '+' in the top-right corner & browse for the bric's .bex file on your computer. This will install the custom bric. Restart Blocs.
Why don't I see the custom bric in the bric selection window?
Answer: After installing, restart Blocs. Check again. If still missing: In the Blocs main menu, select Bric then go down & select 'Toggle Custom Brics on/off'
How do I update a custom bric?
Answer: Manual Method for Free brics: In the Blocs main menu, select Window : Extension Manager. Select the old bric and then click the '-' in the top-right corner, which will remove the old version of the bric. Save & Quit Blocs. Open up the Extension Manager again & Click the '+' in the top-right corner & browse for and select the new version's .bex file on your computer. This will install the new version of the bric. Restart Blocs. Auto Method for Paid brics: In the Blocs main menu, select Window : Extension Manager. Select the bric & you should see a cloud download icon to the far right of the bric. Click that icon and the new version should install. Restart Blocs. Note: If an update added new controls, those values may be blank. In this case, all old instances of the bric will need to be replaced with the new version of the bric and then the controls should show values in them and function properly.
How do I correct js error in Blocs 5?
Answer: Blocs 5 does not include jQuery by default. Go to File > Project Settings & make sure 'include jQuery' is enabled and save the project.
How do I use the 'Typeface' control?
Answer: If you have a font and it's used in a particular tag on every page, then assign that font globally using File > Project Settings > Typography tab (T) then assign the font to one of the objects (tags). If you are just using that font on a particular page, then use Page > Settings > Code tab & select 'Header' from the dropdown & put the link code that should be provided by the font provider, this is an example I got from Google fonts for Lobster: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

DeSpam

What does DeSpam prevent?
Answer: One of the major ways that spammers send email is to use bots to submit forms on websites. DeSpam prevents this by requiring interaction on the webpage before the form can be sent. Bots are very dumb and can't automatically compare images and drag/drop correctly.
What framework does DeSpam use?
Answer: It runs under Bootstrap 4 or 5 within Blocs v5 which is set in Project Settings > Framework.
How do I setup DeSpam?
Answer: • Add DeSpam bric inside of your form, just below the submit button. • Export/Publish the site to your server. • Visit the page that has DeSpam on it and click the Submit button. DeSpam will appear & then click the 'Setup This Page' button. • If you get a Successfully Setup alert, the page will automatically load a fresh uncached version after 5 seconds. (DeSpam images should dissapear when page is freshly loaded) • To use, click the Submit button & DeSpam images will appear. Drag & drop a shape onto the matching dashed shape on the right.

FAQ Pro

What framework does FAQ Pro use?
Answer: It runs under Bootstrap 4 or 5 which is set in Project Settings > Framework.
What should I know about setup?
Answer: The suggestion is to set values to the same thing when you are using multiple instances of FAQ Pro on a page. The controls that do allow unique values are: Typeface, Question/Answer Line Hts, Question/Arrow/Answer Text Colors, Reveal Answers, Question/Answer BG Colors, Border Radius & Colors, Answer Padding Left, Show More Button, Fade In Color
How do apply further styling?
Answer: In Class Manager, add "faqwrapper .faq-q" (for question), "faqwrapper .faq-a" (for simple text) & "faqwrapper .aline" (for dropzone)
What do I need to know about dropzone styling?
Answer: Styling on text within a dropzone will not work, as it is left up to you to style those custom elements yourself. The only exception is when using 'Show More Button' layout & then all content will use the 'Text Fade To' color & 'Show Lines' height.
How do I get line breaks in answer text?
Answer: In the answer text box, simply add a <br> wherever you want a line break to occur.
How do I use the Show More Button?
Answer: Enable 'Use Show More Button' This will create a show more button. It's recommended to enable 'Hide Question' as the answer will be partially shown with a custom fade & clicking the 'Show More' button will reveal the answer. A Hide button will briefly appear & fade away to indicate you can click on the answer to colapse it again & the 'Show More' button will reveal again.
How do I place an icon in the Show More Button?
Answer: You can place html code in the 'Show More' text control. Most icon libraries provide html code that you can use. Bootstrap5 Icon Example: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-angle-expand" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707z"/></svg> Font Awesome Icon Example: (remove any sizing class) <span class="fa fa-expand-alt"></span>

FAQ

Where is FAQ?
Answer: It has now been replaced by the new FAQ Pro which contains a lot more functionality. If you want FAQ back, then please buy FAQ Pro so it's financially possible to re-release it.

Can the Question and Answer Text be styled further?
Answer: Yes, Please watch the video to see how.

Invisible reCAPTCHA

Where is Invisible reCAPTCHA?
Answer: Due to the functionality being based on constantly changing Google code, this bric has been discontinued. It has now been replaced by the new DeSpam which contains a cleaner & easier-to-use interface.

Page Lock

What framework does Page Lock use?
Answer: It requires that you set the Bootstrap framework in Project Settings to Bootstrap 5.

Where should I place the Page Lock - Admin bric?
Answer: Position the bric in the last position within the middle Dynamic content section of the edit window

Can a user be assigned access to more than one page?
Answer: Yes, in Access enter comma-separated list of pages that user will have access to. Ex: page1/index.php,page2/index.php

Where is the Page Lock - Admin - bric, it disappeared after being setup?
Answer: The bric is still on the page but there may still be bugs in Blocs that cause the bloc to be hidden in layer navigation & hidden in the edit window. The bric should take up some vertical room in the edit window, just click on the blank area to reselect the bric. You can get access to the Pg Lock-User brics by looking in the Layer Navigator and drill down inside of Pg Lock-Admin till you find them.

What settings should be used when publishing?
Answer: In File > Project Settings > Web Address, set the web address to the root of your site. When actually publishing, in the Export Settings section: Uncheck 'Minify HTML'. This is done due to the page containing php & minimizing breaks the php tags.

What is entered in Access ?
Answer: The pages will all be referenced from the site root. Simple Urls (Clean Page URLs' Unchecked in Export Settings): 'Access' in Page Lock - User will need pages listed at the same level. Ex: page1.php Cleaned Urls (Clean Page URL's Checked in Export Settings): will need pages listed w/ their page name in the path. Ex: page1/index.php

What are the '? >' tags showing in preview & when setting up on a live published page?
Answer: These are code mutations that are being generated by Blocs. Up to three levels are removed when the 'Setup This Page' button is clicked. If more tags still remain after everything is setup, then open up the page in a text editor & look for the tags at the end of the Page Lock code. They will look like: ?& gt; Just delete those bits of code, as they are just text and not needed for Page Lock to run.

Can visitors click directly on protected pages in the navigation?
Answer: Yes, clicking on a page in the navigation will redirect them to the login page & then with correct credentials, redirect to the the protected page.

Phone

Can any device make a call?
Answer: If the device the visitor is using can make phone calls, then they should be able to click the link & call you.
Can the Phone Text be styled further?
Answer: Yes, Please watch the video to see how. NOTE: custom class for the icon for Phone v1.2.0+ is now phonewrapper .fas

Same Height

Can a same-height wrapper div be styled further?
Answer: Yes, edit the same-height class you assigned to the elements and apply whatever properties you want.

Sticky Alert

Can the sticky alert text & buttons be styled further?
Answer: Yes, Please watch the video to see how.
What can I do if the popup background in edit mode is obscuring the content?
Answer: The styling is always on in edit mode, but you can disable it until you are ready to publish & then enable it.
What can I do if the text color is not changing?
Answer: The global text color is probably overriding your setting. Go to File : Project Settings & in the Typography settings (T), click the small 'X' next to the Color setting to clear it.