NewsCenter Documentation - Responsive Magazine, Blog, NewsPaper and Community Drupal 7 Theme

Theme Overview

NewsCenter is a fully responsive Drupal 7 theme for creating blogs, online magazines, post or articles communities, newspapers websites, editorials and many more articles publishing sites.

NewsCenter responsive feature targets a special layout for iPhone/Android(in both Portrait & Landscape mode, one for each one), iPad/tablet and desktop screen layouts via CSS3 and special features for each one, allowing everyone to access to your site and have a special layout for their device. It also includes a lot of social media sharing features, a SEO optimized layout and a wide set of blocks, views, docs, modules and features included on a easy 5 steps installation via the "Next, next ..." way.

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. It helps Search Engines like Google & Yahoo, to “understand” the ranking of your content inside your pages, even when the boots that ranks pages, are just computers. Resuming, NewsCenter provides an internal SEO feature that will allow you to place your content online and get it on high ranking probabilities.

Fully Responsive Layout

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

iPhone/Android devices in Portrait mode layout

iPhone/Android devices in Landscape mode layout

iPad/Tablet PC devices in Portrait mode layout

Desktop Screen such Mac or PC layout and iPad Lanscape

Theme Features

The most notable features of NewsCenter are:

• Super Easy Installation: "Next, next, next..." style. Based on an installation profile.
• Home Page advanced jQuery responsive slideshow with over 27 effects, including Fade(default), Blind, Curtain, Grow, Scroll, Shuffle, Slide, Toss, Uncover, Zoom and many more… (all just by making one simple click)
• Categorization is completelly Taxonomy focused/based
• WYSIWYG text editor for creating rich text formats
• Advanced Image/Files uploading interface for rich content creation
• Awesome contextual content edition once you get logged in as admin. Just like blocks behave, but with content. Only the users with edition privileges will see them.
• Articles rating system based on stars
• Newsletter subscription for visitors
• Gravatar integration for visitors comments
• Sidebar Advertisement content type for selling ads
• Article Sharing via +300 social media resources via Addthis including: Facebook, Twitter, Mail, LinkedIn, StumbleUpon, etc.
• Usability and UX enhancements: Navigation Breadcrumbs, Friendly URLs, Responsive Layout, Contextual Content Edition, Social Media integration, menu-jump on handled devices and detailed Documentation.
• Community, Visitors and Article based custom Blocks/Views:
• • Top Rated Articles
  • Most Commented Articles
  • Recent Posts
  • Today's Most Popular
  • All Time Most Popular
  • Articles Images
  • This Week Most Popular
  • Featured Articles
  • Last Viewed
• +15 Prebuilt Views
• Valid XHTML & CSS code
• SEO Optimized HTML code, layout, blocks & Views for higher ranking probabilities
• Advanced typography features you can preview here.
• Sample content for you to have the site build from scratch after installation.
• Works in all major browsers: Internet Explorer 8, Mozilla Firefox 3.6, Google Chrome 12, Opera 10 & Safari 4 and their respective later versions.
• Detailed and friendly Documentation on "How to..." with graphics you are reading right now (it's also included o nthe package).
• Customer support in our support forums for theme buyers.

Following are some of the features mentioned before:

Contextual Content Edition

Article Sharing via +300 social media resources via Addthis

Sidebar Advertisement content type for selling ads

Usability and UX enhancements: Navigation Breadcrumbs, Friendly URLs & Social Media integration

Community, Visitors and Article based custom Blocks/Views: Today's Most Popular, All Time Most Popular, Most Commented Articles and Top Rated Articles

Drupal Modules Used

• CKEditor
• Chaos Tools Suite
• Five Star
• ImageField Crop
• IMCE
• Libraries
• Multi Block
• PathAuto
• Similar Terms
• Simple News
• Social Media
• Taxonomy Breadcrumbs
• Taxonomy Menu
• Taxonomy Menu Trails
• Token
• Views 3.3
• Views Slideshow
• Voting API
• Widgets

Additional features

• Super Easy Installation: "Next, next, next..." style. Theme comes with an installation profile so you don't need to be a "Drupal expert".
• XHTML & CSS Valid code.
• Compatible with major browsers - Internet Explorer 8, Mozilla Firefox 3.6, Google Chrome 12, Opera 10 & Safari 4 and their respective later versions.
• Automatic thumbnail generation in every required scope of content for avoiding huge images to “destroy” site’s layout.
• Solid Standars Foundation - BluePrint CSS Framework + Zen based
• Detailed & Commented CSS files for advanced theme editors.

What will you get if you purchase this item?

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

• NewsCenter's installation.
• Sample Files and content integrated with the installation.
• Documentation.
• Post-sale support at our support forums in case you get stucked.

Installing NewsCenter

NewsCenter 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 newscenter_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:

• In case you're using a local XAMP on Windows, the server root folder is C:\xampp\htdocs\
• In case you're using a local AppServ on Windows, the server root folder is C:\Appserv\www\
• In case you're using a local MAMP on OSX, the server root folder is Aplications/MAMP/htdocs/
• In case you're using a remote/local WebServer on Linux, the server root folder usually is /home/user/public_html/

Once you extract it, it will be located on a folder called "newscenter". 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 newscenter's folder was created.. I'll use as example the name "newscenter" due to the default folder. It would be on "localhost/newscenter" in case you installed it locally or "yourdomain.com/newscenter" in a remote installation.

3. Select NewsCenter 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 NewsCenter features are configured.

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

Change Site Logos (yes 2)

As NewsCenter is a responsive theme, is considered a good practice to use different logos for Desktop and Mobile devices- NewsCenter 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:

• logo.png - used on Desktop layout
• logo_mobile.png - used on iPad/Tablet and both Mobile layouts (portrait and landscape)

For replacing them with your own, you only need to browse the folder "/sites/all/themes/news_center 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 yourdomain.com/newscenter/admin/appearance/settings/news_center 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.

Understanding NewsCenter

NewsCenter is a theme with only 3 level navigation steps. Do you know what does it means? Very simple, take a look at this picture:

A 3 level navigation steps means that user will only need, at most, on an ideal case, 3 steps to get to an important article, in case they didn't find it at the Home Page. It's a principle applied all around the Web and NewsCenter holds it as a simplicity value.

In Drupal language, those 3 steps can also be named as follows:

So, as you can see, NewsCenter inherits most of Drupal's core architecture. Instead of creating tons of Views for step 2, NewsCenter focuses the categorization level(2nd) on one of the Drupal's most powerfull features: Taxonomy. Once you arrive to the point Setting up your own Taxonomy, you'll learn more on how to customize NewsCenter to fit your categories needs.

There's only one point left to take into account: The Home View and it's Blocks.

As you will see in the following image, NewsCenter has 3 main types of Block to show Articles & Advertisement:

Administrator controled blocks

Creators of content can define what will be shown on these blocks. The Post time is the secondary criteria of order. These Blocks requires an administrator management.

Post Time (creation) controled blocks

Time will define what will be seen on each block. These Blocks behaves automatically.

Visitors and Access controlled blocks

Visitors actions will result on the content shown on these block. We can say that these Blocks behaves automatically.These Blocks behaves automatically.

Seems a little bit more clear right now huhh??. Well, I think It's done.

Working with the Home Slide

Working with the Home Slide is very simple. It does all the job automatically for you: thumbnails generation, sliding, responsive layout for mobile devices and so. Ayway, 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, HomeSlide 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:

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

You can quickly change jQuery effect on the Home Slide just by following these steps:

1. Browse to yourdomain.com/newscenter/admin/structure/views/nojs/display/home_page/block/style_options and 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.

How to set an article to be show on the SlideShow

Very simple. Each Article content has a field where you can define if it goes to the Home SlideShow. As you can only place 5 at the same time, you can have multiple Articles defined to show, but only the 5 recent ones will. You also have the "Featured Articles" block, where you can place another 2 featured articles, perhaps from another week, or oldones that visitors will love. As you want.

1 - For setting up an Article on the SlideShow, you have to go to the page where your article appears, and click on it's edit button.

2 - Once there, you'll see the "Appears on Home Slide" option. You only need to check it. Also if you want it to appear on the Featured Block, there's the "Featured" option.

3. It's done. Just save it.

Setting up your own Taxonomy

This is the "vertebral" point of NewsCenter. Setting up your own Taxonomy is the first thing you need to do to get your site up and ready to go. Is a simple process you only need to do the first time you configure NewsCenter for your needs.

In NewsCenter, Taxonomy defines:

• Main Menu Navigation
• Tags
• Breadcrumbs
• Friendly URLs
• Home Page News Categories Blocks Titles

Is strongly recommended to replace sample Taxonomy terms with your own than creating a new one from scratch or just deletting them all.

Step 1 - Setting your own taxonomy terms

1 - Browse to page yourdomain.com/newscenter/admin/structure/taxonomy/tags. There you'll find the default taxonomy used for News Center. It's recommended to keep it as simple as posible and between 4 - 8 items.

2 - Edit and reorder the items as you wish. From now on, until we finish the whole Taxonomy setup, your Home Page will be a little bit unstable, but it will come back right when you finish the process. As a sample, I renamed "Top Stories" to "Custom Term 1".

3 - Once you finish, is time to rebuild the main menu. Browse to yourdomain.com/newscenter/admin/structure/taxonomy/tags/edit.

4 - Then, ensure to select the check box "Select to rebuild the menu on submit" and also ensure that "Menu Location" option has "News Categories" selected. then click "Save". It's done.

5 - Browse to yourdomain.com/newscenter/admin/structure/menu/manage/menu-news-categories and reorder your menu items so "Home Page" remains at the beginning of the Menu.

So far, this topics are solved for your own terms:

• SOLVED - Main Menu Navigation
• SOLVED - Tags
• SOLVED - Breadcrumbs
• Friendly URLs
• Home Page News Categories Blocks Titles

Step 2 - Rebuilding the Articles URLs

During Step 1, all Articles updated their taxonomy terms and were asociated to their new term. So, if sometime from now on, you need to update a Category, you do it and no article will stay without his tags.

1 - Browse to page yourdomain.com/newscenter/admin/config/search/path/delete_bulk. Select the "Content" checkbox and click Delete aliases now!

2 - Browse to page yourdomain.com/newscenter/admin/config/search/path/update_bulk. Select the "Content paths" checkbox and click Update.

Only "Home Page News Categories Blocks Titles" remains:

• SOLVED - Main Menu Navigation
• SOLVED - Tags
• SOLVED - Breadcrumbs
• SOLVED - Friendly URLs
• Home Page News Categories Blocks Titles

Step 3 - Update the home blocks titles

Now is only left to update the titles of the Home Blocks (the 6 blocks located at the home). If you're good with Views, there's no problem. Anyway, here I present you a much faster way to do it.

Following is the list of POSITIONS of blocks. There are 6 blocks, 3 per line on the Screen layout. So we'll name them Line 1 - Block 1, and so.

Line 1 - Block 1

• Change Title: yourdomain.com/newscenter/admin/structure/views/nojs/display/articles_categories_block/block/title
• Change Terms: yourdomain.com/newscenter/admin/structure/views/nojs/config-item/articles_categories_block/block/filter/field_tags_tid

Line 1 - Block 2

• Change Title: yourdomain.com/newscenter/admin/structure/views/nojs/display/articles_block_2/block/title
• Change Terms: yourdomain.com/newscenter/admin/structure/views/nojs/config-item/articles_block_2/block/filter/field_tags_tid

Line 1 - Block 3

• Change Title: yourdomain.com/newscenter/admin/structure/views/nojs/display/articles_block_3/block/title
• Change Terms: yourdomain.com/newscenter/admin/structure/views/nojs/config-item/articles_block_3/block/filter/field_tags_tid

Line 2 - Block 1

• Change Title: yourdomain.com/newscenter/admin/structure/views/nojs/display/articles_block_4/block/title
• Change Terms: yourdomain.com/newscenter/admin/structure/views/nojs/config-item/articles_block_4/block/filter/field_tags_tid

Line 2 - Block 2

• Change Title: yourdomain.com/newscenter/admin/structure/views/nojs/display/articles_block_5/block/title
• Change Terms: yourdomain.com/newscenter/admin/structure/views/nojs/config-item/articles_block_5/block/filter/field_tags_tid

Line 2 - Block 3

• Change Title: yourdomain.com/newscenter/admin/structure/views/nojs/display/articles_block_6/block/title
• Change Terms: yourdomain.com/newscenter/admin/structure/views/nojs/config-item/articles_block_6/block/filter/field_tags_tid

It's done. Wasn't difficult huh?? :D

• SOLVED - Main Menu Navigation
• SOLVED - Tags
• SOLVED - Breadcrumbs
• SOLVED - Friendly URLs
• SOLVED - Home Page News Categories Blocks Titles

Setup your Social Profiles

Setting up your social profiles is simple. The bottom block placed at the footer and named "Follow Us" has a Twitter and Facebook profile links:

1 - Click on "Configure Block" once you hover on the block area.

2 - Replace the "#" link with your social profile links.

3 - Save the Block. It's done.

Managing Advertisement

NewsCenter contains an special Advertisement content type. It will allow you to sell 210x117 images blocks and an additional text for different clients, such as many online content publishing websites such as SixRevisions, SmashingMagazine and a lot sites you'll find across the Web.

By default, NewsCenter contains 4 sample ads, but you can replace them with the traditional "Advertise here" gray image linked to a add selling form or just linked to a mail.

For creating a new Advertisement, you have to follow these steps:

1 - Create a new Ad going to yourdomain.com/newscenter/node/add/advertisement. Once there, you'll see the required fields to set up your files.

2 - Save the Advertisement. You'll see it at the sidebar..

3 - It's done.

Advanced Theme Development

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

HTML Layout Files

NewsCenter inherits all the layout files from Zen Base Theme for Drupal 7, but 3: page.tpl.php, node.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.

node.tpl.php

The node.tpl.php file is used for the side "Creation Date" component on the teaser display of Nodes at Taxonomy Pages. It only shows on Teasers, not in full node (see the conditional).

html.tpl.php

The html.tpl.php file sets the META viewport tag for iPhone/iPad devices to show the site at 100% of scale. Essentially, it's a responsive layout requirement feature. It's something like this:

CSS Files

NewsCenter's CSS files are located at /sites/all/themes/news_center/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:

    /*
	 *	News Center v1.0
	 *	Media Layout for MaxDeviceWidth 320px
	 *	
	 *  This stylesheet works only on a 320px width device. i.e. an iPhone on Portrait mode.
	 */
	
	 mobile-portrait-layout.css
	
	
	/*
	 *	News Center v1.0
	 *	Media Layout for MaxDeviceWidth 480px
	 *	
	 *  This stylesheet works only on a 480px width device. i.e. an iPhone on Landscape mode.
	 */
	
	 mobile-landscape-layout.css
	
		
	/*
	 *	News Center v1.0
	 *	Media Layout for MaxDeviceWidth 768px
	 *	
	 *  This stylesheet works only on a 768px width device. i.e. an iPad on Portrait mode.
	 */
	
	 tablet-layout.css
	
	
	/*
	 *	News Center v1.0
	 *	Media Layout for MinDeviceWidth 960px
	 *	
	 *  This stylesheet works only on a minimal 960px width device. i.e. desktop Mac or PC.
	 */
	 
	 screen-layout.css	
	 
	 
	 /* 
	  *  News Center v1.0
	  *  General Layout & Theme Styles 
	  */
	  
	  news_center.css
  

Internet Explorer

Internet Explorer is an special topic everyday :( . NewsCenter supports IE8 and IE9, with an special style sheet for them. You can find them at /sites/all/themes/news_center/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:

• Internet Explorer versions 8, 9 and 10 (preview)
• Firefox versions 3.5, 4, 5, 6, 7, 8 and 9
• Chrome from the version 8 to the version 17
• Safari 4 and 5
• Opera 10, 11 and 11.50

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 images:

• Ubuntu 11.04 Desktop Wallpapers used on demo. and PhotoDune.net purchased ones.
• Zen Base Theme for Drupal
• BluePrint CSS Framework

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/seven/admin/config/media/file-system Logged in as admin.

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

• On Linux/Unix: /tmp
• On Mac: /tmp
• On Windows: c:\windows\temp

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/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.

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.

• max_execution_time = 90

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

5. Start again the Installation Process. Done!