ChocOHoney

[Welshling]

Preview & Download

..Recommended plugins..
Drop down nav
Sidebar Redux
Google webfonts

..Template Mods & Css tweaks..

Navigation
By now you should all know, how to move your navigation bar so I am just going to show you where you can find your inbox info should you want to edit the colors.
Admin>Structure>Layout Templates.
line 24 - 30

SPOILER: Click to show

<p id="welcome">
[if $[current_user.is_member]]
$[current_user.name] (<a href="$[logout_link.href]">signout</a>)
 -  <a href="/conversations/inbox"><b>Inbox:</b></a> <font color="#c5bf9c">$[current_user.messages.inbox]</font> | New: <font color="#c5bf9c"><u>$[current_user.messages.new]</u></font>
[else]
Welcome Guest to $[forum.name]. $[login_link.] or $[register_link.]
[/if]
</p>

Edit the parts inside the font tags.

Notification bubble alignment
Admin>Advanced>Style sheet.
Scroll to line 1527 - 1528 find this.

SPOILER: Click to show

#navigation-menu div.tip-holder div.tip-number [margin: 12px -14px 0px 0px;]
#navigation-menu div.tip-holder span.tip [display: none;]

Edit margins to suit your width preferences.

Banner/logo edits.
All you will need to edit for your information in your banner image is this part, In your wrappers.

SPOILER: Click to show

<center><h3>7th Oct. 13</h3></center>
<div class="columns" style="width:200px;height:138px;padding:6px;;overflow:auto;"><font face="Voltaire">Best Viewed in Chrome</font><br>
ChocOHoney is now availible for members, via your profile settings.<br>
It will soon be accepted to the proboards library!<br>
This theme has a lot of css and template modifications which may need editing to suit your needs.<br>
The first thing, you'll notice is the banner and width of the forum.<br>
The banner is 900px while the forum width is set to 1000px, this is in case you don't want to use a sidebar on your forum. And so your banner and forum width would look best set to 900px.

If you want to make this area bigger, find this part in your Style sheet on line 1645 - 1681

SPOILER: Click to show

/*Banner fade this just sets things up for positioning */
.entry1[
position:relative;
top:0px;
left:0px;
width: 900px; (banner width)
height: 400px; (banner height)
]
/* this is the background behind the fade description. Height width should be same as entry above */
.image1[
position: absolute;
top:20px; (Edit here)
left:0px;
opacity:4;
width:900px; (banner width)
height:400px; (banner height)
transition: all 1s ease;
z-index:100!important;
]
.fade_content[
position: relative;
top: 118px; (edit here)
background-color: #232323; (edit color)
border-radius:20%;
color: #c5bf9c; (font color edit)
font-size: 1em;
width:200px; (width of div inside hover)
height:200px; (height of div inside hover)
margin-left:315px; (edit to suit)
float:left;
z-index:100!important;
]
.columns[
width: 45%;
text-align: left;
z-index:100!important;
]

(edit these parts)

Forum links under banner
Style sheet. Find lines 1621 - 1627

SPOILER: Click to show

{links in banner.}.forum_sub_name a:hover [
transition: all 0.5s ease-in-out 0s;
-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
background: #555;
padding:3px;
]

This is for the links under the banner, when hovered over you get the light gray transition appear.

To edit the links, themselves.
Structure>Layout templates>Forum wrapper.
Line 54. Just replace my links with your own, inside the <a> tags </a>

Side bar transition links
Import your side bar and add this to your links area. Editing the links to suit your needs.
<div class="quicky"><a href="your link here">name of post here</a><br></div>
To edit the transition color.
Style sheet.
.quicky  a {  padding: 3px; }
.quicky a:hover { transition: all 0.5s ease-in-out 0s;
-moz-transition:0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
background: #555;
padding:3px;
}

Webkit scrollbar
Style sheet. Lines 1683 - 1689
::-webkit-scrollbar { width: 10px; height: 3px; }
::-webkit-scrollbar-button {  background-color: transparent; }
::-webkit-scrollbar-track {  background-color: #666;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 40px; background-color: #232323; border-radius: 10px;}
::-webkit-scrollbar-corner { background-color: #999;}
::-webkit-resizer { background-color: #666;}

Board descriptions
Style sheet lines 1629 - 1643
/* Main Page New Posts/No New Posts */
#descrip {
background-color: #181818;
border: 2px solid #181818;
border-radius: 15px;
font: 400 85% Arial,Helvetica,sans-serif;
padding: 10px;
}
#descrip2 {
background-color: #141414;
border: 2px solid #302b0e;
border-radius: 15px;
font: 400 85% Arial,Helvetica,sans-serif;
padding: 5px;
} Edit the color hex values to suit.

Member legend in info center
Style sheet. lines 1691 - 1851
Edit the ID's to suit, ensure ID's match in both pieces of the css Highlighted in red.
Edit the hex values in blue.
Edit the positioning in orange.

SPOILER: Click to show

/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #e61919; margin-right: 3px; display: inline-block; }
#squareSta { width: 10px; height: 10px; background: #196be6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #48aa29; margin-right: 3px; display: inline-block; }
#squareLur { width: 10px; height: 10px; background: #f0e890; display: inline-block; }


/* Administrator */
a.admlegend {
position: relative;
text-decoration: none;
}
a.admlegend: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: -color=orange]15

[/color]px;
background: #444;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.admlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: #444 transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/* Global Moderator */
a.stalegend {
position: relative;
text-decoration: none;
}
a.stalegend: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: -4px;
background: #444;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.stalegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: #444 transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left:-2px;
}

/* Moderator */
a.memlegend {
position: relative;
text-decoration: none;
}
a.memlegend: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: -15px;
background: #444;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.memlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: #444 transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/* Member */
a.lurlegend {
position: relative;
text-decoration: none;
}
a.lurlegend: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: -10px;
background: #444;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.lurlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: #444 transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}[/spoiler]
These parts only need editing, if your forum width is larger than 1000px or smaller. To line up your hover bubbles, for each member group. EDIT: Lower the px amount, for the right: position.

To finish your member legend edits. Go to your Layout templates. Home.
Line 86. Make sure the red matches the red above.

SPOILER: Click to show

{Member home.}<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="stalegend" title="Staff"><div id="squareSta"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a> <a href="#" class="lurlegend" title="Lurker"><div id="squareLur"></div></a>

Also change the parts inside the quotes to suit your member group title names. Such as "Administrator" And "Staff".

---

Error On my behalf. It was pointed out to me by Stinky666 that I had two "likes" in the mini profile's. To remedy this. Go to Structure>Layout templates>Mini profile and find all of this.

<div class="info">
I have made <font style="color:#F0CE4E; weight: bold;">$[user.posts]</font> post{if $[user.posts] != 1}s<br />Likes: $[user.likes]{/if}
{if $[user.is_online]}<br />Right now I'm <font style="color:#adc92f; weight: bold;">Online</font>{else}<br />Right now I'm <i>Offline</i>{/if}
{if $[user.registered_on_short]}<br />I joined <font style="color:#7f76e6; weight: bold;">$[user.registered_on_short]</font>{/if}
{if $[user.likes]}<br />I've received <font style="color:#BF2A23; weight: bold;">$[user.likes] like{if $[user.likes] != 1}s{/if}</font>{/if}

Remove the part in purple and click save!

If you need anything else editing, but are unsure what to do. Just reply below and I'll help you out if i can.

---

---

There's a vital piece missing from the download, which needs to be added to your Global Headers for your hover banner/logo to work correctly. So Admin > Structure > Headers & Footers.
Click the Global headers & footers tab and paste the following into it.
<script type="text/javascript">
$(function() {
$('.entry1').hover(function() {
$('.image1',this).stop().fadeTo('slow', 0.4)
.siblings().stop().fadeTo('slow', 1);
}, function() {
$('.image1',this).stop().fadeTo('slow', 1)
.siblings().stop().fadeTo('slow', 0);
});
});

</script>

[elliephantom]

Where can I get the global header so the hover banner works?

[Welshling]

elliephantom, weird coinsidence I just read your other thread and thought hey this sounds familiar. The piece that didn't transfer with the theme itself is intended for you global header (which I forgot to mention in the first post, my apologies)

Anyways here's the missing link.

SPOILER: Click to show

<script type="text/javascript">
$(function() {
$('.entry1').hover(function() {
$('.image1',this).stop().fadeTo('slow', 0.4)
.siblings().stop().fadeTo('slow', 1);
}, function() {
$('.image1',this).stop().fadeTo('slow', 1)
.siblings().stop().fadeTo('slow', 0);
});
});

</script>

to add it, go to Admin > Structure > Headers & Footers Click on the Global headers and footers, then paste the above into your global header.
If you experience anymore problems, please tag me for quick referencing purposes. I hope you enjoy using my ChocOHoney theme

[elliephantom]

Thanks, Welshling! It's working now

[Welshling]

Your'e welcome. elliephantom

[Welshling]

This theme has been updated in the library. Please make sure you've got the most recent update to ensure no script errors occur. Thank you.