[THEME] Cosmic Sleek RED v1.1 - Phpbb3

Rhino.Freak · Rhino.Freak Sun 01 May 2016, 01:04

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.

index_body replaced with http://pastebin.com/raw/Wb0BF38u
index_box replaced with http://pastebin.com/raw/VApT1yLD
overall_footer_end replaced with http://pastebin.com/raw/ADZcCpZi
overall_header replaced with http://pastebin.com/raw/1RxGEWNt
viewforum_body replaced with http://pastebin.com/raw/euzQhvY5

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

Guest · Guest Sun 01 May 2016, 05:15

Just checked it out and it's sleek and cool!
Hope you could develop it in blue. Nonetheless, it's so nice!

Rhino.Freak · Rhino.Freak Sun 01 May 2016, 05:19

Poser wrote:Just checked it out and it's sleek and cool!
Hope you could develop it in blue. Nonetheless, it's so nice!

Hi! I'm glad you like it Very Happy

Can you be exact with what colors you need?
Right now the primary colors are RED and BLUE. If you can give me exact colors I can probably change the design for you Smile

Guest · Guest Sun 01 May 2016, 05:29

For my liking, it'd be #1fccff and all other colors that will complement it. (You know, I like blue. Laughing

)

**Ange Tuteur** · **Ange Tuteur** Mon 02 May 2016, 07:01

It's looking good, nice work ! Very good

One thing I noticed is the password field isn't styled on registration step 2 :
http://freetest.forumotion.net/register?agreed=true&step=2

**Wilson** · **Wilson** Mon 02 May 2016, 07:43

A bit too much imo.

Rhino.Freak · Rhino.Freak Mon 02 May 2016, 10:34

Ange Tuteur wrote:It's looking good, nice work !

One thing I noticed is the password field isn't styled on registration step 2 :
http://freetest.forumotion.net/register?agreed=true&step=2

THANKS

Just fixed it.

skouliki · skouliki Mon 02 May 2016, 12:06

nice work !

Rhino.Freak · Rhino.Freak Tue 03 May 2016, 04:40

Looks like I have squashed all remaining bugs and polished every little corner.
If you can see anything off PLEASE tell me Very Happy

I think it's about time I should prep to release this!

@Ange Tuteur there are some mandatory JavaScripts for this style, do you think I should add those in the template or is it not a good practice?

**BlackScorpion** · **BlackScorpion** Tue 03 May 2016, 09:37

Nice Theme, will you be posting it up for the public?

**Ange Tuteur** · **Ange Tuteur** Tue 03 May 2016, 11:04

Rhino.Freak wrote:Looks like I have squashed all remaining bugs and polished every little corner.
If you can see anything off PLEASE tell me

I think it's about time I should prep to release this!

@Ange Tuteur there are some mandatory JavaScripts for this style, do you think I should add those in the template or is it not a good practice?

If it's for one specific template then it should be fine. Otherwise if it's for multiple templates I'd place it in JS codes management. Wink

Rhino.Freak · Rhino.Freak Tue 03 May 2016, 11:13

BlackScorpion wrote:Nice Theme, will you be posting it up for the public?

Yes! That's the point of this topic.

@Ange Tuteur alright I'll use the JS then.

Rhino.Freak · Rhino.Freak Tue 03 May 2016, 12:52

Hey everyone! The theme is now ready and available for everyone! Very Happy

**Ange Tuteur** · **Ange Tuteur** Wed 04 May 2016, 11:29

A job well done, it looks amazing ! KIU Very good

**BlackScorpion** · **BlackScorpion** Wed 04 May 2016, 15:44

Great job Rhino, now can you make me a blue and grey one? Razz

Rhino.Freak · Rhino.Freak Wed 04 May 2016, 23:14

BlackScorpion wrote:Great job Rhino, now can you make me a blue and grey one?

Sure, tell me the exact color coded you want.
And blue being primary? Currently in this theme, RED is primary.

**BlackScorpion** · **BlackScorpion** Fri 06 May 2016, 21:40

Rhino.Freak wrote:
BlackScorpion wrote:Great job Rhino, now can you make me a blue and grey one?

Sure, tell me the exact color coded you want.
And blue being primary? Currently in this theme, RED is primary.

Since you asked lol!

phpBB3 - [THEME] Cosmic Sleek RED v1.1 - Phpbb3 Screen44

phpBB3 - [THEME] Cosmic Sleek RED v1.1 - Phpbb3 Screen46

Rhino.Freak · Rhino.Freak Thu 12 May 2016, 03:35

Haven't forgotten about your request. But my exams have started and I will be free after a month.

Rhino.Freak · Rhino.Freak Sat 14 May 2016, 07:10

Check this out:
http://freetest.forumotion.net/

Quickly just replaced the colors inside the css, you can see how it is right now. Only need to change the images Smile

P.S I changed e1e1e1 to c1c1c1 color as it was too bright and was causing issues where the text color was white on top of it.

please confirm the colors and make sure you have made your mind about them because making the images is a long work. Mr. Green

**Van-Helsing** · **Van-Helsing** Sun 15 May 2016, 07:13

Very beutifull skin, it is clean, flat and clear skin. I like it. 10/10.

Rhino.Freak · Rhino.Freak Sun 15 May 2016, 09:14

Thanks! Glad you liked it Smile

I would also like to inform you guys that there were a few bugs and one big thing I forgot to style chat box).
I'll be updating the theme very shortly Smile

stay tuned!

**BlackScorpion** · **BlackScorpion** Sun 15 May 2016, 17:41

Rhino.Freak wrote:Check this out:
http://freetest.forumotion.net/

Quickly just replaced the colors inside the css, you can see how it is right now. Only need to change the images

P.S I changed e1e1e1 to c1c1c1 color as it was too bright and was causing issues where the text color was white on top of it.

please confirm the colors and make sure you have made your mind about them because making the images is a long work.

That looks great, with just the minor changes you made. Although my preference would be with the lighter blue, surrounding this circle. Visually seeing it makes a big difference. No rush when you get time work on it, if you want.

phpBB3 - [THEME] Cosmic Sleek RED v1.1 - Phpbb3 Unknow10

Rhino.Freak · Rhino.Freak Mon 16 May 2016, 01:15

Can you give me hex code for a lighter blue?

**BlackScorpion** · **BlackScorpion** Mon 16 May 2016, 23:40

Rhino.Freak wrote:Can you give me hex code for a lighter blue?

I think it's this one,

phpBB3 - [THEME] Cosmic Sleek RED v1.1 - Phpbb3 Screen57

it the one your using currently on the theme for the topic titles.

phpBB3 - [THEME] Cosmic Sleek RED v1.1 - Phpbb3 Screen55

Rhino.Freak · Rhino.Freak Mon 16 May 2016, 23:47

So you want to use that color instead of the current blue everywhere or just you want that color in the forum icons (no new unread one basically)?
Just a final confirmation.

Sponsored content · Sponsored content

IMPORTANT

[THEME] Cosmic Sleek RED v1.1 - Phpbb3