Seven is a Responsive HTML5 & CSS3 Drupal theme for creating Business, Corporate, Agency and Freelance websites. It includes a lot of features you can easily setup to get your site 99% ready in just a few minutes.
It includes 7 different Home Pages and slides with over 25 jQuery effects each, a fully responsive 4 level layout (try resizing your browser) for iPhone and Smartphones in both portrait and landscape mode, iPad and tablet and desktop screen, 4 different products portfolios, a blog, a wide social media + Google Maps integration and many more you can read on a detailed list. It also includes a wide set of blocks, views, docs, modules and features packaged with an easy 5 steps installation via the "Next, next ..." format.
This theme was built containing a lot of SEO best practices. It uses, in every View & Content Page, semantically valid HTML code and CSS so search engines can index them easily. Headlines are where they should be (h1, h2, h3, h4, etc.) depending on the View hierarchy.
The most important feature of Seven is the completely responsive 4 level layout for Smartphones, tablets, iPhones, iPads and desktop computers. You can test it resizing your browser.
The most notable features of Seven are:
The package contains all the files needed to have a completely functional Seven's installation on your webserver in minutes and start editing all the sample content. Listing all of them, package contains:
Seven 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 seven_v1.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 "seven". 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 seven's folder was created.. I'll use as example the name "seven" due to the default folder. It would be on "http://localhost/seven" in case you installed it locally or "http://yourdomain.com/seven" in a remote installation.
3. Select Seven as your installation profile on the "Select an installation profile" page and then click "Save and Continue".
4. Select your language on the "Choose language" page and then click "Save and Continue" by default, the theme is English Based.
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.
6. Configure your site basic info on the "Configure Site" page and then click "Save and Continue". Wait a little bit, until all Seven features are configured.
7. Congrats, there's your purchase. Enjoy it, and most of all, check out the red tags :D.
As Seven is a responsive theme, is considered a good practice to use different logos for Desktop and Mobile devices. Seven has 2 sample logos you can replace with your own. Is very important to respect the sample sizes, due to layout balance.
The PNG files with the logos are:
For replacing them with your own, you only need to browse the folder "/sites/all/themes/seven and there you'll find both files. It's done.
There's also another way of changing ONLY the "logo.png" file. You have to follow these steps:
1. Browse to http://yourdomain.com/seven/admin/appearance/settings/seven Scroll down to the section named "Logo image settings".
2. Unset the checkbox called "Use the default logo".
3. Browse for your logo File locally . Once you find it, select it, and click Save Configuration at the bottom of the page. It will be uploaded to your webserver and will replace the default one. It's done again.
Seven allows you to set one of the 7 different Home page it includes. Changing it is very simple, so you have to follow these steps:
1 - Browse to http://yourdomain.com/seven/admin/config/system/site-information.
2 - Under the FRONT PAGE section, just set the home you want following this pattern: "home-variant-#" (excluding the quotes )where # is between 1 and 7, corresponding to your desired home. I think It's done.
Working with the Home Sliders included on Seven is very simple. They doe 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:
As mentioned before, all 7 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:
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:
2 - Once you're there, scroll down to the "Cycle Options" frame.
2. Once there, you can select one of the available 27 effects, define the transition duration, the time between each effect, etc.
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.
4. Click Save button at the upper right corner of the page. It's done.
Twitter and Facebook are awesome ways to get conected with your visitors, clients and friends. Seven 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:
1 - Browse to http://yourdomain.com/admin/structure/block/manage/twitter_block/default/configure
2 - Once there, set your Twitter Username and Save. It's done.
1 - Browse to http://yourdomain.com/admin/structure/widgets/sets/edit/facebook-like-box/elements/5
2 - Once there, set your Facebook Page URL and Save. It's done.
All your Blog post and Products can be shared via +300 social resources including Facebook, Twitter, Flickr, Youtube, Digg and many many more. It will appear automatically over your posts and your portfolio items.
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:
Seven 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.
1 - Download the Drupal core translation of your language. You can get it from : http://localize.drupal.org/ . It's just a *.po file
2 - Browse to http://yourdomain.com/admin/modules and enable Locale module
3 - Once enabled browse to http://yourdomain.com/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 http://yourdomain.com/admin/config/regional/translate and set your language as default. Save your configuration. Done!. Your site is now in your language!
Seven 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.
All URLs can be internacianlized via PathAuto module. You can configure it at:
If you're an advanced theme developer or want to know how to extend Seven, you should read this:
Seven inherits all the layout files from Zen Base Theme for Drupal 7, but 2: node.tpl.php and html.tpl.php. Here's why:
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.
The html.tpl.php file is used for the double body technique by adding a second main wrapper, the IE8 Shiv for HTML5 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.
Seven's CSS files are located at /sites/all/themes/seven_doublemthemes/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:
/* * 7 Seven Premium Theme v1.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 /* * 7 Seven Premium Theme v1.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 /* * 7 Seven Premium Theme v1.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 /* * 7 Seven Premium Theme v1.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 /* * 7 Seven Premium Theme v1.0 * General Layout & Theme Styles */ seven-common.css /* * 7 Seven Premium Theme v1.0 * General Color Styles */ seven_colors.css
Internet Explorer is an special topic everyday :( . Seven supports IE8 and IE9, with an special style sheet for them. You can find them at /sites/all/themes/seven_doublemthemes/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.
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.
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.
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. ;)
To solve it, follow these steps:
1. Browse to http://yourdomain.com/seven/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!
Not a problem, just I recommend you to follow these steps:
1. Browse to http://yourdomain.com/seven/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.
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!