1. Start
  2. Change Log
  3. Theme Overview
  4. Installing Sencillo
  5. Change Default Theme (Variant)
  6. Change Site Logo
  7. Change Site Slogan
  8. Changing the Home Slide
  9. Changing the Slide Effect
  10. Changing Welcome Message
  11. Understanding Albums and Portfolios
  12. Setup your Social Profiles (Follow Us icons)
  13. Latest Tweets and Facebook Like
  14. Internationalization Instructions
  15. Watermarking
  16. jQuery Colorbox Variant
  17. Changing Theme Fonts
  18. Advanced Theme Development
  19. Internet Explorer
  20. Additional Information
  21. Sources and Credits
  22. Post Installation FAQs

Sencillo Documentation - Responsive Creative & Portfolio Drupal Theme for creating Photography Portfolios, Creative Showcases, Artists/Designers Websites and eGalleries

Change Log

V 2.2.38 July 14th, 2015

V 2.2.37 May 16th, 2015

V 2.2.36 April 6th, 2015

V 2.2.34 January 18th, 2015

V 2.2.34 December 17th, 2014

V 2.2.34 December 7th, 2014

V 2.2.33 November 7th, 2014

V 2.2.32 October 16th, 2014

V 2.2.31 August 8th, 2014

V 2.2.30 August 1st, 2014

V 2.2.29 July 16th, 2014

V 2.2.28 June 14th, 2014

Change Log

V 2.2.24 November 26, 2013

Change Log

V 2.1.22 April 5, 2013

V 2.0 August 3, 2012

V 1.0 February 10, 2012

Theme Overview

Sencillo is a Drupal theme conceibed for Creative and Online Porfolio presentation. In this sample page and on the rest of them, you'll find a lot of features that describe the theme functionality, behavior and internal characteristics.

spacer

3 Theme Variants

Sencillo, since version 1.0, released on February 2012, includes 3 theme variants 100% compatible with all theme features. This means you can change your theme look to give it a totally fresh look with just few clicks.

spacer

All 3 variants are 100% fully responsive layouts compatible with iPhone/Android devices on Portrait mode (320px wide), iPhone/Android devices on Landscape mode (480px wide), iPad and Tablet PC (768px wide) and common desktop screens (+960 px).

Each variant is a completelly separated theme you can optionally port to reduce the ammount of diskspace on your Drupal installation in case you need it.

Main Theme Features

These are the main internal features included on Sencillo. Mosth of them are automatic behaviors, social resources integration and theme variants authors can get the most of such as watermarking and automatic image generation.

Portfolios and Albums Features

Portfolios are the main core of the Creative foundation of Sencillo. They hold the author content and present it to the world in many ways. In version 2.0 a new concept is introduced: the Album. It does allows authors to organize their work and provide visitors a great way of browsing it.

Typography Features

All the complementary enhacements the theme includes for supporting the traditional content, contact forms for visitors messaging and general typography configuration.

Fully Responsive Layout

The most important feature of Sencillo is the completely responsive 4 level layout for Smartphones, tablets, iPhones, iPads and desktop computers. You can test it resizing your browser.

Theme Features

The most notable features of Sencillo are:

Drupal Modules Used

Additional features

What will you get if you purchase this item?

The package contains all the files needed to have a completely functional Sencillo's installation on your webserver in minutes and start editing all the sample content. Listing all of them, package contains:

Installing Sencillo

Sencillo is created over an installation profile, so you don't need to do much to get it working. Following steps will guide you trough the installation process.

1. Extract sencillo_v2.zip file on your web server. It includes all you need to get it working, so don't worry about any other files handle.

The location of your installation depends on the kind of server you're using. I mention some examples here you may be:

Once you extract it, it will be located on a folder called "sencillo". You can change it and place your new theme name there.

2. Using a Web Browser, navigate to your folder/domain/subdomain where the extracted sencillo's folder was created.. I'll use as example the name "sencillo" due to the default folder. It would be on "localhost/sencillo" in case you installed it locally or "yourdomain.com/sencillo" in a remote installation.

3. Select Sencillo as your installation profile on the "Select an installation profile" page and then click "Save and Continue".

spacer

4. Select your language on the "Choose language" page and then click "Save and Continue" by default, the theme is English Based.

spacer

5. Setup your database info on the "Database configuration" page and then click "Save and Continue". If you haven't created it yet, do it via phpMyAdmin or any other MySQL configuration app. Once you continue, the installation process will begin. Please, be a little bit patient.

spacer spacer

6. Configure your site basic info on the "Configure Site" page and then click "Save and Continue". Wait a little bit, until all Sencillo's features are configured.

spacer

7. Congrats, there's your purchase. Enjoy it, and most of all, check out the red tags :D.

spacer

IMPORTANT NOTE: If you experience any issue during installation, please read the Post Installation FAQs. If you don't solve your issue there, then get into our forums.

Change Default Theme

The first thing you'll want to do is to check the themes. Here I show you how:

spacer

1. Browse to yourdomain.com/sencillo/admin/appearance/. Once there, you'll see the 3 themes. "Sencillo Clean" will be the first one and the default.

2. Click on "Set Default" link for the theme you want to enable. It's done.

Change Site Slogan

Site Slogan is an optional part of your theme. If you want to clear it or just change it, follow these steps:

spacer

1. Browse to yourdomain.com/sencillo/admin/config/system/site-information Scroll down to the section named "Site details" and there you'll find the "Slogan Text Field".

spacer

2. Edit it. Then click "Save Configuration". It's done.

Changing Home Slide

spacer

All Home Slides are blocks. The 3 slides are on different blocks and the idea is to have ONLY ONE of them at the Home Page, so this is how you select which one will be :D

1. Browse to yourdomain.com/sencillo/admin/structure/block and check out the Blocks located on Highlighted section. Those are the 3 blocks at the home page. The first one is the current Slide.

This is Slides organization:

2. Remove the Block "Portfolio Slideshow 2" and place another one and then click Save Blocks.

3. Once the page is reloaded, reorganize the blocks located on Highlighted section, so the SlideShow remains as the first. Then then click Save Blocks again. It's done.

4. Go to your Home Page. :D

Changing the Slide Effect

Working with the Home Sliders included on Sencillo is very simple. They do all the job automatically for you: thumbnails generation, sliding, responsive layout for mobile devices and so. Anyway, there are a few things you can do to customize it. Following are a set of tips you'll need to know to work with it:

Responsive for usability

As mentioned before, all 3 Home Slides will addapt to fit your visitors device, so they can handle, control it and still browse your features slide content. This is an automatic behavior you don't need to set up. It's already done as you can preview in the following picture:

spacer

Choosing one of the 27 jQuery transition Effects and setting up the transition delay

You can quickly change jQuery effect on any of the Home Slides just by following these steps:

1. Depending on the Home Page you want, browse to:

Home Variant 1 Slideshow
Home Variant 2 Slideshow
Home Variant 3 Slideshow

2 - Once you're there, scroll down to the "Cycle Options" frame.

spacer

2. Once there, you can select one of the available 27 effects, define the transition duration, the time between each effect, etc.

spacer

3. Click Apply at the bottom of the page. Then, you'll be redirected to the "Slideshow View Page". Be careful to not touch View Related preferences to avoid unstable results if you're not an advanced Drupal user.

spacer

4. Click Save button at the upper right corner of the page. It's done.

Changing Welcome Message

Welcome Message is the one your visitors see once they get into the site and get the first impresions. It is also SEO optimized, so, a great "welcome message" is very important. Changing it is very simple. As show in the following image, once you're logged in as admin, you roll over the block and the contextual edit options will appear.

spacer

1. Browse to your home page yourdomain.com/sencillo/ and click on the Configure Block option.

2. Replace the fill text with your own and then click "Save Block". It's done.

Understanding Albums and Portfolios

Sencillo 2.0 includes a new concept: the Album. An album is just a group of Portfolio items that can be arranged together and classified as Web Design, Photography, Family or anything you want.

In Sencillo, an album is no more than a Taxonomy Term associated to a Portfolio Item content type. Following images demonstrate how does Albums Views work and how to create new Albums.

Creating a New Album

1. Browse to your home page yourdomain.com/sencillo/admin/structure/taxonomy/tags/add.

spacer

There you can set the Title, if the Album is Featured (appears at the Home Page) and the Album description that will be shown when you're exploring the items of the Album.

Ordering Albums

As you can create your albums, you can also reorder the way they will appear on the Featured Home Block and on the Albums Browser View.

spacer

1. Browse to your home page yourdomain.com/sencillo/admin/structure/taxonomy/tags.

2. Drag and reorder your albums. Then just save.

Place Items on Albums

This is very simple. Adding an item to an album consist only on choosing the Album on the Portfolio Item Edit Page as followin image shows:

spacer

1. Edit/Create the item you want.

2. Select the Album Name from the Albums options list. Then just save.

Set the Album Cover

When you add items to an Album, the album cover will be automatically choosen from the recent item, but you can choose wich one will be used as the first one:

1. Edit/Create the item you want.

spacer

2. Set it as "Sticky at top of lists" under the "Publishing Options", right at the end of the Edit Page of a Portfolio Item. Then Save the Item.

spacer

Featured Albums

For layout balance purposes, is strongly recommended to promote 3 or 6 Albums at the Home Page. Using less or different values would create whitespaces that might affect visual balance of the site.

spacer

Setup your Social Profiles (Follow Us icons)

Setting up your social profiles is simple. Just follow these steps:

1 - Browse to yourdomain.com/sencillo/admin/config/media/socialmedia.

spacer

2 - Once there, check the "Site Platforms" you want to use.

3 - Save the Page.

spacer

4 - Browse to yourdomain.com/sencillo/admin/config/media/socialmedia/profiles.

5 - Setup your accounts usernames and pages. Once you finish, just Save the page. It's done.

Latest Tweets and Facebook Like

Twitter and Facebook are awesome ways to get conected with your visitors, clients and friends. Sencillo includes 3 of the most populars ways to share and integrate your site with Facebook, Twitter and +300 social resources.

Following features are totally responsive and can be easily configure site wide if you follow these steps:

Latest Tweets on the Footer

1 - Browse to yourdomain.com/sencillo/admin/structure/block/manage/twitter_block/default/configure

spacer

2 - Once there, set your Twitter Username and Save. It's done.

spacer

Facebook Like (sidebar Block)

1 - Browse to yourdomain.com/sencillo/admin/structure/widgets/sets/edit/facebook-like-box/elements/5

spacer

2 - Once there, set your Facebook Page URL and Save. It's done.

spacer

Content Sharing

All your Albums can be shared via +300 social resources including Facebook, Twitter, Flickr, Youtube, Digg and many many more. The block can also be configured to appear on Blog Posts, specific pages and so.

spacer

Internationalization Instructions

Internationalizing a Drupal site is very simple. Resuming it, you only need to install a translation package and all Drupal core interface will change. Then some minor fixes for every language context, and your front-end site will be 100% translated to your desired language.

Here we explain how to:

Sencillo supports ANY Left to Right language you install from Drupal Translations. Of course, it depends of the level of translation of the ".po" files for the defined language, but most of them are very advanced.

Following are the steps required for translating the front-end interface language. The backend deppends on the modules your'e using, so here we only explain how to change the language of the "site side" visitors can see and, of course, the core functions of Drupal. The rest of the things are just content, so when you edit it on your desired language, it will be just addapted to it.

Translating Drupal Interface

1 - Download the Drupal core translation of your language. You can get it from : localize.drupal.org/ . It's just a *.po file

2 - Browse to yourdomain.com/sencillo/admin/modules and enable Locale module

3 - Once enabled browse to yourdomain.com/sencillo/admin/config/regional/translate/import/ and under the "Language File" tab, browse your .po file and select it.

4 - Select the language you're importing under the Import into select option.

5 - Just click Import Button. It will take some time 'cause importing +5000 words and phrases to databse will take some time.

6 - Once it's done browse to yourdomain.com/sencillo/admin/config/regional/translate and set your language as default. Save your configuration. Done!. Your site is now in your language!

Translating Sencillo Theme Specific Strings

Sencillo incorporates a set of strings on the prebuilt Views that can be easily changed following these links:

All tooltips of Social icons "Visit ### on Twitter" should be changed directly on the file: "sites/all/modules/socialmedia/socialmedia.widgets.inc" searching by the string "Visit". Unfortunatelly, the module isn't translated, so this is the way to do it.

Watermarking

Watermarking is one of the new Features included on Sencillo. All watermarks are pasted phisically and automatically on every maximized picture. It allows you also to upload huge images and Drupal automatically resizes it to web screen limits, increasing bandwith performance and decreasing unnecesary file sizes.

spacer

The watermarking process is very simple: Drupal pastes a transparent PNG image over the fullscreen images aligned to one of the corners.

Changing the PNG Watermark

Sencillo includes a simple watermark.png file you can just replace with your own. So, if you want to place your own watermark follow these steps:

1 - Replace the file watermark.png located under sites/default/files .

2 - Delete the folder sites/default/files/styles for cleaning all the cache images generated file.

3 - Reload any Portfolio view and click on any image to maximize it. It will generate the new image with the new watermark for cleaning all the cache images generated file.

Changing the Watermark Position

Once you’ve changed the watermark, you can change the relative position where it appears. Just follow these steps:

1 - Browse to yourdomain.com/sencillo/admin/config/media/image-styles/edit/full_screen_image_960x960/effects/13 .

spacer

2 - Once there you can use the offset values to move it.

Removing the Watermark

If you don’t want to include any watermark on your fullscreen images, follow these steps:

1 - Browse to yourdomain.com/sencillo/admin/config/media/image-styles/edit/full_screen_image_960x960/effects/13/delete .

2 - Just to confirm, click Delete.

jQuery Colorbox Variant

Changing the jQuery Colorbox Variant is very simple:

1 - Browse to yourdomain.com/sencillo/admin/config/media/colorbox .

spacer

2 - Change the Style under the "Styles and options" option.

Changing Theme Fonts

Sencillo includes an awesome Drupal Module called Font Your Face that allows you to use CSS3 webfonts on your themes. It's really easy to use:

1 - Browse to yourdomain.com/sencillo/admin/appearance/fontyourface/browse/. There you can enable any font you want.

spacer

2 - Once you enable a font browse to yourdomain.com/sencillo/admin/appearance/fontyourface and set the CSS selector you want. I strongly recommend keeping the ones included on Sencillo: One Font for "everything (body)" and the other one for : "h2.block-title, .welcome, h1.title, h3.comment-title".

Advanced Theme Development

If you're an advanced theme developer or want to know how to extend Sencillo, you should read this:

HTML Layout Files

Sencillo inherits all the layout files from Zen Base Theme for Drupal 7, but 2: page.tpl.php and html.tpl.php. Here's why:

page.tpl.php

The page.tpl.php file contains the main page layout for theme pages, including Views and content type's pages. I edited it to remove the default menu Zen has. It's much better to use it as a Block. Also to addapt major HTML5 tags replacing the old holders included on Zen.

html.tpl.php

The html.tpl.php file is used for the double body technique by adding a second main wrapper and the META viewport tag for iPhone/iPad devices to show the site at 100% of scale. Essentially, it's a responsive layout requirement feature.

The rest of the files are just "View specific" layouts.

CSS Files

Sencillo's CSS files are located at /sites/all/themes/SENCILLO-VARIANT/css folder. They're all "section commented" so you can find each section easily. Following, the main CSS files of the theme and a comment with it's purpose:

    /*
	 *	Sencillo Premium Theme v2.0
	 *	Media Layout for MaxDeviceWidth 320px
	 *	
	 *  This stylesheet works only on a 320px width device. i.e. an iPhone on Portrait mode.
	 */
	
	 responsive-mobile-portrait-layout.css
	
	
	/*
	 *	Sencillo Premium Theme v2.0
	 *	Media Layout for MaxDeviceWidth 480px
	 *	
	 *  This stylesheet works only on a 480px width device. i.e. an iPhone on Landscape mode.
	 */
	
	 responsive-mobile-landscape-layout.css
	
		
	/*
	 *	Sencillo Premium Theme v2.0
	 *	Media Layout for MaxDeviceWidth 768px
	 *	
	 *  This stylesheet works only on a 768px width device. i.e. an iPad on Portrait mode.
	 */
	
	 responsive-tablet-layout.css
	
	
	/*
	 *	Sencillo Premium Theme v2.0
	 *	Media Layout for MinDeviceWidth 960px
	 *	
	 *  This stylesheet works only on a minimal 960px width device. i.e. desktop Mac or PC.
	 */
	 
	 responsive-screen-layout.css	
	 
	 
	 
	 /*
	 *	Sencillo Premium Theme v2.0
	 *	Media Layout for MinDeviceWidth 1100px
	 *	
	 *  This stylesheet works only on a minimal 1100px width device. i.e. widescreen monitors on desktop Mac or PC.
	 */
	 
	 responsive-wide-layout.css

Internet Explorer

Internet Explorer is an special topic everyday :( . Sencillo supports IE8 and IE9, with an special style sheet for them. You can find them at /sites/all/themes/SENCILLO-VARIANT/css folder.

So please, if you find any bug or issue, contact us and we'll get it up to date as soon as posible and send it to you free of charge.

Additional Information

This site has been tested in all the following browsers, the only major difference is the rendering of rounded corners.

The browsers tested are:

If you have any problem and want to contact me do it via the Support forums.

Support can take up to 48 hours (except during holidays, it can be more during those periods), and I usually need to see the problem so don't hesitate to send me a link with a description of your problem.

Sources and Credits

I've used the following resources:

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. We'll do our best to assist.

DoubleMThemes

Post Installation FAQs

Following are a set of questions and answers to common issues that Drupal begginers have. I placed them here to allow you to keep on your "site setup" process and don't need to break your head off searching in our forums or in Google. ;)

Temporary Folder

I'm receiving an error on my admin section wich says "Warning: fileowner() [function.fileowner]: stat failed for temporary://update_OebWV9 in update_manager_local_transfers_allowed() (line 912 of SOMEPATH)." or "Warning: move_uploaded_file(temporary://FILE) [function.move-uploaded-file]: failed to open stream: "DrupalTemporaryStreamWrapper::stream_open" call failed in drupal_move_uploaded_file() (line 1601 of SOMEPATH"

To solve it, follow these steps:

1. Browse to yourdomain.com/sencillo/admin/config/media/file-system Logged in as admin.

2. Under the "Temporary directory" tag, just set:

Those are the common path to the temporary folders on the different OS. It depends, of course, of the location of the real one, but in 99% of cases, this will be the required value.

3. Click Save Configuration. Done!

New versions of Modules Available

I got a message saying "Some Drupal modules need to be updated" or "There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the available updates page for more information and to install your missing updates."

Not a problem, just I recommend you to follow these steps:

1. Browse to yourdomain.com/sencillo/admin/reports/updates/update Logged in as admin.

2. Update them all one by one. It will allow you to notice any issue, in case the compatibility results on an unstable behavior on your site.

If so, please take a look at the changelog of the module at the Drupal.org Modules site.

Installation didn't finished

My installation didn't completed. After step #6 I received an error messaje and then a white screen.

This issue ocurrs when your PHP.ini configuration cuts the installation process for security reasons. Usually, PHP has a 30 seconds timeout for any script, so while the database is beeing imported, it cuts down the process, so only a few tables are on your database. For solving it, follow these steps:

1. Extract your site once again on your web server. It will overwrite all files to start over again.

2. Using phpMyAdmin, drop all created tables. The same idea, start over again.

3. The most important step. Increase PHP.ini timeouts: For doing it, look for the php.ini file that rules your server. Once there, "search" for line where "max_execution_time" variable appears. 90 would be a better value.

4. Restart your Apache Server. It will apply the changes.

5. Start again the Installation Process. Done!

Related searches:
sencillo drupal layout browse slideshow
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.