[CSS] Biến Thanh toolbar mặc định thành thanh toolbar facebook

[rockmanvnx6]

Mình sắp phải off dài dài để ôn thi vào cấp 3 nên tranh thủ thời gian rảnh rỗi viết cái này . Không biết đã có ai thực hiện ý tưởng này chưa . nhưng chắc là chưa .
* Mới test trên punbb thôi nhé !
Demo :
Demo online :
Link : http://rockman4r.forumvi.com/
ID : rockmanvnx6
Pass: zxcvbnmasdfghjkl
----
Thấy hay thì click vào link này ủng hộ mình nhé
http://diendan.chinhphuc.info/u10205
----
Cách làm :
Chèn vào css ( ACP => Display => Color => CSS Stylesheet ) đoạn

Code:


#fa_service a:hover{
  text-decoration:none!important;
}
#fa_icon{
  display:none;
}
#fa_search #fa_textarea {
  text-indent: 10px !important;}
#fa_magnifier{display:none!important}

#fa_textarea{width:315px!important;
  text-shadow: rgba(0, 0, 0, .35) 0 1px;
color: #A9B1C0;background: -webkit-linear-gradient(rgba(65, 74, 90, 0.6), rgba(76, 84, 100, 0.6)) !important;
background: -moz-linear-gradient(rgba(65, 74, 90, 0.6), rgba(76, 84, 100, 0.6)) !important;
background: -o-linear-gradient(rgba(65, 74, 90, 0.6), rgba(76, 84, 100, 0.6)) !important;
background: -ms-linear-gradient(rgba(65, 74, 90, 0.6), rgba(76, 84, 100, 0.6)) !important;
background: linear-gradient(rgba(65, 74, 90, 0.6), rgba(76, 84, 100, 0.6)) !important;
border-radius: 15px !important;
-webkit-box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(255, 255, 255, .4) !important;
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(255, 255, 255, .4) !important;
}
#fa_toolbar_hidden{background: linear-gradient(#2C4987,#738ABA);-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: inset 0 1px 1px -1px white, 0 0 10px rgba(0,0,0,0.4)!important;

border-color: #111A33;
box-shadow: inset 0 1px 1px -1px white, 0 0 10px rgba(0,0,0,0.4)!important;}
#fa_welcome , #fa_notifications , #fa_service{background-color:transparent!important;color:#FFF!important;font-weight:bold;text-shadow: 0 -1px 0 rgba(0, 0, 0, .35) !important;opacity:0.9;}
#fa_welcome , #fa_notifications , #fa_service:hover{opacity:1;}
#notif_list > li{
  background:#FFF;
}
#outsite2{background-image: url(https://s-static.ak.fbcdn.net/rsrc.php/v2/yZ/x/Oy5x_gIVc12.png)!important;
background-position: -100px -30px!important;
height: 25px!important;
margin-top: -75px!important;
position: absolute;
right: 1px!important;
width: 54px!important;

}
#outsite1{background-image: url(https://s-static.ak.fbcdn.net/rsrc.php/v2/yZ/x/Oy5x_gIVc12.png)!important;
background-position: -100px -30px!important;
height: 25px!important;
margin-top: -30px;
position: absolute;
right: 1px!important;
width: 54px!important;

}
#insite1{
background: #fff;
border: 1px solid #333;
border-bottom: 2px solid #333;
margin-top: -1px;
padding: 4px 0;
position: absolute;
right: -1px;

z-index: -1;
width: 10%;
height: 97%;
}
#outsite{
 background-image: url(https://s-static.ak.fbcdn.net/rsrc.php/v2/yZ/x/Oy5x_gIVc12.png)!important;
background-position: -100px -30px!important;
height: 25px!important;
margin-top: -30px!important;
right: 16px!important;
width: 54px!important;
position: absolute;
}
#insite{
background: #fff;
border: 1px solid #333;
border-bottom: 2px solid #333;
margin-top: -1px;
padding: 4px 0;
position: absolute;
right: -1px;

z-index: -1;
width: 100%;
height: 97%;
}
#fa_toolbar{
  background: -webkit-gradient(linear, center top, center bottom, from(#738ABA), to(#2C4987));
background: -webkit-linear-gradient(#738ABA, #2C4987);
background: -moz-linear-gradient(#738ABA, #2C4987);
background: -o-linear-gradient(#738ABA, #2C4987);
background: -ms-linear-gradient(#738ABA, #2C4987);
background: linear-gradient(#738ABA, #2C4987);
border-color: #111A33;
-webkit-box-shadow: inset 0 1px 1px -1px white, 0px 0px 10px rgba(0,0,0,0.4) !important;
box-shadow: inset 0 1px 1px -1px white, 0px 0px 10px rgba(0,0,0,0.4) !important;
}

Tiếp , vào ACP => Display => Templates => Quản lý tổng thể
Chèn vào cuối overall_footer_begin

Code:

<script>
$(document).ready(function(){
  $("#fa_service").text("Facebook");
  $("#fa_service").attr({
  href: "/forum",
  target: "_top",
  });
 
});
</script>
<script>
$(document).ready(function(){
  $("#fa_menulist").prepend('<div id="insite">');
  $("#fa_menulist li:nth-child(10)").append('</div>');
  });
</script>

<script>
$(document).ready(function(){
  $("#fa_menulist").prepend('<div id="outsite"></div>');
  });
</script>

<script>
$(document).ready(function(){

 
  $("#notif_list").prepend('<div id="outsite1"></div>');


 
});
</script>


Rồi ấn chấp nhận xong ấn dấu + .
Ok , xong rồi , ai thấy có lỗi gì thì post lên đây nhé , xài được thì like nhé

---------------------
Cập nhật :

http://help.forumotion.com/t120146-functioning-of-the-toolbar-and-notifications

Important note:

There's an important note to take into account about the customization of the Toolbar:

We remind that this is absolutely forbidden and against our TOS to remove the Forumotion's Copyrights from the Toolbar (icon + link).
However, you have to know that after your requests to be able to remove the copyrights legally, we are actually working on a solution which should be set up soon.

can thiệp vào icon và link Bản quyền trên Toolbar là vi phạm ToS đấy nhé
Cân nhắc trước khi sử dụng.

Theo như lời cảnh báo của Forumotion thì không cho remove fm Copyright link và icon.

Trong cái code trên mình không vi phạm Icon nhưng vi phạm đến link . Thay vì trở về forumotion thì mình trỏ về /forum .
Vậy bạn nào có gan thì xài code trên nhé , còn bạn nào sợ thì làm như sau :
Phần CSS giữ nguyên , không thay
Thay cái ACP => Display => Templates => Quản lý tổng thể => Chèn vào cuối overall_footer_begin ở đoạn code trên thành :

Code:


<script>
$(document).ready(function(){
  $("#fa_service").text("Facebook");
  $("#fa_service").attr({
  href: "http://www.forumotion.com/",
  target: "_blank",
  });
 
});
</script>
<script>
$(document).ready(function(){
  $("#fa_menulist").prepend('<div id="insite">');
  $("#fa_menulist li:nth-child(10)").append('</div>');
  });
</script>

<script>
$(document).ready(function(){
  $("#fa_menulist").prepend('<div id="outsite"></div>');
  });
</script>

<script>
$(document).ready(function(){

 
  $("#notif_list").prepend('<div id="outsite1"></div>');


 
});
</script>

[HoàngTửNaivip5p]

Đẹp đấy rock Nhưng để giống toolbar Face thì nên ẩn cái Share: đi

[rockmanvnx6]

Muốn ẩn cái share thì chèn vào CSS

Code:

#fa_share{display:none!important;}

thôi

[Kiến]

Hình như facebook làm gì có gradient

[Việt]

http://help.forumotion.com/t120146-functioning-of-the-toolbar-and-notifications

Important note:

There's an important note to take into account about the customization of the Toolbar:

We remind that this is absolutely forbidden and against our TOS to remove the Forumotion's Copyrights from the Toolbar (icon + link).
However, you have to know that after your requests to be able to remove the copyrights legally, we are actually working on a solution which should be set up soon.

can thiệp vào icon và link Bản quyền trên Toolbar là vi phạm ToS đấy nhé
Cân nhắc trước khi sử dụng.

[kid1412]

xin phép FM chưa? coi chừng ko nói trước FM phạt đấy nhé :>

[Ocean Sapphire]

đẹp đấy, nhưng ko nên dùng

[handsomevip007]

Thay chữ Facebook thành chữ Forumotion thì vẫn dùng dc thôi

[rockmanvnx6]

Hình như facebook làm gì có gradient

https://m.facebook.com/

[rockmanvnx6]

Thay chữ Facebook thành chữ Forumotion thì vẫn dùng dc thôi

Nó chỉ bảo là không được xóa icon và link thôi , còn đổi chữ facebook thay cho chữ forumotion thì vẫn được chứ

[baivong]

Được đó, góp ý chút về javascript viết hơi thừa, với style này thì chỉ css là đủ.
Mở màn thế này là ngon rồi.

[Kiến]

Hình như facebook làm gì có gradient

https://m.facebook.com/

Ô hoá ra theo cái style đó

[mrtienduc1999]

Theo t nghĩ nếu để (c) thì khỏi change chữ Forumotion thành Facebook làm gì. Mà nếu không change link và icon Forumotion thì vô hiệu hóa cho khi ấn vô không tới được Forumotion có coi là vi phạm không nhỉ.

[nightWalker]

Styles đẹp, khá chất...+1 cho bạn ý

[chupy]

trước mình vẫn ẩn icon + dòng forumotion
dùng vài tháng thằng Fm cũng chả đả động gì

[pro_qng]

rip skin + copy code từ www.the0ne.forumvi.com

[rockmanvnx6]

rip skin + copy code từ www.the0ne.forumvi.com

ai chả biết skin của the0ne , rip để học hỏi thôi mà bạn , mình còn để cả logo của the0ne lên banner , bạn không phải post link đâu

[hocsinhngoan1998]

Chả hiểu gì hết

[Cáo Già Đeo Nơ]

Tuổi trẻ tài cao :+1:

[pro_qng]

Mình sắp phải off dài dài để ôn thi vào cấp 3 [color:1ec1=red[size=24:c60e]]nên tranh thủ thời gian rảnh rỗi viết cái này[/size] . Không biết đã có ai thực hiện ý tưởng này chưa . nhưng chắc là chưa .
* Mới test trên punbb thôi nhé !

câu nói màu được được nói như thế nào ?

---

Vui lòng xem kĩ bài viết. Mình thấy bạn đã bàn lạc đề

[rockmanvnx6]

Mình sắp phải off dài dài để ôn thi vào cấp 3 [color:217a=red[size=24:c60e]]nên tranh thủ thời gian rảnh rỗi viết cái này[/size] . Không biết đã có ai thực hiện ý tưởng này chưa . nhưng chắc là chưa .
* Mới test trên punbb thôi nhé !

câu nói màu được được nói như thế nào ?

---

Vui lòng xem kĩ bài viết. Mình thấy bạn đã bàn lạc đề

Cái mình viết là cái thanh toolbar , là cái như title mình đã nói . Bạn hiểu thành viết cả trang web à .

[Vilkenv Princo]

Mod hay đấy bạn

[Sponsored content]