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

CSS horizontal menu

September 22nd, 2010 by admin

This is simple css horisontal menu. You don’t need be an advanced webmaster for create the same nice menu.
Lets start:
1. we should draw this menu in photoshop ( I created this one for example)

2.now lets create a rollover effect for our menu. Look what i did  I made a copy of this menu   and just changed a color of button. Next i paste together  both images like this :

3.lets cut this menu on buttons look like i did this:

4.now lets write little css code :

a.valutesbfunt {
display:block;
height:45px;
width:49px;
background :url(images/css_horizontal_menu/css_menu_button1.jpg);
text-decoration: none;

}
a.valutesbfunt:hover  {
background-position: 0 -45px ;
}

.deltextatall {
position: absolute;
left: -5000px;
}

let me exlain what i did in this css :

i created a block  height: 45px on  width:49px and background image of my block is an imge

size of this image is width:49px height:90px this is really important i mean this size 90px i show in this block just top part of this background image height: 45px on  width:49px so people can’t see bottom side of it with another color
what i do next if you put your mous on this block  i will show you another bottom part of this button  background-position: 0 -45px ; this mean that i changed button position and show you just bottom part with gray button
for show this button i need a text   in it so i decide hide it  and position of this text is  left: -5000px; so you can’t see it .
5.next step create the same css for all buttons just with different  names

a.valutesbfunt {
display:block;
height:45px;
width:49px;
background :url(images/css_horizontal_menu/css_menu_button1.jpg);
text-decoration: none;

}
a.valutesbfunt:hover  {
background-position: 0 -45px ;
}

.deltextatall {
position: absolute;
left: -5000px;
}
a.valutesdollar {
display:block;
height:45px;
width:46px;
background :url(images/css_horizontal_menu/css_menu_button2.jpg);
text-decoration: none;

}
a.valutesdollar:hover  {
background-position: 0 -45px ;
}
a.valuteseuro {
display:block;
height:45px;
width:55px;
background :url(images/css_horizontal_menu/css_menu_button3.jpg);
text-decoration: none;

}
a.valuteseuro:hover  {
background-position: 0 -45px ;
}

6. step lets create simpe html code for one of this buttons  :

<a href=”#” class=”valutesbfunt”  title=”Pound”><span class=”deltextatall”>Pound</span></a>

link in hreaf=”#”  you  can chage on any link as you  need the same you can do  with title and anchor text of the link

7. lets create whole menuin html

<table width=”150″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”left” valign=”top”  ><a href=”#” class=”valutesbfunt”  title=”Pound”><span class=”deltextatall”>Pound</span></a> </td>
<td align=”left” valign=”top”><a href=”#” class=”valutesdollar”  title=”Dollar”><span class=”deltextatall”>Dollar</span></a></td>
<td align=”left” valign=”top”><a href=”#” class=”valuteseuro”  title=”Euro”><span class=”deltextatall”>Euro</span></a></td>
</tr>
</table>

just notice that each button has her own class  in  link “valutesbfunt,valutesdollar,valuteseuro” in span class is the same  for all css menu buttons  “deltextatall”

lets see what we have now
examle

Remove ICQ Firefox tutorial

September 15th, 2010 by admin

I use Firefox cause I really like it but after I installed ICQ … I start to hate it !!! ICQ search engine – it’s awful thing !!! So i found the way how i can remove ICQ from Firefox permanently !!! :)
1. In Firefox status bar enter about:config (image of firefox status bar with about:config)
remove icq from firefox
2. You will see a message : ” Here be dragons!  Change this advanced settings can be harmful to the stability, security, and performance of this application. You should only continue if you are sure of what are you doing.”  and you will see button  “I’ll be careful, I promice!”  click this button (image of firefox with careful message and button)
remove icq from firefox
3. You will see next screen with Firefox configuration options name of this tab “about:config” and you will have new field “Filter” (image of firefox configuration page)
remove icq from firefox
4. In the “Filter” field enter “keyword.url” or “ICQ” (image of firefox filtred results)
remove icq from firefox
5. In filtred results find “keyword.url” right click on this word and you will see drop down men find there word “Reset” and click it
remove icq from firefox
6. Now you will see defaul search engine url in this string like ” http://www.google.com/search?ie=UTF-8&oe=UTF-8&sourceid=navclient&gfns=1&q=” (image of default firefox “keyword.url” settings)
remove icq from firefox
7. Restart Firefox . DONE !!! Try to enter search phrase in status bar now you will see default firefox search engine

Weekend :) Life

November 2nd, 2009 by admin

Weekend Life :)

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 :)

jQuery menu few simple steps ;)

January 29th, 2009 by admin

here is an example of code if you can’t understand something pls ask me ;) but i think this is very simple for you ;) we you will use just really small javascript and css ;) that’s all :)
what you gonna do :
1 – made html file for example “menu.html”
2 – open file “menu.html”
3 – copy this html code below ;)
4 – paste this code into your “menu.html” file
5 – save “menu.html”
6 – run it in FireFox for example ;)
7 – made a changes in this code if you need it ;)

<!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>
<title>Menu Demo</title>
<script src=”http://jquery.com/src/jquery.js”></script>
<script>
$(document).ready(function(){
$(“dd:not(:first)”).hide();
$(“dt a”).click(function(){
$(“dd:visible”).slideUp(“slow”);
$(this).parent().next().slideDown(“slow”);
return false;
});
});
</script>
<style>
body { font-family: Arial; font-size: 12px; }
dl { width: 100px; }
dl,dd { margin: 0; }
dt { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 2px; }
.s { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
.s a { color: #FFF; }

</style>
</head>

<body>
<dl>
<dt><a href=”/”>Menu jQuery</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/12/simple-css-menu/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/12/the-technology-validation-of-the-forms/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/ajax-email-validator-ajax-php/”>Item 3</a></li>

</ul>
</dd>
<dt><a href=”/Menu1/”>Menu1</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/11/your-own-scrollbar-color/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/css-image-effect-you-can-use-it-in-your-gallery/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/some-rules-for-web-designers/”>Item 3</a></li>
</ul>
</dd>
<dt><a href=”/Menu2/”>Menu2</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/7-simple-ways-to-get-repeat-websitetraffic/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/do-you-want-build-your-website-what-do-i-need-to-do-for-star-my-online-project-first-steps/”>Item 2</a></li>
</ul>
</dd>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/how-to-build-a-great-web-site/”>Menu3</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/09/web-design-web-development-seo/”>Menu4</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/4-stages-of-web-site-design/”>Menu5</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/category/for-all/”>Menu6</a></div>
<dt><a href=”/Menu7/”>Menu7</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/what-is-specification-how-its-look-like/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/09/here-some-sites/”>Item 2</a></li>
</ul>
</dd>
</dl>
</body>
</html>

an example  :)



Menu jQuery
Menu1
Menu2
Menu7


be happy :) !!!

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 :)

The technology validation of the forms

December 9th, 2008 by admin

First part  :

<script type=“text/javascript”>
//<![CDATA[
function checkform()
{
document.getElementById('urltosend').action="addmess2.php";
document.forms['addform'].target=”process”;
top.document.forms['addform'].submit();
}
//]]>

</script>

<form id=“urltosend” name=“addform” method=“post” action=“addmess.php”>

<input type=“button” onclick=“checkform()” value=“Отправить данные”>

<iframe name=“process” id=“process” width=“0″ height=“0″ style=“visibility: hidden”></iframe>

<div id=“alerts”></div>

Second part:

<?php
/*

Checking the received data and found errors add to the variable $alerts – for example:

$alerts.=”Error1<br />”;
$alerts.=”
Error2<br />”;
и так далее.

Depending on the outcome of displaying a message <div id=”alerts”></div> if all is ok  we resend our information to  “addmess.php”

*/

print ‘<script type=”text/javascript”>’.“n”;
print ‘//<![CDATA['."n";
if ($alerts)
{
print "top.document.getElementById('alerts').innerHTML='".$alerts."<br />';"."n";
}
else
{
print "top.document.getElementById('alerts').innerHTML='all is great !<br /><br />';"."n";
print "top.document.getElementById('urltosend').action='addmess.php';"."n";
print "top.document.forms['addform'].target=’_top’;”.“n”;
print “top.document.forms['addform'].submit();”.“n”;
}
print ‘//]]>’.“n”;
print ‘</script>’.“n”;

Just simple example  javascript and php ;)

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

Your own Scrollbar color

November 4th, 2008 by admin

In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The below CSS shows the relevant CSS properties for scrollbar coloring. Note that if your page uses a doctype that triggers a “Strict” mode in IE, the scrollbar properties need to be assigned to the “HTML” tag instead of the conventional “BODY” in order to work.

The CSS (for non “strict” doctypes):

body{
scrollbar-face-color:#EBF5FF;
scrollbar-base-color:#EBF5FF;
scrollbar-arrow-color:black;
scrollbar-track-color:#F3F3F3;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}

The CSS (for “strict” doctypes):

html{


}