External style sheets

Discussion:

Dwales

2012-11-06 20:35:13 UTC

I am a bit of a learner with html/css but I have had some exposure to both
coding and Dreamweaver.
I am trying to develop some website building skills with Blue Griffin using
best practise in regards to CSS.
I want to do my layout and all styles as far as possible in an external
style sheet.
I cannot for the life of me figure out how to get styles into an external
CSS file using the Blue Griffin tools.
Every time I try to add a style, even though I have created the web.css
file, I end up with an inline or embedded style.
There does not seem to be any tutorial on the web which carefully explains
this process in Blue Griffin.
The manuals I can find (and I have purchased the official one) make no
sense to me.
I am sure I can get a result using embedded.inline styles and I don't
really want to code the style sheet manually but everything I
read seems to indicate that external style sheets are not only possible but
quite straight forward.
Unfortunately not for me. Can anyone help out with a link to a tutorial or
explain the process.
I am using Blue Griffin 1.5.2
Thanks

--
You received this message because you are subscribed to the Google
Groups "bluegriffon" group.
To post to this group, send email to bluegriffon-/***@public.gmane.org
To unsubscribe from this group, send email to
bluegriffon+unsubscribe-/***@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/bluegriffon?hl=en

Greg Chapman

2012-11-06 22:08:19 UTC

Permalink

Hi Derrick,

Post by Dwales
I cannot for the life of me figure out how to get styles into an
external CSS file using the Blue Griffin tools.

There's two parts to the process. First you need to create an external
stylesheet, then you need to add styles to it.

STAGE ONE
---------

Assuming you want to create a new site that uses an external stylsheet

1. Launch BlueGriffon and create a new page and Save it!
(You should always save a blank page as soon as you create it.
BlueGriffon will then know how to create the required relative links.)

2. Select: Panels > Stylesheets
(The Stylesheets Panel opens)

3. On the panel , click the + sign at the bottom left
(The Stylesheets Properties Dialogue opens)

4. On the dialogue, select "Linked to the document"
(The "New file" button becomes active)

5. Click the "New file" button.
(The "Create as new CSS file" dialogue opens)

6. Name your file and save it
(You are returned to the Stylesheet Properties dialogue)

7. Mark the checkbox "Make URL relative to page location"
(The Href: field shortens)

8. Click the OK button

You now have an external stylesheet linked to your blank page.

STAGE TWO
---------

1. Select: Panels > Style Properties
(The Style Properties panel opens)

2. Place the cursor within the text to be styled or select the image
or other object.
(The relevant tag will appear on the Tags Bar.)

NOTE: If you are doing this on your new page, just click on the blank
page to return the cursor to the empty paragraph inserted by
BlueGriffon when the page was created. Towards the bottom of the
window a <p> tag will appear to the right of the <body> tag on the
"tag bar". You can add the CSS to the external stylesheet so all
paragraphs on your site will adopt your chosen style as shown below.

3. On the Style Properties Panel, check that the required tag is shown
in the field at the top, then drop down the "Apply styles to" box and
select "All elements of the same type".
(A field appears to the right of the drop down list showing the
selected element)

4. Under the Selector definition section of the panel, click on any
relevant heading in styling section.
(The section of the panel opens with relevant fields and check boxes
to be completed.)

5. Complete the entries on the relevant fields and check boxes.
(As you apply the various styles they will appear in real time so you
can confirm the correctness of your entries)

Job Done!

In the Stylesheets Panel, should you double-click the name of your
stylesheet file a further panel will open where you can confirm the
the necessary code has been added to the stylesheet - and if into
hand-coding CSS, you will be able to edit it further.

Post by Dwales
There does not seem to be any tutorial on the web which carefully
explains this process in Blue Griffin.

I hope to start work soon on a guide that will take beginners through
the whole process of creating their own web template. It should not
only help those that want to create their own templates but also teach
the skills necessary to use any of the templates available through
BlueGriffon's Add-on. (Too many new users assume that using a template
is just a matter of "point and click" but without an understanding of
the CSS that drives them most soon get utterly confused and give up.)

Greg Chapman
http://www.gregtutor.plus.com
Helping new users of KompoZer and The GIMP
Still exploring BlueGriffon

Dwales

2012-11-07 22:23:27 UTC

Permalink

Thanks for this information Greg. I will give it a go.
I figured Stage 1 but Stage 2 is where I have fallen over.

Post by Greg Chapman
Hi Derrick,

Post by Dwales
I cannot for the life of me figure out how to get styles into an
external CSS file using the Blue Griffin tools.

There's two parts to the process. First you need to create an external
stylesheet, then you need to add styles to it.
STAGE ONE
---------

Dwales

2012-11-07 20:29:40 UTC

Permalink

Thanks Greg.
I had figured stage 1
I will give stage 2 a go and see how I get on.
Regards
Derrick

Post by Greg Chapman
Hi Derrick,

Post by Dwales
I cannot for the life of me figure out how to get styles into an
external CSS file using the Blue Griffin tools.

There's two parts to the process. First you need to create an external
stylesheet, then you need to add styles to it.
STAGE ONE
---------
Assuming you want to create a new site that uses an external stylsheet
1. Launch BlueGriffon and create a new page and Save it!
(You should always save a blank page as soon as you create it.
BlueGriffon will then know how to create the required relative links.)
2. Select: Panels > Stylesheets
(The Stylesheets Panel opens)
3. On the panel , click the + sign at the bottom left
(The Stylesheets Properties Dialogue opens)
4. On the dialogue, select "Linked to the document"
(The "New file" button becomes active)
5. Click the "New file" button.
(The "Create as new CSS file" dialogue opens)
6. Name your file and save it
(You are returned to the Stylesheet Properties dialogue)
7. Mark the checkbox "Make URL relative to page location"
(The Href: field shortens)
8. Click the OK button
You now have an external stylesheet linked to your blank page.
STAGE TWO
---------
1. Select: Panels > Style Properties
(The Style Properties panel opens)
2. Place the cursor within the text to be styled or select the image
or other object.
(The relevant tag will appear on the Tags Bar.)
NOTE: If you are doing this on your new page, just click on the blank
page to return the cursor to the empty paragraph inserted by
BlueGriffon when the page was created. Towards the bottom of the
window a <p> tag will appear to the right of the <body> tag on the
"tag bar". You can add the CSS to the external stylesheet so all
paragraphs on your site will adopt your chosen style as shown below.
3. On the Style Properties Panel, check that the required tag is shown
in the field at the top, then drop down the "Apply styles to" box and
select "All elements of the same type".
(A field appears to the right of the drop down list showing the
selected element)
4. Under the Selector definition section of the panel, click on any
relevant heading in styling section.
(The section of the panel opens with relevant fields and check boxes
to be completed.)
5. Complete the entries on the relevant fields and check boxes.
(As you apply the various styles they will appear in real time so you
can confirm the correctness of your entries)
Job Done!
In the Stylesheets Panel, should you double-click the name of your
stylesheet file a further panel will open where you can confirm the
the necessary code has been added to the stylesheet - and if into
hand-coding CSS, you will be able to edit it further.

Post by Dwales
There does not seem to be any tutorial on the web which carefully
explains this process in Blue Griffin.

I hope to start work soon on a guide that will take beginners through
the whole process of creating their own web template. It should not
only help those that want to create their own templates but also teach
the skills necessary to use any of the templates available through
BlueGriffon's Add-on. (Too many new users assume that using a template
is just a matter of "point and click" but without an understanding of
the CSS that drives them most soon get utterly confused and give up.)
Greg Chapman
http://www.gregtutor.plus.com
Helping new users of KompoZer and The GIMP
Still exploring BlueGriffon

Dominik Lenné

2012-11-07 19:39:18 UTC

Permalink

looking forward to it :-)

Do you know of the BG Wiki
(http://andrefrick.de/bluegriffon-howto-wiki/index.php?title=Main_Page)?
May be theresaplace for it or at least a link from there.

Dominik