Cascading Style Sheets (CSS) is a style sheet language, used for describing the formatting of a document written in any markup language. The idea of CSS is all about to enable the separation of document from its presentation which includes the elements such as the layout, colors, fonts and so on.
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 selct list drop down is a big issue we can't able to remove it directly.
This article is for those who are new to Drupal Bootstrap and responsive design. Drupal Bootsrap is a responsive theme you can download it from Drupal.org. It is one of the best responsive theme and created using boostrap framework. Creating a sub theme of Bootstrap is explained in another article of mine. This article mainly concentrated about How to use LESS to style bootstrap theme Drupal.
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.
Specialized fonts beyond the typical “Arial, Geneva, Helvetica” can be embeded to your site by uploading Web Open Font Format file for the needed font in your site. Aesthetics is often very important for any website you design. If it isn't pleasing to the eyes, it will directly affect traffic. Fonts are a very important in aesthetics and readability. If you are not sure of how to add web fonts to your site then read on.
In a drupal website, it is easy to add the font styles provided by drupal itself. If the user wants to add a font which is not present in the drupal site by default, the process given below can be followed. Read on to know more.
@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.
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.
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: In IE7, the CSS 'border-collapse' does not override cell spacing related tags.
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.
Firefox seems to add an extra top-padding for all the anchor tags inside li elements. If you are facing the same issue in your website and want to know how to remove the extra top padding for anchor tags inside a li element in Firefox then read on to know the solution.
Almost all the browsers have different settings for base margins and padding. It is always important to set margin and padding for the body and html tags while styling web-pages. Otherwise it might result in some inconsistencies while displaying the pages across various browsers.
We can avoid such inconsistencies by setting margins and paddings on html and body tags to 0.
Normally while using Flag module, the flag name is displayed as a link. If you want to change this behaviour and replace the link with a button, you can do this easily by using CSS. You need not alter any forms for this. For this you may add the below code to your CSS.
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.
Developers often overlook CSS as something very simple and not requiring a lot of thought. This leads to poorly thought out CSS rules, CSS abuse, inefficient CSS and ultimately bad rendering performance and slow page load times. Here is a simple tip to improve CSS performance and page load times - avoid descendant selectors.