How do you use the Border radius on Blue Griffin?
330 views
Skip to first unread message
chrissie crome
Dec 26, 2014, 5:19:09 AM12/26/14
to blueg...@googlegroups.com
Hi,
Im new to Blue Griffon and im also new to web design so I could do with some help as im used to using kompozer which I found a lot easier to use.
Im trying to create boxes and tables that have rounded edges. I have read tutorials on it so I know I need to use the border-radius but there are no tutorials about how you do it on blue griffon,only dreamweaver and html editors.
I tried typing in the html code in with a div but I find blue griffin changes the code and it doesnt appear correct so I dont know whether im doing it right.
I managed to create rounded edges once but when I tried to change the height and the width it didnt change so I really dont understand how you change the size on here either. Also I have no idea ow to do it to a table.
Can anyone help me please??
Thanks :)
Joeg
Dec 26, 2014, 7:07:31 AM12/26/14
to blueg...@googlegroups.com
Border-Radius is a Property for which you must use CSS (Style Sheets) eg
<divname> {
border: 2px solid;
border-radius: 15px;
}
Replace <divname> with the name of the div you you want to apply the radius to
Read about it here - http://www.w3schools.com/cssref/css3_pr_border-radius.asp
<divname> {
border: 2px solid;
border-radius: 15px;
}
Replace <divname> with the name of the div you you want to apply the radius to
Read about it here - http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Joeg
Dec 26, 2014, 7:37:09 AM12/26/14
to blueg...@googlegroups.com
Sorry Chrissy, I didn't answer your actual question, how to do this in BlueGriffon...
1. select the div you want to style in the Structure Bar along the bottom of the editing window, say <div #left_column>
2. Go to menu Panels and select Style Properties
3. Scroll down to Borders. The border-radius is set with 'Corners'. As corners can be eliptical, there are two settings for horizontal and vertical axes. For an arc of a circle, these would be the same.
I hope that this helps.
1. select the div you want to style in the Structure Bar along the bottom of the editing window, say <div #left_column>
2. Go to menu Panels and select Style Properties
3. Scroll down to Borders. The border-radius is set with 'Corners'. As corners can be eliptical, there are two settings for horizontal and vertical axes. For an arc of a circle, these would be the same.
I hope that this helps.
On Friday, December 26, 2014 10:19:09 AM UTC, chrissie crome wrote:
Greg Chapman
Dec 26, 2014, 7:32:55 PM12/26/14
to blueg...@googlegroups.com
Hi Chrissie,
On 26 Dec 14 10:19 chrissie crome <chriss...@btinternet.com> said:
> Im new to Blue Griffon and im also new to web design so I could do
> with some help as im used to using kompozer which I found a lot
> easier to use.
I sympathise. Blue Griffon is designed to maintain sites using HTML5
and CSS3 and is necessarily more complex than KompoZer which only
handled HTML4/CSS2. The new standards offer so much more it is
inevitable that the interface has to be a little more complex as a
result.
> Im trying to create boxes and tables that have rounded edges.
Tables with rounded edges? Arrgh! It sounds as if you are using them
for page layout. You need to appreciate CSS and correct use of HTML
tags if you are to find the move to BlueGriffon easy.
> I have read tutorials on it so I know I need to use the
> border-radius but there are no tutorials about how you do it on blue
> griffon,only dreamweaver and html editors.
You barely need a tuitorial on it if you have grasped the principles
of working with BlueGriffon's "Style Properties" Panel.
> I tried typing in the html code in with a div but I find blue
> griffin changes the code and it doesnt appear correct so I dont know
> whether im doing it right.
If it changes the code then - just like KompoZer - you must be doing
it wrong! Both programs work in the same way and will attempt to
correct porrly written code.
> I managed to create rounded edges once but when I tried to change
> the height and the width it didnt change so I really dont understand
> how you change the size on here either. Also I have no idea ow to do
> it to a table.
Doing it on a table means you are probably using a table for the wrong
purpose. Tables are for tabular data and nothing else.
> Can anyone help me please??
I'll try.
Here's how to create a simple paragraph - i.e. a BOX - styled to have
a yellow background with dropped shadow, rounded corners and a width
of 200px centred within the box in which it is contained.
(If you want to learn a little more about boxes take a look at:
http://www.gregtutor.co.uk/webdesign/boxmodel.html
or almost any other tutorial on Web Design)
1. Open BlueGriffon and start a new page.
2. Type in the following text:
Here is a paragraph box, styled to have a yellow background, and drop
shadow with rounded corners, a width of 200px and centred within the
box in which it is contained.
(This should fill the whole width of the BlueGriffon window)
3. Open the Style Properties Panel
(The top of the panel shows the currently selected element containing
the text just typed)
4. Under the "Apply styles to:" select the option "this element
through inline styles"
(Normally, you add this code to a stylesheet, but this is just a
demonstration on how to use the Style Prpoperties Panel)
5. Further below on the panel click on "Colors" so that part of the
panel opens then click on color circle by "Background".
(The Colour selection dialogue opens)
6. Select a bright yellow colour and click the "OK" buttion.
(In the main pane the paragraph now has a yellow background)
7. Click on the "Colors" heading to close that part of the panel and
click on "Geometry" to open the next section required.
(Here you'll see where we can set the width and centre the "box" we
are to create)
8. Click in the "Width:" field and type "200px" (without the quotes).
(The paragraph changes to that size)
9. In the "Padding" box enter 5px
(The text gains a small additional amount of yellow around it)
10. Under the "Margins" section, deselect "Same four margins"
(Separte field appear around the "Paddings" box)
11. Use the drop-down lists for the left and right margins and select
"Automatic" for each.
(The paragraph is now centred)
12. Click on the "Geometry" heading then on "Borders"
(To close the section we've finished with and open the next section
needed)
13. Under the box "same style for the four corners" (which should be
selected) enter the values: "10px" into both fields
(The yellow box now has evenly rounded corners.)
14. Click on the "Borders" heading then on "Shadows"
(To close the section we've finished with and open the next section
needed)
15. Clcik on the "+" symbol beside "Box Shadows" then select "New
Shadow"
(To reveal the settings requied)
16. Click the circle beside "Color"
(The Colour selection dialogue opens)
17. Select a dark orange colour and then click the "OK" buttion
(Nothing much happens. We need to add more information!)
18. Enter the values 6px for both the "Horiz offset" and "Vert.
Offset. Enter 12px for the "Blur radius" and 0px for the "Spread
radius".
(The orange drop shadow appears)
On anything but this demo, such styling of a paragraph would almost
certainly NOT be applied as inline styling but would as a class in an
external stylesheet. Typically such paragraphs would then be floated
so that they appeared to one side or the other of the main body text,
but it might equally be positioned by use of the margin settings -
i.e. the conventional methods of positioning content using CSS - not
by use of a table!
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer and The GIMP
Still exploring BlueGriffon
On 26 Dec 14 10:19 chrissie crome <chriss...@btinternet.com> said:
> Im new to Blue Griffon and im also new to web design so I could do
> with some help as im used to using kompozer which I found a lot
> easier to use.
and CSS3 and is necessarily more complex than KompoZer which only
handled HTML4/CSS2. The new standards offer so much more it is
inevitable that the interface has to be a little more complex as a
result.
> Im trying to create boxes and tables that have rounded edges.
for page layout. You need to appreciate CSS and correct use of HTML
tags if you are to find the move to BlueGriffon easy.
> I have read tutorials on it so I know I need to use the
> border-radius but there are no tutorials about how you do it on blue
> griffon,only dreamweaver and html editors.
of working with BlueGriffon's "Style Properties" Panel.
> I tried typing in the html code in with a div but I find blue
> griffin changes the code and it doesnt appear correct so I dont know
> whether im doing it right.
it wrong! Both programs work in the same way and will attempt to
correct porrly written code.
> I managed to create rounded edges once but when I tried to change
> the height and the width it didnt change so I really dont understand
> how you change the size on here either. Also I have no idea ow to do
> it to a table.
purpose. Tables are for tabular data and nothing else.
> Can anyone help me please??
Here's how to create a simple paragraph - i.e. a BOX - styled to have
a yellow background with dropped shadow, rounded corners and a width
of 200px centred within the box in which it is contained.
(If you want to learn a little more about boxes take a look at:
http://www.gregtutor.co.uk/webdesign/boxmodel.html
or almost any other tutorial on Web Design)
1. Open BlueGriffon and start a new page.
2. Type in the following text:
Here is a paragraph box, styled to have a yellow background, and drop
shadow with rounded corners, a width of 200px and centred within the
box in which it is contained.
(This should fill the whole width of the BlueGriffon window)
3. Open the Style Properties Panel
(The top of the panel shows the currently selected element containing
the text just typed)
4. Under the "Apply styles to:" select the option "this element
through inline styles"
(Normally, you add this code to a stylesheet, but this is just a
demonstration on how to use the Style Prpoperties Panel)
5. Further below on the panel click on "Colors" so that part of the
panel opens then click on color circle by "Background".
(The Colour selection dialogue opens)
6. Select a bright yellow colour and click the "OK" buttion.
(In the main pane the paragraph now has a yellow background)
7. Click on the "Colors" heading to close that part of the panel and
click on "Geometry" to open the next section required.
(Here you'll see where we can set the width and centre the "box" we
are to create)
8. Click in the "Width:" field and type "200px" (without the quotes).
(The paragraph changes to that size)
9. In the "Padding" box enter 5px
(The text gains a small additional amount of yellow around it)
10. Under the "Margins" section, deselect "Same four margins"
(Separte field appear around the "Paddings" box)
11. Use the drop-down lists for the left and right margins and select
"Automatic" for each.
(The paragraph is now centred)
12. Click on the "Geometry" heading then on "Borders"
(To close the section we've finished with and open the next section
needed)
13. Under the box "same style for the four corners" (which should be
selected) enter the values: "10px" into both fields
(The yellow box now has evenly rounded corners.)
14. Click on the "Borders" heading then on "Shadows"
(To close the section we've finished with and open the next section
needed)
15. Clcik on the "+" symbol beside "Box Shadows" then select "New
Shadow"
(To reveal the settings requied)
16. Click the circle beside "Color"
(The Colour selection dialogue opens)
17. Select a dark orange colour and then click the "OK" buttion
(Nothing much happens. We need to add more information!)
18. Enter the values 6px for both the "Horiz offset" and "Vert.
Offset. Enter 12px for the "Blur radius" and 0px for the "Spread
radius".
(The orange drop shadow appears)
On anything but this demo, such styling of a paragraph would almost
certainly NOT be applied as inline styling but would as a class in an
external stylesheet. Typically such paragraphs would then be floated
so that they appeared to one side or the other of the main body text,
but it might equally be positioned by use of the margin settings -
i.e. the conventional methods of positioning content using CSS - not
by use of a table!
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer and The GIMP
Still exploring BlueGriffon
Reply all
Reply to author
Forward
0 new messages