Welcome to Striped

A Multi-Concept Theme


Welcome to Striped - A Multi-Concept Theme

Installing Striped

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called dp-striped.zip. You can install the theme by using one of two installation methods:

  1. WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
    1. Login to WordPress admin
    2. Go to admin panel > Appearance > Themes > Add New > Upload Theme
    3. Click on "Choose File" and select dp-striped.zip
    4. Click on "Install Now"
  2. FTP upload - If you wish to install via FTP, here are the steps you need to take:
    1. Using FTP client, login to the server where your WordPress website is hosted
    2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
    3. Using FTP client, upload the DP Striped directory to themes directory on remote server
If writing permissions aren't set for folders containing CSS and JS files on your server, you will see a warning message at the top of the theme options page. In order to remove that message, you need to change permissions for wp-content/themes/dp-striped/css and wp-content/themes/dp-striped/js folders and set them to 755. We recommend setting writing permissions in order to optimize your site performance. If you have any issues with this, please contact your hosting service provider. Alternatively, you can submit a ticket to http://www.support.dynamicpress.eu/ with FTP access fo your site, and we will take a look at it.

Install Plugins

Right after the theme was activated, a notification at the top of the screen will suggest to continue with the installation of the required and recommended plugins for getting the best our of your theme.

Striped for properly functioning required following plugins:

We highly recommend also use: For ecommerce sites we recommend also:

You can install recommended plugins according your needs.

Importing Demo Content

You can either start building your site from scratch, or import one of our demo sites and then modify it to fit your needs. We will now explain how to do the latter.

Striped comes with one-click import module. Here's what you need to do:

  1. Login to WordPress admin
  2. Go into Sample Data Import menu
  3. Choose the demo site that you wish to import from the dropdown menu
  4. From the dropdown menu on the right, choose what type of content you'd like to import:

    • All - imports pages, content, widgets, and settings. We recommend this for users who want to import pages exactly as they appear in the demo.
    • Content - imports pages and their content only. Recommended for users who want to see how we've created our page layouts, but who want to keep their own settings in Striped Options.
    • Widgets - imports widgets only. Recommended for users who'd like to use the widget areas that we created and want to import that only.
    • Menus - imports menus only.
    • Options - imports Striped Options only. Recommended for users who would like to achieve the same look and feel of our demo site, but who do not require our page layouts.
    • Revsliders - imports Revsliders only.
    • Icon fonts - imports icon fonts packages only. Please note that not all demos have such additional icons packages.
  5. If you wish to import media files (images, videos, sounds), check the "Import attachments" box.
    Please note that the images we use are copyrighted, and if you'd like to publish them on your site, you would need to purchase them separately. We bought most of our images on Photo Dune or Shutterstock.
  6. Click on the "Import" button.

Installing Woocommerce

If you plan on building an online shop with Striped, please read the WooCommerce section of this user guide before installing the demo content.

Upgrading Striped

You can upgrade your theme by performing the following steps:

  1. Download the latest theme zip file from ThemeForest
  2. Extract it and locate dp-striped.zip
  3. Extract dp-striped.zip and locate the 'dp-striped' folder
  4. Copy/Replace content of the 'dp-striped' folder to the /wp-content/themes/dp-striped folder of your web site.
Eventually upgrade all bundled plugins:

Important F.A.Q.

1. Why can't I save my menu?

WordPress by default has a limited number of menu items. When you import our demo site, which contains a lot of menu items, you might not be able to save changes you make to a menu. You can fix this problem by contacting your hosting and asking them to add the following lines to php.ini file:

max_input_vars = 5000
suhosin.post.max_vars = 5000
suhosin.request.max_vars = 5000
2. Why is there a smiley displayed on blank pages?

This problem is most likely related to JetPack and memory settings of your hosting. You can either disable JetPack or read what the JetPack developer wrote: Regarding the memory limit, please refer to the WordPress Codex section concerning this problem. Some sites that load many plugins alongside WordPress ultimately require a higher memory limit than WordPress defaults to, but since this is limited to specific hosts and configurations, it must be dealt with on an individual basis. You'll find the Codex article at: http://codex.wordpress.org/Common_WordPress_Errors#Allowed_memory_size_exhausted

3. How do I optimize my site?

Please use this tool to investigate reasons for slow loading: https://developers.google.com/speed/pagespeed/insights/?hl=en

4. How to translate or rename default theme labels?

You can use the Codestyling localization plugin (http://wordpress.org/plugins/codestyling-localization/) to translate/rename all the theme's labels. Another solution is to edit the theme folder/languages/en_US.po file directly in editor and manually edit labels you want to translate.

5. Why do I see a white screen when importing demo content?

If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 120 seconds. Possible ways of achieving this are:

Ask your hosting provider to take care of this for you.

Once you've installed Striped theme and DP Striped Functions plugin, you can start building your site. To customize the appearance and functionality of your web site to your needs you should to use Striped administrative panel .

Striped comes with robust and inteligent Admin Panel. It allows for easy and intuitive to set all aspects of appearance and function of theme. Creating your own skin has never been as easy. Plenty of options allows you to create the unique appearance of the page with a few clicks without writing a single line of code. This quick guide to the built-in Striped Admin Panel will show you how to do it.

General Options

Here you can set all general options of theme:


  • Breadcrumbs display
  • Sidebar position
  • Theme default width
  • Sidebar default width
  • Default screen width for mobile devices
    This settings set switch points whitch determines when custom CSS for different mobile devices are enabled.
  • Custom code for HEAD section
  • Custom code for footer section section
  • Custom CSS code
    This field is very usuable for small CSS adjustments without editing core CSS files.

Typography

Here you can set all typography aspects:


  • Font for body

  • Font for Headers

  • Two custom fonts for other elements eventually

  • Default font size for body and headers

Typgraphy settings will be more detailed described further in chapter Appearance

Appearance

This is indeed skin cretor. Here you can set colour, background color, pattern, background image for all important theme areas.
You can do it using color pickers, slideers and switchers in few minutes.

Theme color scheme is based on two accent colors:

  • Main accent color used for all accented elements like buttons, links etc.
  • Secondary accent color used for some accented elements or hover states.

Additionaly you can select custom colors practicaly for any important theme area (header, subheader, footer)

Appearance settings will be more detailed described further in chapter Appearance

Content Options

Here you can set many content related options:


  • Contact data displayed in top ba (if enabled).
  • Social icons displayed in header and footer.
  • Disable or enable display comments on pages
  • Disable or enable display author info
  • Set witch post meta data will be displayed
  • Set default category and blog page layout
  • Excerpts length
  • Portfolio items per page
  • Default portfolio page

Advanced

Here you can set some advanced theme options:


  • Use widget rules.
    This is very flexible feature witch allow set visibility, style for all widget individuall. More detailed is desribed bellow.
  • Use prefix free css
  • Add Google tracking code
  • Add Google Maps API key
  • Use thickbobx
  • etc.

Branding Options

Here you can add some own brand to the theme:


  • Change default theme name
  • Change backend logo (on login screen)
  • Change default logo in admin menu
  • Change copyright text
  • etc.

Woocommerce Options

This tab will be visible only when Woocommerce plugin is installed.

Here you can customize some options for Woocommerce pages:


  • Enable / disable display sidebar on woocommerce pages
  • Enable / disable display add to cart button on catalog pages
  • Enable / disable display short descriptions on catalog pages
  • Count of chars in short descriptions
  • etc.

Events Calendar Options

This tab will be visible only when The Events Calendar plugin is installed.

Here you can customize some options for Events Calendar pages:


  • Enable / disable display subheader on Events pages
  • Set custom title and subtitle for Events pages subheader
  • Set custom image and background color for Events pages subheader

See Instructional Videos

At this point, we will discuss briefly the basic aspects of the theme appearance settings. With the enhanced options panel you can set up virtually every aspect of the theme look without writing a single line of code.

Typography Settings

1. Setting font for body and headers

In Template Options -> Typography options panel you can select font family for different theme elements (body, headers and others)

As for the font family you have to choose the following options:

2. Setting font for custom elements

Additionally, you can choose up to three different fonts for different elements of the page.

A font family selection you can do as described above for the body and the headers. To assign the selected font family to a specific element, enter the CSS selector in the field below. As shown in the picture example selected font is assigned to an element with CSS class digit. You can assign selected font to meny elements adding coma seprated selectors.

3. Setting font size for body and headers.

Finally in the Typgraphy panel you can determine default font size for the body and headers.

General Settings

In Appearance panel in section General Settings you can choose:

If you select Boxed layout you will see some additional options:

Top Bar Settings

In this section you can enable or disable display of Top Bar.

If Top Bar display is enabled you can set some options.

Please note that:

Logo Styling

In section Appearance -> Head and Main Menu Style you can adjust logo type, size and position.

Firs of all you should select logo type:

Main Menu Settings

In section Appearance -> Head and Main Menu Style you set also main menu type. Striped generally support three menu types:

Once you select Menu type you will see menu type specyfic options bellow

1. Top Menu Settings

This menu settings affect on almost all types of menus (top menu, splited menu, logo centered above menu, hamburger menu).

2. Magazine Style Menu Settings

For this type of menu you have some additional settings.

If you select this menu type you will see some this menu specific options:

Sticky Header Settings

In section Appearance -> Head and Main Menu Style you set also Sticky Header Style options.

Here you can:.

Overlapping Header Style

In section Appearance -> Head and Main Menu Style you can also set some options for Overlapping Header options.

If you set Overlapping Heder to ON menu and header ara will overlapp area bellow (slideshow or subheader area). In this section you can set some options for overlapping header:.

Subheader Area Style

In section Appearance -> Subheader Area Style you can set default layout for subheader area.

Here you can set default options for subheader area:

Please note that each default subheader area style option can be overwriten in page or post options.

Expandable Sidebar Style

In section Appearance -> Expandable Sidebar Style you can set layout for expandable sidebar area.

Here you can set default options for subheader area:

Please note that expandable sidebar and button to open sidebar will be displayed only when any widget is placed in Expandable sidebar widget area.

Main Content Style

In section Appearance -> Main Content Style you can set some basic options for main content area colors.

Footer Style

In section Appearance -> Footer Style you can set some basic options for footer area.

Copyright Area Style

In section Appearance -> Copyright Area Style you can set copyright are style.

404 Page Style

In section Appearance -> 404 Page Style you can set custom 404 page style.

Page Templates

When creating a new page, one of the first things you might want to do is to assign an appropriate template for it. To do this, go inside the page backend and locate the section on the right called Page Attributes. Striped comes with a variety of templates to choose from:

Page Additional Atributes

Now that you've chosen a template, let's go over the custom page settings.

Here you can set some custom options and overwrite some default settings for each page:

If you select one of portfolio pages template you will see some additional portfolio specific parameters.

Here you can set portfolio page parameters:

Please note that portfolio specific page parameters will be visible after first save of page. As long as the page is not saved WP do not know what page template is used and custom template specific parameters are not displayed.

Post Formats

Post formats available in Striped:

Post Additional Parameters

Here you can set some custom options and overwrite some default settings for each post:

Striped theme has built-in custom post type portfolio. This post type is used for the presentation of your work in a standardized format

Create Portfolio Item

Go to Portfolio -> Add New and fill your content:

Portfolio Item Types

Available portfolio item type

Portfolio Item Additional Settings

You can set any portfolio item additional prameters (header overlapping, subheader style etc) as in the case of pages or posts.

Striped theme has built-in custom post type Slide.Slides can be organized in categories named Sideshows and than used in Flex slider or OWL Carousel

Create Slideshow Item

Go to Slides -> Add New.

Generally, each slide can be declared as:

1. Image Slide

This type of slide use featured image of post. If you select this type of slide in post editor content area will be hidden (is not used by this type of slide) and visible will be only post custom fields:

1. Content Slide

This type of slide use content area of post (featured image, slide description and slide link will be ignored).

This type of slide can be used in OWL carousels.

Type of slide you can easy choose by edition and change any time.

Striped come with 7 built in widgets

DP Comments

DP Comments is a simple widget to display latest comments with user avatars:

The configuration of the widget is really simple:

As you can see, there are three important options:

The DP Comments widget uses a built-in WordPress cache system and it refreshes the cache after every comments operation.

DP Flickr Gallery

DP Flickr Gallery is a simple widget to display flickr gallery in widget:

dp-flickr

The configuration of the widget is really simple:

As you can see, there are only few options:

To find Flickr user ID you can use idGettr .

DP Recent Portfolio

DP Recent Portfolio is a simple widget to display latest portfolio with thumbs:

The configuration of the widget is really simple:

As you can see, there are three important options:

DP Recent Posts

DP Recent Posts is a simple widget to display latest posts with thumbs:

The configuration of the widget is really simple:

As you can see, there are three important options:

DP Tabs

DP Tabs is a simple widget which can be used for displaying other widgets in the tabs:

The configuration of the widget, similarly to the DP Comments widget, is really simple:

 

The most important option is the Tabs source - this option specifies the sidebar used as the data source of the widget. Especially for the DP Tabs widget, we have created three special widget areas – Tab I, Tab II and Tab III – these widget areas don’t exist on the theme and they can be used in the DP Tabs widget to avoid problems with the duplicated widgets.

To create tabs, a user must drag some widgets to the specified in the DP Tabs widget sidebar. The titles of these widgets will be used as the tabs titles, the order of the widgets in the sidebar is also important – it will be used in the DP Tabs widget.

So, for example, in order to achieve the DP Tabs widget layout as in the first screenshot, you have to put the widgets on the Tab I sidebar as following:

 

The other options are strictly connected with the widget interface:

The DP Tabs widget has no internal cache system but if there are widgets displayed in the DP Tabs widget then there will be no problems with caching the widget content.

Striped theme has built-in a few custom features.

Mega menu

We have built-in Mega Menu feature. It is simple to get started but powerful enough to create highly customized and creative mega menu configurations.

Widget Rules

Widget rules is a mechanism which introduces a completely new way to manage widgets on a website. Thanks to it, it is possible to specify widget features such as:

After switching on widget rules in theme's advanced settings, under each widget, the following options should be displayed:

The most extensive options are those connected with a widget visibility on subpages chosen - after choosing an option to show a widget on pages chosen (or an option not showing a widget on pages chosen), such a panel will appear:

widget-rules-2

Then, you have to choose a page's type to add, e.g. Category, and then give category ID:

widget-rules-3

After clicking "Add page" button, a page will appear on a list of pages chosen on which in our case a widget will be displayed:

widget-rules-4

Of course, it is possible to add more pages:

widget-rules-5

To make it clearer, , each page's type is displayed with a different color. A page added can be removed by clicking a removing icon placed on the right side of each page.

In this way, you may set a widget so as to be shown on pages chosen or to be shown on all pages except the chosen ones.

Generally, widgets are shown on all pages.

An option of displaying a widget on devices chosen has five options to choose:

Thanks to these settings, it is possible to limit significantly the amount of content displayed on devices with small screens. An option of displaying widget for a chosen groups of users has four options to choose:

Thanks to this option, it is possible e.g. to display messages specified by using widgets for a group of users chosen.

The last option from widget rules is an option for choosing a widget style - it causes appending to a widget main container an additional class giving styling specified by a user.
Widget styles are defined in widget.styles.json file and in CSS code - in this case in css/basic.css.

DP Icon Manager

Icon Font Manager is a powerful tool that offers you a huge number of font icons to be used on your website. By default, we ship theme with the custom selected icon font library with over 1800 different font icons available. But if you wish to add more, you can upload new Icon fonts or delete existing ones that you might have added already using IcoMoon.io.

There is a real time search box available as well so you can cross check and see if you have the icon available that you are looking for. If you cannot find the icon you want to use, custom font icons can be uploaded or the existing set of icons can be deleted too.

To upload new set of icons:
  1. Go to IcoMoon App.
  2. Shortlist the icons by clicking on individual ones that you like. You have a real time search feature available as well if that makes your job easier.
  3. If you still can't find the icons that you want in the set, click on the link "Add Icons From Library…" at the bottom of the page where you can load more font icon libraries in your selection area where you shortlist and select your favorite icons (in step 2)

  4. Once you shortlist the icons for your set, click on the button "Generate Font" in the fixed menu at the bottom of page.

  5. The page that comes after you click "Generate Font" button in the last page is where you can review, edit and customize your selected icons.
  6. Once you are satisfied with your selection, find a button saying "Preferences" in the top menu. 

    Give a unique name to your icon set as doing so will create a separate class in Icon Fonts Manager.

  7. Once you gave it a name, click the "Download" button.

  8. A ZIP file will be downloaded.
  9. Now - go back to your website's "Icons Manager" area.
  10. Click "Upload New Fonts" then "Upload Files" then Select the ZIP file that we downloaded from IcoMoon & upload it.
  11. Finally - click "Insert Fonts Zip File" button at the right bottom and your new font will be uploaded quickly.

Unlimited Sidebars

In Striped you can create unlimite count of custom sidebars (widget positions). It is very usuable feature because creted widget positions can be used later in Visual Composer. This way you can place any widget in any place on page.

To create new sidebar:
  1. Go to Appearance -> Custom Sidebars

  2. Click Add New button

  3. Fill Titel and Description and save

  4. Custom sidebar (widget area) is added

  5. ...and ready to use

Visual Composer

Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.

Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errorswith “shortcodes magic” – Visual Composer will take care of that.

For your convenience Striped theme we have added many new functionality to the standard VC elements:

We have also add 40+ custom VC elements which add extra functionality to your website.

Full list of our premium VC elements:

See Instructional Videos

For more information about how to use the Visual Composer, see the plugin documentation.

Revolution Slider

In Striped We have implement popular Revolution Slider.

For more detailed information about Revolution Slider usage please see plugin documentation.

Theme Bundled Plugins Usage Limitations

Visual Composer and Revlisder plugin are bundled with theme on basis Extended License which we buy from plugins developers. This means that the customer can legally use this plugins along with our theme.
But there is some limitations. Customer can't register this plugins, update it directly from developers and have no access to direct developers support.
Of course for our part, we strive to upgrade theme (with newest version of bundled plugins) after each upgrade of bundled plugins and we support these plugins in terms of their cooperation with our theme.
But if you would like to use the dedicated support from plugins developers and receive automatic upgrade of plugins you should consider purchasing a license for these plugins.

More informations about the benefits of direct licences you find here: Visual Composer, Revolution Slider