Chalkboard Slide

[XaviEo]

Chalkboard Slide

A SKIN BY MARGIE

DESCRIPTION

Pre-made number three. I started this skin about half an hour after posting up the last one and I have no idea if I should be worried about that or not. This is a light theme with a colour scheme of light and dark greys, and pinks. This skin includes a custom coded header with the navigation links next to a thin banner, a welcome bar with notifications and messages, and a chalkboard themed area with a small member area and rotating information table. This theme also includes remodeled boards, info center, thread and conversation lists, mini-profiles and profiles.

RULES

• Keep the credits on. In the skin description, on the bottom of the forum wrapper and all credits that are on in templates and the style sheet for different bits and pieces. They aren't going to make the skin look ugly or more difficult to use so there's no reason to even think of touching them.
• This a a pre-made theme so treat it as such. Don't overly change it. Images, colours and information can be changed but don't go remodeling the boards and messing with the mini-profiles. 
• If you like a remodel or anything in the skin, PM me and ask politely for it rather than downloading the skin just to get that remodel. That's stealing and if you ask, I'm more than happy to give you the code for a remodel or help you with things like hovers.
• Don't steal. Most simple rule. Don't claim it as yours or repost it anywhere.

PLUGINS

• Hide Avatar Builder: Makes the Edit Avatar page much cleaner. Recommended but not needed for the skin to function.
  
  
• Monetary System: Is set up in the mini-profile already. Just install Yootil and the money plugin and it should automatically turn up in the mini-profile correctly.
  
  
• Google Web Fonts: This is needed. I set up the Google Font in the plugin. You'll need to install the plugin and add the font called "Loved by the King". If you don't want to use the plugin you can go to Google fonts an search for the font to get the small bit of code to put in the Forum Wrapper. (I'll add it in the next update so the plugin wont be needed but I'm not sure Proboards would like me adding an update before the skin has even been accepted into the theme library so that'll be a little wait..)

I cannot guarantee that any other plugins will work with this skin.

INCLUDES

• Custom header, chatbox & affiliates table, board, info center, thread & conversation list and mini-profile remodels by myself.
• Profile Remodel by @khristian

UPDATES

SPOILER: Click to show

• 0.0.1 Released
• 0.0.2 Fixed issue with slideshow not behaving correctly in Firefox.

DOWNLOAD

[XaviEo]

Chalkboard Slide

THE SET-UP GUIDE

Please, please read this set-up guide if you're going to be using this skin. It will help you out a lot in setting the skin up for your forum.

Note: Anything to do with CSS, especially with re-colouring will be in this colour. The two pink colours used in the skin are f19886 and c4624e. If you want to make ALL the pink a different colour, do a find and replace by copying the whole Style Sheet into something like notepad. I made sure to put all my styling in the Style Sheet to make re-colouring as easy as possible. You'll also have to go through the Visual Editor and change link colours.

THE HEADER

So, the header. It was the first part of the skin I made and the part that involves the most editing. You can edit everything from the small banner to the links, the welcome bar and the rotating information table in the chalkboard area. 

• THE BANNER: Your banner image is going to need to be exactly 870x100px. This width means that guests will see the whole banner and around 200px of the right side will be covered for members. The banner is set up normally in this skin so to edit it you need to go to Advanced Styles & CSS > Visual Editor > Header (Top) > Forum Banner > Banner Image. There you'll be able to edit the banner image.
• FORUM NAME: Can be edited in the Advanced Styles & CSS > Visual Editor > Header (Top) > Forum Banner > Banner Text. You might want to change the text size to fit with the banner image or the colour of either the text or the shadow (especially for if you're re-colouring, pink isn't a nice colour for all sites). 
• NAVIGATION BAR LINKS: Want to change what links show up in the navigation bar area? You can do that. You'll need to stick to two links for guests and six links for members but you can change any of them, they've been coded into the forum wrapper as separate link tags. Go to Layout Templates > Forum Wrapper and scroll down to Line 27 for member links and Line 44 for guest links. 
  
  To edit the hover colour of these links, for if you're re-colouring the skin, go to the Style Sheet (Advanced Styles and CSS > Style Sheet) and to Line 1626.
• WELCOME MESSAGE: Want to change the "Welcome Name" to "G'day Name" or some other greeting? Staying in the Forum Wrapper scroll down to Line 53 for the bar under the banner and Line 166 for the welcome message in the chalkboard area. If you change the "Welcome" in both spots it will change for both guests and members.
  
  If you want to change the pink colour of the welcome message in the chalkboard area, and the pink border for the avatar go to the Style Sheet and Lines 1722 & 1731.
• ROTATING TABLE: You're going to want to edit all the information in this area. Still in the Forum Wrapper, editing for this starts on Line 86. If you want to play with the divs because you have different information to display (which is fine with me) make sure you only touch what's inside the <li></li> tags. If you even mess up one of those, you'll cause an annoying mess.
  
  All the CSS for the rotating area can be found between Lines 1928 and 2144. 

IMAGES

I've covered changing the banner in the header category but there are a few other images that you're going to want to change in the skin.

• THE BANNER: See the above category.
• "SECOND BANNER IMAGE": The 570x250px image found in the rotating table. Can be edited on Line 86 of the Forum Wrapper.
• STAFF IMAGES: Again, staying in the Forum Wrapper. On Lines 115, 116 & 117. Replace each "http://placehold.it/180x60" with a 180x60px image.
  
  
• SPOTLIGHT IMAGES: On Lines 136, 137, 140 &141 of the Forum Wrapper. Replace each "http://placehold.it/150x80" with a 150x80px image.
• DEFAULT HOVER IMAGE: Go to Layout Templates > Mini-Profile. Scroll down to Line 73 and replace "http://placehold.it/220x350" with your own 220x350px image.
• GUEST AVATAR: Staying in the Mini-Profile layout template. Scroll own to Line 82 and replace "http://placehold.it/220x350" with your own 220x350px image.

CUSTOM PROFILE FIELDS

For the mini-profiles to work you'll need to add these custom fields. Go to Members > Custom Profile Fields and enter these in. If they're misspelled, they won't work.

• Hover Image - Text Field - URL (plain text)
• Character Age - Text Field -Numbers Only

• Character Gender - Text Field
  
• Sexuality - Text Field
  
• Relationship Status - Text Field
  
• Application - Text Field - URL (plain text)
  
• Plotter - Text Field - URL (plain text)

If you need help after reading this set-up guide, please reply to this thread with the problem you're having AND A LINK TO THE SITE YOU'RE HAVING ISSUES WITH MY SKIN ON. Please, it makes my job a lot easier if you provide a link. It means I can see the problem, inspect element, anything like that to help you.

[N A T]

Oooh, this one is super fun! Good job.

[M?m?M???]

Hey, first of all I want to say that I love your themes. I'm trying to make a forum for artists, and your themes make everything much more inviting and interesting than static images and text!

Now, to the business...
I have a problem with the section where it shows the avatar and welcome message and whatnot. For me, it seems like everything with the sliding... thingy (so many helpful terms, I know... I think I'm still half asleep) is shifted to the right a bit. ...quite a bit. It's not really that problematic until you go to the other sections of the slider, where part of it ends up getting cut off.

Here's a link to the board in question.

I want to get your opinion on it. I haven't touched anything so far except for the forum background. The first question I should ask is, does it do the same thing for you? If not, then I'm not sure there's anything I can do. If so though, then what do you think the problem might be? My two guesses are that it has to do with either the width of the whole forum, or that there's some padding somewhere that's causing it to shift so far. I figured I'd kill two birds with one stone and see if it's actually a just problem with my monitor size or browser, and if not, ask about what I should look for before butchering everything in search of a solution. Nobody knows the code better than you do, after all.

Thank you very much for your time, and again, great themes!

Edit: Oops, I changed the default theme without thinking. Let me know when you're willing to help me troubleshoot and I'll change it back! I'll check here periodically.

[XaviEo]

Hi M?m?M???

Could you change the default theme for me? (:

What browser are you using? (I'm going to take a wild guess at Firefox.) I think it might be a browser related problem, in which case I'll need to try and work out why. It's probably something silly...well, hopefully.

[M?m?M???]

Sorry for the late response! The default theme has been changed. Yes, I am using Firefox. I totally forgot to mention that. Looks like it is a problem with Firefox, because it works fine with Chrome. Hm hm hm...

For your reference, here's how it looks in Firefox (sorry for the large images, I'll figure out thumbnails eventually!) :

[Removed]

vs. Chrome:

[Removed]

Seems like some of the top buttons are getting cut off in Chrome, too  Unless I'm missing something.
Duh, had to log in first.

[M?m?M???]

Hey, I fixed it! I did a bit of Google searching for solutions for Firefox (thanks to you pointing out that it was the root of the problem), then inspected the code a bit to refine my search and found this: support.proboards.com/thread/491048/css3-parallax-slideshow-errors-firefox?page=1&scrollTo=5619414

It involves inserting the line
-moz-box-sizing: border-box;
under both
.sp-slider > li {
AND
.sp-slider > li img{
I'll remove the images above since they don't really need to be there anymore. Thanks for your help, so glad there was an easy fix, even if it was silly. I guess you can view it as a learning experience!

The slider box the OP links to is a pretty nifty one, by the way, with a neat parallax effect... you should check it out!

[XaviEo]

*cuddles M?m?M???* Instead of me helping you, you helped me! xD I'm really happy it was an easy fix and that it's all working for you now. (:

I'm going to go fix this in the skin, update it in the library and go fix it on another site I'm using the slideshow thingy on. Thank you thank you thank you!

Oh, and I'd love it if you could let me know when you've got the skin up. I would love to see it on a forum that isn't the test one.

[raucous]

Hi XaviEo, so I was looking at this skin, and I noticed that the "Recent Posts" button in the banner up top only works on the home page. On any other page, it just brings you to the same page you're currently on. I plan on using this skin at some point soon, so I figured I should post in here to let you know and see if there's a potential fix.

[captiveinwonderland]

This is such an amazing skin, I installed it as one of my skins on my forum, animeinwonderland.boards.net/ . How can I change the mini profile to be just Age and Gender not Character Age and Character Gender? I would also like to delete Application and Plotter.

[randios]

Hello Margie!

This is an awesome skin and I just started using it for my own forum. I'm not able to PM you on this board due to restrictions, so would you have any other way I can talk to you about certain changes I made and also the forum itself that I'm making? I definitely want your permission before opening up the forum with the changes I made. Thank you!

[claudiablackfan102]

gleeroleplay.boards.net/

I in the CSS can't find how to add the images to those boxes and all I looked at line 86 and since I am totally new to CSS I don't want to screw anything up. Do you know how to do this and maybe help me.

In case I don't know if you replied back you can always email me at [e-mail]

[Former Member]

Hi, claudiablackfan102

Most of the images the placeholders to add images are in the forum wrapper template

[claudiablackfan102]

Do you know exactly where that is I really suck at CSS?

[Former Member]

If you go to the css template and follow the instructions you can add your images

IMAGES

I've covered changing the banner in the header category but there are a few other images that you're going to want to change in the skin.

THE BANNER: See the above category.

"SECOND BANNER IMAGE": The 570x250px image found in the rotating table. Can be edited on Line 86 of the Forum Wrapper.

STAFF IMAGES: Again, staying in the Forum Wrapper. On Lines 115, 116 & 117. Replace each "http://placehold.it/180x60" with a 180x60px image.

SPOTLIGHT IMAGES: On Lines 136, 137, 140 &141 of the Forum Wrapper. Replace each "http://placehold.it/150x80" with a 150x80px image.

DEFAULT HOVER IMAGE: Go to Layout Templates > Mini-Profile. Scroll down to Line 73 and replace "http://placehold.it/220x350" with your own 220x350px image.

GUEST AVATAR: Staying in the Mini-Profile layout template. Scroll own to Line 82 and replace "http://placehold.it/220x350" with your own 220x350px image.