Cascading Stylesheets offer an easy way to quickly change the look and feel of a web application. They hold information about colors, sizes, borders, and fonts. Working with stylesheets is a good way to separate the style and the actual content of a webpage. The HTML document should only contain text and HTML tags.
In this recipe, we will make a simple stylesheet, upload it to the APEX environment, and use it in our application. We will change the buttons and the background of the region. All this is done by referencing classes in the stylesheet.
We will use the user profiles page we made in Chapter 1, so make sure this page is ready. For the buttons we will use other background images. You can make them yourself or you can copy some from the Internet (mind the copyrights). You can find them anywhere. Make sure these buttons have the same size as the original buttons. Once you have made the images you have to upload them using the FTP client. Copy the images to the /images/
directory.
For this example, we will use theme 1. If you haven't installed theme 1 yet, follow these steps:
.bgregion { border: 1px solid; background-color:lightblue; } button { border: 0; cursor: pointer; font-weight: normal; padding: 0 10px 0 0; text-align: center; } button span { position: relative; display: block; white-space: nowrap; font-size: 13px; padding: 0 4px 0 15px; } button.button_custom { background: transparent url('../images/rb_a.GIF') no-repeat scroll top right; color: black; display: block; float: left; font: normal 12px arial, sans-serif; font-face:bold; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } button.button_custom span { background: transparent url('../images/rb_span.GIF') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; }
[buttons.css]
custom_theme.css
.<link href="#WORKSPACE_IMAGES#custom_theme.css" rel="stylesheet" type="text/css">
[Link_css.txt]
#BODY#
substitution string.In the HTML tags, you can reference to the stylesheet. This can be done in three ways:
H1{font-family: verdana, arial; font-size: 200%; color: darkblue}
[Font_verdana.css]
#reportarea {background-color:lightyellow}
[Bg_ly.css]
div
in your HTML document and name it reportarea:
<div id="reportarea">some text</div>
[Div_reportarea.txt]
div
with a light yellow background..divbackground{border: 1px solid; background-image:url(background.gif); background-position:left top;}
[div_bkg.css]
div
in your HTML document and use the class attribute to reference to divbackground:
<div class="divbackground">some text</div>
[Div_class_bkg.txt]
This displays a div with a solid line and a background image with the name background.gif
. The image starts at the upper-left corner of the div.
In our webpage, we referenced using classes in the stylesheet. First, we referenced to the bgregion
class and for the buttons we referenced the button_custom
class.
There are two images used for the buttons. The first image, bg_span.gif
is the actual background with the button label. The second image, bg_a.gif
will be put on the right side of the first image. In this way, you will see two images that together look like one button. In this way, the button width is variable and dependent on the length of the label.
Be careful when you switch to another theme. You will possibly lose your template settings. You can avoid this by exporting the theme.
18.118.128.105