coding

Cool Building
Nowadays it's more common to find fully customized form elements that enhance the user experience. In this article we will see how to turn a typical checkbox into a switch that is much more modern and visually appealing.   Let's see an example of how this switch would be used in the typical options in a user area: span.question { display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: bold; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; vertical-align: middle; } .switch input { display:none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #E27AD8; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }       Publish my email address       Receive newsletter       Receive email notifications   First we need to define the html. We are going to use the labels and input tags of a typical checkbox and an extra div that will serve to do the trick with css. HTML <label class="switch">   <input type="checkbox">   <div class="slider round"></div> </label>   Now let's go with the css: CSS /* Format the label that will serve as container */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide the html checkbox */ .switch input { display:none; } /* Format the switch box on which the control knob or slider will slide */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } /* Depict the control knob or slider using the pseudo-selector before */ .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } /* We change the background color when the checkbox is activated */ input:checked + .slider { background-color: #E27AD8; } /* We slide the slider to the right when the checkbox is activated */ input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* We apply a rounded edge effect to the slider and to the bottom of the slide */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } That's all folks! Now we know how to create a toggle switch or switch with css. Easy, fast and for the whole family! Main photo: Pierre Chatel
Wild Deer in a road
Undoubtedly, one of the features that has made Shopify one of the best e-commerce platforms is its ease of use, in a few clicks the manager of a store has many customization options available that allow them to keep their web dynamism and activity necessary for online sales. Many of the options that Shopify incorporates in its administration menus are typical of the platform’s "core", and are equally available to all users, however, there are others that fall within the scope of the "theme". While the core is the base structure of any store, the theme is responsible for giving each one their own personality and defines the characteristics that differentiate it from others in such a competitive market as internet sales. The difference, exclusivity and quality offered to the user interface are the key to success. In the Shopify Themestore  you can choose from a wide variety of topics, both free (those offering fewer, simpler options) and paid, both are available to be downloaded and installed in minutes, however, if changes are not implemented, we may find that the store does not stand out among the others or that it even resembles another one and that may cause confusion among final customers. Theme customization options allow for a more exclusive and personal theme, these are very powerful and at the same time easy to use. To access these options the manager user has to navigate the Shopify menu administration to "Online Stores Sales channel >> >> Themes" and click on "Customizetheme" on the theme they want to customize. The configuration page of the theme to which you can access has a preview of the store and a sidebar with the available customization options. Furthermore, this bar has some generic predefined sections, like "Checkout" where some options of the payment process are configured. The important and interesting is that the developer of each theme can include as many configuration options as they want and with varying purposes. Examples of use are: Change background photo of a block of the cover. Change the text and color of a message that appears in the footer of the entire web. Select a collection to be displayed in a prominent block. For the first example of the list we will assume that there is a block on the front of the store with the "highlight-cover" CSS class, we will achieve the desired effect by performing the following steps: 1. Create the configuration option. By clicking on the menu option "Edit HTML / CSS" we enter the editing screen of the theme files, we have to look for the "Settings" section, where we find two files: settings_data.json and settings_schema.json. For our purposes we will focus on the second (in case there are options left undefined it will be empty, or may not exist) in any case, we must bear in mind that this is a .json file and therefore we must respect the syntax and structure of such files. For this example and this unique configuration option, the file content would be: [ { "name": "Fondo de Bloque de Portada", "icon": "header", "settings": [ { "type": "image", "id": "bg-front-block.jpg", "label": "Imagen de fondo", "info": "Suba una imagen de 300x400px" } ] } ] The "name" property is the title of the section that appears in the sidebar on "Customizetheme" along with an icon defined the "icon" feature on a list of predefined options (blog, cart, collection, color, contact, currency, etc.) Under "settings" we specify each field yet to be filled in by the user, in this case only have one, which is the file to be used as background block for each field. There are a number of available properties: Type (required). Type of control to use. ID (Required). Internal unique identifier of the field, only alphanumeric characters, Numbers and hyphens are allowed. Label (required). Field label. Default (Optional). Default value field. Info (Optional). Additional information about the field appears as a small informative tooltip.   With the code we showed in this example the option to upload a photo background for the cover block would be available for the user, they could upload it and change it as much as they like to.   2. Use the value defined by the user. When the user saves any defined customization options, the system is responsible for storing each value and from then on, it is available for use in any of the theme’s liquid templates. To access these values, the system has the “settings” feature which properties correspond to each of the defined values ​​and can be used in any .liquid file, generally using the usual syntax ({{settings.id_propiedad}}). The way to access the property value may vary depending on the type of field, in our example it is not necessary to use the “settings” object because we can directly access the asset, the background image block cover will be used in the file style.liquid.scss: .destacado-portada { background-image: url('{{ 'bg-front-block.jpg' | asset_img_url: 'original' }}'); } When the "type" of a field has been defined as "image" and the user saves an image, automatically a file is created whose name is the "id" field within the "Assets" theme folder, being available from now on to be used like other files. If the user goes to another file field, the system automatically updates the stored file, so that wherever they are using it the new one appears. There are other types of fields, each has its own characteristics, and depending on what you want to achieve, you use one or the other. Available types and how to use them are available in the complete settings_scheme.json reference file, Combining these fields and customization settings with an intelligent and creative development, this tool becomes a very powerful and flexible system that guarantees our Shopify store won’t leave anyone indifferent, creating competitive advantages to differentiate us and make us stand out from the other shops in the sector.   Main photo: Asa Rodger
Magnific Popup en Drupal
Popups are an excellent and sometimes beautiful idea to show the user some secondary or related content without overdoing the website. There are many methods and plug-ins that allow you to get this effect, the all have their pros and cons that make them better or worse in relation to what we need to make of them. However, in this article we’re going to show you one of the best, or at least the most versatile: Magnific Popup, a plug-in that allows to be used in multiple situations: galleries, modal windows, forms, content via AJAX, etc, whine being fast, light (it has a tool for generating a customized view), responsive and easily modifiable by CSS. What else can we ask for? A simple example on how to incorporate a plug-in in Drupal and really taking advantage of it is using it inside of a view, for this example we’re assuming we have a consistent content view in a list of nodes with the content type “product”. The view will have the name “products” with a block-type display showing the name of the product. If the user clicks on it a popup will open and give them detailed information on the product. The first step is configuring the view we’re going to use, we’ll initially add two more fields plus the Nid of every product that will be used as a unique identifier for each product’s popup:    Nid (system name: nid)    Name of the product (sytem name: title)    Description of the product (system name: description) The goal is the “name” field has a link that activates the popup and that from inside the popup the content under the name “description” must come up, for that we’ll try the following: 1. We mark the option “exclude from presentation” from the “nid” field and we deactivate the node to which it’s linked, the goal is to get it out from the node’s id in a plain text format so we can reuse it in the other fields. 2. We mark the option “rewrite the output of this field” in the field “name” we write the following code: <div class="popup-trigger"> <a href="#popup-[nid]">[title]</a> </div> 3. We mark the "Write output this field" in the field "Description" and enter the following code: <div id="popup-[nid]" class="inline-popup mfp-hide"> [descripcion] </div> With this we have finished our view, of course this HTML can be changed to customize it for one’s needs, so we have to consider that there must be a link pointing to the pop-up’s id and the div has got to have already the defined classes for the use of the plug-in. In this example these are “inline-popupmfp-hide” but they can vary depending on the options we want to use, all valid options are available in the documentation. The second step for the popup to work is getting the plug-in’s javascript file to work and the pop-ups to initialize in our view; there are several ways for  incorporating the js code to a Drupal website, in this example we’re going to use a preprocessing function in order to only change the code when the view to which we have added it is showing, we’ll add that function to the template.php file of the theme: /** * Añadir Magnific Popup a bloque de view. */ function THEME-NAME_preprocess_views_view(&$vars) { $view = &$vars['view']; if ($view->name == 'productos' && $view->current_display == 'block') { // add needed javascript drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/jquery.magnific-popup.min.js'); drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/inicio-popup.js'); // add needed stylesheet drupal_add_css(drupal_get_path('theme', 'THEME-NAME ') . '/magnific-popup.css'); } } The files .magnific-popup.min.js and magnific-popup.css belong to the plug-in’s code, the file “inicio-popup.js” is one that we’ll create as we need it, the code for this example would be: (function($) { Drupal.behaviors.inicioPopup = { attach : function(context, settings) { $(".view-productos .title > a").magnificPopup({ type:"inline", removalDelay: 300, mainClass: "mfp-fade", midClick: true }); } }; })(jQuery); Note: Both in code of the preprocessing function and in this js we’re taking into account that the view we’ve created is called “productos”.  With this the popup should be completely functional, but it is necessary to add some CSS to the general style sheet of the theme so it has a nice look. .inline-popup { position:relative; width:auto; max-width:650px; margin:20px auto; background-color:#fff; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; padding:30px; } /* Overlay ------------ */ .mfp-fade.mfp-bg { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { /* animate in */ opacity:0.8; } .mfp-fade.mfp-bg.mfp-removing { /* animate out */ opacity:0; } /* Content ------------ */ .mfp-fade.mfp-wrap .mfp-content { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { /* animate it */ opacity:1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { /* animate out */ opacity:0; } Of course, from here you can change everything you need for it to honor its name and be magnific!   Main photo: Noah Buscher
Diana tiro con arco olimpico representado el remarketing de Google
Google remarketing is a powerful tool for displaying AdWords ads to visitors to our web site based on a set of rules that can be customized. The drupal webform module is one of the most used, especially to create contact forms, information requests, registrations, etc. In this article we will explain how to make a module that allows us to remarket to users who have submitted a form with a specific value selected, which will create a callback in our module responsible for creating the webform submission confirmation url, including only a single parameter of product, service or topic on which we want to remarket.  We will use as an example a webform that has a product selection component in which there are 3 options: 1 | Premium 2 | Advanced 3 | Basic The aim is for the webform submission confirmation page to include the selection code for which the user has requested information, so that we can configure our AdWords product knowing what the user is interested in. To do this, we will set a confirmation page with a fixed part and a second dynamic part, including the selected product from the webform, so the possible URLs in our example would be: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 We must additionally configure the webform to use a custom URL that we create as the confirmation page and add it to the parameters that the user has selected on the form. The first thing to do is create the module, in Drupal's hook_menu, which will provide a custom URL and callback to handle these requests. We will call our example "webform_remarketing." /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Once we have created the menu, we need to add the function defined in the callback page that will provide the content for display on screen: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } This function is an example for teaching purposes, so it just shows a simple message.  Logically, it's common to want to show more content, so it's good to remember that all content displayed to the user should use a theming feature so it can be easily modified by the site developer. The next step we need to take is to modify the configuration webform to use the confirmation page that we created in our module and pass the value selected by the user.  To do this, edit the webform options in the "form settings" tab.  Among other options, there is a section called "address redirection" which offers 3 options.  We need to select "Custom URL" and enter the URL that we defined in our module and make the webform correctly pass to the second part of the URL the value set by the user in the product selection component.  For this we use the corresponding token, which in this case would be [submission: values :?] where the “?” must be replaced by the form_key of the component.   Assuming that the value is “product," what we should put in this field would be: envio-realizado/[submission:values:producto] With this, we have achieved our goal.  When a user fills out the form and requests information about a product, the confirmation URL includes the code for that product, so we can configure remarketing using these URLs in AdWords and set our campaigns.
Aplicando Parches a módulos drupal desde Mac OS X
The software required to apply patches onto any Drupal module comes by default on every version of Mac OS X. It is the patch command which must be launched from the command line through the Terminal.app    Applying patches through Terminal.app The first thing to do is a backup of the patch to be applied (i.e. ejemploparche.patch) and copy it over to the same folder where the .module file lives. Once this is done, check that the patch to be applied and the module are the same version by opening both files with a text editor and double-checking the review numbers. Review numbers look like this: diff -u -r1.51 example.module This command will search for version 1.51 of the example module. If the version number is different than the expected one, several error messages will be displayed in the command line and you will cry in front of your Mac. If the version number coincides, we can proceed. Open the Terminal.app (Application/Utilities). A window will popup with something like this: Last login: Fri Nov 14 08:56:19 on console Ordenador-de-pepe:~ admin$ Using the cd command (change directory) browse to the folder where both the module and the patch live in (i.e. "cd ~/Users/Sites/Misitiodrupal/sites/all/modules/example_module/") Tip: you can drag & drop a file or folder from Finder to the terminal window and the path will auto complete. Basically you only need to type “cd” (with a final space) and drop the folder where the module & patch live and then press Enter. Once you are in the correct folder, run the following command but replacing the name of the patch with the name of your patch: $ patch < ejemploparche.patch (NB: do not type the $ sign, this is only to show you how the command will look like I the command line) That’s it! The original module is patched and ready to be used.
How can we help?Get in touch