Knowledge Base

Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - Brian

Pages: 1 2 3 4
1
Portals Discussions / [Tip/Trick] How to disable Simple Portal 2.3.7 for mobile users
« on: August 10, 2017, 01:04:18 AM »
If you're using a mobile friendly, responsive theme but fail the Google mobility test because of Simple Portal (version 2.3.7 used in this example), you can automatically turn off the portal for mobile users with the following simple trick!

First, load /Sources/Subs-Portal.php and find the following code, beginning at line 109:

Code: [Select]
		if (!empty($context['current_topic']))
{
$context['can_add_article'] = allowedTo(array('sp_admin', 'sp_manage_articles', 'sp_add_article'));
$context['can_remove_article'] = allowedTo(array('sp_admin', 'sp_manage_articles', 'sp_remove_article'));
}

$context['SPortal']['core_compat'] = $settings['name'] == 'Core Theme';
$context['SPortal']['on_portal'] = getShowInfo(0, 'portal', '');

Add this after the above code:

Code: [Select]
    // Disable Portal for mobile users
   
        $useragent=$_SERVER['HTTP_USER_AGENT'];
            if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
                $settings['disable_sp'] = true;
       
    // End mobile disable

Now when a mobile user visits your site, Simple Portal will be disabled and they can browse your site without being bothered with a mobile unfriendly landing page and portal blocks getting in the way.

2
Scripts and Tutorials / [Tip/Trick] Automatically re-size images in posts!
« on: October 03, 2015, 09:29:05 PM »
Here's a simple way to automatically re-size all the images in a post - add these lines to end of your theme's index.css file:

Code: [Select]
/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.bbc_img{
   height: auto;
   width: auto;
/* This is just to keep images to a handy size, even on large screens. */
   max-height: 640px;
/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;
}


/* Auto resizing of images in signatures. */
/* Change sizing to suit your own preferences. */
.signature .bbc_img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 95%;
}

You can change the max-width and max-height settings to suit your needs.

3
Theme Discussions / Re: persistent connections
« on: July 07, 2015, 10:12:45 PM »
You can try editing 'Setting.php' in the root of your forum - look for this section:

########## Database Info ##########
$db_type 'mysql';
$db_server 'localhost';
$db_name 'name_of_db';
$db_user 'db_user';
$db_passwd 'db_password';
$ssi_db_user '';
$ssi_db_passwd '';
$db_prefix 'smf_';
$db_persist 1;
$db_error_send 0;


Change

$db_persist 1;

to:

$db_persist 0;

4
Modifications and Packages / 25% Off SMF Packs mods!
« on: September 14, 2014, 02:46:12 AM »
SMF Packs Coupon:

Use the code: ILOVESMFPACKS at checkout and get 25% off your next purchase!

> Click Here! <

5
SMF Talk / [Tip/Trick] Locked out of the Packages Section? Try this!
« on: September 12, 2014, 04:09:30 AM »
When upgrading to SMF 2.0.7 and higher with some hosting companies, the package handler can break and show the 'white screen of death', effectively locking you out. This is usually due to a memory allocation issue and can be easily fixed with the following edits:

Open Source/Admin.php

Find:
Code: [Select]
ini_set ('memory_limit', '32M');
Replace with:
Code: [Select]
ini_set ('memory_limit', "60M");

Open Source/Class-Package.php

Find:
Code: [Select]
ini_set ('memory_limit', '32M');
Replace with:
Code: [Select]
ini_set ('memory_limit', '60M');

6
Portals Discussions / SSI News Side PHP Block
« on: July 08, 2014, 04:31:06 PM »
If you hate the News section on the header as much as i do, here's a simple solution. Display your latest news on a side PHP block. Like the default news, it will reload different news upon browser reload.

Create a PHP block, add this code. Customize it to your needs and activate.

The CSS; add this to the index.css of your theme.

Code: [Select]
.iblock {
    font-size: 16px;
    background-color: #f9f9f9;
    border-left: 8px solid #eb6c6c;
    color: #444;
    line-height: 1.4em;
    padding: 2.8em 1.6em;
    margin: 0.1em 0 0.3em 0;
    overflow: auto;
}

The markup; add this to the PHP block:

Code: [Select]
echo '

  <div class="iblock">';
      ssi_news();

echo '
  </div>';

Remove the News bit from the Index.template.php so it does not show twice. Should look like this in most themes:

Code: [Select]
                <div class="news">';

    // Show a random news item? (or you could pick one from news_lines...)
    if (!empty($settings['enable_news']))
        echo '
                <p>', $context['random_news_line'], '</p>';

            echo '
                </div>


7
SMF Talk / [Tip/Trick] Re: White screen of death after 2.0.7 update? Try this!
« on: July 01, 2014, 10:26:03 PM »
Note: This was fixed in the SMF 2.0.8 update. If you installed the 2.0.7 update and experienced the 'white screen of death', just apply the above fix, then download and apply the 2.0.8 update. You'll see an error message for the edits in the /Sources/Class-Package.php file - just ignore it since the change was already applied to that line.

8
Scripts and Tutorials / [Tutorial] Add a sticky side menu to your SMF
« on: June 30, 2014, 04:48:32 PM »
Were going to implement a sticky menu with CSS, toggling its visibility with jQuery. Its the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings of your forum.

First lets download the small ZIP below and upload the "Font" folder to your current theme.

In your theme's index.template.php find:
Code: [Select]
    // Output any remaining HTML headers. (from mods, maybe?)
    echo $context['html_headers'];

    echo '

Add after:
Code: [Select]
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

Find:
Code: [Select]
function template_body_above()
{
    global $context, $settings, $options, $scripturl, $txt, $modSettings;

    echo '

Add after:
Code: [Select]
<div class="toolbar-wrapp">
    <div class="sticky-toolbar">

        <ul>
            <li class="glyph" id="support">
                <a href="#" data-icon="📣"></a>
            </li>

            <li class="glyph" id="help">
                <a href="#" data-icon=""></a>
            </li>

            <li class="glyph" id="settings">
                <a href="#" data-icon="⚙"></a>
            </li>
        </ul>
       
    </div>

    <div class="popup">
            <div class="arrow"></div>
                <ul>
                    <li><a href="">List Item 1</a></li>
                    <li><a href="">List Item 2</a></li>
                    <li><a href="">List Item 3</a></li>
                </ul>
    </div>
</div>

Find:
Code: [Select]
function template_html_below()
{
    global $context, $settings, $options, $scripturl, $txt, $modSettings;

    echo '

Add after:
Code: [Select]
<script type="text/javascript">

    $(document).ready(
        function(){
        $("#support").click(function () {
        $(".popup").fadeToggle(150);
        return false;
        });
    });

</script>

Open your css/index.css file, add this to the very end:
Code: [Select]
ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    line-height: 1.6em;
}

.toolbar-wrapp{
    position: fixed;
    display: block;
    top: 30%;
        left: 0%;
}

.sticky-toolbar{
    position: relative;
    top: 30%;
    padding: .1em;
    background-color: #2C3E50;
    float: left;
    -webkit-border-radius: 0 .2em .2em 0;
    -moz-border-radius: 0 .2em .2em 0;
    border-radius: 0 .2em .2em 0;
}

.sticky-toolbar ul li a{
    display: block;
    width: .8em;
    margin: 0.2em;
    line-height: 80%;
    font-size: 2.2em;
    text-align: center;
    color: #fff;
    background-color: #16A085;
    -webkit-border-radius: .1em;
    -moz-border-radius: .1em;
    border-radius: .1em;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    -webkit-font-smoothing: antialiased;
}

.sticky-toolbar ul li a:hover{
    background-color: #1ABC9C;
}

.popup{
    display: none;
    float: right;
    position: relative;
    left: 5%;
    background-color: #2C3E50;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
}

.popup ul li a{
    position: relative;
    display: inline-block;
    font-size: .85em;
    color: #fff;
    padding: 0 2em 0 2em;
    margin: .4em;
    text-align: center;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;

}

.popup ul li a:hover{
    background-color: #1ABC9C;
}

.arrow {
    position: absolute;
    top: 10%;
    left: -.4em;
    width: 0; height: 0;
    border-top: .5em solid transparent;
    border-right: .5em solid #2C3E50;
    border-bottom: .5em solid transparent; 
}


/***** Font and Icon load ******/

@font-face {
    font-family: 'Entypo';
    src: url('../font/entypo.eot');
    src: local('☺'),
    url('../font/entypo.woff') format('woff'),
    url('../font/entypo.ttf') format('truetype'),
    url('../font/entypo.svg#webfontIyfZbseF') format('svg');
}

[data-icon]:before {
    font-family: 'Entypo';
    content: attr(data-icon);
}



9
Hosting / Has anyone tried Server Mania?
« on: June 29, 2014, 10:20:47 AM »
While searching for a hosting company, I came across Server Mania. Their VPS prices looked incredible for a yearly plan (less than $100), but I was wondering if anyone is currently using them for SMF hosting. Are the prices too good to be true?

Are there any other cheap VPS hosting companies worth trying out?

10
Scripts and Tutorials / Replace Stats Bar Image with CSS
« on: June 29, 2014, 09:36:40 AM »
49-0

To be frank, i never liked SMF's progress bar in the Stats page. They look awful and really bad on dark themes. The solution to this is to get rid of the image from the CSS file and add our own colors.

First, open the index.css file for your theme

Find:
Code: [Select]
.statsbar div.bar
{
    float: left;
    background: url(../images/bar_stats.png) no-repeat;
    display: block;
    margin: 0 4px;
    height: 16px;
}
.statsbar div.bar div
{
    position: relative;
    right: -4px;
    padding: 0 4px 0 0;
    background: url(../images/bar_stats.png) no-repeat 100%;
    height: 16px;
}

...and add your colors like this, (i used #72c1ae to suit my theme)

Replace:
Code: [Select]
.statsbar div.bar
{
    float: left;
    background: #72c1ae;
    display: block;
    margin: 0 4px;
    height: 16px;
}
.statsbar div.bar div
{
    position: relative;
    right: -4px;
    padding: 0 4px 0 0;
    background: #72c1ae;
    height: 16px;
}


11
Scripts and Tutorials / Using Transitions on SMF Menus
« on: June 29, 2014, 09:25:52 AM »


Using the following code we can set up a basic menu. It is styled so that the menu items change their color and background color when rolled over smoothly.

The HTML Markup:
Code: [Select]
<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Search</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">My Messages</a></li>
 <li><a href="#">Calendar</a></li>
 <li><a href="#">Members</a></li>
 <li><a href="#">Login</a></li>
</ul>

The CSS:
Code: [Select]
ul { 
     padding: 0; margin: 20px;
}

li {
    display: inline;
    padding: 5px 0;
}

.nav a {
    padding: 5px;
    color:#ffffff;
    background:#4887d4;
    text-decoration: none;
    -o-transition: all 500ms;
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    transition: all 500ms;
}
 
.nav a:hover {
    color:#f1f1f1;
    background:#75b6ff;
}

jsFiddle Demo

Have Fun! 8)

12
You can also make the left column disappear when the screen width is smaller than a certain pixel so that only the middle column remains.

To set the left column to appear only when the screen size is larger than 800px, try this:

Open \Themes\default\css\portal.css

Find:
Code: [Select]
#sp_left
{
vertical-align: top;
}

Replace with:
Code: [Select]
@media (max-width: 799px)
{
#sp_left
    {
        display:none;
    }
}
@media (min-width: 800px)
{
#sp_left
   {
vertical-align: top;
   }
}

You can adjust the pixel width to whatever you want, just remember than the max-width: tag has to be 1 pixel smaller than the min-width: tag.

13
Scripts and Tutorials / [Tutorial] How to use @font-face with SMF
« on: June 27, 2014, 11:53:03 AM »
@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).

-Create a folder called "fonts" in your theme of choice.
 -Lets go here to choose our font set. Handpicked free fonts for graphic designers with commercial-use licenses. | Font Squirrel
-Pick your font and download the webfont kit.
-Upload everything to the "fonts" folder you just created.

In index.css file add:
Code: [Select]
@font-face {
    font-family: DeliciousRoman;
    src: url('../fonts/delicious/Delicious-Roman.otf');
    font-weight:400;
}

Find:
Code: [Select]
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;

Replace:
Code: [Select]
    font: 78%/130% DeliciousRoman, Helvetica, Arial, sans-serif;

Easy as pie! 8)

14
Scripts and Tutorials / [Tip/Trick] Re: Create easy progress bars with CSS
« on: June 27, 2014, 05:26:25 AM »
Here's an even simpler way to create a progress bar using CSS:

The markup:
Code: [Select]
<div id="progress-outer">
    <div id="progress-inner" style="width:50%;"></div>
    <center>Progress</center>
</div>

The CSS:
Code: [Select]
#progress-outer {
    background: #777;
        -webkit-border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 5px;

}

#progress-inner {
    background: #00FF00;
    height: 100%;
    -webkit-border-radius: 9px;
}



Just change the 'width: 50%' in the HTML to whatever value you want to display from 0 to 100%.

jsFiddle Link

15
Portals Discussions / Add category link to SP article post
« on: June 26, 2014, 11:18:21 PM »
The one thing SimplePortal forgot to do was the need to show where this article was posted in your category list next to the time posted and the author's name. We're going to use the simple code below and add it to the PortalArticles.template.php to get the effect we want.

Code: [Select]
', $txt['postedin'], ' ', $article['board']['link'], '

Instead of looking like this:
Brian 1 hour ago 0 Comments

Will look like this:
Brian Posted in Portal Discussions 1 hour ago 0 Comments

In Themes/default/PortalArticles.template.php

Find:
Code: [Select]
            echo '
                                    <div class="middletext">', $article['message']['time'], ' ', $txt['by'], ' ', $article['poster']['link'], ' | ', $txt['sp-articlesViews'], ': ', $article['topic']['views'], ' | ', $txt['sp-articlesComments'], ': ', $article['topic']['replies'], '</div>';

Replace with:
Code: [Select]
            echo '
                                    <div class="middletext">', $txt['postedin'], ' ', $article['board']['link'], ' ', $article['message']['time'], ' ', $txt['by'], ' ', $article['poster']['link'], ' | ', $txt['sp-articlesViews'], ': ', $article['topic']['views'], ' | ', $txt['sp-articlesComments'], ': ', $article['topic']['replies'], '</div>';

In Themes/default/languages/index.english.php
At the very end add:
Code: [Select]
$txt['postedin'] = 'Posted in';


Pages: 1 2 3 4