Hus to Know?: CSS

Showing posts with label CSS. Show all posts

Friday, December 31, 2010

Copying a bunch of images defined in a CSS

Suppose we want to verify that all the images defined in a CSS file exist. We could also want to copy all of the images to a remote server dir. Using grep and awk, we can dump out a command line that will print an scp command that can then be piped to be executed.

grep -oi "../images/.[^)]*" /tmp/bla.css | awk '{print "scp " $0 " user@myhost.com:mydir"}' | sh

The -o flag in grep will output only the matching field. Since non-greedy expressions can only be represented with the [^)]* field (Python/Perl allow for the .* syntax to denote non-greedy), we express this grep command match everything up to the closing parenthesis.

Wednesday, November 10, 2010

nth-child vs. eq CSS selectors

The eq() and nth-child() CSS selectors are not the same..

http://api.jquery.com/nth-child-selector/

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

Or how someone else explains it....
http://forum.jquery.com/topic/eq-0-vs-nth-child-1-with-find-inconsitency

:eq() selects an element based on it's index in the array of selected elements.
:nth-child() selects all elements that are the nth child of their parent.

Wednesday, October 13, 2010

CSS float div issues

Good article that explains the reasons for the necessity of clearing float div tags....

http://article-stack.com/education/web-design-n-development/blog-blogger-blogging/fix-for-floating-div.amty

Thursday, September 23, 2010

Switched to using http://deluxetemplates.net

I've switched to using the templates at: http://www.deluxetemplates.net/
You have to unzip the XML template and then upload the file according to these instructions:

http://www.deluxetemplates.net/1999/04/how-to-install-blogger-xml-template.html

How to install a Blogger Template

Follow Most Simple Guide to Install your Favorite Blogger Template.
1. Click in Download button and save file in PC [hard drive].

2. File that you have downloaded is .ZIP file so need to be extracted. Extract / Unzip it.

3. Log in Blogger dashboard

4. Click Design link in dashboard panel.

5. Now click in Edit HTML link in tab bar.

6. Click Browse button and look for folder that is created after extracted file that you have downloaded.

7. Folder has a XML file and TXT file or Internet shortcut, you select only XML file.

8. Click Upload button.

9. Confirm and Save.

One thing I had to do is reinstall Prettify based on this Stack Overflow thread:
http://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> 
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

After "</head>" replace "<body>" with "<body onload='prettyPrint()'>"

One more thing: some designs may turn off the navbar at the top. Some people find it annoying, but I found it very useful. You will need to go into the Design->Edit HTML and look for the CSS navbar-iframe style. Here is the code commented out:

/*#navbar-iframe {
display: none !important;
}*/