Responsive Portfolio HTML / CSS Theme: Darx

Uncategorized No Comments

Darx is a responsive portfolio WordPress Theme, suited for creative folk that wish to present their products or services in a creative way. It is suited for both personal and corporate websites. This is the HTML/CSS version of the theme.

Full width or 960px grid portfolio will showcase your products or photographies in an impressive manner.

Two premade home pages will allow you to present your site in a way suited for your company. Choose between a great full width portfolio and 960px grid portfolio if you prefer a non full width home page.

LIVE PREVIEW

darx responsive portfolio HTML theme

Darx HTML/CSS Theme Features

  • Minimal & Elegant Design
  • CSS3 Features and Animations
  • Google Web fonts
  • +70 shorcodes with easy shortcode generator.
  • Use your custom logo and favicon icon.
  • Responsive Portfolio
  • 2 portfolio page layouts (full width and 960px width)
  • Filterable portfolio items.

HOW TO REGISTER ON OUR SUPPORT FORUMS

Support is handled via our Envato support forum. It is designed in a way so only Envato users that have bought some of our plugins or Themes can register. You have to use the purchase code in the process. This has been causing some problems so please check the screenshots below to see where to get the purchase code.

Click on the image for a larger preview!

After you click on the License Certificate you will then be able to see the code in the file which will look like in the screenshot below:

QUICK GUIDE

TIMTHUMB

Theme uses timthumb for image adjustment and resizing. Timthumb doesn’t work on most local machines (without a server) so if you want to see images properly you have to upload the theme to a live server.

FILE STRUCTURE

Below is a file structure for different aspects of the HTML site.

CSS FILES

  • style.css
  • CSS/default.css
  • CSS/yellow.css
  • CSS/grey.css
  • CSS/pink.css
  • CSS/strong_red.css
  • CSS/red.css
  • CSS/orange.css
  • CSS/green.css
  • CSS/purple.css

CSS is structured so you have one main file (style.css) and a second css file called for instance red.css that define the leading color and some other aspects of the Theme (hover colors, background colors, etc.). If you want to choose a different coloring scheme simply replace the current css file with new one in each HTML file.

FOLDERS

  • css (This folder holds the CSS for all of the secondary styles)
  • js (This folder holds all of the JavaScript used throughout the template.)

PAGE TEMPLATES

Darx HTML Website Template comes with several premade page templates that are listed below.

HOME PAGE TEMPLATES

  • index.html (Main home page with full width Responsive Portfolio)
  • home-portfolio.html (Home page with 960px wide portfolio)
  • blog.html (Home Page with latest Posts)

CONTENT PAGE TEMPLATES

  • page-with-sidebar.html – (Static page with Sidebar on the right)
  • portfolio.html – (Portfolio Page)
  • html-test-page.html (Page with basic elements)
  • columns.html – (Static page with Shortcodes: Columns)
  • tabs-other.html – (Static page with Shortcodes: Tabs)
  • buttons.html – (Static page with Shortcodes: Buttons)
  • text-elements.html – (Static page with Shortcodes: Text Elements)

BLOG AND SINGLE POSTS PAGES

  • single.html – (A default single Post with content and sidebar on the left)
  • blog.html – (Category page)

OTHER PAGES

  • contact.html (a contact form page)

PORTFOLIO PAGES

GOOGLE WEB FONTS

The template uses Google Web Fonts for the title fonts. Font that is used in the preview is Open Sans. Link to the font is done in HTML files in the header part:


To change the font simply replace Pt Sans with the font you want. You can see all the fonts that you can use in the Google Web Fonts Library.

SETTING UP THE HOME PORTFOLIO

One of the leading features of our HTML template is the full width portfolio section. This portfolio can be found in three files: index.html, home-portfolio.html, portfolio-4-full-width.html and portfolio-4.html.

ADDING NEW PORTFOLIO ITEMS

When you are adding new items to this section please note that the name of the ID of the post that you set in index.html has to be the same as the name of the HTML file in the home directory. In case when you are adding posts use the following html code:

Portrait of a Woman

 

+
Portrait of a Woman

WEBSITE NAVIGATION

  • All navigations are created by forming nested lists
  • Navigations can be easily setup by copy/paste from the provided page templates

Example:

  • Home
    • Home with Fullwidth Slideshow
  • Home with Nivo Slideshow
  • Home Page as a Blog
  • Home Page as a Portfolio

SUPPORT

For support please visit our support portal and register as described above.

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.