| Welcome, Guest |
Welcome to Makestation! We are a creative arts/indie discussion community — Your center for creative arts discussion, unleashed!
Please note that you must log in to participate in discussions on the forum. If you do not have an account, you can create one here. We hope you enjoy the forum!
|
| Online Users |
There are currently 305 online users.
» 0 Member(s) | 304 Guest(s)
Google
|
|
|
| Show toggle collapse on hover only! |
|
Posted by: Damian B. - August 22nd, 2013 at 1:54 PM - Forum: Resources & Tutorials
- No Replies
|
 |
What is this?
In this tutorial I'll show you how to add this elegant effect to toggle collapse. Basically it makes the toggle collapse button only appear when we hover our mouse over the category. Preview can be found, here.
Tutorial:
Go to: Admin CP/ Templates & Styles/ Themes/ YOUR THEME/ global.css
and Advanced Mode and just paste the following code in the end.
Code: .thead .expcolimage img {
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.thead:hover .expcolimage img {
opacity: 1;
}
If you have any questions or concerns please reply here.
This tutorial was originally created for PromotionZone.
|
|
|
| Learning Linux? |
|
Posted by: 3DWaffle1 - August 21st, 2013 at 5:14 PM - Forum: Technology & Hardware
- Replies (10)
|
 |
I try to use and learn Linux command interface. I keep forgetting the command What are you top ten Linux Command do you use the most? What are your top ten Linux command? How do remember the command?
|
|
|
|
| Jquery back to top image tut |
|
Posted by: Damian B. - August 19th, 2013 at 10:06 PM - Forum: Resources & Tutorials
- Replies (2)
|
|
Introduction
So do you want on your theme what we got here?
A back to top button that appears when you scrolled down and disappears when you scrolled up?
This tutorial is made specifically for MyBB and not any other platform. But if anyone requests it I can try to make one for another platform to.
Lets get Started
Log in to your admin Cp < Templates and Styles < Templates < Your theme templates < Ungrouped Templates < headerinclude
Find:
Add After:
Code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
$("#totop").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#totop').fadeIn(200);
} else {
$('#totop').fadeOut(200);
}
});
$('.ontop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>
Go to: Templates and Styles < Templates < Your theme templates < Footer Templates < footer
Find:
Code: <div id="copyright">
Add After:
Code: <div id="totop" style="display: none;">
<a href="#top" class="ontop"><img src="{$theme['imgdir']}/top.gif"></a>
</div>
Go to: Templates and Styles < Themes < Your theme < Global.css
Add at the bottom:
Code: #totop {
  bottom: 150px;
  display: none;
  position: fixed;
  right: 1.5%;
  z-index: 1000;
}
Notes
It could be you already got this present in your headerinclude:
Code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
If that is the case then remove it out of the code first given in this tutorial.
Upload
The following image to your theme folder. Or use any other to top image if you want. Preferably 32x32 or smaller.
![[Image: attachment.php?aid=3]](http://promotionzone.net/attachment.php?aid=3)
CSS Button
If there is a demand I can make a tutorial on how to use no image but just all css.
Originally posted: http://promotionzone.net/thread-307.html
|
|
|
|
| CSS Boxes (Info,Success,Warning...) |
|
Posted by: Damian B. - August 19th, 2013 at 9:55 PM - Forum: Resources & Tutorials
- No Replies
|
|
Hello. I'll show you how to use boxes like this one in your mybb forum!
(Preview can be found here.)
Step 1: Go to: Admin CP/ Templates & Styles / Default /
global.css / Edit StyleSheet Advanced mode and paste this code:
Code: .info, .success, .warning, .error, .mes, .tips, .chat, .cnbÂ
{
  margin: 10px 0px;
  padding: 10px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
  border-radius: 4px 4px 4px;
}
.info {
  background-color: #d1e4f3;
  background-image: url("http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png");
  color: #00529B;
  border: 1px solid #4d8fcb;
}
.success {
  background-color: #effeb9;
  background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png");
  color: #4F8A10;
  border: 1px solid #9ac601;
}
.warning {
  background-color: #ffeaa9;
  background-image: url("http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png");
  color: #9F6000;
  border: 1px solid #f9b516;
}
.error {
  background-color: #fccac3;
  background-image: url("http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png");
  color: #D8000C;
  border: 1px solid #db3f23;
}
.mes {
  background-color: #F2F2F2;
  background-image: url("http://cdn2.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png");
  border: 1px solid #AAAAAA;
  color: #545454;
}
.tips {
  background-color: #FEEAC9;
  background-image: url("http://cdn5.iconfinder.com/data/icons/woocons1/Light%20Bulb%20On.png");
  border: 1px solid #D38E49;
  color: #bb640c;
}
.chat {
  background-color: #daecfb;
  background-image: url("http://cdn2.iconfinder.com/data/icons/drf/PNG/iChat.png");
  border: 1px solid #2078c9;
  color: #066ac4;
}
Step 2: Go to Admin CP / Configuration / Mycode / Add new MyCode and enter a title and a description.
Paste this to Regural Expression:
Code: \[info\](.*?)\[/info\]
Code: <div class="info">$1</div>
Step 3: Use this whenever you want to have that box in your post:
Code: [info] Text here. [/info]
You can do this for info, success, warning, error, tips, mes and chat.
Just re-do the step 2 replacing the word "info" with one of the above.
Note: I didn't make the code for this nor the graphics. I just made the tutorial on how to do this for mybb.
|
|
|
|
|
