Please disable your adblock and script blockers to view this page

Search this blog

Saturday 25 July 2015

ADF Skinning : Change label, content, design and 'Update' button style of af:inputFile

This post is about skinning af:inputFile, see how default inputFile looks on page



See how ADF Skin changes it's appearance :)
Change basic inline style of af:inputFile (background color and design) :

/**Skin Selector to change inline style of af:inputFile**/
af|inputFile {
    background-color: Green;
    border-radius: 20px 20px 20px 20px;
    padding: 5px;
}

Output on page-

Change label style of af:inputFile :


/**Skin Selector to change label style of af:inputFile**/
af|inputFile::label {
  font-weight:bold;
  color:white;
  font-family: cursive;
}

Output on page-





Change content style of af:inputFile (background color, design of content only) :


/**Skin Selector to change content style of af:inputFile**/
af|inputFile::content {
    color: #ff6363;
    font-weight: bold;
    border-color: #79bc79;
    border-style: solid;
    border-width: thin;
    border-radius: 15px 15px 15px 15px;
    padding: 5px;
    background-color: #d6ffd6;
    font-family: cursive;
}


Output on page-

After selecting a file, update button appears -


On click of update button a popup with af:inputFile appears-



Change update button style of af:inputFile:


/**Skin Selector to change style of update button of af:inputFile**/
af|inputFile af|commandButton {
    color: white;
    font-weight: bold;
    background: #00b55a;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

/**Skin Selector to change style of update button of af:inputFile in case of hover**/
af|inputFile af|commandButton:hover {
    color: white;
    font-weight: bold;
    background: #940000;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}


Output on page-
On hover-
Cheers :) Happy Learning
o

2 comments :

  1. That was really helpful. Could you also suggest how we can change the label text or customize button text of File upload component.
    Many thanks.

    ReplyDelete
  2. Hi Ashish,

    Can we change Choose File text also?

    Best Regards,
    Nazeer.

    ReplyDelete