[Release] Supernova (phpBB 3.0.8)

For style authors to post and receive feedback on 3.0.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
Ideas Centre
darkly
Registered User
Posts: 7
Joined: Sat Jan 30, 2010 1:00 am

Re: [Release] Supernova (3.0.7)

Post by darkly » Sun Jun 06, 2010 12:47 am

Where did you get/download the font? :)

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [Release] Supernova (3.0.7)

Post by Christian 2.0 » Sun Jun 06, 2010 1:25 am

darkly wrote:Where did you get/download the font? :)
You have to buy it - it's a commercial font.
http://www.fonts.com/FindFonts/Detail.h ... COPE=Fonts

There's a good chance you'll already have some of the Myriad Pro fonts pre-installed on your computer. I did, and just bought the light version separately.

Danielx64
Registered User
Posts: 1369
Joined: Wed Nov 04, 2009 5:51 am
Location: In a server room in Australia
Name: Daniel
Contact:

Re: [Release] Supernova (3.0.7)

Post by Danielx64 » Sun Jun 06, 2010 4:37 am

Very nice theme, I love how you used ajax on it

On your theme you got "Guest please login or register" and when you put your mouse over it, it show a login form.

Are you able to tell me how you did that?
Please note that I will not be porting any of my mods to phpBB 3.1. Sorry for the inconvenience this may cause.
Image

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [Release] Supernova (3.0.7)

Post by Christian 2.0 » Sun Jun 06, 2010 12:58 pm

Sure :) - Basically it's just a simple little snippet of jQuery which says displays one div when you hover over the other. So here are our two divs:

#sn-not-logged-in:
Image

#sn-not-logged-in-hover:
Image

The latter (#sn-not-logged-in-hover) has "display: none;" set in its CSS so that it doesn't show when the page loads. When a user's mouse enters the first div (#sn-not-logged-in), jQuery tells the browser to fade in the second div (#sn-not-logged-in-hover). If you look at the CSS for the second div you'll see I've used relative positioning not only to display the form content above the top div, but also so I could use z-index to make it overlap other relatively positioned elements such as the nav bar.

jQuery then tells the browser "When the user's mouse leaves the div, fade it out". The snippet itself is very straight-forward, and you don't need a great deal of jQuery knowledge to be able to work out what does what.

Code: Select all

<script type="text/javascript">
$(document).ready(function() {

// When the mouse enters div1, show div2
	$('#sn-not-logged-in').mouseenter(function() {
		$('#sn-not-logged-in-hover').fadeIn('medium');
	});

// When the user's mouse leaves div2, fade it out
	$('#sn-not-logged-in-hover').mouseleave(function() {
		$('#sn-not-logged-in-hover').fadeOut('medium');
	});

});
</script>

CaNNon_
Registered User
Posts: 392
Joined: Wed Apr 29, 2009 2:07 am

Re: [Release] Supernova (3.0.7)

Post by CaNNon_ » Sun Jun 06, 2010 2:45 pm

This is very nice Christian, I really like the jQuery use!

ttf
Registered User
Posts: 108
Joined: Sun Aug 23, 2009 1:54 pm

Re: [Release] Supernova (3.0.7)

Post by ttf » Sun Jun 06, 2010 3:25 pm

Really awesome style! thanx a lot!

Have a noob query though :mrgreen: How to get it stretch across the screen:
Image

my users wont like that.

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [Release] Supernova (3.0.7)

Post by Christian 2.0 » Sun Jun 06, 2010 4:15 pm

ttf wrote:Have a noob query though :mrgreen: How to get it stretch across the screen:
Christian 2.0 wrote:Things you should know:
  • ...
  • This style does not, and never will support fluid width.
    ...
Sorry, can't keep everyone happy :| .

User avatar
Nawid
Registered User
Posts: 329
Joined: Sat Jun 27, 2009 4:32 pm
Contact:

Re: [Release] Supernova (3.0.7)

Post by Nawid » Sun Jun 06, 2010 4:38 pm

Christian 2.0 wrote:
Nawid wrote:Thank you very much Cristian. :)

Question, possible to change font size? I would like to have a smaller font size for topics, who is online text, forum names etc...
All can be changed in colours.css

Topic text:

Code: Select all

.content {
	color: #333333;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px !important;
}
Topic titles:

Code: Select all

a.topictitle {
	color: #105289;
	font-size: 13px;
	font-family: Verdana, Geneva, sans-serif;
}
Forum names:

Code: Select all

a.forumtitle {
	color: #0f5493;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: -0.5px;
}
Who is online uses the global body { selector, although you can give it its own font-size. Open: index_body.html

Find:

Code: Select all

<!-- IF S_DISPLAY_ONLINE_LIST -->
<div class="sn-stat-info" style="background-image: url('{T_THEME_PATH}/images/who-is-online.png');">
Replace with:

Code: Select all

<!-- IF S_DISPLAY_ONLINE_LIST -->
<div class="sn-stat-info" style="background-image: url('{T_THEME_PATH}/images/who-is-online.png'); font-size: 10px;">
Thank you very much, I've found it.
This style does not, and never will support fluid width.
Also not possible to make smaller? I mean, for example, if this style's width is 1000px, possible to make it 800px?

Code: Select all

[i]Edit:
Please see image

http://www.schoollife.nl/upload/images/help.jpg

I have no idea what I did and when I did this, but I think the whole block should be a bit more right.
Does someone have got an idea what to do?[/i]
EDIT2: problem solved, I had a backup of the themse, I used those and problem solved. Furtonately I didn't installed mods before getting this problem :D
Last edited by Nawid on Sun Jun 06, 2010 6:18 pm, edited 2 times in total.
Image
Check SuperNova Orange style on:
SchoolLife.nl
phpBB.com

User avatar
therat
Registered User
Posts: 285
Joined: Sun Apr 07, 2002 6:06 pm
Contact:

Re: [Release] Supernova (3.0.7)

Post by therat » Sun Jun 06, 2010 5:28 pm

therat wrote:I think there is an image missing from the imageset topic_unread_mine.png, it's showing as missing on my server logs and doesn't appear to be in the download either.
Any luck with the missing image, or is it just me being silly.

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [Release] Supernova (3.0.7)

Post by Christian 2.0 » Sun Jun 06, 2010 6:46 pm

Nawid wrote:Also not possible to make smaller? I mean, for example, if this style's width is 1000px, possible to make it 800px?
Not without a whole bunch of resizing images and adjusting tricky CSS values (eg: one width is set at 52.3%).
therat wrote:Any luck with the missing image, or is it just me being silly.
Oops, not sure how I managed to forget that image :|

It'll be included in the next download, in the meantime I've knocked one up for you :) :
Image
https://camo.phpbb.com/18cb2c5ccdc3a7edf508c3d99aad99cc9c0d505c/687474703a2f2f6935302e74696e797069632e636f6d2f3333786578776a2e676966

User avatar
therat
Registered User
Posts: 285
Joined: Sun Apr 07, 2002 6:06 pm
Contact:

Re: [Release] Supernova (3.0.7)

Post by therat » Sun Jun 06, 2010 9:14 pm

Thanks for that, shouldn't it be a PNG same as the rest?

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [Release] Supernova (3.0.7)

Post by Christian 2.0 » Sun Jun 06, 2010 9:22 pm

Yes, you're absolutely right. My mistake :oops:

Here you go: Image

Danielx64
Registered User
Posts: 1369
Joined: Wed Nov 04, 2009 5:51 am
Location: In a server room in Australia
Name: Daniel
Contact:

Re: [Release] Supernova (3.0.7)

Post by Danielx64 » Mon Jun 07, 2010 2:02 am

Christian 2.0 wrote:Sure :) - Basically it's just a simple little snippet of jQuery which says displays one div when you hover over the other. So here are our two divs:

#sn-not-logged-in:
Image

#sn-not-logged-in-hover:
Image

The latter (#sn-not-logged-in-hover) has "display: none;" set in its CSS so that it doesn't show when the page loads. When a user's mouse enters the first div (#sn-not-logged-in), jQuery tells the browser to fade in the second div (#sn-not-logged-in-hover). If you look at the CSS for the second div you'll see I've used relative positioning not only to display the form content above the top div, but also so I could use z-index to make it overlap other relatively positioned elements such as the nav bar.

jQuery then tells the browser "When the user's mouse leaves the div, fade it out". The snippet itself is very straight-forward, and you don't need a great deal of jQuery knowledge to be able to work out what does what.

Code: Select all

<script type="text/javascript">
$(document).ready(function() {

// When the mouse enters div1, show div2
	$('#sn-not-logged-in').mouseenter(function() {
		$('#sn-not-logged-in-hover').fadeIn('medium');
	});

// When the user's mouse leaves div2, fade it out
	$('#sn-not-logged-in-hover').mouseleave(function() {
		$('#sn-not-logged-in-hover').fadeOut('medium');
	});

});
</script>
Hey Thankyou for sharing :)

Also, the other thing I would love to know, how did you do the drag and drop for the forum cats?
Please note that I will not be porting any of my mods to phpBB 3.1. Sorry for the inconvenience this may cause.
Image

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: [Release] Supernova (3.0.7)

Post by Christian 2.0 » Mon Jun 07, 2010 2:59 am

Just used jQuery UI ;)

reVvo !
Registered User
Posts: 35
Joined: Mon May 17, 2010 6:34 pm

Re: [Release] Supernova (3.0.7)

Post by reVvo ! » Mon Jun 07, 2010 6:04 am

Cristian Very good, excellent job!

I'm interested in putting it in my forum

Image

Should I put in my header this?

Code: Select all

    <script type="text/javascript">
    $(document).ready(function() {

    // When the mouse enters div1, show div2
       $('#sn-not-logged-in').mouseenter(function() {
          $('#sn-not-logged-in-hover').fadeIn('medium');
       });

    // When the user's mouse leaves div2, fade it out
       $('#sn-not-logged-in-hover').mouseleave(function() {
          $('#sn-not-logged-in-hover').fadeOut('medium');
       });

    });
    </script>
And this in my style?

Code: Select all

#sn-header {background: url("../images/red/headerbg.png");}
a#sn-logo {background-image: url("../images/red/logo.png");}
#sn-not-logged-in {background-image: url("../images/red/login-notice.png");}
#sn-not-logged-in-hover {background-image: url("../images/red/login-notice-hover.png");}

Locked

Return to “[3.0.x] Styles in Development”