The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Cosmic Sleek RED v1.1 - Phpbb3

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Cosmic Sleek RED v1.1 - Phpbb3

Post by Rhino.Freak on Tue May 03, 2016 11:54 am

First topic message reminder :

Introduction:

Hey everyone! So I have been working on this theme for quite some time and I feel it is finished and is now open for public to use and enjoy Very Happy This isn't simply a skin, its a full theme that has template changes and requires select JavaScripts installed.

Demo:

Live Demo: http://livedemo.forumotion.info/
Even though screenshots don't do justice to the slick animations and transitions hidden all around the theme, here are few basic ones Smile
Screenshots:





Installation:

Step 1: Import the skin
Download the .bbtheme here : https://www.mediafire.com/?96gsqwqnvi2mut6 (v1.1)
and import it in your forum by going to Admin Panel > Display > Themes Management > Import the skin and then navigating to the downloaded file.

Step 2: Edit the templates
Go to Admin Panel > Display > Templates > General and edit them with the respective replacement I provide below.
Note: selecting ALL content from existing templates and replace it with edited code.


Step 3: Add the required JavaScripts
Go to Admin Panel > Modules > JavaScript Code Management > Add New
Title: Cosmic Sleek
Tick in all pages and paste the code below
Code:
(function() {
var FA = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css',
  a = document.createElement('LINK');
  a.rel = 'stylesheet';
  a.type = 'text/css';
  a.href = FA;
  document.getElementsByTagName('HEAD')[0].appendChild(a);
})();
$(function() {
  for (var a = $('.topics, .posts, .views'), i = 0, j = a.length, s; i < j; i++) {
    s = a[i].innerHTML;
    if (+s.replace(/(\d+).*/, '$1') == 1) {
      a[i].innerHTML = s.slice(0, s.length - 1);
    }
  }
});
$(function() {
  $(document.body).append('<style>#fa_toolbar #fa_right #notif_list li .contentText a { color:#2f8aa3 !important; }#fa_menulist :visited { color: #ebebeb !important;}#fa_menulist :visited :hover { color: #fff !important;}</style>');
});

OPTIONAL FUNCTIONALITY:

Step 4: To get better functionality, install these additional JavaScripts.
  • To get AJAX Subscribe/Unsubscribe button next to Topic Title:
    Credits: Mr. EasyBB
    Title: whatever you like
    Tick IN TOPICS and paste the code below.
    Code:
    (function(l,j,m){var b,k,c,g,e,h=true;var i=function(o,p,d){if(!i.done){return new n(o,p,d)}};i.debug=false;i.done=false;i.titles=true;i.lang={subscribe:" ",unsubscribe:" ",title_unSubscribe:"Stop watching this topic",title_subscribe:"Start watching this topic"};var n=function(o,s,d){if(typeof o=="object"){d=s;s=o;h=false}if(typeof s=="function"){d=s}if(h==true&&o.toLowerCase()=="invision"){i._anchors=b=j.querySelectorAll(".left-overview a");i._target=k=j.getElementById("text_editor_textarea").parentNode.nextSibling}if(h==true&&o.toLowerCase()=="phpbb3"){i._anchors=b=j.querySelectorAll(".right a");i._target=k=j.getElementById("text_editor_textarea").parentNode.nextSibling}if(h==true&&o.toLowerCase()=="phpbb2"){i._anchors=b=j.querySelectorAll(".gensmall a");i._target=k=j.getElementById("quick_reply").getElementsByClassName("row2")[1]}if(h==true&&o.toLowerCase()=="punbb"){i._anchors=b=j.querySelectorAll("#pun-visit li a");i._target=k=j.getElementById("pun-qpost").getElementsByClassName("frm-buttons")[0]}if(s){if(s.selector){if(s.selector.anchors){b=i._anchors=s.selector.anchors}if(s.selector.target){k=i._target=s.selector.target}}if(s.titles&&s.titles===false){i.titles=false}if(s.id){c=s.id}}var r=b,q=false,t=j.createElement("button");t.type="button";if(r){for(var p=0;p<r.length;p++){if((/\?unwatch=topic/gi).test(r[p].href)){t.value=r[p].href;r[p].parentNode.removeChild(r[p]);t.innerHTML=i.lang.unsubscribe;if(i.titles===true){t.title=i.lang.title_unSubscribe}t.className="easyBB_btn unsub";q=true}if((/\?watch=topic/gi).test(r[p].href)){t.value=r[p].href;r[p].parentNode.removeChild(r[p]);t.innerHTML=i.lang.subscribe;if(i.titles===true){t.title=i.lang.title_subscribe}t.className="easyBB_btn sub";q=true}if(c!==undefined){t.id=c}if(k&&q===true){t.setAttribute("onclick","ajaxSubscribe(this)");if(!s||!s.selector){k.appendChild(t);i.done=true;break}else{k.appendChild(t);i.done=true;break}}}}console.log(d);console.log(s);if(d!==undefined){d.call(this,i.done,t)}};function f(o,d){if(i.debug){return console[o](d)}}function a(o){var p=o.innerHTML,d=o.value;$.post(d,function(q){if(/no longer watching/g.test(q)){o.innerHTML=easyScribe.lang.subscribe;$(o).removeClass("unsub").addClass("sub");if(easyScribe.titles===true){o.title=easyScribe.lang.title_subscribe}o.value=o.value.replace(/\?unwatch=topic/,"?watch=topic")}if(/are now watching this/g.test(q)){o.innerHTML=easyScribe.lang.unsubscribe;$(o).removeClass("sub").addClass("unsub");if(easyScribe.titles===true){o.title=easyScribe.lang.title_unSubscribe}o.value=o.value.replace(/\?watch=topic/,"?unwatch=topic")}})}return(l.easyScribe=i)&&(l.ajaxSubscribe=a)})(this,document);
    $(function(){
      var target =$('.page-title')[0];
        easyScribe('phpbb3',{
          titles:false,
          selector:{
              target:target
          }
        });
      });
  • To get Add to Favorites button next to topic title.
    Credits: 10spetter10
    Title: whatever you like
    Tick IN TOPICS and paste the code below.
    Code:
    $(function() {
      var locFavLink = $('#plus_menu a[href*="add_favourite"]');
      locFavLink.next().remove();
      locFavLink.addClass('favlink');
      $('h1.page-title').append(locFavLink);
    });


Credits for full package: Rhino.Freak, Ange Tuteur, Nick Salloum and Mimóza for helping me solve the bugs and the support forum who's design has been the inspiration to make this theme Smile


Last edited by Rhino.Freak on Thu May 26, 2016 6:05 am; edited 2 times in total
avatar
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down


Re: Cosmic Sleek RED v1.1 - Phpbb3

Post by Mr.Thrash on Sun Jan 08, 2017 5:39 pm

Great Job Bro! Wink
avatar
Mr.Thrash
Forumember

Posts : 25
Reputation : 2
Language : Greek,English

Back to top Go down

Re: Cosmic Sleek RED v1.1 - Phpbb3

Post by Pendo on Thu Feb 09, 2017 9:54 pm

So far, I don't think I've encountered any bugs. My favorite part about this theme is actually how thorough and robust it is. It might even be my favorite theme of all time haha. I like spacing though so I changed the padding for the .forabg class in the CSS to give the categories a 5px gap.

Search ".forabg" (without quotes) in the CSS Editor.
Change padding property to: "padding: 0 5px;" (without quotes).



For anyone who's interested. xD I think it's more of a personal preference though.

Pendo
Forumember

Male Posts : 200
Reputation : 13
Language : English | CSS | HTML | BBCode | C++ | Javascript
Location : Alabama, USA

http://sg-rpg.forumotion.com/

Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum