Ashish Awasthi's Blog: CSS

Showing posts with label CSS. Show all posts

Friday 26 October 2018

Use Google Fonts in ADF Application using custom CSS

We can use google fonts in the ADF application very easily. In this post, I'll describe the steps to implement this using custom CSS.

Go to Google Fonts

Select any font that you want to use and click on the plus (+) icon, I have clicked that that's why the image is showing the minus(-) icon

The next step is to see the font's properties and copy the highlighted link, It'll be used in our CSS

Now create a page in the ADF application and add this CSS using the ADF Resource tag, Here I have added 4 different fonts

<af:resource type="css" source="https://fonts.googleapis.com/css?family=Charmonman"/>
<af:resource type="css" source="https://fonts.googleapis.com/css?family=Kirang+Haerang"/>
<af:resource type="css" source="https://fonts.googleapis.com/css?family=VT323"/>
<af:resource type="css" source="https://fonts.googleapis.com/css?family=Philosopher"/>

Added four output text to show different fonts

<af:outputText value="Oracle Application Development Framework" id="ot1"
inlineStyle="font-family:Charmonman;font-size:35px;color:red;font-weight:bold;"/>
<af:spacer width="10" height="10" id="s1"/>
<af:outputText value="Oracle Application Development Framework" id="ot2"
inlineStyle="font-family:Kirang Haerang;font-size:35px;color:green;font-weight:bold;"/>
<af:spacer width="10" height="10" id="s2"/>
<af:outputText value="Oracle Application Development Framework" id="ot3"
inlineStyle="font-family:VT323; font-size:35px; color:#4289aa; font-weight:bold;"/>
<af:spacer width="10" height="10" id="s3"/>
<af:outputText value="Oracle Application Development Framework" id="ot4"
inlineStyle="font-family:Philosopher; font-size:35px; color:#dc006d; font-weight:bold;"/>

Now run the application and check :)

Sample ADF Application - Download

Cheers Happy Learning

Tuesday 10 July 2018

Styling HTML elements using CSS

In this post, we'll learn about styling HTML elements using CSS code, CSS stands for Cascading Style Sheet. It is used for changing the look of HTML components on the page and is very important for designing a beautiful user interface. After this tutorial, you'll be able to learn the basics about CSS and can use it in any type of web application or technology to beautify components.

CSS can be used in HTML pages in 3 ways, Here we'll see how to style HTML elements.

Inline CSS

Inline CSS is used to decorate a single HTML element and makes use of style attributes. See this example of styling HTML paragraph tag using inline CSS

<!DOCTYPE html>
<html>
<body>

<p style="color:red;font-size:20px;font-weight:bold;">This is a Red bold Paragraph</p>
<p style="color:darkgreen;font-size:15px;font-style:italic;">This is a green italic Paragraph</p>

</body>
</html>

Try this in our HTML Editor

Internal CSS

Internal CSS is used to decorate elements in a single HTML page. It is defined between <style> - </style> tag in <head> section. See this example of using internal CSS in an HTML page

<!DOCTYPE html>
<html>
<body>

<style>
p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
</style>

<p>This is a Red bold Paragraph with a border and background color</p>

</body>
</html>

Try this in our HTML Editor

External CSS

External CSS is used to decorate many HTML pages, Like for designing a website's template we use external CSS, In this, we create a file with .css extension and this file contains CSS code for all page elements.

A CSS file looks like this - style.css

p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
h1{
color:blue;
}

And this is how it is attached to the HTML page

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<p>This is a Red bold Paragraph with a border and background color</p>
<h1>This is the H1 heading</h1>
</body>
</html>

After this information, you'll be able to understand the basics of CSS and get an idea of using styles with any other framework.

Cheers :) Happy Learning

Tuesday 8 May 2018

Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin

Hello Everyone

In this tutorial, We'll learn to change look n feel of ADF tree table component using Oracle ADF Skin
Here I am using Departments and Employees table HR Schema to prepare the model and created tree Table using view link between Departments and Employees View Object

Monday 16 April 2018

Increase Icon size of af:panelSpringBoard using ADF Skin

ADF Faces af:panelSpringBoard component shows af:showDetailItem in a fancy view using icons as the notation of showDetailItem

From Oracle Docs

The panelSpringboard control can be used to display a group of contents that belongs to a showDetailItem. An icon strip with icons representing the showDetailItem children along with the item's contents are displayed when in strip mode, and a grid of icons with no contents shown is displayed in grid mode. When the user selects an icon while the panelSpringboard is in strip mode, the panelSpringboard discloses the associated showDetailItem. When the user selects an icon while the panelSpringboard is in grid mode, this automatically causes the panelSpringboard to display in strip mode. Typically you would put one or more showDetailItem components inside of the panelSpringboard but you may also alternatively place a facetRef, group, iterator, or switcher inside of the panelSpringboard as long as these wrappers provide showDetailItem components as a result of their execution

I have added a panel springboard on the page and by default, it looks like this

Wednesday 23 August 2017

Add new row and copy existing row to HTML table using JavaScript

Hello All

This post is about adding new row in HTML table using form entry or copy existing row to table using javascript

So here I have created a HTML page, added a form, two buttons, and a table on page and it looks like this

Wednesday 26 April 2017

Resize FacesMessage, Change look n feel of Message Box using ADF Skin

We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like error, warning or confirmation
Here you can read more about FacesMessage

Previously I have posted about changing default icon of FacesMessage using ADF Skin now this post is about resizing FacesMessage dialog and changing it's look and feel

Thursday 10 November 2016

Styling Input components inside af:query using ADF Skin

This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job

Wednesday 2 March 2016

Configure ADF Skin in Jdeveloper 11.1.1.7

In Jdeveloper 11.1.1.7 there is no option to create ADF Skin declaratively
In order to apply skin we have to create a simple CSS file and then configure application to use this CSS file as skin. Jdeveloper doesn't do this for us :( we have to do it manually

So first step is to enable Skin Selectors for ADF Faces, Without enabling this CSS editor doesn't show ADF Faces component tags
CSS files by default supports HTML tags only

Go to Tools > Preferences > CSS Editor and set CSS level to level 3 and check the box to support ADF Faces Components

Saturday 27 February 2016

ADF Skinning: Increase width, Change color of a tab in af:panelTabbed

We can change appearance of ADF Application by applying CSS and changing style properties of ADF Faces Component
Here i am writing a simple CSS to increase tab width of af:panelTabbed component

I hope you all know how to create a skin for ADF Application , If don't know then look at this post
ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Saturday 27 June 2015

ADF Basics: Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Hello All,
Again a post about ADF Basics for beginners
I have seen lots of thread on OTN about changing basic styles of component . for example,

How to change font size of inputText ?
How to change color of inputText/outputText ?
How to change color of link or button ?

and everyone starts creating a css/skin for these minor changes but there is no need of that
Skin should be used for complex styles or you have apply same style to all components of your application

If you will read API docs then you will know this, See what docs says about inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.

Difference between contentStyle and inlineStyle -

contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about whole component and also available in output (outputText) or collection (table, tree etc) component's property where contentStyle is not there. This can be use to set width, height ,border or color of output components etc.

So this is enough about theory , no one likes theory ;) , Everyone is looking for some code that is ready to use
Let's see some practical usage of both properties -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Used this in contentStyle property of components
width:150px;color:white;font-weight:bold;font-size:small;background-color:red;padding:5px;
and check the output

you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this -
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components , color of link/button -

Output components doesn't have contentStyle property as there is not content part in component , here we make use of inlineStyle property
See what happens on applying same style in outputText and link using inlineStyle

It looks good :) , but same style doesn't work for button because button has multiple root element (we can only change width, color of text and font of button but background color and other styling can not be changed using inlineStyle property)
For more detail about button skinning check - Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width -

just write in inlineStyle property like this
width:600px;height:200px;background-color:lightyellow;color:red;
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table's height using inlineStyle ensure that autoHeightRows should be set to -1

In same way we can change color of columns too, see i have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this

Now it's your turn , try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin , when framework provides these wonderful properties

Cheers :) Happy Learning

Tuesday 28 April 2015

ADF Skinning : Remove "search" or "more" link from af:inputComboboxListOfValues in ADF Faces (Jdev 12.1.3)

Hello all,

This post is about a small CSS trick that may be useful sometimes

we often use af:inputComboboxListOfValues to show large amount of data as List of Values
From Oracle Docs-
The inputComboboxListOfValues component allows a user to open a choice list and select from a list of values, in order to populate the LOV field (and possibly other fields) on a page.
Users can either select a value from the list in the dropdown panel or click the "Search..." link at the bottom of the panel to launch the "Search and Select" dialog. The dialog enables users to search for specific values and select the desired value that should go into the LOV field on the base page. The choice list when opened could display various items in the following order with separators between each (if applicable).

Have a look at this -

here you see a link "more" on click this link a search dialog box appears , when you define a search criteria in lov at model level then this link appears as "search"

So to remove this link from combobox use this CSS

af|inputComboboxListOfValues::search{
    display: none;
}

Now look at combo box , we are done

Also Check how to configure ADF Skin in Application - ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Cheers :)
Happy Learning

Thursday 4 September 2014

Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Hello all
this post is about styling af:button component in ADF 12.1.3
how can we customize a button , change it's color, background color, shape ,size, font and many more
In 12.1.3 Jdeveloper, some features are supported like width of button directly from inline style property (this was not supported in 11g)

you can see new features for client side css- http://www.oracle.com/technetwork/developer-tools/jdev/documentation/1213nf-2222743.html

So let's start
I hope everyone know how to create css (skin) file in jdeveloper , if don't then follow this

Right click on viewController project → New from Gallery → Categories → Web Tier → JSF/Facelets → ADF Skin

Dropped 3 buttons on page, third one is disabled

Changing button properties (width, font, color for different client event) -

I think no description needed as tags are self-descriptive

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
}

Output-

Now change background color - to do this we have to use af|button::link selector

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
}

Output-

In same way we can change button behavior for hover, disabled and depressed client event

Hover event-

af|button:hover::link {
    background-color: #c7660b;
    border: skyblue 2.0px solid;
    color: White;
}

af|button:disabled::link {
      background-color: Gray;
    border: skyblue 2.0px solid;
    color: White;
}

Output- (hover on first button)

Depressed event- (Select )

af|button:depressed::link {
    background-color: maroon;
    border: skyblue 2.0px solid;
    color: White;
}

Changing shape of button-

1.Rounded corner (oval shape)
just change af|button and af|button::link selectors

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Output-

2.Square Button-

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
}

Output-

2.Round(Circle) Button-

changing shape is nothing just some hit and try in css, see the changes css other selectors remain same

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

Output-

So purpose of this post is to give overview of skinning and different selectors, you can try it on any component. Jdeveloper provide built in skin editor for all component , there you can see all selector and pseudo element of a component
Thanks , Happy Learning

Friday 15 August 2014

How to change default icons (info, Error, Warning) of FacesMessage and af:messages in Oracle ADF

Hello all
this post is about customizing or changing default icons of FacesMessage , it is very basic but sometimes it's hard to do easy things
if we need to use alternate icons in af:messages or in programmatic FacesMessage, so to do this just create a small ,simple CSS file (ADF Skin) in viewController project and use this code

Change url as per your icon image path, you can also define same for Fatal Error and Confirmation icon also

af|messages::info-icon
{
  content: url("../../information.png"); 
}

af|messages::warning-icon
{
  content: url("../../warning.png"); 
}
af|messages::error-icon
{
  content: url("../../error.png"); 
}

apply this skin to project and run your application to see changes

Default Icon	Changed Icon

Happy Learning :)

Subscribe to: Posts ( Atom )

Search this blog

Friday 26 October 2018

Tuesday 10 July 2018

Inline CSS

Internal CSS

External CSS

Tuesday 8 May 2018

Monday 16 April 2018

Wednesday 23 August 2017

Wednesday 26 April 2017

Thursday 10 November 2016

Wednesday 2 March 2016

Saturday 27 February 2016

Saturday 27 June 2015

Difference between contentStyle and inlineStyle -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Change properties of output components , color of link/button -

Change data collection components (af:table, af:treeTable,etc) height, width -

Tuesday 28 April 2015

Thursday 4 September 2014

Changing button properties (width, font, color for different client event) -

Changing shape of button-

Friday 15 August 2014