What do you think for Buildin General...

Nov 20th, 2018 at 06:31 AM
User 131545 Photo

STEFKE
Registered User
687 posts

Hey All,

Most Visual web builder applications have a possibility to go set up common CSS3 settings for common elements in your theme with Theme Settings (Global CSS3 settings).

It would be the life of the web designer make a large lot easier if you can set common settings for:

- Global Colors Theme and Palette (Back & Foreground)
- Global Fonts (setting the head font and text font)
- Global Typography Theme (heading base size, heading weight)
- Global Heading & Text Theme (paragraph style, font type, size, weight, color, line height, letter spacing, indent, spacing)
- Global Header Theme
- Global Footer Theme
- Global Navigation Theme
The user can then store the settings in the Site Designer or in a user template or the registry
You See a pane for "Global Settings" or "Theme Settings"

If there an solution then you ask how I can do this
Like this:
"Content" "Theme Settings" "Style" "Elements" "Others" like JQuery support
What do you think of my Sugestion for this features in the Site Designer?

I will see in the comments here
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
Nov 20th, 2018 at 07:05 AM
User 122279 Photo

Inger
Senior Advisor
14,450 posts

With the latest version of SD3 (launched yesterday) you have the ability to set something globally. The various colours, fonts, header, footer etc can be imported as external style or js files and then made globally. For this purpose you also have the component and symbol ability. For some of the settings you mention, just a common class name will also get you a long way.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Nov 20th, 2018 at 07:44 AM
User 2903050 Photo

Phil Dias
Registered User
260 posts

As Inger suggests use a common class name. Or for headings and paragraphs etc use type and then if extra customisation is needed use a class name.
https://www.purpleespresso.com
https://www.drivingwithphil.com
https://www.dla-driving.co.uk
Nov 20th, 2018 at 08:03 AM
User 131545 Photo

STEFKE
Registered User
687 posts

Phil Das,

I try this to set the Title with my style settings but it does not changed it

This is the exported code:



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Site Designer 3.0.2869">
<title>Blank</title>
<link rel="stylesheet" href="css/bootstrap4.min.css">
<link rel="stylesheet" href="css/wireframe-theme.min.css">
<script>document.createElement( "picture" );</script>
<script class="picturefill" async="async" src="js/picturefill.min.js"></script>
<link rel="stylesheet" href="css/main.css">

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
.title {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:72px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}
.sub-title {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:36px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.lead-text {
/* <global setting of the user> */
font-family:Montserrat;
font-size:20px;
font-weight: 400;
color:#000000;
line-height:1.6;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-1 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:48px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-2 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:36px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-3 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:30px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-4 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:24px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-5 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:20px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-6 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:18px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.text {
/* <global setting of the user> */
font-family: Montserrat; /* Open Sans */
font-size:16px;
font-weight: 400;
color:#000000;
line-height:1.6;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.small-text {
/* <global setting of the user> */
font-family: Montserrat; /* Open Sans */
font-size:14px;
font-weight: 400;
color:#000000;
line-height:1.6;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}
</style>
</head>

<body>
<div class="container-grid">
<p class="paragraph title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/outofview.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


What do I wrong here?
Attachments:
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
Nov 20th, 2018 at 08:42 AM
User 131545 Photo

STEFKE
Registered User
687 posts

Hey,

Do you main "global" the external stylesheets/javscripts with the link keyword? and "local" the internal stylesheets/javscripts with the <style> keyword ?
They have no effect when I set the css propertyu of the HTML component
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
Nov 20th, 2018 at 02:27 PM
User 122279 Photo

Inger
Senior Advisor
14,450 posts

I don't know who you are asking this question. But 'external' stylesheets and js files as far as I see it, are files that you create outside of SD3 and then add into the resources of your project. And when they are there, you can link to them in either the head or footer field and make the linking global, so that you get the same link on all the pages. I had the opportunity of testing this in a version between the previously launched version and the current one, and it worked. If, as you are saying, it doesn't work now, then submit a support ticket. I haven't had time yet to test it now with the new version.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Nov 20th, 2018 at 04:30 PM
User 2699991 Photo

Wayan Jaya
Registered User
4,798 posts
Online Now

Inger wrote:
I don't know who you are asking this question. But 'external' stylesheets and js files as far as I see it, are files that you create outside of SD3 and then add into the resources of your project. And when they are there, you can link to them in either the head or footer field and make the linking global, so that you get the same link on all the pages. I had the opportunity of testing this in a version between the previously launched version and the current one, and it worked. If, as you are saying, it doesn't work now, then submit a support ticket. I haven't had time yet to test it now with the new version.

The global settings thingy in the new version works, done it already for a number of projects, pretty neat new function
but you can't set a global setting for a title of the page,( thats for stefk, if he reads this how can you have different pages with the same title) unless I am missing what he wants
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Nov 20th, 2018 at 04:47 PM
User 2699991 Photo

Wayan Jaya
Registered User
4,798 posts
Online Now

STEFKE wrote:
Phil Das,

I try this to set the Title with my style settings but it does not changed it

This is the exported code:



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Site Designer 3.0.2869">
<title>Blank</title>
<link rel="stylesheet" href="css/bootstrap4.min.css">
<link rel="stylesheet" href="css/wireframe-theme.min.css">
<script>document.createElement( "picture" );</script>
<script class="picturefill" async="async" src="js/picturefill.min.js"></script>
<link rel="stylesheet" href="css/main.css">

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
.title {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:72px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}
.sub-title {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:36px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.lead-text {
/* <global setting of the user> */
font-family:Montserrat;
font-size:20px;
font-weight: 400;
color:#000000;
line-height:1.6;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-1 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:48px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-2 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:36px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-3 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:30px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-4 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:24px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-5 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:20px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.head-6 {
/* <global setting of the user> */
font-family: "Roboto Slab";
font-size:18px;
font-weight: 400;
color:#000000;
line-height:1.2;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.text {
/* <global setting of the user> */
font-family: Montserrat; /* Open Sans */
font-size:16px;
font-weight: 400;
color:#000000;
line-height:1.6;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}

.small-text {
/* <global setting of the user> */
font-family: Montserrat; /* Open Sans */
font-size:14px;
font-weight: 400;
color:#000000;
line-height:1.6;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
}
</style>
</head>

<body>
<div class="container-grid">
<p class="paragraph title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/outofview.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


What do I wrong here?


You set the Apply styles to "all elements of this type" in the design pane

so for example for a h1 header
you go to the "Apply Styles" section in the styles tab, open the choices, choose "apply to all elements of this type"

Choose the styling you want
font-family: "Roboto Slab";
font-size:48px;
font-weight: 400;
color:#000000;
line-height:1.1;
letter-spacing:0px;
text-indent:0px;
margin:0px;
margin-top:20px;
margin-bottom:20px;
THATS IT then whenever you insert a H1 element into your project thereafter the styles apply as you have defined

If you then want to change the styling for a particular H1 heading, then all you do is add a Class name to that one & apply the different styles.

you can do this for any element in your project, you don't need external css styling to do this.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Nov 20th, 2018 at 04:50 PM
User 122279 Photo

Inger
Senior Advisor
14,450 posts

Right. And you shouldn't have the same keywords and description either, at least not exactly the same. But it is possible to have some e.g. keywords globally, and then some for only the page you're on.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Nov 20th, 2018 at 04:56 PM
User 10077 Photo

Brian Durfee
Senior Advisor
1,095 posts

All of this can be done natively in SD3 without having to add anything external.

To set global styles:
Whenever you want to set a global style such as for a heading, paragraph or any other element, select the Element and go to the Styles pane. Change Apply Styles to "To all elements of this type". Now make any style changes. The changes will apply as default to the element throughout the site.

Note about Google fonts:
You do not need to @import the Google fonts. By simply assigning the Google Font to the element as the default (see above), SD3 will automatically call the Google stylesheet.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat%7COpen+Sans%7CRoboto+Slab">

If you have any code that you would like included on every page:
- Click Pages > Manage Project
- Select the page on the left and scroll down to Head in the page settings. Check the "Use Common" box and a new textarea will appear that says "Enter your common stylesheets and scripts".
- Enter any code (such as Google Analytics, links to javascript or css files, etc.) in the textarea.
- Go to your other pages and check the same "Use Common" box which will put the common code on that page.

Creating a Reusable Theme
Create a template of the theme that you want to use. Click File > Save as Theme and save it. The next time you start a site, click "My Themes" on the left and you will see the themes that you have saved.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.