Change colours and required fields

711 views
Skip to first unread message

hists...@gmail.com

unread,
Jun 5, 2018, 10:59:25 AM6/5/18
to Easy!Appointments - Support Group
Hi! First of all I want to thank Alex for this great tool and the community for the helpful support group.

I would like to adjust the tool for the needs of our university department (appointments with professors) and have several questions, I hope the community can help me out with.

First of all it is about the coluors, especially so in the frontend. (the backend can wait) I have managed to change most of the colours in the book.php, but there are still some elements I cannot find where I can customise them.

Craig Tucker has done a lot of great work covering most of my questions in his EasyBlue-customisation, but unfortunately he hasn't documented the colour adjustments (or I wasn't smart enough to find the information on my own, worry in this case).

Frontend - Step 2:

1) Where can I change the colour and the background colour of the steps descriptions in the upper right corner? (see 1st screenshot)

2) Where can I change the colours of the calendar in the left part? (see 1st screenshot)

Frontend - Step 3:

3) Is it possible to make the phone number field unnecessary? (see 2nd screenshot) Basicly, I need only the first and second name and the e-mail address of the customers and would like to leave the phone number, the address, city and ZIP-code fields out. I can delete the address, city and ZIP-code fields out from the book.php, but without the phone number field the booking won't be processed.

Frontend - Step 4

4) Where can I change the colour of the Confirm-button? (see 3rd screenshot)

5) Is it possible to make the price details not be displayed on this page (and on the page of the 1st step)? As our appointments are absolutely free, this would only confuse the students.

6) Where can I customise which customer details are shown here? As I have written above, I wouldn't collect the customers' addresses and there is no need for the fields to be displayed here.

Frontend - Success page

7) Where can I change the colour of the "Go To Booking Page"-Button? (see 4th screenshot)

Thank you in advance!
EA-Screenshot 1.jpg
EA-Screenshot 2.jpg
EA-Screenshot 3.jpg
EA-Screenshot 4.jpg

hists...@gmail.com

unread,
Jun 12, 2018, 6:36:59 AM6/12/18
to Easy!Appointments - Support Group
Sorry for being such a noob. :) Meanwhile I have found how to change all the colours. The solution for all the other noobs like me: With Firefox web developer tools you can very easily customize every element of the site, use this method.

Still, I need help with the questions nr. 3 and 6:
- Is it possible to make the phone number field unnecessary? (see 2nd screenshot)
- Where can I customise which customer details are shown here? (see 3rd screenshot)

This is quite important, it would be great if someone could help me.

Craig Tucker

unread,
Jun 13, 2018, 12:34:18 PM6/13/18
to Easy!Appointments - Support Group
I am in the process of updating my build for 1.3.1.  It is not done but I have completed the part for modifying the color theme.  You can see all those edits here:

So you should be able to see how Bullmoose20 did the modification for green, blue, and red themes.  If you just want to have the color switcher this will do it.

If you use a text editor like Notepad ++ or Sublime you can also compare for example the green file with my blue file, you can then see which colors have been edited. Also there are lots of color pallet tools that are free on line.  They are very helpful for making gradient effects, finding values that are just a shade or two darker or lighter etc.

Good luck.  Post what you come up with. 

--Craig

Histo Sem

unread,
Jun 13, 2018, 12:59:36 PM6/13/18
to Easy!Appointments - Support Group
Thank you Craig! That's a great deal of work that Bullmoose20 has done there! By now I found a way to modify the colours on my own and as I am doing this for a university site, I am somewhat restricted in my composition of the theme by the university's corporate design.

But I will of course post my results here as soon as I am done with it.

Nevertheless, the problem with the required fields and the displayed user info (questions 3 and 6) still remain unsolved, but they seem to be of even a greater importance because of the EU data privacy directive (the less data we collect the better for us). Do you know how to change that?

Craig Tucker

unread,
Jun 13, 2018, 1:04:13 PM6/13/18
to Easy!Appointments - Support Group
Regarding editing the front end process:

You will be working with five files--
  1. /application/views/appointments/book.php  (this is the html file which contains what you see on your screen for the most part, some of the HTML is also generated by the java script file.  See #2)
  2. /assets/js/frontend_book.js  (this is the primary js file that helps manipulate the data on the client side, in the users browser.  There are two other related js files below)
    • /assets/js/frontend_book_api.js (this file handles the AJAX request that sends the appointment back to the server for processing in the php controller file)
    • /assets/js/frontend_book_success.js (if every thing goes well this file helps send the success page)
  3. /application/controllers/Appointments.php (this is called the controller which is the server side processing file that tells where the data should go.  The controller calls on model files that contain php routines for adding, deleting, and editing things with in the database)
    • /application/models/Appointments_model.php (several models may be used but this one is the main one associated with the front end)
  4. Last of all are the language files contained in /application/language/  .  Find the file for your language.  Most (but not all) text is found in this language file.
When you edit something in the view and every thing goes blank, it is likely because that item was connected in some way to a JS file or a Controller so you will have to track down anything associated.  Adding things also requires edits in each of these files too.  So, if you want to edit out things in the view, the safest way is to just add a tag to hide the div for the element e.g. <div style display=“none” >things you want to hide here</div>.  However the phone is required so you need to remove the required attribute from the tags for the phone and the phone is also put into a validation routine in the js file and you will have to take it out of the validation routine there or the front end will hang on submit.
Message has been deleted

Histo Sem

unread,
Jun 25, 2018, 8:19:51 AM6/25/18
to Easy!Appointments - Support Group
Thank you Craig! Your reply has been of great help. I am now working on implementing all modifications I have planned and will post the end results here.

Funny enough, there don't seem to be any dependencies with the phone as required field, instead the class needs to be changed from "required form-control" to simply "form-control" in the book.php, line 224, and one should delete the asterisk from the code an that line in order not to confuse the users. That's it, the appointments reservation process works still perfectly well.

The price displaying is not connected via dependencies with other elements too, so I just commented it out in the frontend_book.js (lines 411 and 573 through 575), the booking procedure works perfectly well without those sections.

Reza

unread,
Jun 29, 2018, 6:38:54 AM6/29/18
to Easy!Appointments - Support Group
Hi Craig and Histo!

After reading your chats now I can change all the colors. The only color I can´t change is the color of the next and previous buttons in Step 1 to 3 and the color of the confirm button.
Please help me, thanx

Reza

unread,
Jun 29, 2018, 6:59:39 PM6/29/18
to Easy!Appointments - Support Group
I found all the options in bootstrap.min.css. Thanks anyways 
Reply all
Reply to author
Forward
0 new messages