Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all 685 articles
Browse latest View live

[Tutorial] Tabbed Forum Statistics

$
0
0
1- Admin Cp - Themes & Styles - İndex Templates  - index_boardstats Find 

change


Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead{$collapsedthead['boardstats']}">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['boardstats']}.png" id="boardstats_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>{$lang->boardstats}</strong></div>
</td>
</tr>
</thead>
<tbody style="{$collapsed['boardstats_e']}" id="boardstats_e">
</tbody>
</table>
<div class="statstabs tborder">
 <input type="radio" name="statstabs" id="tabone" checked="checked">
 <label for="tabone"><i class="fas fa-globe"></i> Who's Online</label>
 <div class="statstab">
    <div style="margin-top:-5px;">
<h3>{$whosonline} </h3><br /> {$birthdays}
 </div>  </div>
 <input type="radio" name="statstabs" id="tabtwo">
 <label for="tabtwo"><i class="fas fa-signal"></i>
Statistics</label>
 <div class="statstab">
<div style="margin-top:-5px;text-align:left;">  
<i class="fa fa-envelope"></i>
Total Post<span class="float_right">{$stats['numposts']}</span></div>
 <div><i class="fas fa-comments"></i>
Total Threads<span class="float_right">{$stats['numthreads']}</span></div>
 <div><i class="fas fa-users"></i>
Total Members<span class="float_right">{$stats['numusers']}</span></div>
 <div><i class="fas fa-graduation-cap"></i>
Latest User<span class="float_right">$newestmember</span></div>
 <div><i class="fas fa-registered"></i>
 Most Online <span class="float_right">{$mostonline['numusers']}</span>
      </div></div>
 <input type="radio" name="statstabs" id="tabthree">
 <label for="tabthree"><i class="fas fa-cog"></i>
Options</label>
 <div class="statstab">
 <span class="smalltext">
    <span class="float_left">  {$logoutlink}
<a href="misc.php?action=markread{$post_code_string}"><i class="fas fa-eye"></i> {$lang->markread}</a></span>
<span class="float_right"><a href="showteam.php"><i class="fas fa-users"></i> {$lang->forumteam}</a><br />
<i class="fas fa-signal"></i>{$statspage}</a></span>
        </span>          
 </div></div>
<br />
1- Admin Cp - Themes & Styles - İndex Templates  - index_statspage Find 
change

Code:
<a href="stats.php"><i class="fas fa-signal"></i> {$lang->forumstats}</a>

1- Admin Cp - Themes & Styles - İndeTemplates  - index_logoutlink Find
change

Code:
<a href="member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><i class="fas fa-power-off"></i> {$lang->index_logout}</a><br />

Global.css

Code:
/**
*Stats Tabs
*/

.statstabs {    
    display: flex;
    flex-wrap: wrap;
    color:#8A9092;    
     width: 99.5%;
    transition: background ease 1.2s;
}
.statstabs a{    
     font-size: 13px;
}    
.statstabs label {
    padding: 5px;
    order: 1;
    display: block;
    margin-right: 0.1rem;
    cursor: pointer;
    width: 32.2%;
    background: #ecebf4;
    font-weight: bold;
    transition: background ease 1.2s;
}

.statstabs .statstab {
      order: 99;
     flex-grow: 1;
      width: 100%;
      display: none;
      padding: 1rem;
     background: #fff;
    transition: background ease 1.2s;
}
.statstabs input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.statstabs input[type="radio"]:checked + label {
    background: #fff;
}
.statstabs input[type="radio"]:checked + label + .statstab {
    display: block;
}

@media (max-width: 45em) {
 .statstabs .statstab,
 .statstabs label {
   order: initial;
 }
 .statstabs label {
   width: 100%;
   margin-right: 0;
   margin-top: 0.2rem;
 }
}

1- Admin Cp - Themes & Styles - headerinclude - {$stylesheets} 
Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

[Image: gOmnJ3.png]

how to change lock system color and background [css]

$
0
0
add 

Code:
.hidden-content {
    padding: 10px;
    color: #use_your_own_colors;
    background: #use_your_own_colors;
    border-radius: 2px;
    border: 1px solid #use_your_own_colors;
}

replace use_your_own_colors with your own colors get that from https://www.w3schools.com/colors/colors_picker.asp

[Image: 6xqqegl.png]

Use background image in Forums in Index Page

$
0
0
Some of you probably saw that some MyBB Forums uses background images in Category/Forums on index page, like this:
[Image: zJUjVlp.png]

It looks especially effective in Forums that has Dark color scheme.
It is not too complex, but it has to be done for each Category/Forum separately.

You can of course, using CSS, set that all category/Forums uses same background image too.

P.S. You should be aware that background image has to be transparent in order to take full effect.

1. First open:
   Home » Template Sets » Default Templates » Edit Template: forumbit_depth2_forum

2. This is the code you currently have:
Code:
<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

Now we are gonna add:
Code:
id="forum_cat_{$forum['fid']}"

that will help us do this, like this:
Code:
<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td id="forum_cat_{$forum['fid']}" class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

Now we have each element with unique ID, see the image:
[Image: oZgmbH7.png]

That is an area that will have background image.

3. Now open global.css (or any other css file) and add this code:
Code:
#forum_cat_2 {
  background: url(../../../images/your theme's image folder/002.png);
  background-repeat: no-repeat !important;
  background-position: left top !important;
}

Now you will have to add code to CSS file for every Forum ID..or

You can set one ID for all forums and add just one code to CSS, in that case all Forums will have same background image.

instead of
Code:
id="forum_cat_{$forum['fid']}"

add:
Code:
id="forum_cat_1"


That's it! Enjoy Cool

Open All Links to New Tab

$
0
0
Headerinculde add save

Code:
<script type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>

all links will be opened to new tab good uses

Profile Background Default Image

$
0
0
https://community.mybb.com/thread-159715.html

Thought I'd make this tutorial or shall I say share it since I've figured how to do this and didn't think it was possible but everything is possible lol. Toungue

Anyways if you're using that tutorial above and would like to know how to set a background default image in profile cover well this is how you would do it. Remember these are my codes I'm sharing feel free to edit it to your likings.

Code:
<if $userfields['fid4'] then>
<style>
.profbg {
    background: url({$userfields['fid4']}) center center no-repeat #292929;
    overflow: hidden;
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat;
    border-radius: 2px;
}
</style>
<else>
<style>
.profbg {
    background-image: url(Paste your default image link here) !important;
    overflow: hidden;
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat;
    border-radius: 2px;
}
</style>
</if>

Pretty simple and easy. Big Grin
Enjoy!

Display stats in footer

$
0
0
Open ./global.php and find:
PHP Code:
$plugins->run_hooks("global_start"); 

and add the following code just below that..
PHP Code:
$stats $cache->read("stats");
$stats['newest_user'] = build_profile_link($stats['lastusername'], $stats['lastuid']);
$total_posts my_number_format($stats['numposts']);
$total_users my_number_format($stats['numusers']); 

Stats vars will work globally now..
{$stats['numposts']} {$stats['numusers']} {$stats['numthreads']} and {$stats['newest_user']}

Font Awesome - loading spinner

$
0
0
Do you wanna modern spinner and replace the old default one? There is a tutorial for Font Awesome spinner. All credits go to @Eric J. who help me a lot.

In your showthread_quickreply template (and anywhere else you might have a spinner), replace this:
Code:
<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" /></div>

with this:
Code:
<div id="quickreply_spinner" class="showthread_spinner" style="display: none"><img src="{$theme['imgdir']}/spinner.gif" style="display: none;" /><i class="fa fa-spinner fa-spin"></i></div>


You'll also want to edit the variables in your headerinclude template for things like quickedit and multiquote, so change this:
Code:
var spinner = "<img src='" + spinner_image +"' alt='' />";

to this:
Code:
var spinner = "<img src='" + spinner_image +"' alt='' style='display: none' /><i class='fa fa-spinner fa-spin'></i>";


CSS part
Add into global.css this line of code (you can style this spinner)

Code:
#quickreply_spinner .fa {
font-size: 36px;
}

Save your changes, hard refresh your browser (Ctrl+F5) and try it, enjoy!

Resize image attachments

$
0
0
I have seen a number of tools that talk of resizing images, but so far each of those tools was just resizing the display of the image, not the image file itself.  Cameras these days are creating images with a far higher resolution than is needed for the display of images attachments on my BB.  I would rather not waste the space of storing a 5184×2456 image when it is only going to be displayed at a resolution of 900x426.

Mybb already attempts to make a thumbnail file of an attachment, in "upload_attachment" in inc/functions_upload.php.  I modified this code to have it also create a second bigger thumbnail, what I will call a toenail, with max height and width of 900. After line 632, I added code to create the toenail file, and if successful, rename the toenail file to be the original downloaded attachment file.  It seems to work.  I am sharing what I have done here, asking if anyone has dealt with this themselves and if so, are there any "gotchas" that you can see in the code I have created.

The code added at the end of "upload_attachment (after line 632).


PHP Code:
               $toename str_replace(".attach""_small.$ext"$filename);
 
               $toepathname $mybb->settings['uploadspath']."/".$toename;
 
               $filepathname $mybb->settings['uploadspath']."/".$filename;
 
               $toenail generate_thumbnail($filepathname$mybb->settings['uploadspath'], $toename900900);
 
               if($toenail['filename'])
 
               {
 
                       if (!rename($toepathname$filepathname))
 
                               unlink($toepathname);
 
               

Use MyBB Header/Footer externally

$
0
0
I don't know why this took me so long to figure out, but I figured I'd post this in case anyone else is wondering how to do this. Basically, what this does is it takes the header and footer of your forum and puts it on a page outside of your forum. Those of you that are familiar with SMF's SSI.php will thank me for this Smile

Let's say you want your page to be the root index.php page. Assuming your forum is in /forum/
First, make a page called header.php and put this code

If you do this, make sure you change your cookie path to /
Admin Panel > Configuration > Settings > Site Details > Cookie Path

[Image: WRU8vWl.png]

PHP Code:
<?php
// define forum directory folder; this is assuming your forum URL is example.com/forum/index.php
chdir('forum'); 

// basically a key, don't change this
define('IN_MYBB'1); 

// require global.php from your forum
require './global.php'

// require init.php from your forum; if you don't have this, you won't be able to stay logged in
require_once './inc/init.php'

// include your css/js stuff from <head></head>
 
   echo $headerinclude

// include your header
 
   echo $header
?>

Next, make a page called footer.php and put this code
PHP Code:
<?php
// output the footer from the forum
echo $footer;
?>

Now, on your index.php page, you'll need to include both of those files like this

PHP Code:
<?php
include 'header.php';
include 
'footer.php';
?>


Now, whatever you want to put on that page, put it like this
PHP Code:
<?php
include 'header.php';

echo 
'content goes here';

include 
'footer.php';
?>

OR if you're not really familiar with PHP


PHP Code:
<?php
include 'header.php';
?>

You can use HTML here.

<?php
include 'footer.php';
?>



Let's say you want to get some data from the user
This will grab the username, usergroup, and email from the user that is viewing the page if they're logged in.

PHP Code:
<?php
include 'header.php';

if(
$mybb->user['uid']) { // check if user is logged in

    $username $mybb->user['username']; // set username variable[/font]
    $usergroup $mybb->user['usergroup']; // set usergroup variable
    $email $mybb->user['email']; // set email variable
    
/*you don't need to set the variables above, it's completely optional, but it reduces redundancy in the long run. So rather than having to type out $mybb->user['username'] over and over, you can just type in $username */

    echo '<p>'.$username.'</p>'// outputs $username
    echo '<p>'.$usergroup.'</p>'// outputs $usergroup
    echo '<p>'.$email.'</p>'// outputs $email
}

include 
'footer.php'
?>


Now, let's say you wanted to restrict a page so only admins can see the page (assuming admin usergroup is 4)


PHP Code:
<?php
include 'header.php';

if(
$mybb->user['uid'] && $mybb->user['usergroup'] == 4) { //user is an admin, execute code
echo 'super top secret hidden stuff';
}
else { 
// user is not an admin, so let them know
echo 'You are not an admin!';
}

include 
'footer.php';
?>


If you have any questions or need any help, I'll gladly help you out. I'm not very good with PHP though.

change the theme automatically when the language changes (MyBB Version 1.8.15)

$
0
0
Hi mybb community
This is my first post and I would like to put this topic to be useful for anyone who wants to change the theme automatically when the language changes from the Quick Language selection box at the bottom of the forum.
[Image: 101.png]


This change was made to the version (MyBB Version 1.8.15)
I don't know about the previous versions, Maybe you can apply the same method.


1 - Open the "global.php" file in the root path

2 - Find the sentence "// Run global_start plugin hook now that the basics are set up"
     You'll find it near line number 100.
Code:
// Run global_start plugin hook now that the basics are set up
$plugins->run_hooks('global_start');
if(function_exists('mb_internal_encoding') && !empty($lang->settings['charset']))
{
    @mb_internal_encoding($lang->settings['charset']);
}


3 - Add this code directly after the code that I mentioned above.
Code:
// This Style Depends on the language chosen by the user
if($mybb->settings['bblanguage'] == 'english')
{
    $mybb->user['style'] = 2;
}
else
{
    $mybb->user['style'] = 4;
}
( 2 and 4 ) are the theme numbers.


4 - Save your changes, that's it.


[Image: 102.png]

Or You can find the theme number through the link when you point to the name of the theme.

[Image: 103.png]


Because I use both English and Arabic language.
In English, the theme should be from left to right.
Arabic is the opposite, from right to left.
So I have to change the theme according to the user's choice.

Please if i did something wrong, correct me.
For me, everything works perfectly.

I hope this post is useful to someone.
Thanks Mybb.

Adding "Your Threads" and "Your Posts" links to header

$
0
0
I've seen this only on a few forums but these links are very useful, and don't require navigating to your profile to click these links.

Basically, this tutorial will show you how to change this:

[Image: rS5oQQS.png]

To this:

[Image: O1ojtFL.png]

Instructions:

1) Go to your Admin CP -> Templates & Styles -> Templates -> YOURTHEME Templates -> Header Templates -> header_welcomeblock_member

2) You will see code somewhat like this:
PHP Code:
<!-- Continuation of div(class="upper") as opened in the header template -->
    <
span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}class="logout"><class="fa fa-sign-out panel-logout"></i>{$lang->welcome_logout}</a></span>
    </
div>
</
div>
<
div class="lower">
    <
div class="wrapper">
        <
ul class="menu panel_links">
            <
li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><class="fa fa-user panel-usercp"></i>{$lang->welcome_usercp}</a></li>
            {
$modcplink}
            {
$admincplink}
        </
ul>
        <
ul class="menu user_links">
            <
li>{$myalerts_headericon}</li>
            <
li><a href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
            {
$searchlink}
            {
$pmslink}
        </
ul>
    </
div>
    <
br class="clear" />
</
div

3) Right under <ul class="menu user_links"> or in my case, <li>{$myalerts_headericon}</li>, you're going to want to add this:
PHP Code:
<li><a href="{$mybb->settings['bburl']}/search.php?action=finduserthreads&uid={$mybb->user['uid']}">Your Threads</a></li>
<
li><a href="{$mybb->settings['bburl']}/search.php?action=finduser&uid={$mybb->user['uid']}">Your Posts</a></li

Save your template, clear cache if needed, and your menu links should be updated.

Functionable here: https://leetforums.net

How To Make Stronger Security Question

$
0
0
This may be common sense, but I developed a clever trick to reduce spam bots.

I use an all CAPS word with 2 short puzzle questions to obtain the 2 letter answer.

Do not use these examples since they may not be highly secured with new creative ones.

Ex.1) "MYBB" 1.) Write the 1 + 0 = _st letter as a lowercase. 2.) Write the most common letter as displayed.

Answer: mB

Ex.2) "GOOGLE" 1.) Write the 5th letter as displayed. 2.) Write the letter that looks like a number lowercase.

Answer: Go

Too long of a question might not correctly display the whole question.

I do not believe this is too complicated, the user must follow the two directions carefully to get the correct letters.

I hope this gives you guys better ideas on security questions.

MyBB guide application project (Android - iOS)

$
0
0
I created a beta MyBB guide app. I released 0.7.0.1B_en version. Oranginal app language is Turkish, so i used Yandex and Google for translate. Sorry for bad English. I cant speak English perfect.

File information:
SHA256: 3f990b2af0039dd94959aca059b5d88dd11a49991262cf66b8fbcfe35428c607
File name: MyBBLab_ENG_en571482674
File type: .apk (Android package)
File size: 5MB (5.391.603 bayt)


Drive: https://drive.google.com/open?id=1T4gQ3K...XGXJ7zSpld

VirusTotal: https://www.virustotal.com/#/file/3f990b.../detection

Note: I'm doing my best for a nice translation.
Note 2: Babable said, "unwanted software". It does this all the time, it does not apply to this file.

Up to date.

Up to date.

Reactivate youtube button in sceditor

$
0
0
[Image: WCbPuGL.png]


Sceditor has a lot of buttons .. but they are deacticvated in mybb.

To reactivate Youtube button...we need to do this in 3 steps :

1.  open bbcodes_sceditor.js in javascript folder and search and comment this lines (with //)
PHP Code:
$.sceditor.command
.remove('table').remove('subscript').remove('superscript').remove('youtube').remove('ltr').remove('rtl');
    
$.
sceditor.plugins.bbcode.bbcode
.remove('table').remove('tr').remove('th').remove('td').remove('sub').remove('sup').remove('youtube').remove('ltr').remove('rtl'); 


2.  open codebuttons template and add youtube to toolbar
[Image: 2nqZXf5.png]



3. Add youtube mycode like this :

Title : youtube
Regular Expression : \[youtube\](.*?)\[/youtube\]
Replacement :
Code:
<iframe width="560" height="315" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>


that's all.

Office 2010 colors palette in sceditor

$
0
0
[Image: GJwsK35.png]


really i hate sceditor's default palette

here is office 2010 palette ported to sceditor

just open codebutton template and after locale: "mybblang",
add this lines

Code:
colors:'#FFFFFF,#F2F2F2,#D9D9D9,#BFBFBF,#A6A6A6,#808080|#EEECE1,#DDD9C3,#C4BC96,#948A54,#4A442A,#1D1B11|#000000,#7F7F7F,#595959,#404040,#262626,#0D0D0D|#1F497D,#C6D9F1,#8DB3E2,#548DD4,#1F497D,#17365D|#C0504D,#F2DBDB,#E5B8B7,#D99594,#943634,#632423|#9BBB59,#EAF1DD,#D6E3BC,#C2D69B,#76923C,#4F6228|#8064A2,#E5DFEC,#E5DFEC,#CCC0D9,#5F497A,#403152|#4BACC6,#DAEEF3,#B6DDE8,#92CDDC,#31849B,#215868|#F79646,#FDE9D9,#FBD4B4,#FABF8F,#E36C0A,#984806|#C00000,#FF0000,#FFC000,#FFFF00,#92D050,#00B050|#00B0F0,#0070C0,#002060,#7030A0,#660066,#00926b',

that's all.

Usergroup stars Fontawesome | Updated | 5.3.1 |

$
0
0
Hello!

After reading this tutorial i tried to change the stars with fontawsome icons.

Sadly i was unable to made the changes as written and explained in that tutorial.

As i'm not a coder or a developer,it took me a lot of time to make these few little changes and i have got the result i was looking for.

So,i would like to share it with people who are also looking for these changes but can't get them to work,may be because the other tutorial has been made for the default theme,i am using the Dark1.8 theme.

So,open your postbit template and replace:


Code:
{$post['userstars']}

with

<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span><br />

If you like to have the stars before the user title,then add the above code like this:



.png   Cattura.PNG (Size: 15.88 KB / Downloads: 2)

I prefer the stars before the user title better.However,depends on you.

If you are using the setting "display posts in classic mode" then you would need to modify your postbit classic template by replacing :

Code:
{$post['userstars']}

with

<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span>

After that open your memberlist_user template and replace:


Code:
{$user['userstars']}

with

<span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span><br />

Here too,i have added it in the way that i see the stars before the uder title,so,like this:


.png   1.PNG (Size: 28.12 KB / Downloads: 0)

You can add it as you prefer.


Then,open your member_profile template and replace:


Code:
{$userstars}

with

<span style="text-align: center;" class="userstar star_{$stars}" title="{$usertitle}"></span><br />

Again,if you like to have the stars before the user title,then add it like this:


.png   2.PNG (Size: 26.71 KB / Downloads: 0)

Now comes the main part.

This part is very important,without this part,you won't be able to see any stars.

So,now open your headerinclude template and add the following:


Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


Like this:


.png   3.PNG (Size: 73.3 KB / Downloads: 1)

After that open you global.css and in the end add the following:


Code:
.userstar {
   font-family: Font Awesome\ 5 Free;
   font-size: 13px;
   line-height: 13px;
   display: inline-block;
   letter-spacing: 2px;
   font-weight: 400;
}

.star_1::before {
 font-weight: 400;
 content: "\f005";
    color: white;
}

.star_2::before {
 font-weight: 400;
 content: "\f005\f005";
    color: #ac95f9;
}

.star_3::before {
 font-weight: 400;
 content: "\f005\f005\f005";
    color: #00ecff;
}


.star_4::before {
 font-weight: 400;
 content: "\f005\f005\f005\f005";
    color: gold;
}


.star_5::before {
 font-weight: 400;
 content: "\f005\f005\f005\f005\f005";
    color: #CC00CC;
}


.star_6::before {
 font-weight: 400;
 content: "\f005\f005\f005\f005\f005\f005";
}

.star_7::before {
 font-weight: 400;
    color: red;
 content: "\f005\f005\f005\f005\f005\f005\f005";
}

I have made a different color for every single group which can be modified as you prefer in the field "color".

After trying for a long time i wasn't able to made the changes work with the code in the original tutorial,after visiting the website from fontawesome,i made some little but important changes which did the job.


.png   4.PNG (Size: 13.62 KB / Downloads: 0)

The above indicated Colons made the difference for me,using only one,it didn't work.

The default star image location "images/star.png" can be left as it is,no need to delete it.

However,it is my first tutorial for this community and i would kindly like to thanks the user Eldenroot who made the original tutorial,without the original one,i couldn't make this one.

This tutorial is for the users who are usingthe latest version of fontsawesome i.e. 5.3.1

Please forgive my errors,if i made any.

Regards.


.png   Cattulra.PNG (Size: 26.31 KB / Downloads: 2)

Tutorial - Add "Select All" to "Code: " and "PHP Code: "

$
0
0
In your language files find global.lang.php

Find:


PHP Code:
$l['code'] = "Code: ";
$l['php_code'] = "PHP Code: "

And replace with:

PHP Code:
$l['code'] = "Code:  <a href=# onclick=\"selectCode(this); return false;\">(Select All)</a>";
$l['php_code'] = "PHP Code:  <a href=# onclick=\"selectCode(this); return false;\">(Select All)</a>"

In your themes templates "headerinclude"  find:

PHP Code:
{$stylesheets


and after add:

PHP Code:
<!-- Select All in Code/PHP Code -->

<
script type="text/javascript">
function 
selectCode(a)
{
 
  var a.parentNode.parentNode.getElementsByTagName('CODE')[0];
 
  if (window.getSelection)
 
  {
 
     var s window.getSelection();
 
      if (s.setBaseAndExtent)
 
     {
 
        s.setBaseAndExtent(e0e.parentNode1);
 
     }
 
     else
      
{
 
        var document.createRange();
 
        r.selectNodeContents(e);
 
        s.removeAllRanges();
 
        s.addRange(r);
 
     }
 
  }
 
  else if (document.getSelection)
 
  {
 
     var s document.getSelection();
 
     var r document.createRange();
 
     r.selectNodeContents(e);
 
     s.removeAllRanges();
 
     s.addRange(r);
 
  }
 
  else if (document.selection)
 
  {
 
     var r document.body.createTextRange();
 
     r.moveToElementText(e);
 
     r.select();
 
  }
}
</
script

[Tutorial] Add simple css and fontawesome userbars

$
0
0
You can simply try something like this for simple fontawesome css userbars.

In headerinclude add:

Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

in postbit and postbit_classic find:

Code:
{$post['usertitle']}


replace with:

Code:
<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>



In member_profile find:


Code:
({$usertitle})<br />



Replace with:

Code:
<span class="grouptag {$usertitle}">&nbsp; {$usertitle}</span><br />



Add to global.css:


Code:
.grouptag {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    font-family: "FontAwesome";
    font-weight: 600;
}

.grouptag.Administrator:before {
    content: "\f013";
}

.grouptag.Moderator:before {
    content: "\f0e3";
}

.grouptag.Member:before {
    content: "\f007";
}

.grouptag.Administrator {
    border: 1px solid green;
    background: green;
    color: #ffffff;
}

.grouptag.Moderator {
    background: purple;
    border: 1px solid purple;
    color: #ffffff;
}

.grouptag.Member {
    background: blue;
    border: 1px solid blue;
    color: #ffffff;
}

You can then simply modify and expand upon that...


If you want this modified to use "gid" please see  https://community.mybb.com/thread-219795-post-1314599.html#pid1314599 below.

Tutorial Request

$
0
0
Hi!

I've seen all sort of tutorials about Font Awesome and how it can be used to replace MyBB icons. However it seems that none of them work with the latest FA 5.x icons. So I am asking for someone skilled enough to make a tutorial on how this can be done. I am sure many people agree with me on this one.

Thank you!

[Tutorial] Add simple css user online / offline staus for postbit

$
0
0
To replace postbit user online / offline status image with simple css:

Add to global.css:


Code:
/** Online Offline User Status Postbit **/

.postbit_onoffuser.onli {
   background: #25A82F;
}
.postbit_onoffuser.offli {
   background: #98989C;
}
.postbit_onoffuser {
   display: inline-block;
   height: 10px;
   width: 10px;
   border-radius: 50%;
}


Replace  postbit_offline with:

Code:
<a title="{$lang->postbit_status_offline}"><span class="postbit_onoffuser offli"></span></a>



Replace  postbit_online with:

Code:
<a href="online.php" title="{$lang->postbit_status_online}"><span class="postbit_onoffuser onli"></span></a>


.png   Screenshot_20180930-200339.png (Size: 57.03 KB / Downloads: 2)

.png   Screenshot_20180930-200542.png (Size: 77.24 KB / Downloads: 3)
Viewing all 685 articles
Browse latest View live