[Release] Supernova (phpBB 3.0.8)

[darkly]

Where did you get/download the font?

[Christian 2.0]

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]

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?

[Christian 2.0]

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:


#sn-not-logged-in-hover:


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_]

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

[ttf]

Really awesome style! thanx a lot!

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


my users wont like that.

[Christian 2.0]

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

Things you should know:

• ...
  
• This style does not, and never will support fluid width.
  ...

Sorry, can't keep everyone happy .

[Nawid]

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

[therat]

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.

[Christian 2.0]

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%).

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 :

https://camo.phpbb.com/18cb2c5ccdc3a7edf508c3d99aad99cc9c0d505c/687474703a2f2f6935302e74696e797069632e636f6d2f3333786578776a2e676966

[therat]

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

[Christian 2.0]

Yes, you're absolutely right. My mistake

Here you go:

[Danielx64]

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:


#sn-not-logged-in-hover:


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?

[Christian 2.0]

Just used jQuery UI

[reVvo !]

Cristian Very good, excellent job!

I'm interested in putting it in my forum



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");}