Hover Banner

[Tumbleweed]

Oct 19, 2015 7:31:37 GMT -8 CATCH said:

I'm super exciting, thanks for all your hard work!!

I'm going to assume that is an affirmation I can borrow your image to test so I'm going to go ahead an borrow it. I'll have you take a look in case there are some outstanding things you want changed and would prefer me to do it and I'll give you the link where I'm testing it by the end of the day. Still haven't got to the welcome bit by the avatar.

[Azy]

Tumbleweed, you're an absolute legend Just wanted to put that out there!
This isn't even my project, and I'M excited to see it!

[Tumbleweed]

Oct 19, 2015 12:12:19 GMT -8 Azy said:

Tumbleweed, you're an absolute legend Just wanted to put that out there!
This isn't even my project, and I'M excited to see it!

Oh silly you. I'm a amateur pretending to know what I'm doing. But thanks.

CATCH,
I'm going to give you the link to the test site. Please ignore the colored borders. They will be removed. I keep them there so I know things are aligned and I didn't mess something up.

Also ignore the colors. You can change all that. I just want you to look at it closely and see if there is something you want changed. It's much easier to do it while I have it on a test site then you come back later and want something changed.

Mind you, I'm still working on the welcome "name here" login bit by the avatar for all browsers and IE is, no surprise, is giving me grief so ignore that little section for now.

Link To Test Site

[Azy]

Looking very good! Hey this'll help you with pixel critical layouts: I've started using Outline instead of Border for debugging because outline doesn't take up space when rendered in the DOM, so nothing gets pushed out of place by one pixel on each side. Handy for hover states where things might otherwise shift around a bit.
Free tip 'cause I like you, Tums, you're alright!

[CATCH]

It looks great! I was wondering if you could make the announcements, links, welcome, banners,
and affiliates static so they appear on the screen without the hover? The only real thing
I was "hoverable" is like, the text text text and box that are directly over the dragon?

Will I be able to mess with alignments with the code itself? I'm asking because I would
prefer the avatar image smaller and closer to the dragon so the ribbon next to it could
be longer (but obviously you're working on that so ignore that if you already know!!)

Also having all the text boxes under the ribbons closer the ribbons? SO just shrinking
the gap between them right now.

And just generally having the forum title lower and the ribbon sections lower (so as to
be in more alignment with the image.

Again, if I can change the positioning myself that'd be totally fine! I get picky but
it really does look awesome and I'm SUPER appreciative of what you've done!! ^w^

[Tumbleweed]

Oct 19, 2015 18:26:03 GMT -8 CATCH said:

It looks great! I was wondering if you could make the announcements, links, welcome, banners,
and affiliates static so they appear on the screen without the hover? The only real thing
I was "hoverable" is like, the text text text and box that are directly over the dragon?

Will I be able to mess with alignments with the code itself? I'm asking because I would
prefer the avatar image smaller and closer to the dragon so the ribbon next to it could
be longer (but obviously you're working on that so ignore that if you already know!!)

Also having all the text boxes under the ribbons closer the ribbons? SO just shrinking
the gap between them right now.

And just generally having the forum title lower and the ribbon sections lower (so as to
be in more alignment with the image.

Again, if I can change the positioning myself that'd be totally fine! I get picky but
it really does look awesome and I'm SUPER appreciative of what you've done!! ^w^

Yes, you can change the alignment. I'm labeling  all the css so you have more of an idea where to go to change what.  I'll get to work on making the things on the left and right static.  The bear has been the welcome guest and login/out stuff on the right. Thanks for getting back to me so soon. It's a bit of a revamp but I'll get to it I promise in the next day or so and see about the avatar smaller, ribbon longer.

[CATCH]

Again, no rush! I have midterms this week and next week and I'm
going to a business conference tomorrow so you have some time if
you're being overworked right now ^w^

[Tumbleweed]

Oct 21, 2015 19:01:51 GMT -8 CATCH said:

Again, no rush! I have midterms this week and next week and I'm
going to a business conference tomorrow so you have some time if
you're being overworked right now ^w^

Thanks for being so understanding. I did get busy. I redid it and I think I have changed everything so at least it is close to what you want aside from colors/styling and any tweaks you want to make. I still have the borders up so again, ignore that. What is funny is IE isn't giving me grief this time (still using special styles for IE) but it is FF and Chrome. It's just the avatar isn't centering and that area is messed up (for guests) but I'm sure I'm missing something silly but I'm quitting for the night and maybe a fresh look at it will help tomorrow sometime. Actually, I do have a question about the avatar. How close do you want it to the dragon? I moved it over some after I made the avatar smaller but not sure if that is enough. 

Test Site

Here is a screen cap so you can see how it looks when logged in. IE looks exactly like that but with the default avatar and of course the guest stuff. 

[Tumbleweed]

I'm going to go ahead and post the coding in case you would like to get your hands on it when you come online next. This is is a fussy layout so there are some things you should know up front:

1. The width of my site, set in visual editor is 1220px. It's best to have a pixel width since much of the layout is in pixels. Making this fluid, meaning everything will stretch and contract according to screen res would have been a nightmare.  If your forum width is going to be smaller/larger (in visual editor) you'll need to adjust two things in the style sheet:
--- The id called #tumble_wrap (very first id in style sheet and it is set in pixels) and the #middle to a smaller percentage (The middle part has much more flexibility to increase, decrease width without much else to change or might get messed up.)
--- If you do change the width in the middle then you may have to change these two classes as well: .one    and  .two   (They are the hover part) 

2. If you adjust the right or left side width, fair warning, there is a lot that can go wrong, especially on the right side. But if you do find the need to adjust the widths, first adjust the id's width in these: #right_side and #left_side and if your ribbons are too long or short, adjust these id's: #announc_ttl, #links_ttl or #blank_ttl. In the #ava_ttl one, first adjust the left:-28px; as there is some hiding behind the avatar and then you can adjust the width after that.

If you want the tail of the ribbon bigger, again, fair warning, you may open a can of worms. If you do don't forget that IE doesn't cooperate and I have special styles for IE in the Global header (won't let me put it in the style sheet). I also have one for the #ava_ttl id for Chrome. (I just got frustrated as that one would not align right in Chrome and I just couldn't find why)

3. I left some areas with the border in place although in the end, you'll need to remove those. I'd recommend leaving them there until you get things perfected. I put the border in each class/id on the last line so it should be easy to find and remove.

4. For the login/out and register, I'm not using the default in the wrapper. So for these links you'll need to add your own forum ID to the blue part: 

<a href="https://login.proboards.com/logout/6132784">Logout</a>
<a href="https://login.proboards.com/login/6132784">Login</a> or
<a href="https://login.proboards.com/register/6132784">Register</a>

To get the id, just click on either login, logout or register on your forum and you will see the number in the address bar link or you can just view your source code and look for this line:

<link rel="stylesheet" type="text/css" media="screen" href="http://storage.proboards.com/6132784/c/OwJurxzQeACDzoKB7OP4.css" id="forum_style" />

Those are the most important things but if you have further questions just ask. There is a heck of a lot of styles to go with this layout so much can go wrong just tweaking one little thing. Also rather than put all the styles on as few lines as possible, I stacked each style so it is easier for you to find so it will seem like even more! lol

The css that goes at the bottom of your style sheet:

SPOILER: Click to show

/*the main wrapper for the whole banner area*/
#tumble_wrap{
width:1200px;
height:520px;
background-image:url(http://i.imgur.com/w7zow09.png?1);
background-repeat:no-repeat;
/*special positioning 4 banner-note where colns/semicolons are-arenot*/
background-position: left 350px top -30px;
margin:auto;
border:1px solid red;
}
/*this is outlining where the hover will be*/
.one {
position: relative;
top:158px;
margin-right:auto;
margin-left:auto;
width: 500px;
height:300px;
border:1px solid red;
}
/*this is hover part*/
.two {
margin:auto;
width:482px;
height:276px;
font-family:Arial, sans-serif;
font-size:14px;
padding:8px;
display:none;
border:1px solid blue;
}
/*these are your three main sections*/
#left_side{
float:left;
width:26%;
margin-top:4px;
margin-left:4px;
border:1px solid black;
}
#middle{
float:left;
width:44%;
height:500px;
margin-top:4px;
margin-right:0px;
margin-left:17px;
text-align:center;
border:1px solid black;
}
#right_side{
float:right;
width:26%;
margin-top:4px;
margin-right:4px;
border:1px solid black;}
/*this is for the box below announcement ribbon*/
#announ_cont{
width:230px;
height:20px;
background-color:#bbbbbb;
margin: 0px 5px 3px 32px;
padding:4px;
font-size:14px;
}
/*notice there is a special margin 4 right and left links*/
/*this first id with mutual styles for left and right*/
#links_cont_l,#links_cont_r{
width:111px;
height:20px;
background-color:#bbbbbb;
padding:8px 0px 0px 4px;
font-size:12px;
margin-bottom:4px;
float:left;
}
#links_cont_l{margin-left:32px;}
#links_cont_r{margin-left:7px;}

#the_affiies{width:276px;background-color:#c18787; padding:8px;margin:auto;
}
#the_affies img{float:left;margin:4px;}
/*avatar and welcome css*/
#avatar_wrapper{
width:110px;
height:110px;
border-radius:50%;
margin:auto;
background-color:#c18787;
padding:4px;
border:1px solid black;
float:left;
}
.avatar_size_default img, .avatar_size_default default {
max-height: 110px;
max-width: 110px;
border-radius:50%!important;
position:relative;
top:-20px;
left:0px;
margin:auto;
}
/*Below are the 4 ribbons -remember IE has a global header style*/
.ribbon1:before {content: "";float:left; border:1.1em solid #c18787;}
.ribbon1:before { border-left-color:transparent;}
#announc_ttl{
width:236px;
height:1.1em;
float:left;
background-color:#c18787;
text-align:right;
padding: 0.33em 0.9em 0.33em 0.0em;
font-size:1.2em;
}

/*left links ribbon2*/
.ribbon2:before {content: "";float:left; border:1.13em solid #408c91;}
.ribbon2:before { border-left-color:transparent;}
#links_ttl{
width:236px;
float:left;
background-color:#408c91;
text-align:right;
padding: 0.33em 0.9em 0.33em 0.0em;
font-size:1.2em;
}
/*avatar left ribbon4*/
.ribbon4:after {position:relative;top:23px;content: "";float:right; border:1.1em solid #408c91;z-index:1;}
.ribbon4:after {border-right-color:transparent;}
/*left av ribbon-avoid adding width-try to move with left positioning*/
#ava_ttl{
position:relative;
top:-76px;
left:-28px;
width:181px;
height:1.075em;
float:right;
background-color:#408c91;
text-align:right;
padding: 0.33em 0.9em 0.33em 0.0em;
font-size:1.2em;
text-align:right;
z-index:-1;
}
/*blank left ribbon3*/
.ribbon3:after {position:relative;top: -20px;margin-top:0.9em;content: "";float:right; border:1.1em solid #db3382;}
.ribbon3:after {border-right-color:transparent;}
#blank_ttl{
margin-top:-8px;
height:1.1em;
width:236px;
float:right;
background-color:#db3382;
text-align:right;
padding: 0.33em 0.9em 0.33em 0.0em;
font-size:1.2em;
}
/*middle-topish 4 square boxes -adjust margins for centering*/
#square_boxes_wrapper{
position:relative;
width:400px;
text-align:center;
margin-right:auto;
margin-left:auto;
}
.square_boxes{
background: rgba(255, 255, 255, 0.5);
width:80px;
height:80px;
float:left;
margin:4px;
padding:4px;
font-size:12px;
border:1px solid #cccccc;
}
#middle_middle_cont{
position:relative;
top:6px;
width:79%;
height:300p;
background: rgba(255, 255, 255, 0.8);
margin:auto;
border-top:30px solid #408c91;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
#forum_title{
position:relative;
top:-100px;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size:60px;
color:black;
letter-spacing: 12px;
}
#banner_box{
position:relative;
top:-20px;
left:34px;
width:240px;
height:100px;
background-color:#bbbbbb;
margin:0px 0px 0px 8px;
}
/*positioning the welcome text by avatar*/
#right_side h2{position:relative;top:20px;left:0px;font-size:18px;z-index:5;}
/*positions member or guest login-register-logout info*/
#men_out_guest_in{width:100%;height:20px;position:relative; top:42px;left:4px;text-align:right!important;font-size:12px!important;z-index:20;
}
#to_clear_floats1{clear:both;padding:2px;}
#to_clear_floats2{clear:both;padding:18px;}

This is the special ribbon css that goes in your global header. (You could put it in your forum wrapper as well, I think)

SPOILER: Click to show

<style>
/*for IE*/
media screen\0 {#announc_ttl{padding: 0.35em 0.9em 0.35em 0.0em;}}
media screen\0 {#links_ttl{height:1.13em; padding: 0.36em 0.9em 0.36em 0.0em;}}
media screen\0 {#blank_ttl{padding: 0.35em 0.9em 0.36em 0.0em;}}
media screen\0 {#ava_ttl{height:1.1em;padding: 0.35em 0.9em 0.35em 0.0em;width:181px;position:relative; top:-76px; left:-28px; z-index:-1}}
/*for FF*/
@-moz-document url-prefix() {#ava_ttl {position:relative; top:-75px; left:-28px;}}
</style>

Now for the forum wrapper part. I'm going to give you my full forum wrapper if you just want to use that, which is here:

<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>  
<div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div></div>  
       
       
 
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
               



<!--start of the banner area-->
<div id="tumble_wrap">
               
<div id="left_side">
<div class="ribbon1"></div><div id="announc_ttl">Announcements.</div>
<p id="to_clear_floats1"></p>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<p id="to_clear_floats2"></p>
                   
<div class="ribbon2"></div><div id="links_ttl">Links.</div>
<p id="to_clear_floats1"></p>
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r"><a href="http://support.proboards.com/">ProBoards</a></div><br />
               
</div>  
   <!--here starts the hover part-->    
<div id="middle">
<div class="one">
<div class="two">
<!--all hover content goes below this line-->  
<div id="square_boxes_wrapper">
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
</div>      
<p id="to_clear_floats1"></p>
                   
<div id="middle_middle_cont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>        
<!--all hover content goes above this line-->                    
</div>
</div>
</div>
   <!--end of hover part-->    
           
<div id="right_side">
<div id="avatar_wrapper">
<script type="text/javascript">
document.write(document.getElementById('avatarsave').innerHTML);
</script>
</div>
<h2>Welcome</h2>
<div class="ribbon4"></div>
` <div id="ava_ttl">
 
<div id="mem_guest_nam">
{if !$[current_user.is_member]} Guest<br>
{else}
<span> $[current_user.name]</span>
{/if}
</div>
       
</div>  
       
<div id="men_out_guest_in">                  
{if $[current_user.is_member]}
<a href="https://login.proboards.com/logout/6132784">Logout</a>
{/if}
{if $[current_user.is_guest]}Please    
<a href="https://login.proboards.com/login/6132784">Login</a> or
        <a href="https://login.proboards.com/register/6132784">Register</a>
{/if}
</div>
<p style="clear:both;"></p>  
       
<div class="ribbon3"></div><div id="blank_ttl"></div>
<p id="to_clear_floats1"></p>
<div id="banner_box">Banners</div>
<div id="the_affiies">
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>      
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a><br>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>  
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
</div>
</div>
<p style="clear:both;"></p>
   <center><h2 id="forum_title">This Is Your Forum Title</h2></center>
</div>



<script>
   /* Fade-in text over images */
   $(function() {
       $(".two").hide();
       $(".one").hover(function() {
           $('.two', this).fadeIn(500);
       }, function() {
           $('.two', this).fadeOut(500);
       });
   });
</script>

<!--end of hover banner area-->      
               
<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]}
Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span> $[current_user.name].</span>  $[logout_link]
{/if}
</p>
</div>
</header>

$[participated_threads_link]

{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>



OR you can remove or comment out, this......



<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>


and this....



<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</p>


and then add this..... 

<!--start of the banner area-->

<div id="tumble_wrap">

<div id="left_side">
<div class="ribbon1"></div><div id="announc_ttl">Announcements.</div>
<p id="to_clear_floats1"></p>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<p id="to_clear_floats2"></p>

<div class="ribbon2"></div><div id="links_ttl">Links.</div>
<p id="to_clear_floats1"></p>
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r"><a href="http://support.proboards.com/">ProBoards</a></div><br />

</div>  

   <!--here starts the hover part-->    
<div id="middle">
<div class="one">
<div class="two">
<!--all hover content goes below this line-->  
<div id="square_boxes_wrapper">
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
</div>      
<p id="to_clear_floats1"></p>
                   
<div id="middle_middle_cont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>        
<!--all hover content goes above this line-->                    
</div>
</div>
</div>
   <!--end of hover part-->    

<div id="right_side">
<div id="avatar_wrapper">
<script type="text/javascript">
document.write(document.getElementById('avatarsave').innerHTML);
</script>
</div>
<h2>Welcome</h2>
<div class="ribbon4"></div>
` <div id="ava_ttl">
 
<div id="mem_guest_nam">
{if !$[current_user.is_member]} Guest<br>
{else}
<span> $[current_user.name]</span>
{/if}
</div>
   
</div>  

<div id="men_out_guest_in">                  
{if $[current_user.is_member]}
<a href="https://login.proboards.com/logout/6132784">Logout</a>
{/if}
{if $[current_user.is_guest]}Please    
<a href="https://login.proboards.com/login/6132784">Login</a> or
        <a href="https://login.proboards.com/register/6132784">Register</a>
{/if}
</div>
<p style="clear:both;"></p>  

<div class="ribbon3"></div><div id="blank_ttl"></div>
<p id="to_clear_floats1"></p>
<div id="banner_box">Banners</div>
<div id="the_affiies">
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>      
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a><br>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>  
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>

</div>
</div>
<p style="clear:both;"></p>
   <center><h2 id="forum_title">This Is Your Forum Title</h2></center>
</div>




<script>
   /* Fade-in text over images */
   $(function() {
       $(".two").hide();
       $(".one").hover(function() {
           $('.two', this).fadeIn(500);
       }, function() {
           $('.two', this).fadeOut(500);
       });
   });
</script>

<!--end of hover banner area-->    
......right below this.....



<div id="wrapper">

<header>



Last thing, you need wormo's code for the avatar and plus I have a special font style it goes below the  <body> tag:

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
<div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div></div>

And that's it. Any questions, just ask and keep in mind, this is not a one size fits all code. If you are revamping, as I said before, a lot can go wrong and part of that may be the fact, I'm not an expert at coding.

[Azy]

Tumbleweed, you wonderful wonderful being 

I've been playing around with ribbons myself for some work I'm doing on Teg's forum, PromoForum, and I've come up with a solution which scales to fit text width. I don't know if it'd interest you, but hopefully it can help. I did notice some of the CSS ribbons on your test site would break layout if text was added in the element. Perhaps you intend to float a transparent div on top and put text in that way? I don't know. but anyway, here's what I came up with:

codepen.io/Azayles/pen/MaVwqG

Stay glorious! 

[Tumbleweed]

Oct 24, 2015 10:30:15 GMT -8 Azy said:

Tumbleweed, you wonderful wonderful being 

I've been playing around with ribbons myself for some work I'm doing on Teg's forum, PromoForum, and I've come up with a solution which scales to fit text width. I don't know if it'd interest you, but hopefully it can help. I did notice some of the CSS ribbons on your test site would break layout if text was added in the element. Perhaps you intend to float a transparent div on top and put text in that way? I don't know. but anyway, here's what I came up with:

codepen.io/Azayles/pen/MaVwqG

Stay glorious! 

Now you are just sounding cheesy with all those fluffy compliments. ha ha ha

I'm not sure what you mean as all my ribbons have text in them except one and I just added text to it and it didn't break anything, so a bit confused about that, but maybe you meant great amounts of text? (The one in the hover area isn't a ribbon of any sorts, just a border that accepts no text but can be changed if AMEC wants to put text in it.) Regardless, I'm waiting on AMEC to let me know if she wants the avatar moved over further than I have it now and I do have a concerns about someone using a very long username (in that top/right ribbon) that would indeed make the text overflow but once I get feedback on the avatar position, we can go from there.

When I did that review of Amanda's site, I suggested, rather than images she use css, so it could expand/contract according to the length of the title. Whether it is that theme or a different one, I'm glad you worked it out as that is much more logical than using images. The other ribbons AMEC will be using, if she follows through with the ribbons holding post and thread counts will likely be a fixed height so expansion really won't be necessary for that either. 

Anyway, glad you worked it out for Amanda's site and if it turns out AMEC does want that whole avatar area to move so the ribbon can expand according to username, no matter how long, what you posted might come in handy if my idea how to do it doesn't pan out and I'm actually liking your expansion method better than mine. If not for me/AMEC, for others reading this. And at the risk of venturing into the cheesy realm too, nice job Azy, that code works to perfection!

[Azy]

I'm all about the fluffy comments, so I'm glad you approve
I added text with Inspect Elements, so it's entirely possible I added it to the wrong part, or I was bypassing code someplace. The pitfalls of the dev sandbox!  But yaaa, glad you got yours working, too! It's been a fun crash-course in CSS ribbons.
[fluffy]Stay safe and stay shiny! [/fluffy]

[CATCH]

hey thanks guys! I haven't had a real chance to test it out because I got slammed at school, but during break I'm going to take a good look at it. I'm super happy with what it looks like so far! Thanks a lot again!

[CATCH]

I'm a little confused on where I'm putting the forum wrapper??

[Tumbleweed]

Apr 5, 2016 18:11:34 GMT -8 CATCH said:

I'm a little confused on where I'm putting the forum wrapper??

Wow, you were gone a long time.  (I thought I did all that work for nothing ) I had to do some digging through themes to see if I still even had this template mod and I did. Since editing the forum wrapper can be confusing, I'll just give you the whole forum wrapper as I have it on that test site: So this replaces everything in the forum wrapper template:


<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
       
   
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>  
  <div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div></div>  
       
       
 
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
               


<!--start of the banner area-->
<div id="tumble_wrap">
               
<div id="left_side">
<div class="ribbon1"></div><div id="announc_ttl">Announcements.</div>
<p id="to_clear_floats1"></p>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<div id="announ_cont">Something here</div>
<p id="to_clear_floats2"></p>
                   
<div class="ribbon2"></div><div id="links_ttl">Links.</div>
<p id="to_clear_floats1"></p>
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r">Link here</div><br />
<div id="links_cont_l">Link here</div>
<div id="links_cont_r"><a href="http://support.proboards.com/">ProBoards</a></div><br />
               
</div>  
   <!--here starts the hover part-->    
<div id="middle">
<div class="one">
<div class="two">
<!--all hover content goes below this line-->  
<div id="square_boxes_wrapper">
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
<div class="square_boxes">Text</div>
</div>      
<p id="to_clear_floats1"></p>
                   
<div id="middle_middle_cont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>        
<!--all hover content goes above this line-->                    
</div>
</div>
</div>
   <!--end of hover part-->    
           
<div id="right_side">
<div id="avatar_wrapper">
<script type="text/javascript">
document.write(document.getElementById('avatarsave').innerHTML);
</script>
</div>
<h2>Welcome</h2>
<div class="ribbon4"></div>
` <div id="ava_ttl">
 
<div id="mem_guest_nam">
{if !$[current_user.is_member]} Guest<br>
{else}
<span> $[current_user.name]</span>
{/if}
</div>
       
</div>  
       
<div id="men_out_guest_in">                  
{if $[current_user.is_member]}
<a href="https://login.proboards.com/logout/6132784">Logout</a>
{/if}
{if $[current_user.is_guest]}Please    
<a href="https://login.proboards.com/login/6132784">Login</a> or
        <a href="https://login.proboards.com/register/6132784">Register</a>
{/if}
</div>
<p style="clear:both;"></p>  
       
<div class="ribbon3"></div><div id="blank_ttl" style="overflow:hidden;">Text here Text hereText hereText hereText here</div>
<p id="to_clear_floats1"></p>
<div id="banner_box">Banners</div>
<div id="the_affiies">
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>      
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a><br>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>  
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
<a href="http://link.com"><img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png" alt="ket"></a>
</div>
</div>
<p style="clear:both;"></p>
   <center><h2 id="forum_title">This Is Your Forum Title</h2></center>
</div>



<script>
   /* Fade-in text over images */
   $(function() {
       $(".two").hide();
       $(".one").hover(function() {
           $('.two', this).fadeIn(500);
       }, function() {
           $('.two', this).fadeOut(500);
       });
   });
</script>

<!--end of hover banner area-->      
               
<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]}
Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span> $[current_user.name].</span>  $[logout_link]
{/if}
</p>
</div>
</header>

$[participated_threads_link]

{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>


You'll still have to add the css to your style sheet and do the other things stated.