1. Frequently Asked Questions
  2. Setting up the front page
  3. Setting up posts Image Thumbnails
  4. Setting up posts Video Thumbnails (PRO)
  5. Setting up a Blog Page
  6. Setting up a contact page (PRO)
  7. Setting up Individual Background Image (PRO)
  8. Setting up page individual page header (PRO)
  9. Setting up the Menu
  10. Styling the Theme
  11. Widgets (PRO)
  12. Shortcodes (PRO)
  13. Theme Support
Back

1. Frequently Asked Questions


The front-page looks different after install, There is no slider..

Go to Settings > Reading and make sure you set the "Front page displays" to "Your latest posts".


My Slides keep disappearing after saving. Why?

The Title field of each slide is required. Make sure each of your slides has a title.


My Slider Images are being Cut. Why?

By Default the slider has a fixed height that you can change from Asteria Options > Slider > Slider height. If you want the slider to display full image, write auto in the "Slider Height" Field.


How do I change the number of Posts on Frontpage?

Go to Settings > Reading > Blog pages show at most option and change the number of posts.


How do I disable the comments?

Go to Asteria Options > Miscellaneous Settings and set the "Show Comments" option to "Off"


Back

2. Setting up the front page


When you select “Your Latest Posts” from Settings> Reading you will be able to display 8 frontpage elements on your site’s frontpage. They are:

i. Slider
ii. Blocks
iii. Welcome Text
iv. Frontpage Posts
v. Location Map
vi. Call to Action
vii. Frontpage Widgets Area



i. Setting up the slider

From Asteria Theme Options> Slider click the “+ Add New” button to add new slides. For each slide you should set:

Create New Slide


a.Image: Select/Upload Slide image by clicking the “Upload Image” button. If you are using the “Full Width” mode, make sure the slider images have at least 1600px of width. If set to fixed, the slider images should have minimum width of 1200px. If your images are bigger, you can resize and crop them online using this application: http://pixlr.com/editor/. There’s also a video tutorial on youtube on how to resize and crop your images and save them: https://www.youtube.com/watch?v=WmFjvNlm1E4
b. Title: Write a title of your slide. This is optional; if you don’t want to display the title of the slide you should keep this empty.

c. Description: If you want to display a little subtext under the title of the slide you should use this field. You can use HTML tags.

d. Url: If you want your slide image and title to contain a link, you should put it here.
e. Slide Text layout:  Select how you want to display the text of the slider.

By default the slider displays 3 default slides, if you want to remove the slider from your frontpage, set the slider type to “Disable Slider”. If you want to display sliders in your static pages, use the slider shortcode that comes with theme. See Shortcodes Section for details.


ii. Setting up the blocks

To setup the blocks, Go to Asteria Options> Frontpage and click the arrow button beside the text “Blocks” and blocks settings options will appear. You can setup or hide each block individually. You can display up to 4 blocks. Each block has followings options:
b. Block Title: Title of the block.
c. Block Icon: You can select which icon to display from this option. To hide the icon, select “No icon” from the list.
d. Block Content: Write your block content here. You can also add html and images in your block content.


Note: You can hide each block by clearing the "Title" field and "Description" field. When these 2 fields are empty, the block is will not be shown on frontpage.

iii. Setting up Welcome Text

To setup welcome text, Go to Asteria Options> Frontpage and click the arrow button beside the text “Welcome Text” and welcome text settings options will appear. You can write you welcome text and also what color the background of the welcome text area should be.


v. Frontpage Posts

To display posts on front page, click the arrow button beside the “Frontpage Posts” text. Now setup your posts:

a. Title & Description: You can display some text before your posts (Optional).
b. Layout: Select how you want your posts to appear.
c. Display posts from a category: By default, the posts appear form all categories and the number of posts per page is set from Settings> Reading. But if you want to display posts from a selected category and a selected number of posts, you should turn this option on.
d. Category Name: If you turn on the above option you will have to select the category of your frontpage posts.
e. Number of Posts: You can only set the number of frontpage posts if you turn on the option “Display posts from a selected category” from above. If you haven’t, you can set the number of posts from Settings> Reading.


vi. Location Map

If you want to display your company location in a map, you can do that from this section.  To setup the map, you should set the following settings:

a. Title & Description: You can display some text before your posts (Optional).
b. Latitude and Longitude: to display your location in the map, you will have to find your location’s latitude and longitude. To know your location’s lat/long, use this website: http://www.doogal.co.uk/LatLong.php after determining your lat/long, you should put the lat/long in this field separating them with a comma. Eg: 53.359286 , -2.040904
c. Map Bubble Text:  You can display a text, your location details, etc when someone hovers over your map’s pointer. You can use HTML in this field.


vii. Call to Action

If you want to get your visitor’s attention and urge your site’s viewers of a sales promotion message to take an immediate action you should use this Element. To setup a call to action banner, you should fill these settings:

a. Call to Action Text: You can write the message you want your viewers to follow in this section.
b. Button Text:  Text to display in the button.
c. Button Link: when viewers click the button, they should be taken to this link.
d. Background Color: The color of the background can be set here.
e. Button Color: The color of the button’s background can be set here.
f. Button Text Color: You can set the button’s text color from this option.


viii. Frontpage Widgets Area


You can select your widgets from Appearance> Widgets. These widgets will be displayed only on frontpage. You can display any widgets you want here.


Frontpage Elements Position

You can change the order of the frontpage elements from this section. Simply drag and drop each element and re-order their position.

Back

3. Setting up posts Image Thumbnails

To setup post thumbnails, you should use the "Featured image" option of wordpress. While editing the post, on the right, notice there is a "Featured Image" box. Add your post thumbnail image from here. For best visual appearance, the minimium dimension of the thumbnails should be 350px x 235px

Create New Slide

Back

4. Setting up posts Video Thumbnails (PRO)

To setup video thumbnails, while editing the posts notice there is a box on right that says "Asteria Video Thumbnail". Add your youtube video link here to display it as a thumbnail of the post. You can display your youtube videos as thumbnails. Your viewers can play the video directly from the front page without going to the main post.

Video Thumbnails

Back

5. Setting up a Blog Page

If you want to set up a blog page, you should use the "Blog page Template" that comes with the theme. To setup a blog page, follow these steps:

Page Template

Back

6. Setting up a contact page (PRO)

In Asteria, you can setup a contact page without any plugin. Just create a new page and select the "Contact Page" template from "Page Attributes" box and you are good to go. By default the contact page email address is set to your admin email address. You can change that from Appearance> Asteria Options> Miscellaneous.

Back

7. Setting up Individual Background Image (PRO)

In Asteria you can use different background color or images on different pages/posts. While editing the post/page notice on right there is a settings box called "Asteria Background per page". You can set the background color/image from this options box.

Background Image

Back

8. Setting up page individual page header (PRO)

With Asteria you can use different page header for different pages. Each pages of your site can have different image. You can setup different page headers while editing the page. In page editor, notice there is a box on right that says "Asteria Page header" Under this you can either select a different image as your page header. Make sure the width of the image is at-least 1200px. If you are using the "Full Width" mode from the theme options page, then the image should be at-least 1600px wide.

Page header

Back

9. Setting up the Menu

Setting up a menu is quite easy. Follow these steps to create a menu:

Menu Setup

Back

11. Styling the Theme

With Asteria you can change the color of every elements and text.

Back

12. Widgets (PRO)

Asteria comes with 15 Custom Widgets. You can add them to your widget areas from Appearance> Widgets. The widgets are

  1. Biography Widget - A widget to display site owner's biodata, occupation and image.
  2. Countdown Widget - A widget to display countdown to your event or anything.
  3. Custom 125 x 125 ad Widget - To display custom 125 x 125px ads.
  4. Custom 160 x 600 ad Widget - To display custom 160 x 600px ads.
  5. Custom 250 x 250 ad Widget - To display custom 250 x 250px ads.
  6. Facbook Likebox Widget – A widget to display the profiles of those who liked your facebook page.
  7. Featured Posts Widget – A widget to display posts from a selected category.
  8. Flickr Photostream Widget – A widget to display flickr images from any flickr album.
  9. Google Plus Followers Widget – A widget to display your google plus followers.
  10. Image Widget – An image widget to display image.
  11. Pinterest Pinboard Widget – A widget to display pinterest images from your pinterest profile.
  12. Popular Posts Widget – Displays popular posts of your site. The popularity of the posts is based on comment counts.
  13. Random Posts Widget – Displays random posts.
  14. Recent Posts Widget – Displays recent posts with style. Forget about the generic recent widget that comes with wordpress.
  15. Twitter Follower Widget – A widget to display followers from your twitter account.
Back

13. Shortcodes (PRO)

Asteria comes with 29 amazing easy to use shortcodes with inline documentation helper. You can use these shortcodes in your posts, pages and also in your text widget.

  1. Success box Shortcode
  2. Info box Shortcode
  3. Warning box Shortcode
  4. Error box Shortcode
  5. Quote Shortcode
  6. Divider Shortcode
  7. Table Shortcode
  8. 2 columns text Shortcode
  9. 3 columns text Shortcode
  10. 4 columns text Shortcode
  11. Facebook Like button Shortcode
  12. Tweet button Shortcode
  13. Pinterest button Shortcode
  14. Google + button Shortcode
  15. Slider Shortcode
  16. List type 1 shortcode
  17. List type 2 Shortcode
  18. List type 3 Shortcode
  19. List type 4 Shortcode
  20. List type 5 Shortcode
  21. Responsive Youtube video Shortcode
  22. Responsive Vimeo video Shortcode
  23. Tabs Shortcode
  24. Toggle Shortcode
  25. Button Shortcode
  26. Call to Action Shortcode
  27. Iframe Shortcode
  28. Countdown Timer Shortcode
  29. Featured Image Shortcode

Shotcodes

 

 

  1. Success Box Shortcode
    Display Your content in a greenish message box. Great for displaying success messages. Example
    Usage: 
    Wrap your text with [success][/success]
  2. Info Box Shortcode
    Display Your content in a bluish message box. Great for displaying info messages. Example
    Usage: 
    Wrap your text with [info][/info]
  3. Warning Box Shortcode
    Display your content in an orange message box. Great for displaying warning message. Example
    Usage:  
    Wrap your text with [warning][/warning]
  4. Alert Box Shortcode
    Display your content in a red message box. Great for displaying alert message. Example
    Usage:  
    Wrap your text with [alert][/alert]
  5. Quote Shortcode
    Display your quote with a beautiful quote icon. Example
    Usage: Wrap your text with [qoute][/quote]
  6. Divider Shortcode
    Use this shortcode to display a borderline or divider to divide your post. Example
    Usage:
    [divider style="solid" color="#eeeeee" width="1px"]
    parameters:
    style= solid, dashed, dotted, double, groove, ridge, inset, outset, none
    color= any hex color values.
    Width = any number of width in pixel. e.g: 5px

  7. Table Shortcode
    Use this shortcode to display a table. Example
    Usage:
    [table cols="names,age,occupation" data="Jhon,25,Blogger,Sara,20,Model"]

  8. 2 columns text Shortcode
    Use this shortcode to display text in 2 columns. Example
    Usage:
     [col2] your text that you want to display in 1st column [/col2]
    [col2] your text that you want to display in 2nd column [/col2]

  9. 3 columns text Shortcode
    Use this shortcode to display text in 3 columns. Example
    Usage:
     [col3] your text that you want to display in 1st column [/col3]
    [col3] your text that you want to display in 2nd column [/col3]
    [col3] your text that you want to display in 3rd column [/col3]
  10. 4 columns text Shortcode
    Use this shortcode to display text in 4 columns. Example
    Usage:
     [col4]your text that you want to display in 1st column[/col4]
    [col4]your text that you want to display in 2nd column[/col4]
    [col4]your text that you want to display in 3rd column[/col4]
    [col4]your text that you want to display in 4th column[/col4]
  11. Facebook Like button Shortcode
    Display a facebook like button anywhere you want. Example
    Usage: [fblike]
  12. Tweet button Shortcode
    Display a Twitter Tweet button anywhere in the post. Example
    usage: [tweet]
  13. Pinterest button Shortcode
    Display a Pinterest Pin it button anywhere in the post. Example
    Usage
    : [pinit]

  14. Google + button Shortcode
    Display a Google plus shortcode button anywhere in your post. Example
    Usage:
    [gplus]

  15. Slider Shortcode
    Display a slider anywhere in your post. Example
    Usage:
    to add a slider in your post, follow these steps:
    a. Click the “Slider Shortcode” button. This will be added to the post editor:
    [slider effect="random" pausetime="3000" autoplay="true" navigation="true"][/slider]

    b.
    Put your cursor right before this [/slider]
    a.
    Click the “Add Media” button and upload your images. Then hold the ctrl button from your keyboard and select the images that you want to display in your slider. Now click “Insert into Post” button.
    b. That’s all! You have successfully added a Slider in your post.  You can change the parameters of your slider if you want to customizr the slider.
    parameters:
    effect=
    random, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
    Pausetime= in milliseconds. Eg: 3000
    autoplay=
    true/false
    navigation=
    true/false
  16. List type 1 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage:
    [list1]<li>item1</li><li>item2</li><li>item3</li>[/list1]
  17. List type 2 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage:
    [list2]<li>item1</li><li>item2</li><li>item3</li>[/list2]
  18. List type 3 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage:
    [list3]<li>item1</li><li>item2</li><li>item3</li>[/list3]
  19. List type 4 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage:
    [list4]<li>item1</li><li>item2</li><li>item3</li>[/list4]
  20. List type 5 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage:
    [list5]<li>item1</li><li>item2</li><li>item3</li>[/list5]
  21. Responsive Youtube video Shortcode
    With this shortcode you can display youtube videos that are responsive to the screen size.
    Usage:
    [youtube width="100%" height="100%" autoplay="false"]your youtube video link[/youtube]
  22. Responsive Vimeo video Shortcode
    With this shortcode you can display Vimeo videos that are responsive to the screen size.
    Usage:  
    [vimeo width="600" height="365" autoplay="false"]your vimeo video link[/vimeo]

  23. Tabs Shortcode
    With this shortcode you can display your content in beautiful tabs. Example
    Usage:
    [tabs titles="Tab One, Tab Two"]
    [tab]Tab one content[/tab]
    [tab]tab two content[/tab]
    [/tabs]
    Note: To use html inside you tabs, switch to “Text” mode of the editor.
  24. Toggle Shortcode
    With this shortcode you can display your content with show/Hide button.Example
    Usage:
    [toggle title="Spoiler alert"]Your content which is by default hidden.[/toggle]
    parameter:
    title= “your show/hide buttons text.”
  25. Link Button Shortcode
    You can display colorful buttons with this shortcode. Example
    Usage:
    [button background_color="#eb5c49" text_color="#ffffff" url="http://www.google.com" ][/button]

    parameters:
    background_color = any hex color value
    text_color = any hex color value
    url = link of the button
  26. Call to Action Shortcode
    If you want to get your visitor’s attention and urge your site’s viewers of a sales promotion message to take an immediate action you should use this Element. Example
    Usage: [callaction url="http://www.google.com" background_color="#2dcb73" text_color="#ffffff" button_text="A Simple Button" button_background_color="#e64429" button_text_color="#ffffff"]Your Call to Action Text Message[/callaction]

    parameters:
    url= url of the button
    background_color = any hex color value.
    text_color= any hex color value
    button text = Text that you want to display inside the button
    button_background_color = any hex color value.
    button_text_color = any hex color value.

  27. Iframe Shortcode
    With this shortcode, you can display any websites you want in your post using iframe.Example
    Usage: [iframe url="http://www.beemp3.com" width="100%" height="500" frameborder="0"]
    parameters:
    url= the webpage that you want to show inside you iframe.
    width = width in percent.
    height = height in number
    frameborder = any numeric number.

  28. Countdown Content Shortcode
    Countdown shortcode will hide your selected text and show it automatically on a certain date.
    Usage:
    [countdown date="21" month="9" year="2015"]Your content that will be hidden and will be shown after the countdown ends.[/countdown]

  29. Featured Image
    Displays the featured image of the post, if set any.
    Usage:
    [featimage align="left"]
    parameters:
    align:
    left, right, center

 

 

Back

14. Theme Support

Theme support of the free version is provided here:
http://www.towfiqi.com/forums/forum/asteria-lite

Theme Support for the premium version is provided here:
http://www.towfiqi.com/forums/forum/asteria-pro