Like SystemiConnectFri 15 Oct 2021, 04:50
Auto Save MessagesLGforumFri 26 Feb 2021, 13:31
New tutorial questionTheCrowMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)LGforumSun 14 Feb 2021, 01:25
LGforum (2806)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Mr.Easybb (1587)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Bloodbath (745)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Rukiafan (533)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Dom (513)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
puppycheese (446)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
pedro (330)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Neymar (301)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Hitsu (281)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 
Flora (275)
Topics tagged under tips on AvacWeb Vote_lcapTopics tagged under tips on AvacWeb Voting_barTopics tagged under tips on AvacWeb Vote_rcap 

Search found 6 matches for tips

LGforum
Search in: Thoughts and Tips from LG
Topic: A Mini Code Syntax Highlighter
A Mini Code Syntax Highlighter
on Mon 02 May 2016, 09:39 by LGforum
For those of you who don't want a big complicated syntax highlighter on their code boxes, I made a nice mini one that can immediately be added very easily to any site. I mean any site, not just Forumotion.

The code for it is here: https://gist.github.com/3273776

Very simple to install, just add the Javascript to whatever site you want to use it.
Its a tiny little thing, so there isn't much highlighting, it will highlight strings, numbers, operators, and keywords like if else etc... but due to its tiny size it is really fast and lightweight on your site.

Hope it comes in handy for some!

#tips #panda
Forum: Thoughts and Tips from LG | Topic: A Mini Code Syntax Highlighter
LGforum
Search in: Thoughts and Tips from LG
Topic: Toggling just using CSS
Toggling just using CSS
on Mon 02 May 2016, 09:32 by LGforum
I thought I'd share an interesting mini CSS tip I came across a while back and that's using CSS toggle elements.

Its common belief that Javascript must be used in order to toggle an element, however if your toggle is on mouseover, or focus/blur of an output you can actually create toggle using just CSS.

Consider the following HTML:
Code:
[panda=html]<div id="option">Hover over me</div>
<div id="popup">This box will show on hover of #option</div>


Then using this CSS, will make the #popup box show when hovering over the #option box:
Code:
[panda=css]#popup { display: none }
#option:hover + #popup { display: block }


It is using this effect that I made the tooltip bbcode on this forum using LGBB. Hover over this: [tip]This tip is shown using CSS[/tip]


You can actually use this effect to create some fancy menu's. Here's a nice accordion style menu for you to play with.

The HTML
Code:
[panda=html]<div id="LGaccordion">
  <span class="option">Option 1</span>
  <span class="sub_options">
    <ul>
      <li>Sub option 1</li>
      <li>Sub option 2</li>
      <li>Sub option 3</li>
    </ul>
  </span>
 
  <span class="option">Option 1</span>
  <span class="sub_options">
    <ul>
      <li>Sub option 1</li>
      <li>Sub option 2</li>
      <li>Sub option 3</li>
    </ul>
  </span>
 
  <span class="option">Option 1</span>
  <span class="sub_options">
    <ul>
      <li>Sub option 1</li>
      <li>Sub option 2</li>
      <li>Sub option 3</li>
    </ul>
  </span>
</div>


Code:
[panda=css]#LGaccordion {
   width: 250px;
   border: 1px solid #666;
   -webkit-box-shadow: 0 0 5px #ccc;
   -moz-box-shadow: 0 0 5px #ccc;
   box-shadow: 0 0 5px #ccc;
   padding: 0 1px;
}
#LGaccordion .sub_options { display: none }
#LGaccordion .option {
   display: block;
   color: black;
   background: #ccc;
   border-bottom: 1px solid;
   border-top: 1px solid #fff;
}
#LGaccordion .option:hover + .sub_options {
   display: block!important;
}


Hope it helps you get rid of some un-needed Javascript in your page! Smile

#LGBB #tips
Forum: Thoughts and Tips from LG | Topic: Toggling just using CSS
LGforum
Search in: Thoughts and Tips from LG
Topic: Replicating a custom 404 page.
Replicating a custom 404 page.
on Wed 08 May 2013, 12:34 by LGforum
This is just a mini tip rather than a tutorial, because the method is not going to cover all broken links completely.

A 404 Error page is when you visit a URL which points to a file that is non-existent or can not be found on the server. The file can not be found, therefore can not be displayed and the user is presented with the 'Not Found' message. On regular web hosting, you can change this page either through the use of [ic].htaccess[/ic], or if the web host provides a suitable UI to do so.

On Forumotion we're given this custom 404 page: http://www.avacweb.forumotion.co.uk/badlink
And as you can see it's plain, boring, non-descriptive and all-round stupid.

Today we're going to try and replicate a custom 404 page. There's only a limited amount of pages on our forums, so we're going to try and check all the possibilities with our Javascript and display a 404 page if the link doesn't appear to be one of the possible pages on our forums. This can only be done on the clicking of a link unfortunately and we can not stop people from typing in non-existent URL's.

First off we must have a 404 page. So we'll make a new HTML page [tip]Found at ACP > Modules > HTML Pages Management[/tip], now this bit is up to you to make your own 404 page to match your site, but I will give you this Avacweb styled one to start with:
Code:
[panda=html]<html>
  <head>
    <title>Page Not Found</title>
    <style type="text/css">body { background-color: #105289; font-family: sans-serif; } a { color: #105289; cursor: default; bottom: 0px;} h1 { font-size: 2em; } p a { cursor: pointer; } #maintenance {text-shadow: 0 1px #FFF; box-shadow: inset 0 0 10px; border-radius: 7px;color: #105289;background-color: #E1EBF2;text-align: center;width: 60%;margin-left: auto;margin-right: auto;padding: 20px 20px 20px 20px;} #container { text-align: center; }</style>
  </head>
  <body>
    <div id="container">
      <img src="http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png">
      <div id="maintenance">
        <h1>Error 404 - File not Found. </h1>
        The page you are looking for does not exist, <span onclick="window.history.back()" style="cursor:pointer; text-decoration:underline">click here to return to the previous page</span>.
        <p>If you believe this is a mistake, please contact the <a href="/u1">Administrator</a>. Thank you.</p>
      </div>
    </div>
  </body>
</html>

It looks like this: http://www.avacweb.forumotion.co.uk/h1-page-not-found

Now lets make the Javascript to redirect to it when a link doesn't exist:
Code:
[panda=js]$(function() {
 $('a').filter(function() { //only keep internal links.
 var internal = !!(this.href.charAt(0) === '/' || this.href.indexOf(location.host) !== -1),
 url = this.href.replace(/(^http:\/\/)|(\?.*$)/g, '').replace(location.host, '').substr(1),
 tester = /^(|#\w+|portal|calendar|post|privmsg|memberlist|faq|forum|search|groups|profile|login|modcp|statistics|contact|abuse|admin(\/index.forum)?|viewonline|rss|ailto:|([tfhc]\d+(?:[pn]\d*)?-.*?)|(u\d+(\w+)?)|(s[tp]a\/.*?))$/g;
 return internal && !tester.test(url)
 }).click(function(e) {
 e.preventDefault();
 window.location = 'YOUR 404 ERROR PAGE LINK HERE';
 });
});

Add that Javascript to All Pages and now when a user clicks on a link in your forum which doesn't exist, it will display your custom error page. Smile
Just make sure to change this line: [ic]window.location = 'YOUR 404 ERROR PAGE LINK HERE';[/ic]

The code may need tweaking for non-english boards, let me know if you see any issues, or any URL's I've missed.

#tips
Forum: Thoughts and Tips from LG | Topic: Replicating a custom 404 page.
LGforum
Search in: Thoughts and Tips from LG
Topic: Simple Private Message Pop Up
Simple Private Message Pop Up
on Tue 30 Oct 2012, 14:41 by LGforum
One thing I've always hated is the Forumotion private message popup, because it's focused on in the Javascript, it seems to freeze all other Javascript.

However, with template editing we can remove that pop up and replace it with something much better, very easily.

Visit your [ic]overall_header[/ic] template[tip]Found at ACP - Display - Templates: General[/tip] and find this:
Code:
[panda=html]      <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        pm.focus();
      <!-- END switch_enable_pm_popup -->

Delete it and that gets rid of the horrible pop up that ruins everything.

Now scroll down your [ic]overall_header[/ic] template until you find the [ic]<body>[/ic] tag. It should be near the <!-- BEGIN hitskin_preview --> loop and may have attributes.

Add this below the [ic]<body>[/ic] tag:
Code:
[panda=html]<!-- BEGIN switch_enable_pm_popup -->
  <div id="LGpm">
    <a href="/privmsg?folder=inbox">You have new private messages in your inbox</a>
    <br />
    <br />
    <a onclick="this.parentNode.style.display='none';">Close</a>
  </div>
<!-- END switch_enable_pm_popup -->

Now due to it being within the PM pop up conditional statement, that element/html will only be on the page when the user has a new PM. So all that needs doing is some CSS to style it, feel free to add your own CSS, here is some to get you started:

Code:
[panda=css]#LGpm {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #137ADA;
    padding: 20px 40px;
    border: 1px solid #1652EC;
    font-size: 1.3em;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 20px 20px #4392E7, -1px 5px 25px #193466;
    -moz-box-shadow: inset 0 20px 20px #4392E7, -1px 5px 25px #193466;
    -webkit-box-shadow: inset 0 20px 20px #4392E7, -1px 5px 25px #193466;
}
#LGpm a {
    color: white;
    text-shadow: 0 1px blue;
    font-weight: bold;
    text-decoration: none;
}


So you should now have a nice custom pop up in the top corner when you receive a new PM. Much nicer Smile

To do the same with the report pop up, see this post: http://www.avacweb.com/t548-simple-private-message-pop-up#6462

#tips
Forum: Thoughts and Tips from LG | Topic: Simple Private Message Pop Up
LGforum
Search in: Thoughts and Tips from LG
Topic: CSS Trick - Change the chatbox '@'
CSS Trick - Change the chatbox '@'
on Tue 08 May 2012, 16:22 by LGforum
I see this asked about a lot on the support forum. Another chatbox feature that simply people say impossible, since we can't have Javascript in the chatbox page, but people are forgetting we can have css Smile So here's another little CSS trick for those of you wishing to change the '@' symbol in the chatbox for your moderators.

Code:
[panda=css]#chatbox > p span.user > span strong {
  display: none;
}
#chatbox > p span.user > span:after {
  content: 'MOD: ';
}

Change 'MOD: ' for whatever you like of course.

This will only work for user's who have a colored username. For those that don't its a little more difficult I reckon, but after I send this, I think I'll give it a go and edit this post if I'm successful.

Please note, I only tested this on PHPBB3, this forum, so if it works on any others or doesn't please post below so other users know. Thanks Smile

#tips #AWC
Forum: Thoughts and Tips from LG | Topic: CSS Trick - Change the chatbox '@'
LGforum
Search in: Thoughts and Tips from LG
Topic: Chatbox auto logging in
Chatbox auto logging in
on Fri 04 May 2012, 19:11 by LGforum
I found out this quite a while ago but wanted to check a few things before posting about it.

Its a mixture of things, added together can create something quite useful. Let me explain, with the chatbox:
- If you try and send an empty message the form does not send.
- If you send an empty message via ajax, it does not get added to the message list.
- If you are logged out and send a message (empty or not), then you get logged in.

Combining these three things together, if you send an empty message via ajax whilst not logged into the chatbox, you will be logged on. Wink

Now previously, creating an automatic log in to the chatbox was only possible if you could access the function [ic]CB_disconnect()[/ic] which was only in the main '/chatbox' page. Which as you know our Javascripts are not included in. However, with these three points above, I'll show you today that it is now possible to automatically log a user into the chatbox via sending an empty message with ajax Wink
These codes should only be set for 'Homepage only'

This code will log a user into the chatbox: [ic]$.post('/chatbox/chatbox_actions.forum?archives','mode=send&sent=');[/ic] So now, lets get creative with it.

This code will make it so that when the user clicks the 'Chatbox' or 'Join the chat' links in the index page that they will be logged in as the chatbox opens (tested only in phpbb3):
Code:
[panda=js]$(function(){
    var c = document.getElementById('chatbox_popup');
    $(c.previousSibling.previousSibling).add(c).click(function(){
        $.post('/chatbox/chatbox_actions.forum?archives','mode=send&sent=');
    });
});


OR, if you want them to be logged in as soon as they log into your forum:
Code:
[panda=js]$(function(){
 if(document.getElementById('logout')) $.post('/chatbox/chatbox_actions.forum?archives','mode=send&sent=');
});


OR, how about we set a cookie, so we only auto log them in once per session, then the rest is up to them.
Code:
[panda=js]if(my_getcookie('cb_login') != '1') {
  $.post('/chatbox/chatbox_actions.forum?archives','mode=send&sent=');
  my_setcookie('cb_login', '1', false);
}


OR, maybe you want to make your own link which will open the chatbox in a new tab/window and log them in at the same time: [ic]<a href="/chatbox" target="_blank" onclick="$.post('/chatbox/chatbox_actions.forum?archives','mode=send&sent=');">Go to chatbox</a>[/ic]

You can even use this, to get rid of the timeout in the chatbox!
Code:
[panda=js]setInterval(function(){ $.post('/chatbox/chatbox_actions.forum?archives','mode=send&sent='); }, 5000);

This will send that empty message off every 5 seconds, meaning if the user gets logged out, then within 5 seconds at the most he will get logged back in.

And the best bit is, the chatbox pages do not count towards your HTTP Request limit that forumotion has set, because if it did, just chatting to people would make us hit the limit. That's the best bit, this is Ajax that you don't even have to worry about hitting the request limit with.

So there you have it, remember it came from AvacWeb first, auto-logging into the chatbox no matter what your situation is, and even create the effect the time out isn't there!

#tips #AWC
Forum: Thoughts and Tips from LG | Topic: Chatbox auto logging in
Back to top