Category: CSS

Adding custom CSS Class to Sitecore Rich Text Editor

The "Apply CSS Stylesheet" dropdown in the Sitecore RTE is quite a friendly option to Content Authors when it comes to applying complex styles/themes, without editing the HTML.  ==> To add a new value to this dropdown is relatively easy: 1. Verify the Configurations/Settings Verify if the "WebStylesheet" settings is configured properly in your web.config ...

S

Selecting a complex jQuery selector present in a page

Most of time, the moment we see a complex ID like 'ctl00_m_g_f368f5ab_d679_4436_a6da_938c6bfcd60a_ctl00_SearchCheckBox' we faint... 😉 And what we end up is start finding some parent which has an ID or see if there is a css class defined for this control. Targeting a control using its parent is good and performance-wise effective. However, using a ...

H

How to remove the dotted outline when you click on button or anchor tag

It is quite common fact that due to paddings, we tend to blow the control to larger sizes. Say a menu item, which is a simple anchor tag, inside an ordered list; you will blow the anchor to such a level that on click of it, there appears an outline with dotted line, which looks ...

W

Wrap text through CSS

Wrapping text through CSS is quite a necessary evil when your Analyst come up with jargons that stretches 15-20 charactors... 😉 So here's the deal. If you need to wrap text through CSS, you can use the CSS selector defined below: Wrap words through CSS /* In CSS */ .wrapword{  white-space: -moz-pre-wrap !important;  /* Mozilla, ...

C

Changing scroll bar color in Gecko Browsers

Although this is not recommended by W3C, out of popular interest, i feel like posting the solution to this problem. The problem, being the fact that IE went ahead and allowed people to customise its scrollbars, while the gecko browsers like Firefox, Opera does not allow user styles to custom browser styles.  For IE scrollbar settings, ...

B

Best PNG Fix for IE 6

PNG fix for IE6 has always been messier than expected. There has been lot of out of the box solutions available on the net. However, the best that worked for me was the "DD Belated PNG" fix. It is a simple PNG fix specific for IE 6. I would recommend you to load it with ...

L

Large CSS background moves on resize, in IE 8

This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below: http://www.webdesignerwall.com/tutorials/how-to-css-large-background/ The solution he states is that of using display:table; for body tag wherein you are specifying your large background. The solution works quite fine! But when ...

T

Third party tool styles overriding my styles?

You might come across this scenario wherein, you want to override a css class of a third party add-in, but still not able to apply your styles. Well the reason is nothing but the concept of cascading coming into play. In this case, your third party selectors have the higher precedence over your site stylesheet. ...

C

Concept of cascading in CSS

Most of us know that Cascaded Style Sheet abbreviates to CSS . But why is it called so? What is the cascading happening out in the stylesheet. Well the concept is pretty simple, but powerful. You might come across scenarios wherein, you want to override a css class of a third party add-in, but still ...

C

CSS shortcuts

Using shortcuts in css, makes your CSS look neat, clean and compressed. It should be always taken into account that, you cannot simply play around with shortcuts. Different browsers, behave differently to the shortcuts. Following are some of the simple and effective shortcuts that i use in my css: Using Zeros :You need not mention ...