Blog & Posts

Customize the blog and posts layout of your Joomla website.

YOOtheme Pro adds several layout settings for the Joomla blog. When configuring the settings, it's recommended to browse to the blog and preview the changes immediately.

The following settings can be found in the Layout → Blog and Layout → Posts panels of YOOtheme Pro.


Blog Settings

The blog layout settings define how the blog overview and its teaser posts are displayed.

General Settings

There are some general settings to configure the blog overview page.

Setting Description
Width Set the blog width.
Padding Set the vertical padding.
Columns Set the larger gutter for your columns.
Breakpoint Set the breakpoint from which the grid cells will stack.
Masonry Enable masonry effect and create a layout free of gaps even if grid cells have different heights.
Parallax Enable parallax effect and move single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels.

Note The number of columns displayed on the blog overview page can be defined in the Article Manager Options in Joomla under Blog/Featured Layout. Mind that setting the number of columns in the Menu Item will override the option from the Article Manager.

Image Settings

Configure images on the blog overview page.

Setting Description
Image Margin Set the top margin if the image is aligned between the title and the content.
Image Width Set the width of the image.
Image Height Set the height of the image.

Note The image position can be defined in the Article Manager Options in Joomla under Editing Layout.

Content Settings

There are some settings to configure the content on the blog overview page.

Setting Description
Alignment Center the title, meta text and button.
Title Style Set the title style.
Title Margin Set the top title margin.
Meta Margin Set the top meta margin.
Content Margin Set the top content margin.
Content Alignment Center the content on the blog overview page only.
Content Length Limit the content length to a number of characters and add the "Continue Reading" button.
Button Set the style for the "Continue Reading" button.
Button Margin Set the top button margin.

Use a numeric pagination or "previous/next" links to move between blog pages.

Navigation settings

Additionally, you can show or hide Start/End links.

Start/End links

Joomla Blog Options

Joomla offers many additional blog options. Here is a list of the most important ones. Open Joomla's global article settings and click the Blog/Featured Layouts tab.

Setting Description
Leading Articles Set a number of leading articles to display full-width at the beginning of the page.
Columns Set the number of columns.
Multi Column Order Order posts down or across columns.

Post Settings

The post layout settings define how a single post is displayed.

General Settings

There are some general settings to configure the blog detail page.

Setting Description
Width Set the post width.
Padding Set the vertical padding.
Content Width Set an explicit content width which doesn't affect the image or inherit the post width.

Image Settings

Configure images on the blog detail page.

Setting Description
Image Margin Set the top margin if the image is aligned between the title and the content.
Image Width Set the width of the image.
Image Height Set the height of the image.

Content Settings

There are some settings to configure the content on the blog detail page.

Setting Description
Alignment Center the title and meta text.
Title Margin Set the top title margin.
Meta Alignment Position the meta text above or below the title.
Meta Margin Set the top meta margin.
Meta Style Display the meta text in a sentence or a horizontal list.
Content Margin Set the top content margin.
Drop Cap Set a large initial letter that drops below the first line of the first paragraph.

Joomla Article Options

Joomla offers many additional article options. Here is a list of the most important ones. Open Joomla's global article settings and click on the specific tab.

Setting Tab Description
Position of Article Info Articles Position the meta text above or below the title.
Show Navigation Articles Enable a navigation to move to the previous or next post.
Image Float Editing Layout Choosing the left or right option will display the image between the title and the content. Set to None it will display at the top of the article.

YOOtheme Pro