Celebrating our 8th  anniversary  50% OFF everything. Use coupon code  BDAY18

Founder and Head of Ideas of ThemeXpert. I love building engaging and impactful products! A Joomla! enthusiast and web tech nerd, I love helping people to solve problem in a lean and elegant way. Proud father, husband and family guy love reading and eating own dog food.

How to Re-create Joomla.org Homepage With Quix

How to Re-create Joomla.org Homepage With Quix

After a year of hard work, Joomla homepage redesign team recently rolled out a brand new design for Joomla.org. Our heartiest thanks to volunteers involved in this team for their fantastic job.

The redesign team took more than a year for research, gathering feedbacks, testing and backporting the old template.

The redesign team’s vision started laying the framework for an upgraded site template for all of our Joomla! Web properties; however, we are not yet at a point where we can roll out this template. So the redesign team’s work was backported into our existing template so we could immediately make use of the team’s hard work and fresh ideas.

At ThemeXpert, our goal to help you make website faster with our joomla templates and page builder. So we asked ourselves, how fast we can make the exact homepage with our tools. Turns out, very fast!

It took us less than 6hrs to replicate the homepage with our Firefly Joomla template and Quix.

It perfectly makes sense to spend a year for redesigning, when the project size is too big like Joomla. Purpose of this blog post to show, how fast you can incorporate a design into your website.

Before we start

We will be using Firefly Joomla template and Quix page builder. Firefly is the best versatile joomla template we have ever created. Firefly comes with different header styles and homepage variations that will help you to build any website you want.

Creating Header

Step 1

To get an exact look, we need to write some CSS code. Who writes CSS code this day? Here is the less code for header style. Joomla header has few different gradient, and we will use Bootstrap gradient mixin for that.

/**
* Roof
 */
.t3-sl-roof {
  background-color: #13294a;
  #gradient > .vertical(#152d53, #10223e, 0%, 100%);  border-color: #0b172a;
  &.t3-sl { padding: 8px 0; }
  .t3-module, p { margin: 0;}
}
.t3-roof {
  .nav {
    margin-top: 3px;
    li {
      float: left; margin: 0;
      a {
        padding: 0px 10px;
        color: #d9d9d9;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        &:hover {
          background: transparent;
          color: #fff;
        }
      }
    }
  }
  .search {
    .form-control {
      height: 28px;
      padding: 4px 14px;
      font-size: 13px; 
      line-height: 1;
      border-radius: 0;
      background: #d9d9d9;
      &:focus {
        background: #fff;
      }
    }
  }
}
/**
* Header
 */
.t3-header {
  padding-top: 0; 
  padding-bottom: 0;
  background-color: #1a3867;
  #gradient > .radial(#17568c,#1a3867);
  border-top: 1px solid #2f64b8;
  border-bottom: 1px solid #10223e;
}
/**
* Navbar
 */
// Default Navbars (Visual Style only)
// --------------------------------------------------
.navbar-default {
  background-color: #1b63a2;
  border-top: 1px solid #2d8bdc;
  border-bottom: 1px solid #10223e;
  .navbar-nav {
    margin-top: 7px;
    li {
      margin-right: 2px;
    }
    > li > a,
    > li > span,
    > li > .separator {
      padding: 8px 12px;
      line-height: 1;
    }
    > li > a {
      color: #fff;
      border: 1px solid transparent;
      &:hover,
      &:focus {
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
        border: 1px solid #092034;
        .box-shadow(inset 0 -1px 0 rgba(255,255,255,0.2));
      }
    }
    .active > a {
      color: #fff;
      background-color: #1e71b8;
      border: 1px solid #103b60;
      .box-shadow(inset 0 1px 0 rgba(255,255,255,0.5));
    }
  }
  .navbar-link {
    color: @navbar-default-link-color;
    &:hover {
      color: @navbar-default-link-hover-color;
      background-color: #103b60;
      border: 1px solid #092034;
      .box-shadow(inset 0 -1px 0 rgba(255,255,255,0.2));
    }
  }
}
/**
* Elements
 */
.qx-element-joomla-articles {
  .qx-btn {
    padding: 4px 12px;
    background-color: #eee;
    color: #333;
    border: 0;
    border-radius: 0;
  }
}

Save the code to a less file called joomla-website.less. Include this file in template.less file for less to css compilation.

@import "joomla-website";

Step 2

Create a menu module and publish to the roof-1 position. Then publish search module in roof-2 position.

Step 3

Upload logo from Theme tab on template option panel.

Step 4

Head over to Quix > Library page and create a library item. Just button group element contain two buttons.

From Joomla Module Manager > New Custom HTML module and load the shortcode from Quix library.

Now, from template settings navigation tab select the main menu.

We are done with header now let's move the page, and we will be using Quix page builder.

Creating The Page

Re-creating Joomla homepage is quite straight forward and easy. We need only a few elements for the homepage.

  • Text element
  • Blurb element
  • Image element
  • Button element
  • Divider element
  • Video element
  • Joomla article element
  • Number counter element
  • Social icon element

Here is the full screenshot of the backend.

Here is the output :

See Live

Joomla! is the 2nd most popular open source CMS on the planet. From corpoarte website to eCommerce website, Social site to customer management portal, everything is possible with Joomla!. You just need right tools for right purpose.

3
  1889 Hits
  0 Comments
1889 Hits
0 Comments

7 Must Have Joomla Extensions for Every Site

7 Must Have Joomla Extensions for Every Site

Finding a right Joomla extension for your site is always painful when you have choice of 7K+ extensions. Right now, Joomla Extension Directory (JED) contains 7943 extensions and choosing right extension for sites could be a nightmare. For you we have prepared a short list of extensions which every Joomla site requires.

Disclaimer
All joomla extensions mentioned in this article are regularly used by ourselves and our child sites. Neither we have any affiliation with the extension provider nor we have used any affiliate link.
Continue reading
20
  26886 Hits
  0 Comments
26886 Hits
0 Comments

Huge Documentation Update

Huge Documentation Update

Every day, we read lots of technical documentation on many libraries and products. We realized, documentation is the primary reason for selecting any libraries or product.

On our last company re-treat, we decided to improve all our Joomla and WordPress product documentation at its best.

We hired a new technical writer, and he is busy re-writing all our product documentation from scratch.

We also improved UX of our documentation portal so you can easily navigate between the articles, section filtering and ajax based search.

Doc Nav

When you read any documentation, you can jump to any section by clicking left side navigation. It's an expandable navigation system designed to help you find correct documentation at the right time.

Doc Article Jump

You can select another documentation from the same category without leaving the page. Just click the arrow button from top breadcrumb, and you are ready to jump between article.

Ajax Search

Not sure where to go? No problem, we have Ajax based search system help you to find the right documentation you are looking at.

Kudos to our developers and writer for putting this all together and it's just scratching the surface. We have a long way to go and re-write every piece of documentation.

You can check some of our recent documentation update: Firefly Joomla template, Infinito Joomla template, Eventia WordPrsss theme and more.

We wrote a details tutorial on how to setup a blog in Joomla, don't miss to check it out.

At ThemeXpert, we always try to took the pain out of creating website and made it easy.

1
  2944 Hits
  0 Comments
2944 Hits
0 Comments

10 Best Free and Premium Joomla Slideshow Extensions 2017

10 Best Free and Premium Joomla Slideshow Extensions 2017
[Update] You can build your Joomla website visually with our page builder Quix and you don't need any 3rd party extension for a slider. See our article How to create a beautiful slider with Quix and start building your website.

When visitors visit to a website, they look for something: they want to take action or get information at a glance. They are always in a hurry to scan a site. A statistics shows, visitors take maximum 8 seconds to take decisions whether stay a long or bounce.

An image expresses a thousand words and that's the reason slideshow came up. Conveying motto of your website to the visitors, and allowing them the answer, why they will hang on for a long while, is pretty challenging in a few seconds. Don’t worry statistics shows a solution. 90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text (Sources: 3M Corporation and Zabisco).

In Joomla you it’s pretty easy to create a slideshow. you'll find so many Joomla Slideshow extensions in Joomla extension directory. For your convenience, we've created a short list of free and premium slideshow extensions.

Continue reading
37
  165211 Hits
  0 Comments
165211 Hits
0 Comments

Infinito V2 Released - RTL, Built-in Blog, Typography Controls and More

Infinito V2 Released - RTL, Built-in Blog, Typography Controls and More

Infinito is our first Joomla template released with Quix page builder last year. Since then, we released many Joomla templates, and Quix has become the most powerful page builder for Joomla.

We started this year with a new template, and the whole team is busy updating the old templates with new features.

After a week of hard work, I am proud to present Infinito v2. It is a brand new template underneath, and we have added so many features in this version.

RTL Support

Infinito RTL

60% our clients come from the country where English is not their first language. RTL is the most requested feature from our client, and we decided to add it to all our templates.

Typography Control

Infinito Typography

They said content is king. We have added expressive typography controls with live font preview. You can select from 600+ Google font collection and see it live before apply to any HTML element. You can define font variations and size from the backend.

Template Options

Template options

With new template options, you can enable/disable many cool features like preloader, off-canvas position, back to top, sticky nav and more.

You can upload favicon from template backend. Creating custom error page has never been easier before. Select a menu or Quix page for you 404 error page.

Built-in Blog and Post Type Support

Joomla Blog

With our enhanced T3 framework, you can turn standard Joomla article to a full featured blog. We have added all custom post type like audio, video, gallery, link, quote and more.

No need to setup any 3rd party heavy blog software for running a simple blog site.

Comment System Built-in

Disqus comment

A blog without a comment system is like a boat without a sail. With our Disqus integration, you can enable comment to Joomla article by on click.

Get you Disqus API key and paste it to comment integration section and you are done.

Social Share

Social share

Joomla does not come with any social sharing system, and you do not need to use any 3rd party extensions anymore.

Changelog

  • [New] RTL Support
  • [New] Typography Controls
  • [New] Post format support (Video, Audio, Link, Image, Gallery, Quote)
  • [New] Comment System
  • [New]Social Share built-in
  • [Fix] StickyNav bug fix
  • [Fix] Responsive issue
  • [Improved] Quickstart updated to Joomla Latest Version
  • [Improved] Quix Latest version support
  • [New] New Template options
    • Preloader,
    • Back2Top,
    • OffCanvas position,
    • StickyNav,
    • Upload Favicon,
    • Footer Background Image,
    • Error Page

How to update

Updating Infinito template is pretty easy. You just need to download the latest version from our download page and install.

Few extensions required to enable all these features mention above. Please download required extensions zip file and install them.

Download Infinito Live Demo

5
  2661 Hits
  0 Comments
2661 Hits
0 Comments

[Case Study] How A Lawyer Developed His Own Site Without a Single Line of Coding

[Case Study] How A Lawyer Developed His Own Site Without a Single Line of Coding

Ashiqul Islam is a lawyer by profession and shared his story of making website for his law-firm.

Let me say something about myself, if you do not wish to read, you can move to the next headline of this article, but I promise you will not be bored.

I am a Lawyer, and I know how to draft, read and understand even the most complicated version of a document in the world. I mean that is what we do; it is an easy-peasy for all of my kinds.

FMAssociates Story

FMAssociate website

However, my knowledge is very limited when it comes to building a website. Based on the facts as mentioned above of my life, I realized that even the most ordinary man has the solution to all sort of extraordinary problems, all that is required now is to go “Search it online” and feed your brain for next couple of days.

I was stuck with a similar problem, I wanted to build a website for the law firm I work, that is for a simple reason, my farm wanted to generate business online. We wanted people to find us whenever they are searching for lawyers. So, we have decided to build a website.

At the beginning it felt like I was indulged into something too much ambitious, it appeared to me like a rocket science.

WordPress vs Joomla. Which one to pick?

Meeting

I slowly got myself familiar with Wordpress and Joomla; I learned that these are the two mainstream version of Content Management System dominating in the world. I realized that Joomla is a new player, which is doing comparatively well than others in evolving. Besides, I have researched that Joomla is perfect for built websites of these kinds as Wordpress is good for blogging and requires too many plugins to meet the need of a service website.

So I decided to build my website on Joomla. Now here comes the problem, I do not know how even to code a single line, it looks gibberish, and I do not have the time to learn about coding. I tried several Free Joomla Templates, but none of them aided to my purpose as such templates require severe customization and I was not up to the task.

Joomla Templates

Than I went looking for premium Joomla templates, one that I can buy and one that will have all the features ready for my editing. I have realized that there is a thing called Page Builders, and if you have a good one then you can simply build the website with ease.

I started looking for templates which have page builder installed, and I found two promising page builder online for Joomla.

  1. SP page builder from JoomShaper and
  2. Quix page builder from ThemeXpert.

I tried both of them before I finally decided to go with Quix.

Ask me why, because of Quix amazingly user-friendly, its colorful and attractive, truly responsive, drag and drop feature at its max.

Plus, they have a Joomla template for law firm which is a no-brainer to pick.

Also, Quix comes with lots of pre-designed blocks and pages which makes the whole aspect of building the website easier to get started with! By few clicks, my page is ready to edit.

Quix has built in SEO feature; that helps our site to get found on Google quickly. Besides you can set meta data and meta description in it. Also, Quix base pages are indexed by Joomla native search.

Quix SEO Feature

As I bought the template alone with Quix, I did not have to install Quix separately. However, I learned all that is required is to follow the following pathway: Extention > Manage > Install > Upload (Quix Zip File downloaded from Themexpert.com)- Click Install.

Boom.. Quix is ready with a new menu on the top right of the Joomla platform.

Once you click on the Quix, you will be directed to the Quix building page, from where all that you will be required to do is to create new pages, in the newly created page select your designated columns & rows. You can also adjust those columns flexibly with the drag and drop features as to your preferences.

Quix Blocks

After you are done with Columns and Rows, start putting elements in it.

What is element? The word element used in Quix is no different from modules in Joomla, or plugins in Wordpress. For example, the complex; nice slider which shows on your website is just an element inside Quix, besides its easily replaceable or editable with various styles.

At first, I drafted my site on a paper page; amazing and also true that I have succeeded to insert everything that I have wanted for my Website. You can have a look, click here.

Thanks to Quix and its enhanced SEO friendly features, our firm experiencing a drastic increase in the yearly revenue, and it seems like with every update its just getting better and better like the Chinese WeChat, hahaha.

Download Quix Free Visit FM Associates Website

Do you have a story to share? We'd love to publish your story on our blog. Contact with us and submit your story.

1
  2401 Hits
  0 Comments
2401 Hits
0 Comments

Quix 1.3 Released - Make Joomla Great Again!

Quix 1.3 Released - Make Joomla Great Again!

After several months of hard work, I'm pleased to announce Quix 1.3. Our goal is to help you build website faster, and with Quix's blocks, it's now 2x faster than before.

This version brings you an enhanced SEO settings that make it easier for users to recognize your official site and reach the information you provide more quickly when they search.

Blocks

Quix Blocks With Quix's pre-made blocks, you can instantly create any section or entire layout. Everything is visual, and you will get what you see on blocks image. Blocks are two types:

  • Section Block : Contain only one section with multiple rows and elements.
  • Layout Block : Contain multiple sections with the combination of rows and elements.

We will be adding more blocks every week, and you can see them without updating or downloading anything. Blocks list refresh once an hour.

Collection > Library

Collection is now called Library for a clear understanding of its use. Users often get confused about the name and based on your feedbacks we renamed it. Everything remain same and you won't loose any date.

Enhanced SEO

Enhanced SEO We are serious about SEO and Quix is the first page-builder that allow indexing its page content to Joomla search. Quix's HTML markups are also very semantic and friendly to search engine.

We are enhancing SEO capabilities by adding Google site attribute markup. Google offers a variety of ways to help you provide key business details so that they show up for users in Search results.

Add your business and marketing details like location, contact information, logo and social media links. Google will show them in their search results and knowledge graph card.

CSS Optimization

All the CSS files are now minified and cached for better performance. Before 1.3, page styles were on page header but now its cached on file and no more nasty HTML header in Quix.

Chart Elements

Chart elements

You can show statistics or survey data using 5 brand new chart elements. From simple bar chart to complex polar chart can be done using chart elements. Powered by the powerful Chart.js library.

Improvements and Fixs

  • ACL fix for Pages and Collection
  • Asset caching system
  • Admin styling
  • Library page improved with search
  • Toolbar menu updated
  • Text element update
  • Compatibility fix for 3pd templates
  • Admin icon fix
  • Router update
  • Font warning fix
  • Popover style fix
  • And many more...

Download Quix

5
  4543 Hits
  0 Comments
4543 Hits
0 Comments

Quix 1.1 Is Here, Including Section Stretching, Element Manager, Keyboard Shortcuts, And Multilingual Support

Quix 1.1 Is Here, Including Section Stretching, Element Manager, Keyboard Shortcuts, And Multilingual Support

2016 is surely a fantastic year for Quix. Last month we released Quix 1.0 and its a huge success for us. Quix has a long way to go, and we have so many things already planned.

Today we excited to release Quix 1.1. This new version of Quix comes with an Element Manager, section stretched mood, multilingual, and open graph support, enhanced editor, keyboard shortcuts, opt-in component support for shortcode and much more.

There is lots more to explore, let's jump into the details!

Section Stretch Mode

Perhaps the most exciting feature in Quix 1.1 is the section stretching mode, which allows you to expand any section to full width in any template with container enable or disable.

This is the most requested feature since we released Quix. Now you can make a full-width section in any box layout template.

Element Manager

Quix now comes with an advanced element manager where you can enable or disable elements you are not using frequently. I bet, you don't use all elements that come with Quix and or templates. Now you can disable less frequent used elements, and it will certainly boost your page loading speed.

Now template developers can disable core elements using Quix API, and you will see the elements disabled from element manager. You can always enable it when you want.

Multilingual and Open Graph Support

Running a multilingual website? Don't worry, you can now create pages for different language and assign them to different menu items.

With open graph settings, your page content is much loveable by social networks like Facebook, Twitter, and Google.

Editor Enhancement

Since we released Quix, so many people have asked for JCE support for the text editor, but we can't do that. Obviously, there are few technical difficulties. Quix layout builder and form fields are entirely javascript based, and we can't use any PHP or Joomla's form field inside it.

We surveyed our user and tried to figure out what JCE features are missing in our existing editor. Turns out, text background/foreground color, rich media embedding, and few others.

We added this feature into our existing TinyMCE editor, and you won't miss JCE anymore.

You can now embed SoundCloud, YouTube, Vimeo right into your text element. No need any extra element for that.

Keyboard Shortcuts

This is my personal favorite. Quix keyboard shortcuts help you to build website faster as well as save time. Now you can save your element settings and refresh preview window without closing the modal with just cmd+shift+p for Mac ctrl+shirt+p in Windows.

There are lots of keyboard shortcut out there. Familiar yourself with this doc.

Component Support opt-in

From now on, Quix will load only inside the component you want. We added this feature to achieve good performance in page rendering. Looking for shortcode in every component output is very resource intensive and often slow your page load speed.

This feature surely boosts your page loading speed because Quix will only parse shortcode you want it to be.

Column Visibility

You can now hide any column for any devices. Instead of hiding each element for a column, you can now hide an entire column in one click. This will save your time and boost page loading speed too.

Visual enhancement

Quix 1.1 comes with very tiny but significant visual and UX improvements. Now you can preview a page or collection without opening it. Just click the eye icon and see it live.

We also refreshed toolbar button colors, and now there is only 2 color action button there. Save and Close. This color will help you focus on the most important work, layout building.

10 New Presets

Quix comes with 10 brand new pre-built page layout to help you get started faster. From business, agency to app landing page, everything is covered. We'll add more presets in the upcoming releases so you can start building your website faster.

Live Demo

Heartbeat API for Session Management

Imagine a situation where you work on a long and complicated page layout and press save button, and it's not saving because your session is expired. To avoid this jeopardy, we introduce the heartbeat API in Quix 1.1.

No matter what your session lifetime is if you are in layout builder your session never expire.

Expanded existing element features

We improved existing element features a lot in this release. Especially, animation delay, more margin, and padding controls.

For Developers

Assets Manager

Now you can enqueue any css/js file with Quix new Asset Manager. It allows you to set dependencies, order, versioning and much more.

Joomla's asset loading is very minimal and doesn't allow you to load assets in such manner. Check out the documentation to learn more about asset manager.

Element Disable

Now you can disable any core or 3pd elements from your templates using Quix API. Consult with this doc for more information.

Multiselect

The Select field now allows multiple: true for multiple selections. See our Joomla Article element for an example.

Extend Config file

Until now, you can't override the config file from your template. You can now extend(not override) element config file by following this doc.

We have a long way to go with Quix. We have some of our most ambitious features planned for this year, and our entire team is excited to get there. Stay tuned for more updates!

To celebrate this event, we are giving 20% exclusive discount on every purshse till 30th, May. Use coupon code below

QUIX20

Download Quix Today

4
  5287 Hits
  0 Comments
5287 Hits
0 Comments

20+ Best News/Magazine WordPress Themes You Can Use to Earn Money Today

20+ Best News/Magazine WordPress Themes You Can Use to Earn Money Today

Without any doubt, everyone agreed that- WordPress is the best CMS platform for building a personal blog or an online news or magazine website.

Even many popular news and magazine sites in this world are using WordPress such as Mashable, TechCrunch, TED, CNN, BBC America, The New York Times, and more.

In this post, we have picked up top 20 responsive magazine news WordPress themes. All of these are built with clean code and packed with superior features suitable for news or online magazine.

If you wish to build a news or magazine website or thinking about redesigning your existing magazine blog, then this collection will help you to choose one of the best and create the next big thing.

 

Continue reading
1
  4718 Hits
  0 Comments
4718 Hits
0 Comments