Dev.Lopez | Software developer

How to only use the Bootstrap grid system and the default screen sizes

Thu, 23 Jul 2015 10:48:26 +0000

As many people I have used many times Bootstrap to do in my web projects, thus, Bootstrap is a also a good choice to convert an old site to a responsive site (necessary in these times with so many devices in the market). Someone might say that when is used Bootstrap, the website takes a very common style used today, losing originality and personality. Well, that’s true, but you can take Bootstrap only to use its grid system.

To obtain only the grid system you can go to official webpage and customice the library here , remember to uncheck all the things unless ‘Grid system’ on Common CSS. In other hand there are many github projects that offer only the grid, for example this .

Now you can take the css files and begin easily to make a responsive website using only this known grid system (without the common twitter style for headers, buttons, fields and so on).

Another good resource is to know quickly how many screen sizes are used in Bootstrap in order to change our styles when the Boostrap columns change according the resolution. Here you have the Bootstrap 3 version and 2 version.

Boootstrap 3 screen sizes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

/*========== Non-Mobile First Method ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

Boootstrap 2.3.2 screen sizes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/*=====================================================
= Bootstrap 2.3.2 Media Queries =
=====================================================*/
@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

The post How to only use the Bootstrap grid system and the default screen sizes appeared first on Dev.Lopez | Software developer.

]]>

How to take a screenshot with selenium

Tue, 23 Sep 2014 08:00:10 +0000

When we are working with Selenium framework it’s possible that we need to take a screenshot of the webpage loaded by the selenium webdriver. This is easy to do, you only need to cast the driver to “TakesScreenShot” class and call “getScreenshotAs”. Look the snippet and use it at your convenience:

1
2
3
4

WebDriver driver = new FirefoxDriver(); // or other
driver.get("http://www.yahoo.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("my_screenshot.png"));

The post How to take a screenshot with selenium appeared first on Dev.Lopez | Software developer.

]]>

Change the order id of orders using MYSQL on Prestashop 1.5

Tue, 08 Jul 2014 10:57:34 +0000

When we are migrating a installation that is in production, it is possible that the new installation has got a old version of database and that several orders are missing. The reason of this is because we are working with a dump catched in the time X but the shop in production is still working, thus the shop is still receiving new orders and new customers that there are not in our production database (the copy of time X).

When we have finished the work and the new version is ready to be installed in the production server with the old database, we need at least to indicate that the new orders will begin from the last id of the production database. In this case, we need to execute this query to move the next id:

1	ALTER TABLE ps_orders AUTO_INCREMENT = :last_id + 1

Perphaps you are reading this article because you have recieved new orders in the production servers using the last order id of the old database, in this case, you need yo move the orders id generated to the real last id. Here are the queries to do that, only replace :old_id and :new_id.

1
2
3
4
5
6
7
8
9

UPDATE ps_order_carrier SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_cart_rule SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_detail SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_history SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_invoice SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_invoice_payment SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_return SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_order_slip SET id_order = :new_id WHERE id_order = :old_id;
UPDATE ps_orders SET id_order = :new_id WHERE id_order = :old_id

The post Change the order id of orders using MYSQL on Prestashop 1.5 appeared first on Dev.Lopez | Software developer.

]]>

Import large mysql dump files using shared hosting

Wed, 02 Jul 2014 09:00:43 +0000

When we are working on a shared hosting, normaly we only have got one tools to manage our database, the well-known . The great tool has got a limitation when we are working with large database files. If we were working with a virtual personal server, we’d only need to connect via shell an follow these steps:

Connect to our mysql server

mysql -u [USERNAME] -p

Use our objective database and import the dump file (the database must be empty)

USE [DBNAME];
SOURCE [/path_to_file/DBNAME].sql;

But, as we were told, we are working in shared hosting so we haven’t access to a shell. Fortunately, it exist a free tool called “” that allow us to import a large dump file. BigDump is a simple script called “bigdump.php”. To use the script, we only need to upload the file to a folder and configure the database credentials (around line 45), anyway inside the file we can find the instructions.

The next step is to upload the dump file to the same folder (unzipped) and then, you need to access with a browser to the script (http://www.foodomain.com/myfolder/bigdump.php). Then the bigdump will show us the file uploaded and a link to begin the import process.

And that’s all

Link of BigDump: http://www.ozerov.de/bigdump/

The post Import large mysql dump files using shared hosting appeared first on Dev.Lopez | Software developer.

]]>

How to remove the admin bar for logged users in WordPress?

Tue, 01 Apr 2014 08:16:31 +0000

If you have a wordpress web page with registered users, you can see that the admin bar on top is shown where the users are logged. This issue could broke the design of you web page or give access to zones that you want keep hidde. To remove this bar you can add this code to you functions.php file, this code removes the admin bar for all users except the adminitrator.

1
2
3
4
5
6
7

add_action('after_setup_theme', 'hide_admin_bar');

function hide_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
show_admin_bar(false);
}
}

If you want remove the admin bar to the administrator too, only remove the conditional.

1
2
3
4
5
6

add_action('after_setup_theme', 'hide_admin_bar');

function hide_admin_bar() {
show_admin_bar(false);
}
}

Cheers

The post How to remove the admin bar for logged users in WordPress? appeared first on Dev.Lopez | Software developer.

]]>

How to extract emails from a webpage in PHP?

Mon, 24 Mar 2014 07:59:12 +0000

Sometimes we need to extract the emails contained in a piece of text or html document. Here you can find a simple script that extracts unique emails from a webpage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

The post How to extract emails from a webpage in PHP? appeared first on Dev.Lopez | Software developer.

]]>

How to get child theme template directory?

Wed, 26 Feb 2014 09:25:19 +0000

Normally when we use child themes we need to get the child theme directory o the child theme template url. In our first attemp, we use this:

1
2
3

get_template_directory_uri(); // Both returns parent theme url
bloginfo('template_url');;
get_template_directory(); // Returns parent theme path

We need to use this:

1	get_stylesheet_directory_uri;

Hope it helps!

The post How to get child theme template directory? appeared first on Dev.Lopez | Software developer.

]]>

How to use pods fields in existing forms of thirdparty themes

Sun, 23 Feb 2014 15:24:03 +0000

When a developer is using wordpress with in a existing theme that comes with exising forms, there is a work to do if he wants to integrate extended fields into those forms. For example if a theme comes with a registration form and there are several extended fields for the user.

In this case we need to add inside the form the new fields, and this can be a “pain”, because with form methods of pods object the work is done in seconds.

1
2
3
4
5
6
7

$mypod = pods( 'mypod' );

// Only show the 'name', 'description', and 'other' fields.
$fields = ( 'name', 'description', 'other' );

// Output a form with all fields
echo $mypod->form($fields);

We can’t use this becase form method render an entire form with its

tag and with the submit button.

Well, to do this we can use directly the function field from PodsForm.php (http://pods.io/docs/code/pods-form/field/). I leave you a function donde by me:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function pods_utils_show_pod_fields($pod, $selected_fields = null, $name_prefix = "", $theme_name = ""){
$pods = pods( $pod );
$fields = $pods->fields();
foreach($fields as $field) {
if($selected_fields != null)
if(!($field['name'], $selected_fields))
continue;
?>
<label for="<?php echo $name_prefix . $field['name']; ?>">

label>

}
}

pods_utils_show_pod_fields('mypod');

pods_utils_show_pod_fields('mypod', ("field1", "field3"));

Hope it helps

The post How to use pods fields in existing forms of thirdparty themes appeared first on Dev.Lopez | Software developer.

]]>

How to fix “Unresolved assembly reference not allowed: System.Web.Mvc” with ILMerge

Wed, 19 Feb 2014 19:55:45 +0000

You can find this problem while you are merging your project using ILMerge and you can see that System.Web.Mvc is not in your Visual Studio installation.

This dependency belongs to ASP.NET MVC 3, a Microsoft’s framework used for building web applications. Normally these dependencies and others of this framework are not included on Visual Studio installation. In my experience, they are not included in Visual Studio 2013 Express.

You need only download this framework from (direct link overhere ) and then you can now find the dll (System.Web.Mvc.dll) in this folder in a default installation:

1	C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies

Thus, you can find others dlls of this framework like (System.Web.WebPages.dll, System.Web.WebPages.Razor.dll, Microsoft.Web.Infrastructure.dll, etc) in this folder:

1	C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies

Add the dll to the ILMerge command parameters or add the library folder:

1	/lib:"c:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies" /lib:"C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblie"

The post How to fix “Unresolved assembly reference not allowed: System.Web.Mvc” with ILMerge appeared first on Dev.Lopez | Software developer.

]]>