Thank You
We appreciate your inquiry. We'll be in contact soon.
Showing 1001-1020 of 1485 results
More information
this lesson, we'll configure Webform content type defaults and add our first Webform node.
Additional resources
More information
In this series, Amber will show you how she gathered her wedding invitation responses on a Drupal site using Webform module. You'll learn how to:
- Collect data from users
- Build common types of form fields (including text fields, numeric inputs, and radio button option lists)
- View, export, and analyze those responses
- Automatically email responses as they're submitted
Understanding the basics of Webform empowers you to create your own custom forms such as surveys, feedback forms or your very own RSVP form. Dive in and learn the basics of Webform.
PSD to Theme FAQ
On January 14, 2014, Emma hosted a webinar. Although the recording is not available, we hope you find this follow up FAQ useful as a companion to her learning series PSD to Theme
Q: You mentioned Susy for the Drupalize.Me project. Why did you choose this framework? Did you consider any others?
A: We had originally planned to use Zen Grids for our framework, but our designer had already mocked up his designs with Susy. It would have been too time consuming to rebuild the working prototype with a different framework, so we decided to take the easy path and just switch our theme to use Susy. Note: prototyping is GREAT! This doesn't mean that you must use only one framework from start to finish. I just mean for our time line and resources, it was more efficient to stick with the same framework as the HTML prototype.
Q: What is the best Sass framework? Zen Grids, Susy, Foundation, Bootstrap...
A: Every single framework has great qualities about it. You should choose the one which feels most natural to you and/or your support network knows and uses. (Having access to help is important!) If you're not sure where to start, I recommend picking a base theme first, and then learning how to use the framework which comes with that base theme. e.g. if you pick Zen, choose Zen Grids as your grid framework for rapid prototyping. Do your research and talk to your team. They may already have favorites.
Q: If you have multiple designers working on a site, wouldn't everyone need to be using Sass/Compass?
A: I recommend having a text-based style guide which is separate from your theme (ideally your style guide would be built from your theme's files; but the technology is not ready yet). If you are using Sass, everyone working on the project must commit to all editing ONLY the Sass files (not the Sass and CSS files). There are lots of helper tools you can use to make building CSS from Sass a lot easier. We have a video series on Sass. If you're thinking about adopting Sass I highly recommend you watch the Sass and Compass video tutorials. There are ways you can include CSS edits in your theme, but this ends up being a headache to maintain long term. You're better to invest the time in getting everyone using Sass / Compass rather than spend the time later refactoring CSS files. (Unless you love refactoring based on git diff...whatever floats your boat!)
Q: I've heard setting up compass is really complicated, so I've avoided it. Any tips?
A: It's not that hard, promise! We cover installation instructions in the Install Compass video. If you prefer a GUI, we cover that too! You can watch the Install Scout video.
Q: What was the name of your book?
A: Front End Drupal (covers Drupal 6). Drupal User's Guide (covers Drupal 7).
Q: If Photoshop isn't the best tool from design to front end, then what is?
A: Photoshop is the PERFECT tool for designers who think best with Photoshop. Some prefer pencil and paper to make their ideas....the IDEA CREATION tool is up to the designer. Photoshop is not always the best tool for mock-up approval with stakeholders as it does not allow you to prototype (or demonstrate) how components will behave in the context of one another. We liked working in components instead of pages. This way the designer could quickly mockup how a component looked in a specific context; rather than this is how an entire page worked at a width of 799pixels, 798 pixels, 797 pixels, 800 pixels, 801 pixels (you get the picture, right?). We need to think about the process though when choosing formats. Designers may do their best creative work in Photoshop, but then ... somehow ... we need to convert that to a theme. I think the best tool for this is a TEXT-based description of the components with screen shots (or little square images) of how that component looks in different contexts. i.e. how does this component look at each break point.
Q: Is LESS the same as Sass?
A: Basically, yes. Sass has some nifty math tricks which allow you to do math with different units (e.g. 20em - 12px). We have a video which discusses the differences of Sass vs LESS.
Q: I was working with LESS but got frustrated and abandoned it since adding classes in Drupal forms makes a lot of spaghetti code... Any idea how to improve whole process of making theme with SASS?
A: Components. Components. Components. Start with the Theming by Component video.
Q: Do you determine components through design or wireframes?
A: Yes. :-) Think of a component as a piece of furniture. It's anything you could pick up and move to a different location. Often there is a direct correlation with a Drupal site building technique: image style, view mode for a content type, a block, etc. You probably have a list of things you need to build for your client, which all get put into a wireframe and then a complete design. Maybe your complete design is an HTML prototype, maybe it's a static PSD file. There are LOTS of variables here, and not many hard rules. That's why I like to think of a component as "furniture" or "anything I can draw a box around" (as opposed to a wiggly shape). If you haven't already watched it, you'll want to watch the Theming by Component video.
Q: I love the idea of variables in css. how much time can i expect to begin using sass in Drupal as a novice themer who has never used it before?
A: The Sass and Compass learning series is about 2.5 hours. The PSD to Theme series is a little less than 3 hours. I think if you can spend a day watching these videos, you'll be ready!
Q: What theming changes are you most excited about in Drupal 8 and why?
A: CSS coding conventions and the massive theme system overhaul prompted by the Twig initiative. Don't get me wrong, Twig is pretty cool, but I'm most excited about the clean-up. I like things to be neat and tidy. :-)
Q: On a core Drupal 7 site, what are the basic steps to get Sass in place?
A: Sass and Drupal are somewhat independent. Drupal doesn't really speak Sass if everything is working correctly, it uses rendered Sass (aka CSS). The PSD to Theme series has information on creating CSS stub files, and layout rules. The series works best if you watch it in order, so you might want to start at the beginning and at least watch the first few minutes of the videos which come earlier to have things in context.
Q: So to come back on the base theme what makes you decide to use a base theme or build your own theme from scratch.
A: Base themes are such a hot topic! There are two VERY LONG answers to this. One is a presentation that I did at Munich (Evaluating Base Themes); the other is a Drupalize.Me podcast that I was a guest on. Short answer: it depends.
Q: So Using a base theme to start and then create your own theme using SMACSS and @extend base theme classes is a legitimate Drupal theming process?
A: Micah would say "yes"; Jesper would say "no". You can watch their DrupalCon presentations and decide for yourself. :-) Generally I agree with Jesper, but it does add an extra layer of headache going through and making Drupal do what you want...and it's a headache the client will rarely pay for.
Q: What did you use to make your presentation?
A: reveal.js. You can get the code for this exact presentation in our GitHub project.
Q: Any tips for talking down clients who are looking for every page to be designed in Photoshop and for the website to be the pixel-perfect representation of those PSD files?
A: Get to the root of their concern by using the "5 Whys", and maybe show them a picture like this:
(http://wcetblog.files.wordpress.com/2013/12/overwhelmed-by-devices-by-l…)
Q: How do you handle responsive elements from PSD to Drupal?
A: Conversation and pattern libraries. I talk more about pattern libraries in the Theming by Component video.
Q: Do you use automated tool to slice and export PSD files?
A: I never do anything automated with cutting up images. Ever. I extract the assets I want from my design files. You can watch my video for this process in the Extract Design Assets video.
Q: Should we buy the SMACSS book?
A: If you want to support the work Jonathan is doing, yes! If you just want the information, start with the free Drupal resources. The Drupal 8 CSS Coding Standards can be applied to Drupal 7 sites today.
Q: Can you recommend a Sass editor with syntax highlighting?
A: I use Sublime Text in the videos as we find it to be the most accessible, cross-platform text editor. I use Vim for my normal development work.
We hope you found the webinar, and this FAQ, useful and hope you'll consider becoming a member of Drupalize.Me so that you can take advantage of our extended videos on Sass and Compass, and PSD to Theme. Our pricing plans are appropriate for individuals and organizations. Click here for more details.
More information
A theme is comprised of a collection of related files. Our completed theme will have CSS and PHP (with HTML fragments). To ensure all of these files are loaded, we need to tell Drupal where to find them, by listing the files in the theme's .info file. To begin working with our theme's info file we'll start with the only values which are required: name, version of Drupal core this theme can be applied to. We'll also add a few recommended pieces of information: description of the theme, the template engine, and a screen shot for easier selection of the theme from the administrative area. By the end of this lesson, you will be able to create an info file for a theme, and explore the relevant drupal.org handbook pages for more information on refining your theme's info file.
More information
Our main focus for the Domicile theme is restyling Drupal's markup with CSS. Although it is tempting to put all of your CSS into a single file, things can quickly grow out of control. In our theme we'll break our CSS into smaller stub files to make the theme easier to maintain using the file naming conventions for Drupal 8.By the end of this lesson you will be able to incorporate CSS files into your theme via the theme's .info file.
Additional resources
More information
Drupal uses a series of nested template files to build out the rendered HTML pages we see in our browser. The template file page.tpl.php holds markup between <body> and </body> tags. We talked about the nested nature of template files in Lesson 3: Theming by Component.
In this lesson we will:
- create the file page.tpl.php
- add the relevant markup, and CSS classes for our grid framework
- insert relevant PHP variables so that Drupal can render each of its page components.
By the end of this lesson you will be able to create, or adapt, a page.tpl.php file to suit the conventions you identified in your style guide.
More information
Designs often have a few elements which don't need to be easily edited and can essentially be "hard wired" into the template files. In our design there are three or four images which fall into this category. In this lesson we'll edit the page.tpl.php file to insert our design assets from Lesson 5: Extract Design Assets. By the end of this lesson you will know which variables can be used in a template file to ensure the correct directory is always used for hard-coded image files.
More information
Technically a theme can be installed onto any Drupal site, but it never quite works this way in real life. In this lesson we'll create a playground so that we can try out our theme before deploying it to a live server. We'll start by installing Drupal and adding some “fake” content and menus with the devel generate module. For these tasks we'll use Drupal's default theme, Bartik. By the end of this lesson you will be able to install Drupal in an environment where a development version of the theme can be safely tested.
Additional resources
More information
One of the most time consuming things a content editor can be forced to do is resize images before creating their content. Fortunately we can get Drupal to do the resizing for us. It's not perfect—it's just a plain resize, but it's enough for most basic sites. By the end of this lesson, you will be able to configure Drupal to resize images to your specification when they are uploaded using the image field type.
More information
It's pretty typical for a site to have one or two pieces of content that need to be easily edited, but also aren't nodes. For example: text in the footer. There are a number of ways to create this content. We'll use blocks to create this content as this is the easiest way to place content into a specific region without additional helper module. By the end of this lesson you will be able to create custom blocks, and place them into specific regions within your Drupal theme.
More information
A base theme is someone's idea of a really great starting point. It might include the stub files for CSS overrides, template files which bring Drupal core's markup up-to-date with HTML5, useful theme overrides which create new template variables. In other words: a base theme can provide you with a lot of really great stuff! The first version of the Domicile Theme used the NineSixty base theme—just enough for a simple site, but not so much overhead that it was complicated to learn. This version of the theme doesn't use a base theme. That's because, thanks to Sass, we'll be able to get almost all of the power of the NineSixty base theme through a gem plug-in. In this lesson you will learn which folders are typically used to keep Drupal themes neat and tidy.
More information
This learning series covered just the tip of the theming iceberg. Hopefully you're now feeling motivated to learn even more about theming. In this lesson we will review some of the other topics you will want to explore next including: advanced theming techniques, using a base theme, such as Omega, layout modules. By the end of this lesson you will by able to identify which videos you should (or could) watch next to learn more about theming Drupal.
More information
To go from design to theme we worked through three major steps: building a style guide; building out Drupal; and finally applying the style guide to Drupal. In this lesson we'll review each of the steps outlined in this learning series:
- creating a style guide with base rules, layout rules, and component rules
- extracting design assets
- configuring Drupal
- creating theme files
- debugging components from within Drupal
By the end of this lesson you will be able to outline the process needed to transform a static design file into a functional Drupal theme.
More information
Once all of the elements are in place, it's time to get down to the real work of theming the components. In this lesson we will:
- use our style guide and checklist to find each component
- check to see if the style looks "right"
- troubleshoot broken styles so that each component looks as good as the designer's original, static files
By the end of this lesson you will be able to identify elements on a rendered Drupal page which do not have the correct styles applied, determine the source of the problem, and alter the markup or styles to correct the output displayed in a browser.
More information
Once your theme is uploaded you still need to enable it before it will be applied to your site. By the end of this lesson you will be able to enable new themes for your Drupal site.
More information
It's always smart to do your development work in a local environment, but eventually you will need to upload your theme your server. In this lesson we'll upload our theme to our web server using Filezilla. By the end of this lesson you will know which folder your theme needs to be uploaded to, and at least one application suitable for uploading files.
Additional resources
More information
The final step before we step back into Drupal is to create a checklist for all the things we need to implement in Drupal. Using our style guide as a starting point, we'll ensure that every design decision which has been made can be implemented in Drupal. Your checklist might also include notes about which modules should be used to build each of the components from within Drupal. Creating a checklist might seem like a trivial task, but it's really important that you know exactly what you're about to build so that you don't get overwhelmed once you step into Drupal. By the end of this lesson you should be able to create a document with all the instructions, and notes you will need to apply your style guide to a Drupal site.
More information
In SMACSS there are both major and minor layout rules that need to be created. The major layout rules are often handled by a grid framework and are used to describe big areas on your site, such as your Drupal regions. The minor rules are used for the components (for example how a picture aligns next to a paragraph of text). In this lesson we'll start by review how Sass allows us to use semantic naming for our CSS layout classes. Then we'll adapt the sample Sass provided by the 960 Compass Plugin so that it uses the necessary structure for our design.
By the end of this lesson, you will be able to implement the layout rules from your style guide as a Sass file using the 960 Compass Plugin as a reference.
Additional resources
More information
In this lesson we will convert the style guide into a series of stubs which we can view in a Web browser. The design was originally created using the templates from the 960gs. We'll use this same grid framework to ensure all of our margins are automatically adopted. Grid frameworks are excellent for rapid prototyping of designs. Ultimately many front end developers choose choose to write their own for the final theme; however, if you're just getting started try to stick with a grid framework to reduce the number of things that you need to fight with.
The original theme that was created for this design used the NineSixty base theme. There are some nifty features in this theme which are great for more complex designs; however, it is not responsive, and does not use Sass. To bring the lessons up-to-date we'll be using the 960-Compass Plugin to generate our stub files and give us some sample Sass output to work with.
By the end of this lesson you will be able to convert a style guide to a series of stub files in Sass (or CSS) using SMACSS conventions and a grid framework.
Additional resources
SMACSS (Scalable and Modular Architecture for CSS)