YaBB Community and Support Forum
YaBB Home About YaBB Download YaBB YaBB Support Customize Your Forum Development Contribute to the Project
  Welcome, Guest. Please Login or Register


 
Pages: 1 2 
Topic Tools
 
Rounded corners on posts (Read 6,265 times)
 May 20th, 2011 at 2:55am
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Rounded corners on posts
Hi Folks!

Just had to switch webhosts and figured I'd update to 2.5 AE.  I'm almost done setting things up but I still have a couple of issues with rounded corners.  I've resolved some of them but can't seem to get them all quite yet.

Right now, the ones that are stumping me are the corners for posts.  Here's a picture of what I'm talking about:

...

It sure looks like those post corners should be rounded, but I can't seem to figure out what I need to do to fix it.  I've done similar fixes for the titlecorners.

Any suggestions?

Thanks,
Chad
 
 
IP Logged  
 Reply #1 - May 20th, 2011 at 1:41pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
Hi,

I don't know what the CSS is actually supposed to be doing there because the background colour is the same as the container background colour, so it doesn't actually do anything.

Are you trying to add rounded corners or eliminate them?

If you want to keep them, then you will need to increase the padding and change the background colour in this bit of the CSS file:

Code (CSS)Select All
.displaycontainer {
        width: 100%;
        padding: 1px;
        background-color: #cccccc;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -moz-border-radius: 10px;
        -border-radius: 10px;
} 


Note that the border-radius property won't work in Internet Explorer lower than version 9.

If you want to remove them all together then just remove the border-radius properties from the above code.
« Last Edit: May 20th, 2011 at 1:41pm by Derek Barnstorm »  
 
IP Logged  
 Reply #2 - May 20th, 2011 at 3:51pm
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Re: Rounded corners on posts
Derek Barnstorm wrote on May 20th, 2011 at 1:41pm:
Are you trying to add rounded corners or eliminate them?

I'm trying to get rid of the squared corners.  Sort of like how in this thread, the top of each post has rounded corners instead of squared ones.
 
 
IP Logged  
 Reply #3 - May 20th, 2011 at 4:40pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
Okay, then try something like this - you'll probably want to tweak it a little.

In Display.template find:

Code (HTML)Select All
<div class="displaycontainer">
<table cellpadding="4" cellspacing="0" border="0" width="100%" align="center">
<tr>
    <td class="catbg" valign="middle" align="left">
    <div style="float: left; text-align: left;">
        {yabb pageindex top}
    </div>
    <div style="float: right; text-align: right;">
        {yabb threadhandellist}
    </div>
    </td>
</tr>
</table>
</div> 


And replace with:

Code (HTML)Select All
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
    <td class="titlecorner" width="1%" height="25" valign="middle">&nbsp;</td>
    <td class="tabtitle" valign="middle" align="left">
    <div style="float: left; text-align: left;">
        {yabb pageindex top}
    </div>
    <div style="float: right; text-align: right;">
        {yabb threadhandellist}
    </div>
    </td>
    <td class="titlecorner2" width="1%" height="25" valign="middle">&nbsp;</td>
</tr>
</table> 


Then find:

Code (HTML)Select All
<table cellpadding="4" cellspacing="0" border="0" width="100%" class="bordercolor" align="center" style="table-layout: fixed;">
<tr>
    <td align="left" class="catbg" valign="top" width="100%">
            <span class="small" style="float: left; width: 3%; text-align: center; padding: 2px;">{yabb msgimg}</span>
        <span class="small" style="float: left; width: 46%; vertical-align: middle; padding-top: 4px;">
            <span><b>{yabb replycount}</b>{yabb msgdate}</span>
        </span>
    </td>
</tr>
</table> 


And replace with:

Code (HTML)Select All
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="bordercolor" align="center" style="table-layout: fixed;">
<tr>
    <td class="titlecorner" width="1%" height="25" valign="middle">&nbsp;</td>
    <td align="left" class="tabtitle" valign="top" width="100%">
            <span class="small" style="float: left; width: 3%; text-align: center; padding: 2px;">{yabb msgimg}</span>
        <span class="small" style="float: left; width: 46%; vertical-align: middle; padding-top: 4px;">
            <span><b>{yabb replycount}</b>{yabb msgdate}</span>
        </span>
    </td>
    <td class="titlecorner2" width="1%" height="25" valign="middle">&nbsp;</td>
</tr>
</table> 


I think you'll still need to remove those border-radius declarations though.
« Last Edit: May 20th, 2011 at 4:58pm by Derek Barnstorm »  
 
IP Logged  
 Reply #4 - May 20th, 2011 at 5:24pm
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Re: Rounded corners on posts
I'll give all of this a whirl when I get home in a couple of hours.

Thanks for all of your help, Derek!
 
 
IP Logged  
 Reply #5 - May 20th, 2011 at 5:56pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
Okay, no worries.
 
 
IP Logged  
 Reply #6 - May 20th, 2011 at 9:40pm
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Re: Rounded corners on posts
I did everything suggested above.  It went in the opposite direction that I was hoping, but it does look better at least.

...

Any suggestions as to how to move from square to corners?
 
 
IP Logged  
 Reply #7 - May 20th, 2011 at 9:41pm
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Re: Rounded corners on posts
Bah, here's the image I tried to display:

...
 
 
IP Logged  
 Reply #8 - May 20th, 2011 at 9:54pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
If you made the changes to the default template in Display.template, then the code I posted should be working fine. I've checked it on two test boards, and the rounded corners display as they should. Double check that you made the correct changes...
« Last Edit: May 20th, 2011 at 9:57pm by Derek Barnstorm »  
 
IP Logged  
 Reply #9 - May 20th, 2011 at 10:13pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
I've attached it to this post, so just overwrite your Display.template with this one. Obviously make a back-up of yours first though, just to be safe.
« Last Edit: May 20th, 2011 at 10:14pm by Derek Barnstorm »  
 
IP Logged  
 Reply #10 - May 20th, 2011 at 10:31pm
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Re: Rounded corners on posts
Edit was done to Display.template found in cgi-bin/yabb2/Templates/default/

I replaced it with the file you provided. Square corners persist (looks the same as the last image I posted).  It's a trickly little bugger.
 
 
IP Logged  
 Reply #11 - May 20th, 2011 at 10:39pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
Are you using your own template with a different name? I notice that your CSS file is named Uber.css, so if you have a 'Uber' directory with a Display.template in it, then you'll obviously have to make the changes to that.
 
 
IP Logged  
 Reply #12 - May 20th, 2011 at 11:16pm
There are no actions to perform.  

OTR 
YaBB Newbie
*
Offline
Posts: 19


YaBB 2.4
Re: Rounded corners on posts
Nope, only directories are default/ and yabb21/ in both of the following locations:

cgi-bin/yabb2/Templates/

yabbfiles/Templates/Forum/
 
 
IP Logged  
 Reply #13 - May 20th, 2011 at 11:30pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
Then, I'm afraid I really don't know what you are doing wrong. This is a test board with the changes I gave you and using your CSS:

http://ibrainstorm.net/yabbtemplates/yabb2/YaBB.pl?num=1305933882

As you should see, the corners are rounded...
 
 
IP Logged  
 Reply #14 - May 20th, 2011 at 11:56pm
There are no actions to perform.  

Derek Barnstorm 
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline
Posts: 1,269
United Kingdom


YaBB 2.5
Re: Rounded corners on posts
Ah, I think I've seen what's happening. It looks like you're using the 2.1 template. That'll take a few more edits to look right - I'll get back to you...
 
 
IP Logged  
Pages: 1 2 
Topic Tools
 

Get Yet another Bulletin Board at SourceForge.net. Fast, secure and Free Open Source software downloads Support This Project BoardMod - YaBB features and templates YaBB Codex - support on installation and usage YaBB Toolbar for your browser

YaBB Facebook Group Page

Vulnerability Scanner

Valid RSS Valid XHTML Valid CSS Powered by Perl
YaBB Chat and Support Community » Powered by YaBB 3.0 Beta!
YaBB Forum Software © 2000-2011. All Rights Reserved.