Customizing navigation and security in OpenXava

 Java, Web Development  Comments Off on Customizing navigation and security in OpenXava
Aug 122015

OpenXava does not include a complete security and navigation system, although you can easily add security and navigation in an OpenXava application if you use a Java portal, such as Liferay. Also, you can use the official solution that OpenXava team offers: XavaPro. Even though these solutions may be valid for new projects, for legacy projects you may need apply other ones. In this post we are going to customize our own solution for navigation and security starting from the standard OpenXava solution: NaviOX. Continue reading »

Bootstrap grid system

 Design  Comments Off on Bootstrap grid system
Jul 212015

A grid system divides the screen into multiple rows and columns that can be used to create various types of layouts. With Bootstrap, to set the maximum width of the page content according to the screen width, you have to use a container. All the rows and columns should be placed inside a container to ensure proper alignment and padding.
Continue reading »

Horizontal and vertical centering with CSS

 Design  Comments Off on Horizontal and vertical centering with CSS
Jul 152015

One of the most common tasks while designing web pages is centering elements both vertically and horizontally.

To center a block (div, p, h1, and so on) horizontally, the only thing you have to do is to apply a margin auto to it. For example,

You have to take into account that a width is necessary.
Continue reading »

Debugging HTML & CSS alignment issues

 Design  Comments Off on Debugging HTML & CSS alignment issues
Jul 152015

Many times it is very annoying when you are designing a page and suddenly you notice that something is not not properly aligned.

In these cases, it can be helpful to outline elements on the page to figure out how they are being rendered in relation to one another. One solution would be to write your own css class, such as the following:

However, a better and more convenient way is to use the Web Developer browser extension available for Chrome, Firefox and Opera.

For example, in the following image you can see all the block elements outlined using the Firefox version of the extension:

Of cource, you can always resort to Firebug plugin or/and Chrome DevTools. Another good idea might be to use a validation tool such as the W3C markup validation service, the W3C CSS validator or CSS Lint.