Category: good html/css samples

Posted on

Custom Google Search GSE configuration

Using this code you can display results of GSE on any page

<gcse:searchbox-only resultsUrl="/yourpage" queryParameterName="q_as"></gcse:searchbox-only>
 .gsc-input input {
          background-image: url('/search_files/search_bkgr.png') !important;
          background-position: right !important;
          background-repeat: no-repeat !important;
          }

http://libretechtips.com/tips-drupal7-drupal6/how-use-google-cse-drupal

 

http://www.hongkiat.com/blog/wordpress-google-cse/

 

adding thumbnails – https://developers.google.com/custom-search/docs/structured_data#addtopage

<!–

    <DataObject type=”action”>
      <Attribute name=”label” value=”Download”/>
      <Attribute name=”url” value=”http://www.scribd.com/document_downloads/20258723?extension=pdf”/>
      <Attribute name=”class” value=”download”/>
    </DataObject>
    <DataObject type=”action”>
      <Attribute name=”label” value=”Fullscreen View”/>
      <Attribute name=”url” value=”http://d1.scribdassets.com/ScribdViewer.swf?document_id=20258723&access_key=key-27lwdyi9z21ithon73g3&version=1&viewMode=fullscreen”/>
      <Attribute name=”class” value=”fullscreen”/>
    </DataObject>
  </PageMap>
–>
Posted on

Styles for first paragraph, line, letter

p:first-child:first-letter {
float: left;

}

p:first-child:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.post p:first-child:first-letter {
float:left;
background-color: #eeeeee;
line-height:30px;
padding: 5px;
color: #237ab2;
font-weight: bold;
font-size:40px;
}

.post p:first-child:first-line{
font-variant: small-caps;
}

.post p:first-child:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Posted on

Font size matrix

by http://www.freshblurbs.com/fontsizes

font-size: .625em; = 10px
font-size: .6875em; = 11px
font-size: .75em; = 12px
font-size: .8125em; = 13px
font-size: .875em; = 14px
font-size: .9375em; = 15px
font-size: 1.0625em; = 17px
font-size: 1.125em; = 18px
font-size: 1.188em; = 19px
font-size: 1.25em; = 20px

font-size: 1.313em; = 21px
font-size: 1.375em; = 22px
font-size: 1.438em; = 23px
font-size: 1.5em; = 24px
font-size: 1.563em; = 25px
font-size: 1.625em; = 26px
font-size: 1.688em; = 27px
font-size: 1.75em; = 28px
font-size: 1.813em; = 29px
font-size: 1.875em; = 30px

Posted on

3 columns equal height

thanks to http://www.alistapart.com/d/holygrail/example_3.html






The Holy Grail of Layouts: Example #3: A List Apart

This is the main content.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

This is the left sidebar.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>The Holy Grail of Layouts: Example #3: A List Apart</title>
<style type=”text/css”>

/*** The Essential Code ***/

body {
min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
}

#container {
padding-left: 200px;      /* LC fullwidth */
padding-right: 190px;     /* RC fullwidth + CC padding */
}

#container .column {
position: relative;
float: left;
}

#center {
padding: 10px 20px;       /* CC padding */
width: 100%;
}

#left {
width: 180px;             /* LC width */
padding: 0 10px;          /* LC padding */
right: 240px;             /* LC fullwidth + CC padding */
margin-left: -100%;
}

#right {
width: 130px;             /* RC width */
padding: 0 10px;          /* RC padding */
margin-right: -100%;
}

#footer {
clear: both;
}

/*** IE Fix ***/
* html #left {
left: 150px;              /* RC fullwidth */
}

/*** Equal-height Columns ***/

#container {
overflow: hidden;
}

#container .column {
padding-bottom: 1001em;     /* X + padding-bottom */
margin-bottom: -1000em;     /* X */
}

/*** Footer Fix ***/

* html body {
overflow: hidden;
}

* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #FFF;         /*** Same as body background ***/
}

/*** Just for Looks ***/

body {
margin: 0;
padding: 0;
background: #FFF;
}

#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}

#left {
background: #66F;
}

#center {
background: #DDD;
}

#right {
background: #F66;
}

#container .column {
padding-top: 1em;
text-align: justify;
}

</style>
</head>

<body>

<div id=”header”>This is the header.</div>

<div id=”container”>

<div id=”center” class=”column”>
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>

<div id=”left” class=”column”>
<h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>

<div id=”right” class=”column”>
<h2>This is the right sidebar.</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>

</div>

<div id=”footer-wrapper”>
<div id=”footer”>This is the footer.</div>
</div>

</body>

</html>

Posted on

Add .pdf, .doc, .ppt icons-indicators with css

Long time ago got this code from    /*   http://my-dimension.com/blog/category/xhtml-css/   */
Download all images in zip file

a[href^=”http://”]:not([href*=”iringweb.com”])::after {
content: “”;
background: url(/images/external.png) center right no-repeat;
padding-right: 1em;
}

a[href^=”mailto:”] {
background: transparent url(‘/images/mail_icon.gif’) 100% 50% no-repeat;
padding-right: 18px;
}
a[href$=”.doc”] {
background: transparent url(‘/images/word_icon.gif’) 100% 50% no-repeat;
padding-right: 18px;
}

a[href$=”.pdf”] {
background: transparent url(‘/images/pdf_icon.gif’) 100% 50% no-repeat;
padding-right: 18px;
}

a[href$=”.ppt”] {
background: transparent url(‘/images/powerpoint_icon.gif’) 100% 50% no-repeat;
padding-right: 18px;
}

#bodyContent a.external,
#bodyContent a[href ^=”https://”],
.link-https {
background: url(‘/images/lock_icon.gif’) center right no-repeat;
padding-right: 16px;
}

Posted on

Search input with text inside box and image button

<nobr><input type=”text” style=”width: 125px” id=”searchtext” name=”q” value=”Search CPIMA” onFocus=”if(this.value==’Search CPIMA’)this.value=”;” />
<input type=”image” src=”<?php bloginfo(‘home’); ?>/wp-content/includes/images/search.gif” id=”searchsubmit” name=”btnG” alt=”Search” />
</nobr>

add one with the looking glass inside