Archive

Posts Tagged ‘CSS’

HowTo: Copy effective-computed CSS style for specific HTML paragraph

I’m in the process of setting up a temporary landing page for the trafilm project, where I need apart from showing the trafilm logo to also show some text description about the project, till I set up an instance of MonoX Social CMS for it, like the one in ClipFlair’s Community website (ClipFlair Social).

Since ClipFlair Social has some nice text styling, I decided to borrow the style of one of its home page paragraphs, using Firefox web browser’s developer tools (accessible via F12 key).

Being at the Inspector tab of the dev tools (which is the default when they first open), using the “Pick element” tool (first one on the dev tools pane’s toolbar on the left), I select the paragraph that looks nicely styled and I go to the Computed tab at the Style view, then press CTR+A to select all computed style CSS declarations for that paragraph element and press CTRL+C or right click and select Copy to copy them to the clipboard.

Screenshot 2016-01-25 13.41.19

If pasted (CTRL+V) in some text editor like Window’s Notepad that looks like a big ugly line, since they contain Unix-style line-endings, that is LF (linefeed) and not Windows-style ones (CRLF, Carriage Return + Line Feed), but editors like Wordpad or Notepad++ can show them nicely and even convert line endings from Unix to Windows and vice-versa if you wish so (e.g. in Notepad++ the respective actions are at Edit / EOL Conversion menu).

image

So, this is the copied Computed CSS style for that paragraph:

border-bottom-color: #333;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #333;
border-left-style: none;
border-left-width: 0px;
border-right-color: #333;
border-right-style: none;
border-right-width: 0px;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
color: #333;
cursor: default;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

As you can see, it has lots of stuff that isn’t needed, unless you want to be sure your style doesn’t get affected by style of parent elements. In my case I decided to trim it down a bit:

color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;

Adding around the text above (which is represented by the CSS comment /* … */ below) a CSS selector to wrap those declarations in order to make a proper CSS rule-set:

p {

/* … */

}

and passing to CSS LINT tool to help us clean up the CSS we get no errors, but several warnings:

image

For example, as explained at W3Schools.com, in CSS one can use shorthand margin and padding properties:

The margin property is a shorthand property for the following individual margin properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

…so one wonders why Firefox Dev Tools don’t spit those out with that order and give them in bottom, left, right and top order instead.

Also instead of 0px, one is suggested to always write 0 instead, since zero will always be zero irrespective of the CSS units used for it (at least for the currently available CSS unit systems that is). This is merely to save in bandwidth I think, since 0px is better, suggesting to anyone modifying this value in the future they’d better use “px” [pixels] instead of say “pt” [points]).

So we clean up this CSS into (pay attention to the order of values in margin and padding shorthand declarations, which is top, right, bottom, left, that is clockwise starting from the top side of the HTML elements targeted via the CSS rule selector, which is a paragram – p – in our case):

p {

   color: #333;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;

}

Pasting at CSS LINT online tool again we get no warnings anymore (apart from no errors):

image

One might also remove the redundant space chars at the end of each line that Firefox places when copy-pasting the style declarations. Notepad++ can do it via Edit / Blank Operations / Trim Trailing Space menu command:

image

Advertisements

Vertical Centering with CSS

According to http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2 doesn’t have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

That page points to a horizontal and vertical centering example (which seems to be a common need): http://www.w3.org/Style/Examples/007/center-example

To cater for various (mainly older) web browsers and peculiarities in CSS implementations, many vertical centering techniques have been developed. Here are some related links:

ASP.net WebPartZone skins and CSS

I was just examining a MonoX portal skin that our designer is authoring for the ClipFlair platform and noticed that in the Default.skin file, there’s a note pointing to http://support.microsoft.com/kb/911717 that speaks of an issue with Microsoft’s implementation of WebPartZone skins:

There it says:

The CssClass property does not affect the following style objects:

•The MenuLabelHoverStyle property
•The MenuPopupStyle property
•The MenuVerbHoverStyle property
•The MenuVerbStyle property
•The MenuCheckImageStyle property

Do not use the following line of code:

<MenuPopupStyle CssClass="wp_menupopup" />

while having a Stylesheet.css file with the following code:

.wp_menupopup
{
  background-color:Red  
}

Instead, use the following line of code:

<MenuPopupStyle backcolor="red" />

In short, at the Default.skin file one can give a CssClass and then define the styles at Stylesheet.css, but for MenuPopupStyle, MenuVerbHoverStyle, MenuVerbStyle and MenuCheckImageStyle this doesn’t work and you have to enter the object properties that correspond to the CSS attributes you want (e.g. background property of ASP.net for the background-color CSS attribute) directly into the Default.skin file for the respective objects.

BTW, the aformentioned Microsoft article speaks of Stylesheet.css, while MonoX template uses Default.css. This is because the ASP.net theming engine applies all .css files it finds in the theme folder (independent of filename), as explained at http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx. That last Microsoft article has lots of useful information regarding Themes and how you can (optionally) combine them with CSS and on issues like scoping, precedence, security etc.

%d bloggers like this: