Intro
Thank you for purchasing our theme. This file is meant to provide you with all the information you'll need in order to fully use your theme. If you find that this file does not contain all the information needed or if you don't know/understand something here and need help, don't hesitate in contacting us at http://support.dd-studios.com/
Note that you'll need to register and get your purchase ID Code in order to create threads.
Support:
Support is free to everyone that have purchased the file. To get support please register at http://support.dd-studios.com/ and start creating new threads. We usually answer all support requests within 48 hours.
Installing Your Theme:
You can install your theme 2 ways: Via the WP Admin Panel or via FTP.
To install via the WP Admin Panel log in to your WP Admin Panel and click on the menu "Appearance > Themes". Once you have clicked that, click the tab "Install Theme" right at the top of your page. Once there, just below the tabs, you'll find the "upload" link. Click there and you'll be redirected to a page where you'll be able to choose a file to upload. In your download file you'll find a folder called "Wordpress" and inside it another folder and a .zip file. Select the .zip file and upload. Done.
To install via FTP open your FTP software, log in to your server and browse through the folder "wp-content > themes". In your download file you'll find a folder called "Wordpress" and inside it another folder and a .zip file. Please upload your entire folder in the "themes" folder in your server. Do not upload the .zip file. Done.
DDPanel
The DDPanel was developed to make the life on the final user a whole lot easier. Within the DDPanel you'll find all extra options to have your theme the way you want. Please read below to get familiar with the DDPanel and get a brief explanation on each section.
Accessing your DDPanel:
To access your DDPanel is very very easy. In your WP Admin Panel on your left side menu, just click the last item. The menu item will have the same name as your theme. Refer to the image below if needed.
Knowing your DDPanel:
The next main thing is to know how your DDPanel works. The DDpanel is organised into sections. You can see the section on the right of your DDPanel. Sections are displayed as a list of vertical items, with an icon at the left of each section.
Each section is divided into tabs. Tabs are located at the top of your set of fields. Note that each tab has an info at the top of it. Below your tabs you have all the fields
Every single field has an info icon. Clicking this icon will open an display box with a brief explanation of that specific field.
Also, at last but not least, at the top left corner of each field you see a sort of a folding gif. Clicking this gif will add a reminder ribbon to that field. Reminder ribbons are cookie driven and even if you close your browser they will stay there. Note that it will not save for different computers or browsers.
Main Configurations (section) :
This section will take effect on every single page of your theme. Meaning that it doesn't matter whether you're viewing a single post, page or category this will affect all of them.
Tabs include:
- Logo - Will affect your logo. Open and edit this tab to edit your logo.
- Header Space - Will define what goes next to your main menu.
- Footer - Edit what to display on your footer.
- Copyright - The copyright text in your theme.
Footer explained:
The footer column system may look a bit complicated but it's really not. You can divide your footer into widgetized columns. So for instance, you can have a footer composed by 3 1-third columns, which would fill all of it. a full width or a mixed. Below there's a list of the variables you can use.
- 1
- 1/2
- 1/3
- 2/3
- 1/4
- 3/4
- 1/5
- 2/5
- 3/5
- 4/5
- 1/6
- 5/6
Once you make your template, these columns will automatically appear in your widgets page.
Home Options (section)
As suggested, the home will affect only your home page when modified. The home section consists of 2 tabs. One for its layout and the other for the slider. The section itself is very straight forward. The slider is extensively documented further on a separate section.
Blog Options (section)
This options will mainly include layout modifications to your blog pages.
Home
The homepage of this theme is controlled by Home Posts. Home Posts are a custom post type located right below your "Posts" menu in the WP Admin Panel.
Home posts should be treated like normal posts, they have a title and a content, but are shown only in the homepage.
To start create home posts, go to your home post menu in the WP Admin Panel under "Home Posts" right underneath the "Posts" menu, and click Add New. Refer to the image below.
Custom Fields
When creating or editing your home posts you'll notice that there are a couple of custom fields at the top of your right sidebar.
The first one allows you to display the title of the post at the top of the it. Turning it on will display its title before the content.
The second will add a divider line at the bottom of the post, with a top link. The top text is editable via the language files.
Other than the home posts are very bare and basic. The Homepage was built using shortcodes and basic HTML. Feel free to import the dummy content into your install.
Slider
The slider in timeless is totally post driven by the custom post type "Slides". Just like the home posts they will only be displayed in the slider and have their own fields.
To start creating slides, make sure you've configured your slider in the DDPanel. The slides panel is located above the Comments section in your WP Admin Panel. Refer to the image below:
When you start dcreating your slide you'll notice several custom fileds on your right sidebar. Below there's a list of what they are for.
- Inline Content - Turning this on will display your content instead of your image as the slide. The DDSlider supports inline content. Refer to the DDSlider documentation to know more about this.
- Slide Image - If you're not using Inline Content you need this for your slide appear. This is the image that will be your slide. Images are cropped to the widthxheight of the slider.
- Slide Image Link - The link where your image will redirect the user when it's clicked.
- Slide Transition - Select a transition for your slider.
Publich your sldie and it should now appear in your homepage. The title is not used in this case, but it's a good idea to keep your slides organized. The content area is only used if you're using Inline Content for your slide.
DDPanel Configs
When you go to the slider section of the DDPanel, the settings might look a little overwhelming but they are quite simple. Clicking the Question icon will provide you with information on that field.
Pages
The pages part in this theme is pretty much the easiest and simplest part of all.
Pages only have two custom fields at the top of your right sidebar which defines the position of your sidebar or make it full width and to display or to not display the title of the page.
Other than that you will rely on shortcodes to enhance your page. Please refer to the Shortcode section of this documentation for further information.
Blog
The Blog in timeless if farily simple but requires a few steps in advance. To display our posts we need a page with the blog template assigned to it. Follow the steps below to create your blog:
Create a Blog Page
First off we need a page to display our posts. Start by creating a new page under the "Page" menu.
In your pages menu, create a title, choose your custom settings and you'll need to select the Blog Page Template. At the bottom of your right sidebar choose your Template as the "Blog Page". Publish your page and we'll now start creating posts.
Creating your posts
Creating your posts is fairly simple but as usual let's get you through the custom options.
You'll see 2 custom options at the top of the page. Your Page Layout and your Featured Image Height. Fill the other fields as usual.
Featured Image:
To display an image at the top of the posts like we have in the live preview you will need to set a featured image. To do that click on the "Set featured image" link at the bottom of the page. a pop will appear. Upload your image and wait for it to uplaod.
Now comes the tricky part, once your image is uploaded you want to click the "Set as featured image" link and not "Insert into post". Once you click that you can just close the pop up. Refer to the image below.
Excerpts
For many people the excerpt is a quite unclear bit of Wordpress. Basically when wordpress displays the content of the post in the homepage or categories, search and archives page you have the option to show just a short introduction of content. These short introductions can be a small part at the beginning of your content or a whole different bit of content. These introductions area called "excerpt".
Defining a custom excerpt:
To define a whole custom excerpt (something that has nothing to do with your actual content) all you need to do is insert your content in the excerpt field. Just below the main content area. Once you insert any content there the theme will automatically display the excerpt at the home, categories, search and archives page even if you turn off the force excerpt from the DDPanel. Refer to the image below.
Using the more tag to limit your content:
Another option that you have is to use the more tag to limit the beginning of your content. Say for instance that you only wanna show a part of the beginning of your content in the main pages but you dont wanna create something from scratch. By using the more tag you can define a stop point so wordpress stops displaying the rest of your content.
To use your more tag all you have to do is click a button in your visual editor. Put the cursor exactly where you want to stop the content and click the more tag button. Refer to the image below.
Portfolio
Like in our blog page, we first need to create a page to display our portfolio posts. Follow the steps below to create your Portfolio Section:
Creating a Portfolio Page
Start by creating a new page and se;ect the Portfolio age as your template
Once you select the portfolio template, immediatly a whole new set of custom options will appear.
- Template - How many columns to have in your portfolio page. This includes the sidebar if you have one
- Posts per Column - Number of portfolio posts shown per column.
- Sidebar
Once you're done with those follow the normal rules and publish your page.
Creating portfolio posts
Right Under the Home Posts you'll note the Portfolio Posts section.
Start by creating a new post. Once you're in the add new post page you'll note a whole bunch of custom fields.
- Thumbnail - Your thumbnail image. You can leave this blank if you're using a full size image
- Full Image - This is required if you're not using the video part. Your full size image. If you don't fill the thumbnail field, a thumbnail will be generated from this image.
- Video Code - The video code. This theme accepts videos from Vimeo, Youtube or a .avi, .mov or other videos you have. If using Vimeo, your video code will be just the code after the "/". So if your url is http://vimeo.com/asdfgh - your code will be asdfgh.
For Youtube the same thing.
If you're using a externam video file, just insert the entire URL of your video file. - Video Type - Type of video you're using
- Main Colour - This is the color that surrounds the thumbnail when you hover. leaving blank will show grey.
- Thumbnail Height - the height of your thumbnail when it's displayed in the portfolio page.
It's a good idea to create categories for your portfolio posts. You can display categories page to display just a certain type of images.
Shortcodes
All shortcodes in your theme are in-built in either your visual editor or HTML editor in the wordpress text editor. All you have to do is click the buttons and either they will be inserted in your editor or a pop up will appear for you to fill a few fields. Below we wil lgo through them really wuickly since they are all pretty straight forward to use.
Column shortcodes
The column shortcodes ar eembedded in the HTML editor. To use them just open the tag, insert your content and close your tags.
Note that when you are stacking your columns, the last one should have the last attribute. Take a look at the live demo, Columns Page to see exactly what I'm talking about.
Shortcode Tips
- Always have at least a blank space in between shortcodes. Wordpress gets confused if you put them next to one another
- If you ever need to type a shortcode but you dont really want to activate it, wrap the shortcode in [raw] tags.
Buttons:
The buttons shortcode is pretty much the most complex (yet very simple :P ) shortcodes. The buttons shortcode button is the very first of all of the buttons and you can identify it in the image below if you can't see it.
It is very easy to use but in the pop up that appears you have 3 tabs to choose from. Each tab corresponds to a different type of button. Make sure you choose the one you desire.
Tooltips:
As you can see in the shortcodes live preview, The tooltip button allows you to create fast easy-to-use tooltips in pretty much any element in your content. Bi clicking in the tooltip button a popup will appear with different options and fields for you to choose and set. All fields have a brief description underneath them.
Notification Boxes:
Notification boxes allow you to create fluid width boxes to inform content. You can check out the five examples in the Shortcodes section of the live preview. You are able to insert any HTML in your boxes. Refer to the image below to know which button refers to the notification boxes shortcode.
Lists
Lists allows you to easily create custom list with different types of bullets.
Once you click on the lists button (refer to the image below) you'll be given the option to choose exactly which list you want. After that creating lists is up to you. One piece of advice that I always give is to keep your lists organized and write them first in a separate document on notepad or textEdit. Try not to break lines in between the shortcodes as WordPress has a bad habit of choking <br /> tags in your code and breaking uneccessary lines. For example:
[list_hot] [li]First List[/li] [li]Second List[/li] [li]Third List[/li] [/list_hot]
Image Slider
The image slider might seem a little tricky at first but it's really not. What you do need to keep in mind is that you need a fixed width and a fixed height. When inserting the height you should insert the height of the images you want to insert. When adding the width, you should add 20px to the total width of your images. For instance, if your images are 800px wide your width would be 820px.
After that just make sure you dont break lines in between the slide tags as wordpress will isnert uneccessary br tags to your final code.
Toggled Content
Toggle content is one of the simplest shortcodes. All you have to do is select its initial state and insert content in between your tags. it accepts all kinds of content and shortcodes.
Tabs
Just like sliders, do the mas told in the popups just dont break lines in between the shortcode tags and this leads to uneccessary line breaking.
Latest Blog Posts
This will display your latest blog posts anywhere you want. Click the button for further information on how to use the shortcode.
Widgets
Timeless comes with several different widgets. Below there's a list on these wdigets.
Also every widget that comes with wordpress is already styled so you don't have to worry about stying them.
Half Column Widget
There are two widgets that allow you to divide your sdebar into two columns. To do so, you should insert an open half width column to open the column and use the Close One-Half column to close it.
Whenever you open a column remember to close it. If it's the last column remeber to check the "Last" checkbox.
Flickr Photo Stream
Displays the given number of flickr photos from a given user on flickr.
Popular & Recent posts and Latest Comments
Displays a tabbed widget with a given number of the most popular and recent posts as well as latest comments.
Twitter Feed
Displays the twitter feed of a given username.
Widget Areas
- Footer - This will vary, but this widget areas are displayed in your footer area.
- Page Sidebar - Displays in your page sidebar
- Blog - Will Display in your blog pages as well as single posts
- Portfolio - Displays in your portfolio sidebar
- Portfolio Single Sidebar - Will display when viewing your portfolio single posts if enabled.
Files
In this section you'll find detailed information about the files in this theme
CSS Files
Most css files in this theme are located inside the /css/ folder in the root of the theme. The main configuration file is the style.css file which is located in the root folder of the theme.
Most files in the css folder are just configuration files that you probably won't need to edit. The reset.css file resets the default css of browsers so the theme looks the same across all browsers.
The main css file and the scheme css files are organized into sections to help you out on modifying them. IF you want to edit the colours and configurations of your theme, edit the style.css file.
PSD Files
PSD Files can be downloaded separately from http://timeless.salumguilher.me//PSD.zip - This is due the size of the PSD files affecting the download of the file from themeforest.net
You'll find named and grouped layers to best help you.
JS Files
I recommend you do not play with these files as they can malfunction the theme. If you do need, the are located under the /js/ folder in the root folder of your theme.
The only file you'll be needing to edit is the scripts.js file that takes care of all the scripts in the theme. Other than that the files are default files from other javascript libraries and scripts.
Support
If you do need support please visit http://support.dd-studios.com/ to get help. Please note that we provide support only and not customization. if your theme is not functioning properly we will help you. Modifications however will be charged.