webdeveloper's

Making pretty, responsive, headers is always a tricky process. Until now you needed to use floats or other complicated tricks and you even had to manually adjust pixel values. But not any more! The technique we are about to show you relies on the powerful flexbox layout mode to do all the dirty work for you. It uses just a handful of CSS properties to create a header that is properly aligned and looks good on all screen sizes, while leaving the code cleaner and less hacky. The Technique In our demonstrative example we’ve built a header, which is separated in three sections with typical header content nested within them: Left section – The company logo. Middle section – Various hyperlinks. Right section – A button. You can check out a simplified version of the code bellow. HTML code is where we group the sections in separate div tags. This makes it easier for CSS rules to be applied and generally produces a more organised code. <header> <div cl

This is a question that comes up more regularly than you might expect. The concept of a responsive website is one of the greatest CSS "tricks" in the books and important enough to step back from in order to both remind ourselves what makes a "responsive" website and how it's different from an "adaptive" one. So, with that, let's look at the difference. The Short Explanation Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser's width). Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Is the browser 300px wide or 30000px wide? It doesn't matter because the layout will respond accordingly. Well, at least if it's done correctly! Adaptive

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it Responsive 2. MDN’s Responsive Web design Tutorial This is a nice MDN article about some of the basic strategies people use t

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u

In Liferay, first time user will prompted to change password screen, where user can change password. Some times, we may not require user to change password, when we import users manually from outside. In this case, user would have already changed password, so we don't need to redirect user again. There are different ways to do that. Let's check following how we can do that. 1. While creating user through admin interface, uncheck the checkbox 'Password Reset Required' 2. Uncheck 'Change Password' checkbox in Default Password Policy. This can be done through control panel, Password policies > Default Password Policy.  3. Also you can override Lifeay's core classes and set passwordReset  property of User bean to false .

It is often needed to hide control panel dockbar for simple users. This article I'll describe different ways to achieve this. First we need to change theme little in order to hide dockbar, it can be done in following way. Create new theme if you don't have theme ready. In portal_normal.vm file, change following lines of code #if ($is_signed_in) #dockbar() #end in to following. #if (($is_signed_in) && $permissionChecker.isCompanyAdmin($company_id))  #dockbar() #end It will remove dockbar for all non admin users. But user still can be able to access control panel by typing the following url  http://localhost:8080/group/control_panel. To avoid this, we can write costume hook to restrict user to doing so. Let's check how this can be done: In liferay-hook.xml add following lines of code. <portal-properties>portal.properties</portal-properties> Add portal.properties file to hook's src folder and add following line to i