Re: [BlueGriffon] External style sheets
4,058 views
Skip to first unread message
Greg Chapman
Nov 6, 2012, 5:08:19 PM11/6/12
to blueg...@googlegroups.com
Hi Derrick,
On 06 Nov 12 20:35 Dwales <derrickan...@gmail.com> said:
> 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.
> 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
On 06 Nov 12 20:35 Dwales <derrickan...@gmail.com> said:
> 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.
> 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é
Nov 7, 2012, 2:39:18 PM11/7/12
to blueg...@googlegroups.com
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
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
Message has been deleted
Dwales
Nov 7, 2012, 5:23:27 PM11/7/12
to blueg...@googlegroups.com
Thanks for this information Greg. I will give it a go.
I figured Stage 1 but Stage 2 is where I have fallen over.
I figured Stage 1 but Stage 2 is where I have fallen over.
Reply all
Reply to author
Forward
0 new messages