Post by Welshling on Sept 29, 2013 5:12:53 GMT -8
Preview & Download
An Orange, Green and Purple theme dedicated to pumpkin juice and all things that go bump in the night!
Plugins Used:
Templates/Css
Adding favicon What's favicon? In your windows you should see a small icon for each tab you open, for proboards it is a simple but effective small blue PB image. For Trick or Treat, you should see a small pumpkin. To edit this, you will first need a 16x16 image. Save it to your computer then host it Here
Now for the fiddly bit, go to Admin>Themes>Layout Templates
Click Forum Wrapper and find this part. <title>$[title] | $[forum.name]</title>
Below that, add in the following by replacing the blue with your own url.
<link rel="icon" type="image/x-icon" href="http://your_url/favicon.ico" />
Moving shoutbox The proboards default shoutbox is enabled on this theme and we have it set in our headers (above the boards) If you want it below them, you need to do the following.
Admin>Themes>Layout Templates
Forum Wrapper
Scroll to line 86 and find $[shoutbox] Simply copy that, then remove it from that line and move it up to line 67 above the closing </div>
Adding a sub name This comes in two parts, firstly you will need some css. Admin>Themes>Advanced styles & css. Scroll to line.1649 and find the following.
NOTE, you may need to fiddle with the top, left padding to get the text to line up where you want it. Go ahead and fiddle with the pixel amounts to get what you want.
Now go to Admin>Themes>Layout templates. Forum Wrapper.
Scroll to line 65 find this. <div class="site_sub_name"><font color="#50ad34">a proboards v5 resource forum</font></div>
and edit the parts in lime.
Now while you are in your wrappers, scroll up to line 41 <div id="wrapper">
You will need to add in a small image, to suit your needs by changing the image url on line 45 and editing the height, width and margin properties to get it to line up.
The same will need to be done, for the hover area which is just below that. find, line 48. and edit to suit.
<!-- Update Format -->
<div style="text-align:center;font-family:times;font-size:1.5em;color:#a0a0a0;">27th September 2013</div>
<div style="text-align:center;font-family:times;font-size:.9em;color:#ffffff;padding:4px;">
Trick or Treat is now Complete!<br>
It's been submitted to the library, but waiting on aproval right now.</div>
<!-- End Update Format -->
Edit the inner styles and content to suit your updates. Click save.
Then go back into your css and scroll to line 1661.- 1974.
Again, edit the heights and width's to suit and you can also play around with the transition if you want too.
Mini profile edits This is a built in profile code, which i wouldn't suggest you edit yourself, in fact I have it as it was written. Other than the online color, which i changed by going to line 19. Original layout
{if $[user.is_online]}<span class="italic" style="font-weight:bold;">Member Is </span><span style="color: #DEB314; font-weight: bold; font-style:italic;">Online</span><br />{/if}
Edit the blue part to suit. And of course if you don't want this mini profile, simply restore the mini profile layout template to default.
Notification bubbles. The final edit, lines up the notification bubbles next to your profile button. Because we have the nav tree at the very top of the forum, you may find that your bubbles show up above, which make it hard to actually see them.
So in your css, scroll to the very bottom and find this.
#navigation-menu div.tip-holder div.tip-number {margin: 12px -14px 0px 0px;}
#navigation-menu div.tip-holder span.tip {display: none;
edit the margins, to suit.
And of course, if you don't like the nav tree where it is. Go to your layout templates, forum wrapper again.
Find this.
Move it to below...
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
Click save.
Stinky's board remodel Go to Admin > Themes > Layout Templates > Board, board list.
If you don't like this layout, restore the entire thing to default.
To edit the colors, look for background-color: and font color: and replace the hex values with whatever you want.
UPDATE 28th sept.
/* Alignment for Stinky666 Board List Remodel */
.main .link img {
vertical-align: bottom;
display: inline-block;
margin-bottom: -11px;
}
/* Sub-boards Link Colour */
.sub-boards a { color: #330000; }
Added that to the bottom of the css, which i missed out originally. Thanks Stinky666
Info center remodel Slimline info center by stinky666
© Rach!
Just noticed a slight error in my judgement, you will need to find and edit the following information in your css section.
Edit the parts in blue, to 36px;
The above will need to be done, if you want the hover in the info center to line up correctly with the bubbles and pointer. I haven't updated the theme in the library yet, so its advised for now. You tweak this yourself, if you need help at all. let me know and I will post again once i've re-submitted the theme to the library.
An Orange, Green and Purple theme dedicated to pumpkin juice and all things that go bump in the night!
Plugins Used:
Templates/Css
Adding favicon What's favicon? In your windows you should see a small icon for each tab you open, for proboards it is a simple but effective small blue PB image. For Trick or Treat, you should see a small pumpkin. To edit this, you will first need a 16x16 image. Save it to your computer then host it Here
Now for the fiddly bit, go to Admin>Themes>Layout Templates
Click Forum Wrapper and find this part. <title>$[title] | $[forum.name]</title>
Below that, add in the following by replacing the blue with your own url.
<link rel="icon" type="image/x-icon" href="http://your_url/favicon.ico" />
Moving shoutbox The proboards default shoutbox is enabled on this theme and we have it set in our headers (above the boards) If you want it below them, you need to do the following.
Admin>Themes>Layout Templates
Forum Wrapper
Scroll to line 86 and find $[shoutbox] Simply copy that, then remove it from that line and move it up to line 67 above the closing </div>
Adding a sub name This comes in two parts, firstly you will need some css. Admin>Themes>Advanced styles & css. Scroll to line.1649 and find the following.
{Sub name css}.site_sub_name[
position:relative;
top:-180px;
left:22px;
text-align:left;
]
.sub_menu[
position:relative;
left:-287px;
top:-259px;
]
position:relative;
top:-180px;
left:22px;
text-align:left;
]
.sub_menu[
position:relative;
left:-287px;
top:-259px;
]
NOTE, you may need to fiddle with the top, left padding to get the text to line up where you want it. Go ahead and fiddle with the pixel amounts to get what you want.
Now go to Admin>Themes>Layout templates. Forum Wrapper.
Scroll to line 65 find this. <div class="site_sub_name"><font color="#50ad34">a proboards v5 resource forum</font></div>
and edit the parts in lime.
Now while you are in your wrappers, scroll up to line 41 <div id="wrapper">
You will need to add in a small image, to suit your needs by changing the image url on line 45 and editing the height, width and margin properties to get it to line up.
The same will need to be done, for the hover area which is just below that. find, line 48. and edit to suit.
<!-- Update Format -->
<div style="text-align:center;font-family:times;font-size:1.5em;color:#a0a0a0;">27th September 2013</div>
<div style="text-align:center;font-family:times;font-size:.9em;color:#ffffff;padding:4px;">
Trick or Treat is now Complete!<br>
It's been submitted to the library, but waiting on aproval right now.</div>
<!-- End Update Format -->
Edit the inner styles and content to suit your updates. Click save.
Then go back into your css and scroll to line 1661.- 1974.
Again, edit the heights and width's to suit and you can also play around with the transition if you want too.
Mini profile edits This is a built in profile code, which i wouldn't suggest you edit yourself, in fact I have it as it was written. Other than the online color, which i changed by going to line 19. Original layout
{if $[user.is_online]}<span class="italic" style="font-weight:bold;">Member Is </span><span style="color: #DEB314; font-weight: bold; font-style:italic;">Online</span><br />{/if}
Edit the blue part to suit. And of course if you don't want this mini profile, simply restore the mini profile layout template to default.
Notification bubbles. The final edit, lines up the notification bubbles next to your profile button. Because we have the nav tree at the very top of the forum, you may find that your bubbles show up above, which make it hard to actually see them.
So in your css, scroll to the very bottom and find this.
#navigation-menu div.tip-holder div.tip-number {margin: 12px -14px 0px 0px;}
#navigation-menu div.tip-holder span.tip {display: none;
edit the margins, to suit.
And of course, if you don't like the nav tree where it is. Go to your layout templates, forum wrapper again.
Find this.
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest. Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest. Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
Move it to below...
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
Click save.
Stinky's board remodel Go to Admin > Themes > Layout Templates > Board, board list.
If you don't like this layout, restore the entire thing to default.
To edit the colors, look for background-color: and font color: and replace the hex values with whatever you want.
UPDATE 28th sept.
/* Alignment for Stinky666 Board List Remodel */
.main .link img {
vertical-align: bottom;
display: inline-block;
margin-bottom: -11px;
}
/* Sub-boards Link Colour */
.sub-boards a { color: #330000; }
Added that to the bottom of the css, which i missed out originally. Thanks Stinky666
Info center remodel Slimline info center by stinky666
© Rach!
Just noticed a slight error in my judgement, you will need to find and edit the following information in your css section.
/**************************************************************************
* Users Online + Last 24hrs Legend *
**************************************************************************/
/* Users Online Total */
a.onlinetotal {
position: relative;
text-decoration: none;
}
a.onlinetotal:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -80px;
background: rgba(255, 255, 255,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #000000;
font-size: .86em;
.box-shadow(0px, 1px, 4px, shadow_color);
}
a.onlinetotal:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}
/* Users Online in 24hrs Total */
a.onlinetotal24 {
position: relative;
text-decoration: none;
}
a.onlinetotal24:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -80px;
background: rgba(255, 255, 255,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #000000;
font-size: .86em;
.box-shadow(0px, 1px, 4px, shadow_color);
}
a.onlinetotal24:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}
* Users Online + Last 24hrs Legend *
**************************************************************************/
/* Users Online Total */
a.onlinetotal {
position: relative;
text-decoration: none;
}
a.onlinetotal:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -80px;
background: rgba(255, 255, 255,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #000000;
font-size: .86em;
.box-shadow(0px, 1px, 4px, shadow_color);
}
a.onlinetotal:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}
/* Users Online in 24hrs Total */
a.onlinetotal24 {
position: relative;
text-decoration: none;
}
a.onlinetotal24:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -80px;
background: rgba(255, 255, 255,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #000000;
font-size: .86em;
.box-shadow(0px, 1px, 4px, shadow_color);
}
a.onlinetotal24:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}
Edit the parts in blue, to 36px;
The above will need to be done, if you want the hover in the info center to line up correctly with the bubbles and pointer. I haven't updated the theme in the library yet, so its advised for now. You tweak this yourself, if you need help at all. let me know and I will post again once i've re-submitted the theme to the library.