CSS Basics

NOTE: We do NOT provide customization support on our support forum. Please make changes at your own discretion and carefully.

You can change your CSS in a few ways. Depending on the level of CSS skills you have, and the amount of CSS changes you plan on making, your preferred method may vary:

Method 1: Use the Custom CSS Theme Option

From your Dashboard, you can simply enter any CSS code into the Custom CSS box within THEME OPTIONS.

  1. Go to WP Admin ==> Gabfire Themes ==> THEME OPTIONS ==> Custom Styling ==> Find the Custom CSS box
  2. Enter your CSS code and Save Options upon completion.

Method 2: Use the Custom CSS File

As a means to isolate any of your changes from the theme’s CSS files, you can take advantage of the custom.css file. This will allow you to re-apply CSS changes should you ever update your theme, or wish to identify and modify your own changes.

  1. There is a custom.dist.css file within your theme directory.
  2. Rename it to custom.css and add your CSS code inside.

Method 3: Edit the CSS File Directly

You can edit the CSS file directly by FTP’n to your server. This is the method most tech-savvy users will prefer.

  1. FTP to your site and go to the theme directory and look within the /styles directory. There you will see several CSS files labeled per their style (such as default, red, blue, etc.)
  2. Open the file which reflects the active style you have selected in THEME OPTIONS. For example, if you are using the default style, then you would edit the default.css.
  3. Edit the file as you need.
  4. Save file.
  5. Refresh your site, clear cache (if any), and the CSS changes will be reflected.

CSS Basics Video Tutorial – Part 1

CSS Basics Video Tutorial – Part 2

CSS Basics Video Tutorial – Part 3

CSS Basics Video Tutorial – Part 4

Author Photo and Bio Below Entries

This is what we are going to display below post entries
Authorinfo

Open single.php (or single-default.php) and paste this

<?php if ( get_the_author_meta( 'description' ) ) { // If a user has filled out their description, show a bio on their entries  ?>                        
    <div class="author single_postmeta">
 
        <?php echo get_avatar( get_the_author_meta('email'), '68' ); ?>
        <strong><?php printf( esc_attr__( 'About %s', 'journey' ), get_the_author() ); ?></strong><br />
        <?php the_author_meta( 'description' ); ?>
        <br />
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
            <?php printf( __( 'View all posts by %s →', 'journey' ), get_the_author() ); ?>
        </a>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
<?php } ?>

right before
<?php endwhile; else : endif; ?>

And then go to admin -> theme options -> paste this into custom.css of theme control panel

.single_postmeta {
    font:italic 13px/19px Georgia,Times,serif;
    color:#999;
    padding:15px 0;
    margin-bottom:15px;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    width:100%;
    overflow:hidden
}
.author.single_postmeta {
    border-bottom:none;
    padding-bottom:0;
}
.single_postmeta a {
    font-family:Helvetica,Arial,sans-serif;
    color:#999;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
}
.single_postmeta a:hover {
    color:#333
}
.single_postmeta .left {
    width:330px;
    display:block;
}
.single_postmeta .right {
    width:300px;
    display:block;
}
.single_postmeta .widget,.single_postmeta .gab_share_widget {
    margin:0;
    padding:0;
    margin:0;
}
.single_postmeta .widgettitle {
    margin-top:5px !important;
}
.single_postmeta .share-separator {
    height:1px !important;
}
.single_postmeta .avatar  { 
    float: left;
    clear: left;
    display:block;
    border: 1px solid #eee;
    padding:2px;
    margin-right: 10px;
}

How To Install Gabfire Demo Content

Installing XML demo content is a fairly simple process that can be completed in 4 steps. Afterwards, you will have a full set of beautiful images and post titles to fill up your site and make it look very professional.

1. Download Demo XML File

Login to your Gabfire Dashboard, click on your theme, and download the demo content XML file.

2. Install WordPress Importer

Now that you have the demo content downloaded, you need to install the WordPress Importer. Login to your WordPress site and navigate to Tools>Import.

Install WordPress Importer

Click WordPress and install and activate the plugin.

3. Upload Demo XML File

Using the new WordPress Importer plugin, upload your demo content XML file. This will add Gabfire demo posts, pages, and categories to your site.

Import XML Content

4. Download Content

On next step make sure to download attachments. That’s the most important step. Not downloading media attachments will break front page thumbnails and post galleries.
wordpress-org-assign-authors-import-attachments

Click Submit

WordPress will start to import demo content to your site. DO NOT close your browser till end of import. Depend on connection timeout value set on your server you may see some error messages such as Bad Gateway, Connection timed out, etc… If you happen to see such messages, just click F5 on your keyboard. That will resume the download process. In some cases, you may see error messages more than once. Refresh page by clicking F5 each time and error message appears.

5. Setup Homepage Categories

Now that you’ve successfully installed Gabfire Demo Content, you can setup your homepage by selecting the new categories in Theme Options > Homepage (or Theme Options > Categories).

If you have any issues installing your demo content, we’ll be happy to assist you in the support forums.

How to Add a New Gabfire Widget Zone

Sometimes, the standard widget zones that come with a theme are just not enough to bring your website to life. You may want to add a new widget zone to our theme in order to place an ad widget or text. It’s a very simple procedure that can be accomplished in 3 steps.

1. Register a New Widget Zone

In order to add a new widget zone, you’ll need to register it in our widgetize-theme.php file. FTP to your server and navigate to wp-content > themes > theme-name > inc > widgetize-theme.php (or theme-name > functions.php) and add this code to the bottom of the file.

gabfire_register_sidebar(array('name' => 'New-Widget-Zone', 'id' => 'New-Widget-Zone', 'description' => 'This is the new widget zone description!'));

Rename the id, name, and description as necessary, then save the file and your new widget zone will be registered.

2. Call the New Widget Zone

Now that your widget zone has been registered, you’ll need to call it within the other theme files. Usually, widget zones are placed in single.php, archive.php, or home.php, but there are a few other options for widgetizing your theme files. Just add this code to the theme file of your choice:

<?php gabfire_dynamic_sidebar('New-Widget-Zone'); ?>

Make sure the text matches your the id of the widget zone you registered. You can add widget zones to multiple files if you want the same widgets to appear in those screens. If you’re in doubt, feel free to ask us where to place the code by opening a new support thread on our forum.

3. Add Widgets to the New Widget Zone

Congratulations, you now have successfully added a new widget zone and called it within the theme. Now you can add widgets to the widget zone in Appearance > Widgets. Hope this helps!

What widget zone will you add?

How to Use Gabfire Shortcodes

Related Posts

Will add 5 extra related posts. It is possible to increase/decrease the number of posts by adding a parameter such as [related_posts limit=”10″] where 10 is a configurable number. The posts are displayed in a list format and use the theme’s widget list style.

How to use Relate Posts shortcode:

[related_posts]

Quote

Blockquote

How to use Quotes shortcode:

[quote by=”Author Name”]Quisque ultrices pretium sapien ut consequat. Praesent a justo non felis sagittis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien felis, adipiscing sit amet ultrices scelerisque, volutpat dictum tortor. Phasellus eu velit ut enim vestibulum faucibus. Maecenas faucibus adipiscing erat eu molestie. Praesent et arcu nulla, sit amet vehicula turpis. Morbi eu arcu ligula. Nulla dolor sem, accumsan pretium lobortis eget, sagittis eget velit. Suspendisse potenti. Aliquam et augue dui. Aenean rhoncus gravida enim, quis blandit lacus sagittis et. Etiam condimentum elementum quam a interdum. Donec eu viverra purus. Sed adipiscing mauris lorem.[/quote]

Line Break

Will generate double line for the place it is inserted into. The width can be adjusted by a parameter such as *[hr width=”450px”]*

How to use Line Break shortcode:

[hr]

Logged In Only

How to use Access shortcode:

[access]This text will be displayed to logged in users only.[/access]

Success

Success

[success]Quisque ultrices pretium sapien ut consequat. Praesent a justo non felis sagittis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien felis, adipiscing sit amet ultrices scelerisque, volutpat dictum tortor. Phasellus eu velit ut enim vestibulum faucibus.[/success]

Info

Info

[info]Quisque ultrices pretium sapien ut consequat. Praesent a justo non felis sagittis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien felis, adipiscing sit amet ultrices scelerisque, volutpat dictum tortor. Phasellus eu velit ut enim vestibulum faucibus.[/info]

Warning

Notice

[warning]Quisque ultrices pretium sapien ut consequat. Praesent a justo non felis sagittis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien felis, adipiscing sit amet ultrices scelerisque, volutpat dictum tortor. Phasellus eu velit ut enim vestibulum faucibus.[/warning]

Danger

Error

[danger]Quisque ultrices pretium sapien ut consequat. Praesent a justo non felis sagittis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien felis, adipiscing sit amet ultrices scelerisque, volutpat dictum tortor. Phasellus eu velit ut enim vestibulum faucibus.[/danger]

Callout

Callout

[callout]Quisque ultrices pretium sapien ut consequat. Praesent a justo non felis sagittis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien felis, adipiscing sit amet ultrices scelerisque, volutpat dictum tortor. Phasellus eu velit ut enim vestibulum faucibus.[/callout]

Buttons

Buttons

How to use Buttons shortcode:

Align : btn-left, btn-right, btn-center

Color : white, gray, black, lightblue, blue, darkblue, green, lightgreen, darkgreen, red, lightred, darkred, yellow, orange, brown

Caption :This is the anchor text to be displayed on button

Link : Anything added as link will have user redirected to the specified page

Example :

[button align=”btn-left” color=”white” caption=”White Button” link=”http://www.gabfirethemes.com”]

Table

Table

How to use Table shortcode:

[table cols=”Header 1, Header 2, Header 3, Header 4″ data=”Division 1, Division 2, Division 3, Division 4, Division 1, Division 2, Division 3, Division 4, Division 1, Division 2, Division 3, Division 4″][/table]

Columns

Cols

How to use Columns shortcode:

6 column

[one_sixth]Content of col goes here[/one_sixth]

[one_sixth]Content of col goes here[/one_sixth]

[one_sixth]Content of col goes here[/one_sixth]

[one_sixth]Content of col goes here[/one_sixth]

[one_sixth]Content of col goes here[/one_sixth]

[one_sixth_last]Content of col goes here[/one_sixth_last]

5 column

[one_fifth]Content of col goes here[/one_fifth]

[one_fifth]Content of col goes here[/one_fifth]

[one_fifth]Content of col goes here[/one_fifth]

[one_fifth]Content of col goes here[/one_fifth]

[one_fifth_last]Content of col goes here[/one_fifth_last]

4 column

[one_fourth]Content of col goes here[/one_fourth]

[one_fourth]Content of col goes here[/one_fourth]

[one_fourth]Content of col goes here[/one_fourth]

[one_fourth_last]Content of col goes here[/one_fourth_last]

3 column

[one_third]Content of col goes here[/one_third]

[one_third]Content of col goes here[/one_third]

[one_third_last]Content of col goes here[/one_third_last]

2 column

[one_half]Content of col goes here[/one_half]

[one_half_last]Content of col goes here[/one_half_last]

How to Increase the Speed of Your Website

Have a slow site? There are dozens of possible reasons why this could be the case. Below are some steps you can take to speed up your site or decrease load time:

  1. Better hosting = faster server – The most common reason for slow sites is a slow server. If you are on cheap shared hosting, it’s likely that your host has many thousands of other sites on the same server. Since all those sites share the same server resources, there’s not much you can do to offset the lack of speed.
  2. Plugins – Lower number of plugins. Many plugins load several files, are poorly coded, or simply have broken links which cause slower sites. Deactivate all your plugins and retest your site to see if any plugins are causing slowness.
  3. Cache – Install a cache plugin such as W3 Total Cache. Furthermore, try Cloudflare if you’re really tech-savvy.
  4. Ads – Lower number of ads which results in less external requests for data. Each ad is served by an ad network which has to deliver that ad to your site (i.e., takes time)
  5. HTTP Requests – Lower number of http requests to site by reducing the number of posts visible on your homepage.
  6. Social Networks – Remove any third-party scripts taking too long to load (example: facebook, twitter, youtube, etc.)
  7. Images – Lower the number of images displayed on your homepage
  8. Images – Optimize your images for the web (save for web). Unoptimized images will slow down sites.
  9. Images – Do not use very large images
  10. Broken Links – make sure there are no broken images or links on your site
  11. Redirects – Avoid redirects on site
  12. Videos – Lower number of videos to see if that improves site speed.

Please note that there are many factors that contribute to your website’s load time, and identifying the one or more reasons is a time-consuming process. Be patient, and perform the process of elimination.

How to Enable Thumb Images to be Clickable Permalinks

For better SEO, our latest themes offer just one permalink to a post to avoid duplication. However, if you wish to make image thumbnails clickable to the permalink of the post, please make the following change:

1) Open home.php

2) Replace all instances of:

'link' => 0,

with the following:

'link' => 1,

3) Save file. Clear site / browser cache. Refresh site.

How to Edit which Post Meta Items Display

If you want to edit which meta values are displayed at the bottom of posts as shown in the screenshot below, please use one of the following methods:

Edit-post-meta

As you can see in the screenshot above, there are 4 data points that can be modified:

  • Date
  • Comment (number of comments)
  • Permalink (i.e, the “read more”)
  • Edit post reflected as a # sign (only visible to admin, allows quick access to edit the post)

Method 1: Updating Post Meta Per Content Area

Suppose for a specific content area, you wish to modify which post meta values are displayed. To do this, follow these instructions:

1) Open the misc-functions.php file* and find the section that corresponds to the content area you wish to change.

*Based on version of your framework, The path of misc-functions.php is either inc/functions/misc-functions.php or framework/functions/misc-functions.php

2) Within the content area, there will be a snippet of code such as this:

<?php gab_postmeta(); ?>

3) Now, in the order shown on the screenshot above, each value can be interpreted as true by default. If you wish to disable a value, then you could replace the snippet above with any of the below:

To disable Date:

<?php gab_postmeta(false,true,true,true); ?>

To disable Comments:

<?php gab_postmeta(true,false,true,true); ?>

To disable Permalink:

<?php gab_postmeta(true,true,false,true); ?>

To disable Edit Post (# sign)

<?php gab_postmeta(true,true,true,false); ?>

As you can see, it’s simply a matter of converting the relevant value to ‘false’ to disable it. You can do this for 1 or more values.

Method 2: Updating Post Meta Site-Wide

IMPORTANT: Editing the post meta requires updating a Gabfire framework core file. YOU are responsible for the update and ensuring you backup your site prior to making such changes. In practice, we highly recommend NOT updating Gabfire framework core files.

1) FTP to your theme directory, and proceed to the following path:

inc/functions/misc-functions.php (in older themes) OR

framework/functions/misc-functions.php (more recent themes)

2) Within that file, search for and replace the section that looks like below with what is provided below:

Note: Within this code, the change made is the value ” = true” to ” = false”. If you want to display a specific value, keep that value as true.

// execute post meta
function gab_postmeta($date = false,$comment = false,$permalink = false,$edit  = false) {
	echo '<span>';
		echo (true === $date) ? get_the_date() . ' / ' : "";
		(true === $comment) ? comments_popup_link(__('No Comment','source'), __('1 Comment','source'), __('% Comments','source')) : "";
		echo (true === $permalink) ?  gab_permalink() : "";
		(true === $edit) ? edit_post_link(__('#','source'),' ','') : "";
	echo '</span>';
}

How to Translate Your Gabfire Theme into Any Language

All Gabfire Themes are able to be translated into any language. The process of translating the theme is a user responsibility.

The following instructions are given as guidance.

How to Translate Your Theme

1. Set a language for the site on admin dashboard under the Settings on admin dashboard
Change Language of WordPress on Admin Dashbboard

2. Download and install the Poedit application.

3. Find wp-content/themes/your-theme/lang/en_US.pot file and open it with Poedit.

4. Click on Create New Translation

lang2

5. You will be prompted with a selectbox to choose the language you want to translate the theme into. Select your language.

6. As soon as you complete the translation, save file. Its important to use the WP Locale code as name of the file.

7. Two files will be generated with .po and .mo extensions.

8. Upload the .mo and .po files into wp-content/themes/your-theme/inc/lang

Your new language is now ready for use!

If you want to resume the translation later, download the translated .po file -> open it with Poedit -> Resume translation -> save again. This will give you a new .po and .mo files. Upload them both back into wp-content/themes/your-theme/inc/lang directory.

Notes

  • Your WordPress installation should be in the language you intend on using for the site.
  • CONTRIBUTE: In some cases, Gabfire community members provide translation files to us in various languages so that we include/share them with other users from the same country. We truly appreciate such translation files, so please feel free to post or send us the .mo and .po files for your language.
  • Reference: WordPress in Your Language