Page Index Toggle Pages: [1] 2 
Topic Tools
Hot Topic (More than 10 Replies) Rounded corners on posts (Read 6,787 times)
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Rounded corners on posts
May 20th, 2011 at 2:55am
Post Tools
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
  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #1 - May 20th, 2011 at 1:41pm
Post Tools
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 »  
Back to top
 
IP Logged
 
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Re: Rounded corners on posts
Reply #2 - May 20th, 2011 at 3:51pm
Post Tools
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.
  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #3 - May 20th, 2011 at 4:40pm
Post Tools
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 »  
Back to top
 
IP Logged
 
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Re: Rounded corners on posts
Reply #4 - May 20th, 2011 at 5:24pm
Post Tools
I'll give all of this a whirl when I get home in a couple of hours.

Thanks for all of your help, Derek!
  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #5 - May 20th, 2011 at 5:56pm
Post Tools
Okay, no worries.
  
Back to top
 
IP Logged
 
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Re: Rounded corners on posts
Reply #6 - May 20th, 2011 at 9:40pm
Post Tools
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?
  
Back to top
 
IP Logged
 
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Re: Rounded corners on posts
Reply #7 - May 20th, 2011 at 9:41pm
Post Tools
Bah, here's the image I tried to display:

  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #8 - May 20th, 2011 at 9:54pm
Post Tools
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 »  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #9 - May 20th, 2011 at 10:13pm
Post Tools
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 »  

Display-template.zip ( 2 KB | 98 Downloads )
Back to top
 
IP Logged
 
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Re: Rounded corners on posts
Reply #10 - May 20th, 2011 at 10:31pm
Post Tools
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.
  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #11 - May 20th, 2011 at 10:39pm
Post Tools
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.
  
Back to top
 
IP Logged
 
OTR
YaBB Newcomer
*
Offline



Posts: 19

YaBB 2.6.1
Re: Rounded corners on posts
Reply #12 - May 20th, 2011 at 11:16pm
Post Tools
Nope, only directories are default/ and yabb21/ in both of the following locations:

cgi-bin/yabb2/Templates/

yabbfiles/Templates/Forum/
  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #13 - May 20th, 2011 at 11:30pm
Post Tools
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...
  
Back to top
 
IP Logged
 
Derek Barnstorm
Support Team
YaBB Next Team
Development Team
Beta Testers
****
Offline



Posts: 1,269
Location: United Kingdom

None
Re: Rounded corners on posts
Reply #14 - May 20th, 2011 at 11:56pm
Post Tools
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...
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Topic Tools
 
  « Board Index ‹ Board  ^Top