|
|
Hi, Coming from previous versions of PHPR, version 5 up to 9.7 I am trying to understand the new page editor of PHPR 10 and how I can change colors of each element. Moreover I can see some color files under PHPR/style/colors that cannot undestand how are linked to each theme. Theme themselves have a color style that seems diferrent to every page. For example I have selected 'darkly' theme and see blue heading title for login page with red message information box, blue/orange for changepasswd page and transparent heading title for add/edit page with green button's background box. Can someone point me to the starting point on how,to change pages' colors for various elements?
I am going through the exact same process myself at the moment (see the thread I started http://asprunner.com/forums/topic/26088-upgrading-to-version-10/).
I have concluded that, for me at least, the best approach is to use the default theme of a Bootstrap and create a CSS with the bare minimum of changes necessary to colours. I have also decided to retain as much out of the box functionality as possible and minimise customisation of the layouts. This is to reduce the potential for additional work with the next upgrade.
In detail what I have 'learnt' so far is as follows:
- Choose a Bootstrap layout to apply to ALL your pages.
- Decide whether to create a CSS to modify the Default theme OR to modify one of the pre-defined themes. based on what I've done so far I think its better to use the Default and apply your CSS to that as this removes one level of overlay. With Bootstrap Default the only CSS applied is yours, with a predefined theme it appears that the Booststrap default is overlaid with the predefined theme and your CSS then overlays that.
- The article Admin have referred to is a good starting point but I found I needed to dig a lot deeper. You will need to use a browser debugger to find the various classes and styles used and they can be nested too!. I found Chrome debugger to be more useful than the MS Edge browser.
- Apart from the article in the link there does not appear to be any other information around regarding what attributes are called and may need to be changed.
- I used Komodo edit to open the code for the selected Bootstrap, from which I then copied the relevant styles into a separate CSS file and then modified it as required. One nice feature of Komodo is that it will show you the colour of any HEX colour definitions when you click on them in the CSS.
- Having found a colour that I needed to change I maintained an xls sheet of the default colour and colour I changed it too, because there will be many places that need to be changed and you won't find them all initially.
- There is an alternative approach and it may a sledge-hammer overkill method; Copy the theme that is closest to what you want and then for every colour you need to change do a global replace. I did consider this, exported all the theme into excel, did a lot of filtering and sorting until I got a list of around 200 lines of unique colour definitions at which point I decided to stop. I was effectively creating a new theme which would have to be maintained going forward.
Pasted below is the CSS that I have created so far, this has replicated about 95% of the colour scheme that I currently have on my v9.61 developed application. This might help you identify where you need to make changes.
I annotated each modified style with a comment and unique reference, it seemed it a good idea at the time. If you decide to create your own theme then having each modified set of attributes annotated helps with maintaining it in future.
/* This is the top part of the page panel under the logo */
.panel-primary .panel-heading,
.panel-success .panel-heading,
.panel-warning .panel-heading,
.panel-danger .panel-heading,
.panel-info .panel-heading,
.panel-primary .panel-title,
.panel-success .panel-title,
.panel-warning .panel-title,
.panel-danger .panel-title,
.panel-info .panel-title
{ color: white; background-color: #276a36; border-color: #276a36; }
.panel-primary {
border-color: #276a36;}
.panel-primary > .panel-heading
{ background: #276a36; }
/* This is for the text labels on the page */
body
{ color: #276a36; background-color: #fff; }
/*N1 Navigation bar on each page */
.navbar-default
{ background-image: linear-gradient(#37954b, #276a36, #308242); }
/* N1A Nav bar */
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a
{color: white; }
/*N2 Navigation bar on each page */
.navbar-default .navbar-toggle
{ border-color: white; }
/*N3 Navigation bar on each page */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus
{ background-color: white; }
/*N4 Navigation bar on each page */
.navbar-default .navbar-toggle .icon-bar
{ background-color: #276a36; }
/*N5 Navigation bar on each page */
.navbar-default .navbar-collapse, .navbar-default .navbar-form
{ border-color: #276a36; }
/*N6 Drop down menu items */
.navbar-default .navbar-nav .open .dropdown-menu > li > a
{ color: white; background-image: linear-gradient(#37954b, #276a36, #308242); }
/*N7 Hover over drop down menu item Vertical menu */
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus
{ color:black; background: #99cc33; }
/*N8 Hover over dropdown menu item Horizontal menu */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus
{ text-decoration: none; color: black; background-color: #99CC33; }
/*N9 Hover over menu items */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{ color: black; background: #008000; }
/*N10 Active selected menu item */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus
{ color: black; background-color: #99cc33; }
/*N11 Breadcrumb and a */
a
{color:#276a36;text-decoration:none}
a:hover,a:focus
{color:#008000;text-decoration:none}
a:focus
{outline:thin dotted;outline:5px auto -web
/*B1 Standard Button */
.btn.btn-primary, .btn-primary
{ color: #276a36; background: #fff; border-color: #276a36; }
/*B2 Button Hover */
.btn-primary:hover
{ color: #fff; background-color: #276a36; border-color: #fff; }
/*B3 Button Focus */
.btn-primary:focus, .btn-primary.focus
{ color: #fff; background-color: #008000; border-color: #fff; }
/*B4 Button active selected */
.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info
{ color: #fff; background-color: #276a36; border-color: #276a36; }
/*B5 When a primary button is clicked */
.btn-primary:active:hover,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus
{ color: white; background-color: #99cc33; border-color: #276a36; }
/*B6 Buttons on the Navigation Menu */
.btn-info {
color: white;
background-image: linear-gradient(#37954b, #276a36, #308242);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff37954b', endColorstr='#ff308242', GradientType=0);
filter: none;
border: 2px solid white; }
/*B7 Nav login button hover focus */
.btn-info:hover, .btn-info.hover,
.open>.dropdown-toggle.btn-info:hover,
.btn-info:focus, .btn-info.focus,
.open>.dropdown-toggle.btn-info:focus
{ color: white; background: #008000; border-color: white;}
/*B8 Nav login button Clicked */
.btn-info:active:focus, .btn-info.active:focus,
.open>.dropdown-toggle.btn-info:focus,
.btn-info:active.focus, .btn-info.active.focus,
.open>.dropdown-toggle.btn-info.focus
{ color: white; background-color: #99cc33; border: #276a36;}
Apologies for the length of the reply but I could see how to paste an attachment.
|
