TinyMCE 3.4 Font-Size in px lets change fontsize from pt to px ;)

March 11th, 2011 by admin

First of all we need find  one theme file in folder tiny_mce \jscripts\themes\advanced\editor_template.js in Windows or  /jscripts/themes/advanced/editor_template.js in Linux But keep in mind that you maybe have another path to this file themes/advanced/editor_template.js .
Open it  find and replaice next things :
sizes : [8, 10, 12, 14, 18, 24, 36]
to
sizes:[10, 12, 14, 18, 24, 30, 36]
next
theme_advanced_font_sizes : “1,2,3,4,5,6,7″,
to
theme_advanced_font_sizes:”10px=1,12px=2,14px=3,18px=4,24px=5,30px=6,36px=7″
next
m.font_size_style_values=”8pt,10pt,12pt,14pt,18pt,24pt,36pt”}
to
m.font_size_style_values=”10px,12px,14px,18px,24px,30px,36px”}
next
if(p==q&&q>=1&&q<=7)
to
if(q>=1&&q<=7)
next
(“+l.sizes[q-1]+”pt)
to
(“+l.sizes[q-1]+”px)
next
(l.sizes[q-1]+”pt”)
to
(l.sizes[q-1]+”px”)
next
(l.sizes[q-1]+”pt”)
to
(l.sizes[q-1]+”px”)

thats all :)

Just save it now and reload your page with your changed TinyMCE. You have px instead pt in your TinyMCE now  ;)

tiny_mce\themes\advanced\editor_template.js

jQuery and CSS menu this is really simply one :)

March 4th, 2009 by admin

Let’s begin :)
what we gonna do :
a simple vertical menu for the small site :)
what we need :
jQuery library and little CSS file :)

css :

<style type=”text/css”>

<!–

body{
font-size:12px;
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
}
ul, li{
margin:0;
padding:0;
list-style:none;
}

.menu_1 {
display:none;
width:199px;
border-right:1px solid #cdcdcd;
border-bottom:1px solid #cdcdcd;
border-left:1px solid #cdcdcd;
}
.menu_1 li{
background-color: #CCC;
}
.menu_1 li.alt{
background-color: #FFF;
}
.menu_1 li a{
color:#333;
text-decoration:none;
padding:5px;
display:block;
}
.menu_1 li a:hover{
padding:10px 5px;
font-weight:bold;
}
–>
</style>

now we gonna add jQuery :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>

small  javascript  :

<script type=”text/javascript”>
$(document).ready(function () {
$(“ul.menu_1 li:even”).addClass(“alt”);
$(‘img.menu_main’).click(function () {
$(‘ul.menu_1′).slideToggle(‘medium’);
});
$(‘ul.menu_1 li a’).mouseover(function () {
$(this).animate({ fontSize: “14px”, paddingLeft: “15px” }, 50 );
});
$(‘ul.menu_1 li a’).mouseout(function () {
$(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
});
});
</script>

and our html code :

<body>

<img src=”http://blog.branding-studio.com/examples/m.png” width=”201″ height=”27″ class=”menu_main” />

<ul class=”menu_1″>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item2</a></li>
<li><a href=”#”>Item3</a></li>
<li><a href=”#”>Item4</a></li>
</ul>

</body>

thats all  !!!!:)

DEMO :)

Simple CSS menu :)

December 19th, 2008 by admin

Really simple CSS menu but looking nice

HERE IS THE SAMPLE

<style type=”text/css”>
<!–

ul.sea{margin:0;padding:0;list-style-type:none;display:block;font: 12px Verdana, Geneva, sans-serif  sans-serif;line-height:165%;width:135px;}
ul.sea li{margin:0;padding:0;}
ul.sea li a{display:block;text-decoration:none;color:#ab3b42;padding:0 0 0 20px;width:115px;}
ul.sea li a:active{background:#fff  no-repeat 0 9px;}
ul.sea li a:hover{
background:#ab3b48 url(“http://more-bulgaria.com/images/link.png”) no-repeat 0 9px;
color:#fff;
background-position: 0% 50%;

}
–>
</style>

<ul class=”sea”>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Aplication Form</a></li>
<li><a href=”#”>Price-List</a></li>
<li><a href=”#”>Contract</a></li>
<li><a href=”#”>Pers. tour calculation</a></li>
<li><a href=”#”>Guided tours</a></li>
<li><a href=”#”>Contacts</a></li>
<li><a href=”#”>To agencies</a></li>
</ul>

i think you have no questions now  :)

but if you have ;) just mail me :)

Ajax Email validator :) AJAX PHP

November 17th, 2008 by admin

I think the most important aspects of building and processing a form is how you validate data here is a script build via AJAX  and PHP  with example how to check if your email address is real one  :

this is HTML part  :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; ” />
<title>Email Validator AJAX and PHP</title>

<script language=”JavaScript” type=”text/javascript”>
var request;

/**
* Load XMLDoc function
* here you need put your backend-script   url
*/

function doLoad(url) {
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
request.onreadystatechange = processRequestChange;
request.open(“GET”, url, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
if (request) {
request.onreadystatechange = processRequestChange;
request.open(“GET”, url, true);
request.send();
}
}
}

/**
* Event on request change
*/
function processRequestChange() {
document.getElementById(“resultdiv”).style.display = ‘none’;

abortRequest = window.setTimeout(“request.abort();”, 10000);
// if all is ok
if (request.readyState == 4) {
clearTimeout(abortRequest);

if (request.status == 200) {
document.getElementById(“resultdiv”).style.display = ‘block’;
document.getElementById(“responseHTML”).innerHTML = request.responseText;
} else {
alert(“Sorry can’t receive your dates :n” + request.statusText);
}

}

}
</script>
</head>

<body>

<input type=”text”
id=”emails”
value=”Enter your email pls:”
onFocus=”this.value=”; document.getElementById(‘resultdiv’).style.display=’none’;”/>
<input type=”button”
value=”send”
onClick=”doLoad(‘q.php?email=’+document.getElementById(‘emails’).value);”/><br /><br />

<div id=”resultdiv” style=”display: none;”>
Results:
<span id=”responseHTML”></span>
</div>

</body>
</html>

now we need a php script we will call it  q.php:

<?php

/**
* here we receive a headers
*/

header(“Content-type: text/plain; charset=utf-8″);
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0″, false);

$emailw = $_GET["email"];

if (!preg_match(“/^(?:[a-z0-9]+(?:[-_]?[a-z0-9]+)?@[a-z0-9]+(?:[-_.]?[a-z0-9]+(?:[-_]?[a-z0-9]+))?\.[a-z]{2,5})$/”,trim($emailw))){
echo “Pls enter correct email”;
exit;
}
else
{
$email_arr = explode(“@” , $emailw);
$host = $email_arr[1];

if (!getmxrr($host, $mxhostsarr))
{
echo “We try to find $host but can’t .Can you enter another email or check this one pls $emailw”;
exit;
}
getmxrr($host, $mxhostsarr, $weight);
echo “Congratulations your mail is valid : $emailw <br>”;
}

?>

that’s all :)

if you have any questions  pls  let me konow Branding-Studio.com

CSS image effect ;) you can use it in your gallery;)

November 1st, 2008 by admin

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.


CSS code:

<style type=”text/css”>

/*URL: http://www.Branding-Studio.com.com/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image’s height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

HTML code:

<div class=”gallerycontainer”>

<a class=”thumbnail” href=”#thumb”><img src=”images/firstimage.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/firstimage.jpg” /><br />Simply beautiful.</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/ocean.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/ocean.jpg” /><br />Beautiful OCEAN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”><img src=”images/fun.jpg” width=”100px” height=”75px” border=”0″ /><span><img src=”images/fun.jpg” /><br />Is it FUN?</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/horse.jpg” width=”100px” height=”70px” border=”0″ /><span><img src=”images/horse.jpg” /><br />RUN RUN RUN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Super Man<span><img src=”images/super.gif” /><br />Super Man</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Google<span><img src=”images/google.gif” /><br />Google</span></a>

</div>

Just change some files or paste your own images in this html code ;)

CSS Background Position Shortcuts

October 31st, 2008 by admin

I often use divs and background images on a constant basis to get a modern look and feel to a website. When doing so it is important to know the CSS shortcuts for the element background-position.There are two basic ways of writing this in your stylesheet, 1.with Keywords and 2. with Percentages or Lengths.

Keywords

Horizontal keywords: left, center, right
Vertical keywords: top, center, bottom

Read More »

“You Are Here” button

October 27th, 2008 by admin

I once ran across an article that prompted me to reconsider the approach I had been using to styling a “You Are Here” button. The result is that I now have two viable techniques to choose from, and I can use whichever one is easier to implement in a given situation. Let’s look at how these two techniques compare and when you might want to use each one.

Background: What we’re trying to accomplish

A You Are Here button is the term I use for a button or link that points to the current page and gets distinctive styling to help orient the visitor to their current location in a Web site. It’s usually a button in a navigation bar, but it might also be a link in a breadcrumb trail, or any other link to the current page.

A You Are Here button typically gets distinctive visual styling that makes it stand apart from other buttons in a navigation bar. For example, on the You Are Here button, you might reverse the text and background colors used on the other buttons in the navigation bar or use subdued shades of the other button colors.

Read More »

Php counter with cookies

October 22nd, 2008 by admin

Big thing when you are creating counter for your web sites is to disable counting same visitors every time he/she visit your page. To avoid this you would use cookies in this case because you want do disable counting for day not session.

What we need to do now is to create new table in our existing database or new using below sql query:

CREATE TABLE ‘stats’ (
‘id’ INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
‘counter’ INT NOT NULL
) ENGINE = MYISAM ;

INSERT INTO ‘stats’ ( ‘id’ , ‘counter’ ) VALUES (NULL , ’0′);

After you have created new table needed for this counter we need to create new file for example: “counter.php”.

Copy & Paste code below to newly created file:

<?php

// connect to mysql
$link = mysql_connect(‘localhost’, ‘write_here_mysql_username’, ‘ write_here_mysql_password’);

// select database
mysql_select_database(‘write_here_mysql_database_name’,$link);

// cookie details here
$counted = $HTTP_COOKIE_VARS["counter"];

// if this is first visitor then
if($counted==”"){

// we create cookie for visitor
setcookie(“counter”,”counted”,time()+60*60*60);

// add counter to database
mysql_query(“UPDATE stats SET counter=counter+1″);
}

$query=mysql_query(“SELECT * FROM stats”);

while($row=mysql_fetch_assoc($query)) {
$stats=$row['counter']; }

?>

Normally now you want to show this stats somewhere… What you need to do if you want to track every visit?

Make sure you make this:
1.  include this file in page you want to track

<?php include(“counter.php”); ?>

2. Print counter in part of page you want to show number of visits

<?php print $stats; ?>

That’s all.

jQuery AJAX Contact Form

October 19th, 2008 by admin

Getting started with the browser side.

First, download the jQuery library and form plugin and then let’s start creating our HTML form. Keep them all in the same folder for now. We’ll want to first call both javascript files, let’s do that with:

  1. <head>
  2. <title>Ajax Form v1 – Demo</title>
  3. <script type=“text/javascript” src=“jquery-latest.pack.js”></script>
  4. <script type=“text/javascript” src=“jquery.form.js”></script>
  5. </head>

That’s a great start, but we need to make the form before we can customize our javascript to fit the form. Here is a sample form to get us started:

  1. <html>
  2. <form id=“contactForm” action=“sendmailexample.php” method=“post”>
  3. <ul>
  4. <li><label for=“name”>Name:</label><input id=“name” name=“name” type=“text” /></li>
  5. <li><label for=“email”>Email:</label><input id=“email” name=“email” type=“text” /></li>
  6. <li><label for=“tele”>Telephone:</label><input id=“tele” name=“tele” type=“text” /></li>
  7. <li class=“special”><label for=“last”>Don’t fill this in:</label><input id=“last” name=“last” type=“text” /></li>
  8. <li><label for=“message”>Message:</label><textarea rows=“5″ name=“message”></textarea></li>
  9. <li><input type=“submit” value=“Send Message” /></li>
  10. </ul>
  11. </form>
  12. </html>

Read More »

Design = Details

October 16th, 2008 by admin

You’re at the table with fellow designers, an art director, and a creative director. The large screen displays designs you’re about to collectively critique. This is the first time you’ll all consider the initial round of concepts. The designs go up, one by one, and the words begin to flow.

It’s a phrase you hear often: design is in the details. With design, paying attention to small details—and in some cases, obsessively focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond.

I attend meetings in which designers present their designs—typically the first round of comps—for the first time. Half the time, the presenting designer shows a rough product on the screen, and they usually believe the design is 90-100% done. But to the detail-savvy designer, the work is only 50-70% there. You can see the groundwork, foundation, and feel of the design in front of you, but you know it’s just not finished.

The goal of embracing details is to get you to think critically and present the best possible design you can—right from round one. In essence, you want your design to be ready for a real client presentation. So how do you take a design to 100%? You need to achieve polish, ridding the client’s mind of any doubt that the design is unfinished. It’s all too common for designers to feel rushed: you’re under deadline, you’re under pressure. But if you care about your craft and your ideas, you’ll take the extra time, perhaps working late into the night, as we all have, and add the touches that you know will make your work really shine. You know that feeling you get when you think, “Oh, I knew I should have tried that”? Do it the first time it comes to mind. Don’t let someone in your design review bring up an idea you thought of first.

Tips and techniques fortify any designer’s toolkit, but I must stress that thinking critically about a design is as important as the tools and skills needed to produce it.

Here’s a checklist to guide and inspire you to get the site done, done, done. Leave no stone unturned and no doubts about the design you present—let it shine.
Experiment

It’s not unusual for me to create up to four concurrent comps for just the first round of internal design presentations. I use these to “sketch” out designs. A navigation or logo treatment that doesn’t work in one comp may work in another comp. This allows you to have what I call “The Beautiful Mistake”—placing elements in other environments that create possibilities. Instead of feeling like you have designer’s block, just throw the ideas you have into comps and see where they lead. Getting started is half the battle.

On the same note, don’t be afraid to start over. If something isn’t working, close it up and trash it. If you think the navigation is too precious, remember how you did it, then start from that point in the next design. The goal is to refine, over and over.
Choices

There are many choices to be made when you’re designing—everything from type, to colors, to overall tone of the site. Sometimes, I like to throw a lot of things at a design to see what sticks, and sometimes I start minimally. Strive to make smart, simple choices. If there’s an easier way to design something, do it. The complicated choice will feel complicated to the client and intended audience unless you can make a complex interaction looks simple.
Stay consistent

Once you make choices, stick with them. If you choose to pad items with 10 pixels in sidebars but use 15 pixels in larger text areas, make sure the comps reflect those decisions. Keep notes while designing—these will form a good basis for a style guide. Consistency displays sophistication and shows that you fully understood and made sound decisions. Consistency should be transparent.
Completeness

Finish the design. Don’t miss a footer or a detail. Don’t say, “That’s to be filled in later—I didn’t have time.” Make the time. Don’t give any reason for others to torpedo the design or allow someone to fixate on a little detail—overshadowing the rest of the work. It’s these little details that deserve your attention. Creative directors, art directors, and especially clients will perseverate on details like this, so make sure the details are there.
Step in, step out, step back: balance

During a design, it’s best to step away from the design occasionally—even just for lunch or a 15-minute break. Look at something else. Come back and look at your design again. Think about your first impressions. Your own gut reaction will likely be similar to the initial impressions of those who see it for the first time. Take note and revise or change your design based on those impressions. Regardless of how “cool” or “neat” a particular element may be, if it doesn’t serve your design in a useful way, get rid of it and try something new. Always step back and re-evaluate.
Be your own critic

If you’re familiar with the team you regularly work with, the client or the client’s needs, look at your design as you get close to done and think about parts that will potentially provoke questions or concerns. Have a solid answer for the decisions you made.
Complexity in simplicity: less is more

When we discuss “less is more”, we mean different things. For example, sometimes the design needs to scale back. It’s got too many elements. Or a design chokes itself with too many colors. When doing detail work, “less is more” is about leaving in only everything that is necessary and making it harmonious. Let the complexity be in the simplicity—a design is not useful when it’s perceived to be complex. A design should be useful, simple, and straightforward—let the complexity shine through via simplicity.
Obsession is healthy

If I don’t feel right about a navigation or a flash widget that displays photos, I will sit and stew and sketch until I find something that fits. Design is a puzzle you create for yourself—you have all the pieces, but it’s up to you to decide how they fit. Perfection is not something to strive for, but close to perfect is—it leaves room for exploration, dialogue, and learning.

I find myself thinking about designs I’m working on at odd periods of the day—in the shower, making dinner, or walking to the corner store. Small, quiet moments are when I have breakthroughs and solve problems. These are the times when the right details will appear. This isn’t often billable time, but it’s a good exercise to think about a design before attempting it. I don’t sketch much using pencil and paper; I like to let a design percolate and grow in my mind before committing it to the screen. I imagine the look, the feel, and the details. I relish the details.

Detail work isn’t easy. It takes time, inspiration, and imagination. It is however, very good practice—it allows you to cultivate a critical eye to help yourself and your fellow designer. Relish the details and your designs will cut the mustard.