I'm using Bstudio for the first time. I wanted to change some text to Arial font. Couldn't do it: the only font available is Source Sans Pro, and the family list is odd looking (doesn't include Arial at all). There is apparently no Help file for this product, so, no explanation or help is available.
You can just type the name of a font on your computer in the 'Font Family' box
E.g. 'Arial', 'Algerian', 'Broadway' etc
If you want to use web fonts, use the dropdown arrow at the end of the 'Font Family' box and click 'Add Font' to import webfonts
Be sure to choose "create CSS block" at the top of the Appearance panel when you enter your font name, so that the new body font is set through CSS, and will apply throughout your website, as opposed to being set inline, which will only affect the body on the current page.
"to choose "create CSS block" at the top of the Appearance panel" I did that, and styles > create > element.style appeared. I'm lost. I don't understand.
Basically when you choose to create a CSS block (or use one that is already created) you are keeping the CSS code from ending up "inline" within the HTML. If you leave that dropdown on the "Style Atribute" selection, and you change all kinds of settings in the Appearance pane for colors and sizes, etc., it will all end up as "Inline CSS" within that component directly in the HTML which pretty much sends you back about 25 years give or take in CSS advancements.
So do the following:
- Go to Appearance tab (top right section of window). - Click the drop-down that defaults to "Style Attribute" which will put all your styles "inline" which you don't want to do. - Choose the "Create CSS Block" choice. - This will open the CSS "Styles" window at the bottom if you don't already have it open. - When it opens it it will create a style section for you which you can then rename/append/etc. to whatever you want it to be. - Now add the attributes in the Styles Window, or choose/set them via the Appearances tab with that class chosen. The Styles window will then reflect those changes. - Rinse and repeat for each component selection you want to change.
P.S. You will need to do this each session as the app will default back to the Styles Attribute each time it's restarted.
If you are altering something that already exists in your customized CSS file (which you should definitely be sure to create one for any overwrites you need to do) then any classes that are currently applied to the selected component will show up in the list when you click that drop-down. That way you can just select the one you want to change rather than creating a new one.
The other option is to do it the easier faster way and just type it yourself into the Styles window. Having the Appearance pane setup helps those that are not real up on CSS, but you will need to know how to do some of the code to adjust things here and there.
In the absolute simplest of terms, go to the lower right Design panel. Expand the Styles heading. Double click the file style.css Copy and paste the following.
Your website will now use Arial as its font.
You need to learn how HTML and CSS work to really get the most out of this program. Bootstrap Studio is not difficult to learn, but nor is it a simple "drag and drop" builder like Mobirise, Wix or Weebly. It's designed to build sophisticated websites using the Bootstrap Framework, along with all its helper classes. It caters to people who are generally familiar with how websites are coded and styled. If you don't have the ability to create a web page using a text editor, if you don't know how HTML and CSS work, you are going to find this program to be frustrating to use at times, because the documentation is not great, and it generally assumes people know their way around the aforementioned technologies.