SCSS is one of the two syntaxes available for Sass - a CSS preprocessing language. This article talks about the different Sass syntax and the difference.
CSS
The problem: HTML elements have inconsistent sizes across different browsers.
The solution: Set box-sizing for all elements to border-box.
A long-time bane for web developers, Internet Explorer did one thing right: It sized boxes properly.
Other browsers only look at the content when calculating the width of an HTML element, with everything else treated as surplus. A width: 200px div, with 20px padding and a 2px border, renders as 242 pixels wide.
This article will explain, how to display mouse over image for a gallery block image or on any content image in Firefox Web Browser.
While working on a project I required to display a mouse over the image, say 'View More' image for the last image in a gallery block. For the mouse hover in the image tag, I added a background image. See the code below.
Measuring the performance is as important as optimizing the e-commerce store to increase conversion. Measuring the performance will help you to find the effectiveness of your strategies, and plan for the future. Through various analytic tools, you can get valuable insight into your e-commerce store.
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
My last work was related to theming a Drupal website. While theming I've faced a major issue ie., in different OS and different browsers the styling of pages have slightly different changes .
How to solve this issue?
Now a days for almost all the website have atleast one select list options. If we want to add a backgroung image or need to theme the select box, the default select list drop down is a big issue we can't able to remove it directly.
Since a long time, I have been using the grep utility to search in code, and I am pretty comfortable with the tool. However, recently I came across git grep. The main advantage of this tool, when compared with the normal grep, is the speed of search. Read on to know how to use git grep to speed up development and coding.
Now a days for almost all the website have atleast one read more option. Read more options are mainly for excluding the full content of a text or a paragraph to improve its visibility for the user. By the read more option user gets the freedom to view the full content if the user wants.
Most of websites today anywhere some time requires speech bubbles. Speech bubble are mainly used for themes purposes were we need to to display some thing different from other part of contents(Include certain text such as tips of any information). With out any images we can create the speech bubble with CSS alone for your websites. The speech bubble creation is not a big task we can create it simply with a few line of css codes
In the near past, I had a requirement to add inline CSS to the content that comes after submitting the form. Let me explain the context a bit, I have a form, only on its successful submission, a block need to be displayed. If the submission failed, all I need is to return the form and error message back.
Some alignment issues occurring in IE may be a test for your patience. We had once worked in a Drupal 6 site, and the design look well every where, but there is a small alignment problem shown up in IE. Applying a conditional style sheet saved our time. Read on to know about how to apply conditional css in a Drupal 6 site.
While working on a wordpress site I came across a problem to customize the file upload button in Contact Form 7 plugin. I tried a few tweaks using CSS to customize the button but no luck. Later I found a trick using CSS and jQuery which is explained below. In my previous article "How to display location of an user in a mail send using Contact Form 7 plugin by passing the IP address in a Wordpress Site?", I have explained about Contact Form 7 plugin.
@font-face allows designers to specifically embed certain fonts in to their stylesheets. Now a days many sites are providing webfonts. For eg: Fontsquirrel, Webfonts etc. They are providing us with the css too, but it is not correct. This article explain about what they are doing wrong and how to fix this issue.
If you want know how to configure Google Analytics for your Drupal site checkout How to check Google Analytics on a Drupal website?. We can also get the analytics info from within a Drupal site. Read on to know how to view the Google Analytics report from within a Drupal site.
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.
In one of my recent Drupal projects I needed to add some extra classes to the body tag. Usually classes are added to the body tag in one of our template file namely html.tpl.php. The classes can be added via an implementation of hook_preprocess_html. Now let's see how it can be done.
One of our Drupal clients asked us to customize the search box in one of their Drupal themes and bring in rounded corners and a search icon. However the solution we came up with was causing the search text to overlap the search block from in IE. If you are facing the same issue in your Drupal site and would like to know how to prevent search text from overlapping Drupal search block form in IE then read on to find out the solution.
A Drupal user trying to use Drupal Boost for caching their website encountered a strange situation in their Drupal site where enabling the Boost caching system increased the load of their server. If you are encountering a situation in your Drupal site where enabling the Boost caching system increases your server load. then read on to find the solution.
Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: CSS border for Select (Drop down) element does not work.
On one of my Drupal sites, while validating a form, when a required input field has not been filled before hitting the Submit button, an error message is shown, and the field is highlighted with a red border. The red border was achieved with this CSS: