As we know CSS is an important part in Front end development. By using CSS latest versions, we can make good dynamic effects just like jQuery effects. But sometimes we are spending lots of time to fix some cross browser issues or to modify some styling changes. And if you want to modify the common styling, we have to write many coding in CSS. But if you are using some preprocessors like LESS it will make the CSS coding easily because we can add the code with a small effort. There are many advantages when you use a preprocessor like LESS or SASS. Just we need to install the LESS and a compiler which compiles the less file into CSS. For more details you can refer http://lesscss.org
In Drupal themes, the Typography styles are important. We know that there are many classes and different tags are generating while making a Drupal theme. And it will display with the default Drupal CSS styles. Sometimes it wont be matching with our design. So its necessery to make a CSS Typography for those tags/classes.
Here am explaing to override the the default Drupal styles with the Typography styles.
Opacity is the CSS property that allows image transparency. All modern browsers support CSS opacity. However, if you want it to function in the older versions of browsers, some cross browser tricks are required. Follow these CSS rules to enable cross browser compatible opacity settings for your HTML elements
Internet is overhauling every piece of human life. As the resulting phenomenon of booming telecommunications market, around 60% of people access sites through smartphones, tablets etc. Why say this? How web developers are related to telecommunications booming? We might have seen some sites look good in few devices and not in others. As all these devices have a different display, here comes the relevance of discussing responsive designs. The advantage of responsive designs includes,
1. It will simultaneously adjust its width with the device.
Drupal is an extremely flexible framework that you can manipulate in multiple ways. In Drupal, the theming is the final phase in the process of generation of dynamic web pages. It converts the data from PHP objects and arrays into HTML markup and CSS styles. Read on to know how to convert a PSD/HTML design to a standard Drupal theme
Nowadays we can easily access internet in different devices such as mobile, tablet etc. So its necessary to make a website compatible with popular devices like iPhone, iPad etc. In Drupal, we have a simple method to make a website adapt to different devices. In this method we can convert a normal theme to responsive theme easily. To get this we have to modify the .info file and add the media query stylesheets in .info file. We will also have to add the responsive style rules to the separate media query stylesheets
It is very good if we can create a pure CSS multilevel drop-down menu in Drupal. We can simply avoid adding additional modules or jQuery for the multilevel drop-down menus. As we had a requirement to create a multilevel drop-down menu without using jQuery, we created it in pure css. And it works well in different browsers.
We created this menu as main menu for the header navigation part. And there is a region for the header part called "region-header" and it wrapped in a class called .header-wrapper. Also Drupal provides a class called 'menu' for ul. So we had to define the class-name along with the ul.
Many Drupal users have wished to know how to use customized fonts in Drupal themes. If you are facing the same question when creating or modifying or editing a Drupal theme and want to know how to use customized fonts in a Drupal theme then continue reading.
Implementing multiple color mode switching is so simple! In HTML we can easily add the switching color style sheets as alternative style sheets.
But when it comes to Drupal there is a slight change. Here is how we can implement multiple color switches in Drupal theme. We normally include style sheets in .info file and we cannot specify 'alternative stylesheets' just like in HTML. So here we need a module called Drupal 'Styleswitcher'. By enabling this Drupal module you will get the option 'styleswitcher' to add alternative style sheets.
For more details just follow these steps.
Cross browser compatibility is one of the most important concerns of an HTML/CSS developer. Here’s how you can easily add shadow effect to your div blocks with cross-browser compatible CSS. Simply add the below code to the div to which the effect is to be added. You can change the size, strength and direction of the shadow in all browsers, except for IE, in which you can change only the strength and direction of the shadow.