Follow

Clean Portfolio Theme Guide

Below you'll find a list of theme files for the GoMobile Drupal mobile theme. This list illustrates where you can find certain functionality and information within the theme itself.

Theme guide is for:

http://www.themesnap.com/premium-drupal-themes/retail-shop.html

--------------------------------------------------------------------------------------------------

Functional structure of "Clean Portfolio"

1. Purpose and features of the theme files

/sites/all/themes/cleanportfolio/cleanportfolio.info

Contains information about theme name, default settings, available regions, and also enabling of stylesheet files and scripts

/sites/all/themes/cleanportfolio/page.tpl.php

Contains template of appearance design for internal pages of a site

/sites/all/themes/cleanportfolio/node.tpl.php

Contains template of appearance design for all node of all content types except blog content type

/sites/all/themes/cleanportfolio/node--blog.tpl.php

Contains template of appearance design for nodes of blog content type

/sites/all/themes/cleanportfolio/block.tpl.php

Contains template of appearance design for blocks except block regions Footer Copyright, Footer One, Footer Two, Footer Three, Footer Four, Sidebar Right, Sidebar Top Menu

/sites/all/themes/cleanportfolio/block--footer_copyright.tpl.php

Contains template of appearance design for block region Footer Copyright

/sites/all/themes/cleanportfolio/block--footer_one.tpl.php

Contains template of appearance design for block region Footer One

/sites/all/themes/cleanportfolio/block--footer_two.tpl.php

Contains template of appearance design for block region Footer Two

/sites/all/themes/cleanportfolio/block--footer_three.tpl.php

Contains template of appearance design for block region Footer Three

/sites/all/themes/cleanportfolio/block--footer_four.tpl.php

Contains template of appearance design for block region Footer Four

/sites/all/themes/cleanportfolio/block--sidebar_right.tpl.php

Contains template of appearance design for block region Sidebar Right

/sites/all/themes/cleanportfolio/block--sidebar_top_menu.tpl.php

Contains template of appearance design for block region Sidebar Top Menu

/sites/all/themes/cleanportfolio/search-block-form.tpl.php

Contains template of appearance design for search form block

/sites/all/themes/cleanportfolio/comment-wrapper.tpl.php

Contains template of appearance design of comments container

/sites/all/themes/cleanportfolio/comment.tpl.php

Contains template of appearance design of separate comment container

/sites/all/themes/cleanportfolio/views-view-fields--gallery--page.tpl.php

/sites/all/themes/cleanportfolio/views-view-unformatted--gallery--page.tpl.php

Contain template of appearance design of Views page Gallery

/sites/all/themes/cleanportfolio/views-view-fields--portfolio--page.tpl.php

/sites/all/themes/cleanportfolio/views-view-unformatted--portfolio--page.tpl.php

Contain template of appearance design of Views page Portfolio

/sites/all/themes/cleanportfolio/views-view-fields--latest-blog-posts--block.tpl.php

/sites/all/themes/cleanportfolio/views-view-unformatted--latest-blog-posts--block.tpl.php

Contain template of appearance design of Views block Blog Posts

/sites/all/themes/cleanportfolio/views-view-fields--portfolio-categories--block.tpl.php

/sites/all/themes/cleanportfolio/views-view-unformatted--portfolio-categories--block.tpl.php

Contain template of appearance design of Views block Portfolio Categories, the given block is used when outputting portfolio page, output of the block is performed in template views-view-unformatted--portfolio--page.tpl.php

/sites/all/themes/cleanportfolio/template.php

Contains auxiliary php code required for functioning of the theme

/sites/all/themes/cleanportfolio/theme-settings.php

Contains description of additional theme settings form fields

/sites/all/themes/cleanportfolio/screenshot.png

Screenshot of the theme

/sites/all/themes/cleanportfolio/logo.gif

Default theme logo

/sites/all/themes/cleanportfolio/author-picture.gif

Default user avatar

/sites/all/themes/cleanportfolio/style.css

The main stylesheets file of the site design

/sites/all/themes/cleanportfolio/style/color/blue.css
/sites/all/themes/cleanportfolio/style/color/custom.css
/sites/all/themes/cleanportfolio/style/color/gray.css
/sites/all/themes/cleanportfolio/style/color/green.css
/sites/all/themes/cleanportfolio/style/color/lime.css
/sites/all/themes/cleanportfolio/style/color/maroon.css
/sites/all/themes/cleanportfolio/style/color/orange.css
/sites/all/themes/cleanportfolio/style/color/pink.css
/sites/all/themes/cleanportfolio/style/color/purple.css
/sites/all/themes/cleanportfolio/style/color/red.css
/sites/all/themes/cleanportfolio/style/color/yellow.css

Stylesheet files for various color design of the theme

/sites/all/themes/cleanportfolio/style/type/aller.css
/sites/all/themes/cleanportfolio/style/type/cabin.css
/sites/all/themes/cleanportfolio/style/type/carto.css
/sites/all/themes/cleanportfolio/style/type/copse.css
/sites/all/themes/cleanportfolio/style/type/delicious.css
/sites/all/themes/cleanportfolio/style/type/fontin.css
/sites/all/themes/cleanportfolio/style/type/mavenpro.css
/sites/all/themes/cleanportfolio/style/type/mido.css
/sites/all/themes/cleanportfolio/style/type/museo.css
/sites/all/themes/cleanportfolio/style/type/ptsans.css
/sites/all/themes/cleanportfolio/style/type/qlassik.css
/sites/all/themes/cleanportfolio/style/type/quicksand.css
/sites/all/themes/cleanportfolio/style/type/titillium.css
/sites/all/themes/cleanportfolio/style/type/vegur.css

Stylesheet files for changing the theme fonts. This folder also contains font files.

/sites/all/themes/cleanportfolio/style/css/ie7.css
/sites/all/themes/cleanportfolio/style/css/ie8.css
/sites/all/themes/cleanportfolio/style/css/ie9.css

Stylesheet files that provide compatibility with different versions of Internet Explorer

/sites/all/themes/cleanportfolio/style/images/

This folder contains image files for the theme design

/sites/all/themes/cleanportfolio/style/js/

This folder contains JavaScript files that provide functionality of the theme.

2. Site structure

  • Pages consist of the following regions
  • Sidebar Social
  • Sidebar Top Menu
  • Sidebar Intro
  • Content
  • Sidebar Right (is absent on pages Full Width Page, Portfolio, Gallery)
  • Footer One
  • Footer Two
  • Footer Three
  • Footer Four
  • Footer Copyright

Content types:

  • Basic page is used for separate pages such as "About Us"
  • Blog entry is used for articles in blogs section
  • Portfolio is used for placing portfolio in an appropriate section
  • Image is used for placing images in Gallery section
  • Full Width Page is used for separate full width pages without right block, such as e.g. page "Full Width Page"

Blog section is based on standard Blog module

Portfolio section is implemented using Views module

Gallery section is implemented using Views module

Blocks Social, Intro, Contact map, Address, Flickr right, Custom Text right, Custom Text, Flickr footer, Twitter, Copyright are standard custom blocks

It's not recommended to make any modifications to blocks Flickr right, Flickr footer, Twitter

Blocks View: Latest blog posts: Footer Block, View: Latest blog posts: Right Block are created using Views module

"Main menu" is used for output of the upper menu

Taxonomy vocabulary Tags is used for Blog section

Taxonomy vocabulary Categories is used for Portfolio section

3. Additional elements of design

Social Links (is output in block Social)

The following icons of social networks and services are available for use

  • RSS: icon-rss.png
  • Facebook: icon-fb.png
  • Twitter: icon-tw.png
  • Dribble: icon-db.png
  • LinkedIn: icon-li.png
  • Forrst: icon-fr.png
  • Last.fm: icon-last.png
  • FriendFeed: icon-ff.png
  • Flickr: icon-fl.png
  • Tumblr: icon-tumblr.png
  • Delicious: icon-del.png
  • Deviantart: icon-dev.png
  • Foursquare: icon-fs.png
  • Skype: icon-skype.png
  • Behance: icon-be.png
  • Gowalla: icon-go.png
  • YouTube: icon-yt.png
  • Vimeo: icon-vimeo.png
  • Digg: icon-digg.png
  • Grooveshark: icon-groov.png
  • Posterous: icon-pos.png

The example of use (the given example is used in block Social)

<ul>
<li><a href="#"><img src="<? print $GLOBALS['base_url'].'/'.path_to_theme() ?>/style/images/icon-rss.png" alt="Subscribe to RSS" /></a></li>
<li><a href="#"><img src="<? print $GLOBALS['base_url'].'/'.path_to_theme() ?>/style/images/icon-fb.png" alt="Facebook" /></a></li>
<li><a href="#"><img src="<? print $GLOBALS['base_url'].'/'.path_to_theme() ?>/style/images/icon-tw.png" alt="Twitter" /></a></li>
<li><a href="#"><img src="<? print $GLOBALS['base_url'].'/'.path_to_theme() ?>/style/images/icon-db.png" alt="Dribbble" /></a></li>
<li><a href="#"><img src="<? print $GLOBALS['base_url'].'/'.path_to_theme() ?>/style/images/icon-li.png" alt="LinkedIn" /></a></li>
<li><a href="#"><img src="<? print $GLOBALS['base_url'].'/'.path_to_theme() ?>/style/images/icon-fr.png" alt="Frosst" /></a></li>
</ul>

Stylesheets of content design

Appearance and examples of the code for use on the pages are listed on the links below

  • Typography: Buttons, images, lists, blockquote, dropcap, highlight and other typographic styles are inside http://mysite.url/node/24
  • Sliders: Sliders as large, medium and small versions are available in http://mysite.url/node/25
  • Tabs and Toggle: Tabs and toggle examples are inside http://mysite.url/node/26
  • Tables: Table and pricing table examples are inside http://mysite.url/node/27
  • Columns: Available column layouts are inside http://mysite.url/node/28

4. Warnings

It's necessary to make a backup of all files and a database before updating any modules, theme, or Drupal core.

0 Comments

Please sign in to leave a comment.