Customize Template and CSS in VBCS
This article is going to show step by step how to apply custom css in an VBCS application as well as a custom template design.
Some of the points that will be cover in the article are:
- Template Design Customization.
- Background Layout CSS.
- Responsive design.
- Image usage as a BackGround.
The first thing that need to be done is to create an VBCS application in the PAAS clicking "New" button that is next to "Import" button.
Once the app is done, click "Web Apps" to create a web application development.
Then write the desired name of the web application:
In our case the name is "WebTest".
The client is always asking for customized design according with the bookmark and the headlines enterprise design.
Look for the "shell" file located inside "root pages" folder. This File contain the html code that give form to the template of the web app.
In the next image is highlighted the 2 files that are needed and their location the css file is "app.css" and it is located into css folder.
Now as it can be check the "app.css" file is blank or empty.
Now the VBCS portal show all the tools for web development provide by the PAAS.
To change the template design go to the code section in the upper right corner of the screen and the html that represents the component can be change.
Now in this case according with the client requirement the header has to be just with an image at the center and the user name logged at the right of the screen.
The header has to be the same color of the rest of the background application and that background app has to be based in an image.
Now to do that, we are going to comment the first div node in the header section. In that section we are going to put the logo in central align.
It is time to put an image into the header to be at the top center, it can be done, dragging and dropping by the use of the Paas component palette, I will show the code that is generated because in the same way with the insertion of html code the image can be inserted.
Now it is time to put an image as a background screen, first of all once you have the image downloaded, it is time to right click in the image folder and select import option to upload the image to VBCS project.
This dialog popup will show up.
Now to put the section header at the same color of the background the referenced image has to be specify in the style attributes of the "page" and "header" nodes.
In the first html node with id #### is important to specify the image that is going to be used through the style attribute as show in the image below.
Note: this is the default location and this would be the root to specify the image in that case, this would change according to the location of the image in the project.
You can change the image that the html component is referring through the editor as shown in the image below.
Now we all see how we can change the size and align of the image or component in the editor whether is by the wizard palette or directly by the code.
In the image below there some attributes showed to centralized and reference the logo image.
As you can see the image is reference through a root considering this image is in the same folder as the background image.
Margin-left: 40%; can be used but it is not an efficient solution due to the fact that it is not responsive because as the screen change its size the image will not be at the center anymore.
In the css is is noticeable that the margin:auto is not causing change in the image alignment. Even with "important!" word does not work.
So in this case a workaround is made to always keep the image centralized. Another image with hidden mode or not visible mode.
This image will be place at the left of the header making the other image centralized.
This can be done by dragging and dropping from component palette or by adding an html node to the code, either way we will show up the code generated to the solution.
In the highlighted nodes of the image above we will see the first one as the image that is going to help centralized the second one, the only thing that need to be added is the "display:none" css property into the style attribute of that img node.
This is the result.
Now at last we are going to show how to handle a component graphical properties by the css file, the right button that have the name of the logged user has to have white color to do some contrast with the screen background.
Run the project in the navigator and open the "property inspector web browser" (Ctrl+alt+I) and select the component that has the logged user name, once is selected looked at the css that the component has and start doing changes to see in runtime how the component style is affected.
Once you got what you want it is time to copy and paste all the css code in the property inspector showed in the next image with the changes you made and paste it in the css file.
Now with the pasted code in the css file just leave the code that is needed to implement the change as in the image below when the changes are about the white color and the bold of the font.
Now once the css changes are made you have to re run your project to see the changes in runtime (it is not enough with the refreshing of the browser when the change is done in the css file of the project).
Now try to test the responsive design screen to check that everything works fine and the image is always centralized.