Creating rounded corners - Revision history

Batch1211 at 12:57, 20 September 2010

2010-09-20T12:57:18Z

Mike dowler: Fixed typos

2009-02-25T20:52:17Z

Fixed typos

Mike dowler: Added sample images

2008-12-07T14:39:45Z

Added sample images

Mike dowler: Added x/y values for all images; requirement for white background

2008-12-06T09:12:33Z

Added x/y values for all images; requirement for white background

Mike dowler at 21:04, 22 May 2008

2008-05-22T21:04:25Z

Mike dowler at 21:29, 10 March 2008

2008-03-10T21:29:08Z

Mike dowler: /* Putting it into practice - Editing your template */

2008-03-10T21:28:03Z

‎Putting it into practice - Editing your template

Mike dowler: /* Putting it into practice - Editing your template */

2008-03-10T21:27:16Z

‎Putting it into practice - Editing your template

Mike dowler at 21:20, 10 March 2008

2008-03-10T21:20:06Z

Mike dowler at 20:43, 10 March 2008

2008-03-10T20:43:05Z

← Older revision		Revision as of 12:57, 20 September 2010
Line 126:		Line 126:
	And that's it - happy coding!		And that's it - happy coding!

−	[[Category:Templates]]	+	[[Category:Templates]][[Category:Tutorials]][[Category:Template Development]]

@@ Line 60: / Line 60: @@
 | 785
 | 800
 | 15
 |}

@@ Line 62: / Line 62: @@
 | 15
 | 600
 |}

@@ Line 23: / Line 23: @@
 We will use Inkscape to create a simple rounded box with a pink foreground and a white background, and a drop shadow at the lower right corner.  This is the same box as shown in the animation above.
-# [[Image:New inkscape image 800x600.png|thumb|Create a new Inkscape image]]To begin, we need to decide what maximum size we want for our box.  As stated above, this will determine the size of image we need to use.  Since a larger image will have a greater file size, and hence cause a website to load more slowly, there is no point making the image any bigger than is necessary.  For the purposes of this example, we will use a maximum size of 800px wide by 600px high.  We therefore create a new document in Inkscape having these dimensions. The document dimensions are set by choosing File > Document properties from the menu, and entering the correct values in the dialogue box that appears.  We will also change the name of the default layer (go to Layer > Rename layer...) to "Rounded rectangle".<div style="clear:both"></div>
+# [[Image:New inkscape image 800x600.png|thumb|Create a new Inkscape image]]To begin, we need to decide what maximum size we want for our box.  As stated above, this will determine the size of image we need to use.  Since a larger image will have a greater file size, and hence cause a website to load more slowly, there is no point making the image any bigger than is necessary.  For the purposes of this example, we will use a maximum size of 800px wide by 600px high.  We therefore create a new document in Inkscape having these dimensions. The document dimensions are set by choosing <code>File > Document properties</code> from the menu, and entering the correct values in the dialogue box that appears.  Also in this dialogue box, we need to change the default background from transparent to white (<code>ffffffff</code>).  After closing the dialogue, we will change the name of the default layer (go to <code>Layer > Rename layer...</code>) to "Rounded rectangle".<div style="clear:both"></div>
 # [[Image:Inkscape create rounded rectangle.png|thumb|Draw a rounded rectangle]]We will leave a 5px margin around our image.  In addition, we will need 5px width of shadow on the right-hand and bottom edges of our rounded box.  We therefore need to draw a rounded rectangle with a width of 785px and a height of 585px.  We will also give the rounded corners a 5px radius. To do this, select the rectangle tool from the toolbar at the left, and left-click-drag anywhere within the blank document.  The exact size of rectangle you draw doesn't matter at this stage.  Then go to the options toolbar and enter the following settings: W:783.00 H:583.00 Rx:5.000 Ry:5.000 px.  Why the difference in sizes?  These dimensions don't include the width of the border.  We are going to give our rectangle a 2px border, which will therefore increase each dimension by 2px.<div style="clear:both"></div>
 # [[Image:Inkscape set fill colour.png|thumb|upright||Set the fill colour]][[Image:Inkscape set border width.png|thumb|upright|Set the border width]]Next, we need to adjust that border, and set the colour of our rectangle.  With the rectangle selected, go to Object > Fill and Stroke on the menu bar, or press Shift + Ctrl + F, to bring up the Fill and Stroke dialogue.  Under the 'Fill' tab, choose the colour of the foreground fill.  We are going to use the hex colour #ffd7eb, so enter 'ffd7ebff' in the RGBA input.  (The final 'ff' hex value sets the alpha transparency level for the fill - in our case, completely opaque).  Under the 'Stroke paint' tab we set the border colour.  In our case, we want a black border, so we can leave the RGBA input at the default value of 000000ff.  Finally, under the 'stroke style' tab, we set the stroke (border) width to be 2.000px.<div style="clear:both"></div>
@@ Line 29: / Line 29: @@
 # [[Image:Inkscape hide layer.png|thumb|Hide the current layer]][[Image:Inkscape create layer.png|thumb|Create a new layer]]Next, we need to create a new layer to hold the drop shadow. First, hide the original layer ("Rounded rectangle") by clicking the eye icon at the bottom of the main window.  Then, go to Layer > Add Layer... on the menu bar, and create a new layer named "Shadow" below the current layer.  We can then create another rounded box in this layer.  Make this one 785px wide, 585px high, with corner radii of 5px, and located at x=10 and y=5.  In the 'Fill and Stroke dialogue, set the fill RGBA to '00000081', and the blur slider to '0.6'.  On the 'stroke paint' tab, select the 'no paint' icon.  This will produce a rounded rectangle in a grey colour, partially transparent, and with slightly blurred edges.<div style="clear:both"></div>
 # [[Image:Inkscape complete image.png|thumb|The complete image!]]Finally, unhide the "Rounded rectangle" layer, by selecting it in the drop-down box at the bottom of the main window, and left-clicking the eye icon again.  Congratulations - you can now see how your rounded box will look!  You may want to save your image at this point as an Inkscape .svg file so that you can easily come back and change it later.<div style="clear:both"></div>
-# Now we need to create the four separate images we will need, and save them in a web format.  Inkscape also makes this very easy - simply go to File > Export Bitmap... and select the 'Custom' button in the dialogue box.  We can export the relevant parts of our image by entering the coordinates in the x<sub>0</sub>/y<sub>0</sub> and x<sub>1</sub>/y<sub>1</sub> boxes.  Remember that all coordinates are measured from the bottom left corner!  The best place to cut the image is just before the curve of the rounded corners on the bottom and right-hand edges.  As an example, to create the large top left image, we use: x<sub>0</sub>=0, y<sub>0</sub>=15, x<sub>1</sub>=785, y<sub>1</sub>=600.<div style="clear:both"></div>
+# Now we need to create the four separate images we will need, and save them in a web format.  Inkscape also makes this very easy - simply go to File > Export Bitmap... and select the 'Custom' button in the dialogue box.  We can export the relevant parts of our image by entering the coordinates in the x<sub>0</sub>/y<sub>0</sub> and x<sub>1</sub>/y<sub>1</sub> boxes.  Remember that all coordinates are measured from the bottom left corner!  The best place to cut the image is just before the curve of the rounded corners on the bottom and right-hand edges.  We might therefore use the following settings:
 ===Putting it into practice - Editing your template===

@@ Line 1: / Line 1: @@
-{{review}}
+<noinclude>{{review}}</noinclude>
 ===Introduction===
 Using (X)HTML and CSS, it is easy to place rectangular borders around parts of a web page.  Usually, this is done by incorporating the code for that part of the web page in <code><nowiki><div>...</div></nowiki></code> tags (or similar), and then applying a border to the <code><nowiki><div></nowiki></code> using the CSS <code>border</code> property.

@@ Line 32: / Line 32: @@
 ===Putting it into practice - Editing your template===
 To implement the rounded corners on a Module, we will use the '<code>rounded</code>' Module [[What is module chrome?|chrome]], by including the following <code><nowiki><jdoc /></nowiki></code> statement:
-<source lang="html4strict"><jdoc:include type="modules" name="POSITION" style="rounded" /></source>.
+<source lang="html4strict"><jdoc:include type="modules" name="POSITION" style="rounded" /></source>
 This creates the following code in the final web page:
 <source lang="html4strict">