Style File upload control in ASP / HTML

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , with 2 Comments on Style File upload control in ASP / HTML

As most of us know that we cannot style the file upload control to much level, still we can give it a stunning effect with the help of CSS.

There is nothing in code to explain.

I took three upload control and one button to give effect.

Lets say upload control is in ASP.net or in HTML.

<asp:FileUpload ID="FileUpload1" CssClass="Cntrl1" runat="server" />
Or
html file upload
<input id="readFile" type="file" runat="server" class="Cntrl1" />

Then create a simple CSS class of name “Cntrl1”.

  <style id="cssStyle" type="text/css" media="all">
       .Cntrl1
      {
       background-color:#abcdef;
       color: Yellow;
       border: 1px solid #AB00CC;
       font: Verdana 10px;
       padding: 1px 4px;
       font-family: Palatino Linotype, Arial, Helvetica, sans-serif;
      }
</style>

Out put in different browsers will look like :

Output in Chrom
Output in Chrom
Output in Mozilla
Output in Mozilla
Output in Internet explorer
Output in Internet explorer

View Demo of FileUpload

Highlight Current field using JQuery

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , with 1 Comment on Highlight Current field using JQuery

Write below HTML code :

This will create two text boxes.

<form>
	<div>
		<label for="Name">Name:</label>
		<input name="Name" type="text"></input>
	</div>
	<div>
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

Using jQuery, we can watch for an event where an input form comes into focus:

Add link to JQuery file in script tag as shown in below line:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" />

Now, add below CSS in document.

div.curFocus {
background: #fdecb2;
}

Then at last write JQuery / javascript code on focus event and blur event (opposite of focus event in javascript ) .

$(document).ready(function(){

$("input").focus(function() {

$(this).parent().addClass("curFocus")

});

$("input").blur(function() {

$(this).parent().removeClass("curFocus")

});

});

We are using the advantage of jquery of adding and removing the CSS class. we cannot left blank to CSS class, as it may remove the existing other class from the tag.

$(document).ready(function(){

This line causes the execution of jquery after complete loading of page.

Output:

Selecting field using jquery
Selecting field using jquery

View Demo

Change the Login Image of WordPress in Simple steps

Author posted by Jitendra on Posted on under category Categories Tech Tips and tagged as Tags , , , with Leave a comment on Change the Login Image of WordPress in Simple steps

Change the Login Image of WordPress in Simple steps

Hi,

Follow below steps to change the login image and tooltip of the wordpress.

for this hack, you will require following Two files :

/wp-login.php
/wp-admin/login.css

in wp-login.php page search for the “powered by” and replace that tooltip as per your convenience / requirement.

Now open login.css and search for the logo image. normally its in tag h1 a.

So you can change image like :

h1 a{background:url(../images/ShivaLogo.png)

where “ShivaLogo.png” is your new image name.