Ashish Awasthi's Blog

Wednesday, 4 July 2018

Skinning ADF Dialog box inside popup component

In this post, we'll see how to change the look n feel of popup component by skinning the ADF dialog box using CSS code in ADF Application. Skinning plays important role in designing a better user interface, You can read more about ADF Skinning here.

Default ADF dialog component inside popup looks like this

And here I'll show you how to customize the look of dialog box using ADF Skin (CSS Code), I hope you all know about creating ADF Skin file. After creating the Skin file put the CSS script mentioned below in that file.

See ADF Skin code used to customize ADF dialog box.

/**Change background color and border color of dialog**/
af|dialog {
    background-color: White;
    border-color: #4267b2;
}

/**Change dialog header style**/
af|dialog::header, af|dialog::header-end, af|dialog::header-start, af|dialog::title {
    color: #FFFFFF;
    text-align: center;
    background-color: #45619d;
    background-image: none;
    font-family: Arial;
    padding: 3px;
}

/**Change dialog button styler**/
af|dialog af|button {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    width: 60px;
}

af|dialog af|button::link {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    font-family: Arial;
}

/**Set hover event properties for dialog button**/
af|dialog af|button:hover {
    background-color: red;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    width: 60px;
}

af|dialog af|button::link:hover {
    background-color: #528cff;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    font-family: Arial;
}

/**Change default close icon of dialog**/
af|dialog::close-icon-style {
    background: none;
    background-image: url("../../lblue_cross_16.png");
    height: 17px;
}

af|dialog::close-icon-style:hover {
    background: none;
    background-image: url("../../red_cross_16.png");
    height: 17px;
}

And after skinning, ADF dialog box looks like this

Cheers :) Happy Learning

You might also like:

Friday, 29 June 2018

HTML Tags and their usage

List of Basic HTML Tags

Here a list of HTML tags with their significant use is given. Read this and try in our online HTML editor. Learning Basic HTML helps in the development of Web Applications.

Tag Name	Tag Code		Purpose
Tag Name	Start Tag	Close Tag	Purpose
HTML	<html>	</html>	Starting & ending tag of page,
HEAD	<head>	</head>	Formatting information, and content is not visible
BODY	<body>	</body>	Contains the visible information
HEADING	<h1>,<h2>,<h3>,<h4>,<h5>,<h6>	</h1>,</h2>,</h3>,</h4>,</h5>,</h6>	Largest to smallest heading
Bold Text	<b>,<strong>	</b>,</strong>	For bold text
Paragraph	<p>	</p>	For writing text in paragraphs
Line Break	<br>	Not needed	Insert a line break
LIST	<ol>	</ol>	For Ordered List
LIST	<ul>	</ul>	For Unordered List
List Item	<li>	</li>	For component of list
IMAGE	<img src="source">	Not needed, </img>	For inserting image in webpage
LINK	<a href="url of page">	</a>	For Hyperlink
CENTER	<center>	<center>	For center alignment
TT	<tt>	</tt>	Typewriter like text
BLOCKQUOTE	<blockquote>	</blockquote>	Intends from both side
HR	<hr>	</hr>	Horizontal Rule
TABLE	<table>	</table>	Specifies the beginning and end of a table
TABLE ROW	<tr>	</tr>	Specifies the beginning and end of a table row
TABLE DATA	<td>	</td>	Specifies the beginning and end of a table cell
TABLE HEAD	<th>	</th>	A normal cell with text that is bold and centered
TABLE BORDER	<table border="1">	</table>	Specifies the border for table
ITALIC	<i>	</i>	For italic text
LESS THAN	<	Not needed	For < sign
GREATER THAN	>	Not needed	For > sign
SUBSCRIPT	<sub>	</sub>	For subscript
SUPERSCRIPT	<sup>	</sup>	For superscript
JAVASCRIPT	<script type="javascript">	</script>	For using javascript

Cheers :) Happy Learning

Thursday, 28 June 2018

HTML Tutorial - A Quick Overview for beginners

After this HTML Tutorial, you'll learn about basics of HTML and it's tag. It'll help you in developing and customizing applications and Web sites that make use of HTML. With our online HTML editor, you can run HTML code directly from your browser.

What is HTML-

HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an .htm or .html file extension
An HTML file can be created using a simple text editor as Notepad

HTML Tags-

The HTML tags are used to markup HTML elements
The HTML tags are surrounded by the two characters
The surrounding characters are called angle brackets
HTML tags normally come in pairs
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive

Simply open Online HTML Editor in the new tab Tab and copy HTML code from this page and just paste in the editor, then click on "Run Button" at top of the editor and see your result in the right panel.

Headings in HTML

<html>
<body>
<h1>HTML Largest Heading</h1>
<h2>HTML Second Largest Heading</h2>
<h3>HTML Third Largest Heading</h3>
<h4>HTML Fourth Largest Heading</h4>
<h5>HTML Fifth Largest Heading</h5>
<h6>HTML Smallest Heading</h6>
</body>
</html>

Paragraphs in HTML

<html>
<body>
<p>This is example of paragraph, first paragraph</p>
<p>HTML tutorial, Second paragraph</p>
</body>
</html>

Links in HTML

<html>
<body>
<a href="http://www.awasthiashish.com">Ashish Awasthi's Blog</a>
<br />
<a href="http://www.facebook.com">Link to facebook</p>
</body>
</html>

Ordered List in HTML

<html>
<body>
<ol>
<li>Computers</li>
<li>Software</li>
<li>Laptop</li>
<li>Mobile</li>
</ol>
</body>
</html>

Unordered List in HTML

<html>
<body>
<ul>
<li>Computers</li>
<li>Software</li>
<li>Laptop</li>
<li>Mobile</li>
</ul>
</body>
</html>

Moving text using MARQUEE tag in HTML

<html>
<body>
<marquee>HTML Tutorial - This is moving text</marquee>
</body>
</html>

Images in HTML

<html>
<body>

<img src="http://www.awasthiashish.com/wp-content/uploads/2018/06/logo.png"
alt="Ashish Awasthi's Blog" width="200" height="200">

</body>
</html>

Text in HTML

<html>
<head>
<title>Title</title>
</head>
<body>

<b>Bold Text</b>
<br>
<i>Italic Text</i>
<br>
<u>Underline Text</i>

</body>
</html>

Test your HTML skills with W3School's Quiz

Cheers :) Happy Learning

Search this blog

Wednesday, 4 July 2018

Skinning ADF Dialog box inside popup component

Friday, 29 June 2018

HTML Tags and their usage

List of Basic HTML Tags

Thursday, 28 June 2018

HTML Tutorial - A Quick Overview for beginners

What is HTML-

HTML Tags-

Headings in HTML

Paragraphs in HTML

Links in HTML

Ordered List in HTML

Unordered List in HTML

Moving text using MARQUEE tag in HTML

Images in HTML

Text in HTML