Freitag, 14. April 2017

Nice and Reponsive Navigation Bar With List / Report Content Part 2

Why the look and feel of an application is important?

Your website’s overall look and feel is important because it instantly conveys an attitude to your clients before they even start reading the content on the site.
Though there is some leeway within general industry categories, users can get confused or turned off by websites that look or feel too far outside of their expectations for a business or industry. Before you begin a website redesign, check your goals against industry standards by looking at your competitors’ websites. A fitness website should look fresh, powerful and well organized. A website for a band or fashion designer can be more creative with colors, texture and image choices.

The look and feel of a website can also be described as the website’s “personality.” Your website’s personality should match the attitude of your business and your business objectives while still fitting in with your client’s expectations of the business and industry you’re in.

 Do you want to make  a Very Nice Side Navigation Bar with more Options in Oracle Apex  like in the below Picture ?



  1. Add the below CSS to customize the  Navigation Bar. Don't Forget to add Class in your Navigation Bar Items
.pull-left{
  
 float:left !important; 
}

.t-Header-logo {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2rem;
    line-height: 2.4rem;
    padding: 0 8px;
}

.t-Form-fieldContainer--radioButtonGroup .apex-item-radio input + label:hover, .apex-button-group input + label:hover, .t-Button:not(.t-Button--simple):hover, .a-Button:hover {
    background-color: rgb(0, 0, 0,0) !important;
    box-shadow: none !important;
}

.t-Button.t-Button--header:active, .t-Button.t-Button--header:focus:active {
    background-color: rgba(0, 0, 0, 0) !important;
}

.t-Button.t-Button--header:hover {
    background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
}

.t-Button.t-Button--header:focus:before, .t-Button.t-Button--header:active:focus:before {
    box-shadow: none !important;
}

.t-Header-branding {
    /* background-color: rgb(5, 114, 206); */
    background: rgb(46, 191, 188);
  height:55px !important;
}

.t-Button--header{
 font-weight:bold;
  font-size:1.7rem
}

.a-Button:after, .t-Button:after {
    z-index: -1;
    box-shadow: none !important;
    transform: translateY(-2px);
}


.t-Header-navBar {
    text-align: right;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-grow: 1 !important;
}

.user{
  background: rgb(230, 230, 230);
    border-color: rgb(217, 217, 217);
    color: rgb(112, 112, 112) !important;
    font-size: 1.5rem;
}

.user .t-Button-label{
  color: rgb(112, 112, 112) !important;
}
body{
  background:white;

2- Create a Inline Dialog and add a Static ID. For example in my Case IDM

3- Create a Dynamic Action to Open The Inline Dialog (See my Others Blogs)

4 Customize the Inline Dialog Using this CSS



#SS:focus:before, #SS:focus:before, #SS.is-active:focus:before, #SS.is-active:focus:before {
    box-shadow: none !important;
    opacity: 1;
}

#SS:not(.t-Button--link):not(.t-Button--header):active, .t-Button:not(.t-Button--link):not(.t-Button--header).is-active {
    box-shadow: none !important;
}

.IDL .ui-dialog-titlebar {
    display: none;
}

.fa-times{
font-size: 2rem;
    font-weight: bold;
}
#P0_NEW{
background:white;
}

.t-MediaList-item {
    border-color: rgba(0, 0, 0, 0.1);
    border: none;
}

#SS{
color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}



.IDL{
position: fixed;
  height: 100% !important;
    width: 260px !important;
    top: 0px !important;
    left: 0px !important;
    display: block;
    max-width: 100%;
    }
    .IDM{
     height: 100% !important;
    }
    
    #SI{
    color: rgb(255, 255, 255);
    background-color: rgb(220, 13, 13);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) inset;
    font-size: 2rem;
    width: 102px;
    padding-bottom: 12px;
    padding-top: 12px;
     display: none ;
    }
    
    #NU{
    color: white;
    background-color: black;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) inset;
    font-size: 2rem;
    width: 102px;
    padding-bottom: 12px;
    padding-top: 12px;
     display: none ;
    }
    
    @media only screen and (max-width: 1000px) {
    .user{
    display:none !important;
    }
    
    .SIN{
    display:none !important;
    }
    
    .REC{
    display:none !important;
    }
    .t-Button--navBar .t-Button-label {
    display: inline !important;
}

#SI, #NU{
 display: inline !important;
}
    }
    







Keine Kommentare:

Kommentar veröffentlichen