designersdairy

Thursday, June 12, 2014

My first Less.Css file using node.js

Step1:

Create a HTML File index. html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link type="text/css" href="style.css" rel="stylesheet"/>
</head>

<body>

<header>

<p> i would love to work with less </p>
</header>

</body>
</html>

Step2:

Denote the style sheet name whatever u want ( example : style.css )

<link type="text/css" href="style.css" rel="stylesheet"/>

Step3:

Create a style sheet name cool.less

There are two types of class

1. less - @ difference between the both is $ and @ symbols
2. sass - $

@color:red;
@text-green:green;
div
{
    color:@color;
}
header
{
    height:80px;
    width:1024px;
}

header p
{
    color:@text-green;
}

Step4 :

Install the node.js in your computer and open the command prompt

you need to install the less module by running

npm install less -g

give the location of your folder ( my folder name is workout)

Cd users\desktop\workout > lessc cool.css > style.css

( if you see in the browser it will show only the style.css in chrome)

if u want to display the less file in browser we want to give --source- map =style.map

Cd users\desktop\workout > lessc cool.css > style.css --source- map =style.map

Step5 :

Now you can go and see the folder (workout) . style.css and style.map will be generated

Step6 :

Output

Sunday, June 8, 2014

Centered fixed width design in SharePoint 2010

fixed width design in SharePoint 2010

Categories:CSS; SharePoint Designer; Site Manager/Power User; MOSS; WSS; 2007; 2010

There are a lot of fixed width master page solutions available on the internet and I've read most of them. Some require JavaScript or don’t respect the ribbon, which means that the ribbon will be placed inside the fixed width design. SharePoint is smart enough to handle small screen resolutions by compacting and rearranging the icons in the ribbon, but if a larger screen is used it gets really hard to administer SharePoint and breaks the usability completely.

There is a much quicker and safer way to create a flexible master page where only certain CSS properties need to be changed to get any fixed width design as well as centered design with a border to the left and right.

Reasons for a centered design

There are certain reasons for a centered or fixed width design. By default SharePoint scales the complete page to 100% of the screen. When it comes to web content management the design is more text driven and collaboration concerns are not that relevant. When the content gets wider and wider with the screen resolution the lines of text get longer and longer. The content then will be harder to read.

Fixed width looks pretty but generally only makes sense when public facing web sites should be created. The reason is that you don’t know what the users screen resolution is. Nowadays the most common design requires supporting a minimal resolution 1024px or maybe sometimes 1280px. To be on the safe side most web designer's use grid systems like 960.gs which implements widths of 980px and is optimized for a minimal screen resolution for 1024 by 786.

Fixed design could also be used for blogs and maybe wikis. From a collaboration perspective a 100% width makes more sense. So comment and let me know if you think differently.

Centered Design in SharePoint

As I said before most of the tutorials available on the web don’t respect the ribbon and stuff it into a design that has a fixed width. The fastest way to get a fixed width design I found needs only the following CSS code and is flexible to be changed to any desired width.

	div.s4-title.s4-lp,
	body #s4-mainarea,

	#s4-topheader2,
	#s4-statusbarcontainer {

	width: 960px;
	margin: auto;

	padding: 0px;
	float: none;

	background-image: none;
	background-color: white;

}

To get the fixed width design working with the v4.master some classes needs to be added.

1	<div id="s4-workspace">

Needs to be changed to:

1	<div id="s4-workspace" class="s4-nosetwidth">

And the second html element needs to be altered:

1	<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

This need to be changed to:

1	<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design will stay centered. The result looks like this:

960px fixed width design

fixed width with ribbon enabled

At the end the design of SharePoint is centered. When any page is edited the Ribbon will remain on the whole width of the browser. It’s much more comfortable to edit SharePoint that way.

The size of the design could be changed to any size just by simply modifying the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Custom Master Page Design:

body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer {
     width: 1024px!important;
     margin: auto;
     padding: 0px;
     float: none;
}

.ms-dialog #s4-mainarea, .ms-dlgFrame #s4-mainarea {
    width:auto!important;
}
.ms-dialog .content-wrapper
{
    background:none;

}
.ms-dialog {
     overflow:auto;
}
div #s4-titlerow {
    width: 1024px!important;
     margin: auto;
     padding: 0px;
     float: none;

     background-color: white;

}

Monday, March 31, 2014

Administrator Login Username and Password Retrieve ?

Welcome to Designers Dairy blog here i have posted How to find the Joomla website administrator

username and password

Step1:

Go to Phpmyadmin -> Select the Database - the wild side - Select k7lt0_users ( users)

Step2:

Click on k7lt0_users ( users) -> You can see the username and password of the administrator

login

Step3:

You can click and see the given username and password which the password was encrpted

Step4:

So u have to create a new password using below link

http://www.teachmejoomla.net/joomla-mambo-tutorials-and-howtos/general-questions/how-to-change-or-recover-joomla-administrator-password.html

Step5:

Copy the General sql string password ="22bf59bcca5b77263b4021cf469528"

and paste in php myadmin and press GO

Step6:

The new password will be updated . Now u can go to login panel and access the username with new

password

Step 7:

Enjoy Folks

Thursday, March 27, 2014

How to Move a Joomla Site from Live Server to local

Welcome to Designers Dairy blog here i have posted How to Move a Joomla Site from Live Server

to local serve

Step1:

Download the Joomla site from live server with joomla installation

Step2:

After that Export the database from PHP MySQL - example (thewildside)

Step3:

Go to the localhost -> PhpMyAdmin -> Create the new database wildside -> Export the Database

as the zip file

Step4:

Change the Configuration.php file

    public $host = 'localhost';    -   Change the local host ( as per local server setting)
    public $user = 'root';            -   Change the root ( as per local server setting)
    public $password =" '';        -    Change the password ( as per local server setting)
    public $db = 'wlidside';        -   it remains same as live server

Step5 :

Now go to the particular file set and click site will be open as per live site url

Step6:

Enjoy folks

Tuesday, March 25, 2014

Mobile Drop Down menu using jquery

Welcome to Designers Dairy blog here i have posted how to design the Drop down menu bar in

Mobile

Step1:

We have to take backup our project files in virtual machine.

Step2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> </script>

<script type="text/javascript">

function menu()
{
    $('.show').hide();

    $("#list-type").toggle();


}
$(function()
{

        $('li').click(function(e) {

    $('.show').hide();

        });

   $('.trigger').click(function(e) {

        $('.show').hide();

           $(this).next(".show").toggle();

        });

});
</script>

<style type="text/css">
*
{
    margin:0px;
    padding:0px;
}
#menu
{
    background-color:#D3CCCC;
    padding:8px 0px 8px 23px;
    cursor:pointer;
    margin:0px 0px 0px 0px;
}
#list-type
{

    margin-left:23px;
    display:none;
position: relative; float: left; margin-right: 50px;

}
#list-type li
{
    display: block;
}
#list-type li a
{
    font-size:13px;
    color:#666;
    line-height:30px;
    padding:10px 200px 10px 0px;
    border-bottom:solid 1px #ccc;
    text-decoration:none;

}
.show li a
{
    font-size:13px;
    color:#666;
    display:inline-block !important;
    float:left !important;
    padding:0px !important;
    border:none !important;
    text-decoration:none;

}

ul li
{
    list-style-type:none;

}
.show
{
    display:none; float: left;
    margin-left: 80px;
    margin-top:-30px;
   width:100%;


}

</style>

</head>

<body>

<div id="menu" onClick="menu()"> Menu </div>

<div id="list-type">
<ul>
<li> <a href="#"> item1 </a> </li>
<li> <a href="#"> item2 </a> </li>
<li> <a href="#"> item3 </a> </li>

<li class="trigger"> <a href="#" > item4 </a>   </li>

<ul class="show">

<li> <a href="#"> sub-item 3 </a> </li>
<li> <a href="#"> sub-item 4 </a> </li>
</ul>

<li class="trigger"> <a href="#" > item5 </a>   </li>

<ul class="show">

<li> <a href="#"> sub-item 5 </a> </li>
<li> <a href="#"> sub-item 4 </a> </li>
</ul>

<li> <a href="#"> item6 </a> </li>

</ul>

</div>

</body>
</html>

Step3:

Output