Topic: Adding a rounded edge

You know how you can add a rounded edge to the styles using .pun h2 span. Is there a way to add a rounded image to the right side?

Thanks
Bingiman

Re: Adding a rounded edge

Well, after some time I eventually figured out how to add a rounded image to the right side of the blocks. There are only2 areas I am finding very difficult and that is the admin and plugin areas. The reason is because of this:

<h2 class="block2"><span>Existing groups</span></h2>

As you can see there is no:

    <div class="blockform">
        <h2><span>Add/setup groups</span></h2>
        <div class="box">

Now, I could add this to replace the first but I did not want to modify the core files unless I really have to. Can anyone help me to try and figure this out?

Here is an example of how it looks so far. I will show a pic. With the finished look and the other with the problem.

http://shedrockonline.com//img/gallery/1200624968.gif

Re: Adding a rounded edge

Anyone?

4

Re: Adding a rounded edge

Sorry I don't get the problem. The reason the h2 has a span inside it is to allow rounded corners. You just make the span display block and put the padding on that instead of the h2. You then give the h2 some right padding to accommodate the corner. Put the right corner on the h2 and the left on the span. Or is the problem that you don't have the classes available to target what you want?

Re: Adding a rounded edge

I have figured out the first part as shown in the image. The second part is the problem. PunBB does not use the blocktable class for the 1st opening DIV in all the admin areas or for that matter in the plugins as well. I have tried adding the right rounded image to:

<h2 class="block2"><span>Statistics</span></h2>

but it is impossible, at least for me. Unless I add <div class="blocktable"> before it. Hope you understand.

Bingiman

6

Re: Adding a rounded edge

I suspect you are over complicating it. All you should need is .pun h2 {right background image} and .pun h2 span {left background image}.

7 (edited by bingiman 2008-01-19 00:06)

Re: Adding a rounded edge

Actually Paul, the problem is not the left or right image. it is the middle cellpic as shown in the image above. These aren't 2 images. It is 3 images I am using.
left, center and right.

Re: Adding a rounded edge

ok, I got it now. You were right. I looked for other styles that use this layout but I could not find any out there.

Re: Adding a rounded edge

Well, that method works but it still doesn't show the rounded images for the admin files.

10

Re: Adding a rounded edge

Ah. Now I get it. I designed the headers with the sliding doors technigue in mind. Basically you have one very long image with the background and corner and one short image with just the corner. I will have a think to see where you could get the extra tag for the background from.

11 (edited by bingiman 2008-01-19 00:31)

Re: Adding a rounded edge

ok, cool..I do have a workaround as I previously mentioned but it sucks having to edit every admin or plugin.

Thanks Paul.

Bingiman.

12

Re: Adding a rounded edge

bingman, u be the greatest since sliced cheese for solving the great mystery of the round corner issue !



Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

Re: Adding a rounded edge

Well, I managed to sort a lot out with this middle image and it seems to be working well after I made some modifications to the admin files. Anyway, I am having a very strange issue. As you can see in the image below it appears that the left rounded image is outta whack. The thing is, it is not happening on every post while in viewtopic, only on some. I made some modifications to the codebox class because the font size was a problem, but it seems to be still happening on some posts. Maybe some one can have a look at the css files for me and have a go at it? If necessary, I can provide you with a link to download the entire theme.

http://megapun.com/img/gallery/1201058801.gif

Thanks
Bingiman

14

Re: Adding a rounded edge

bingiman... i think i know what that is..
that might be a top border....... on the h2...



Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

15

Re: Adding a rounded edge

I tried with rounded edges on punbb last year but didn't get them 100% right so I deleted them.
Had problem aligning them in all browsers.

But i used 100% css and html.

HTML

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

CSS

.xb51, .xb52, .xb53, .xb54 {display:block; overflow:hidden;}
.xb51, .xb52, .xb53 {height:1px;}
.xb52, .xb53, .xb54 {background:#383838; border-left:1px solid #565656; border-right:1px solid #565656;}
.xb51 {margin:0 5px; background:#565656;}
.xb52 {margin:0 3px; border-width:0 2px;}
.xb53 {margin:0 2px;}
.xb54 {height:2px; margin:0 1px;}
Post hoc ergo propter hoc

Re: Adding a rounded edge

@Tjalve - Well, I know what you mean. I will get this right even if it kills me. I will make it possible with time. yikes

Re: Adding a rounded edge

quaker wrote:

bingiman... i think i know what that is..
that might be a top border....... on the h2...
Q

Hey Scot,

I thought that was really obvious mate. I know where it is. I need to find a fix for it. lol

18 (edited by Tjalve 2008-01-23 20:25)

Re: Adding a rounded edge

The biggest and most annoying prob that I found was that the margins/padding changed after you logged out, specially if you had a % padding on each side off .punwrap{}

The sides was easy but the middle part didn't what to stand still.

http://img249.imageshack.us/img249/4100/58422809vj0.png

Post hoc ergo propter hoc

Re: Adding a rounded edge

but you see in my opinion those don't look like a nice clean rounded edge. That's why I didn't want to go with your method. Although, it might have been easier. I wanted to prove to myself that e images could work using divs and not just a left round edge and a long right image. That sorts makes the style a fixed width on some images. Anyway, I did have to modify all the admin files that used the <h2 class="block2"> this was also changed to the block or blocktable class. It was for Mega Pun so I really didn't mind modifying them.

This is why I love tables. you never have these problems.

Re: Adding a rounded edge

bingiman, surely using Paul's technique you only need 3 images, no?

21 (edited by CodeXP 2008-01-24 14:52)

Re: Adding a rounded edge

There is enough div's and other tags just about everywhere to get away with just using 2 images (or 4 if you want all corners), but it certain places the SPAN tag is missing so you can't always rely on being able to just style "<h2><span>text</span></h2>" and release the style. I just did a global regex search and replace way back when I did this for one of my websites, and it worked well. The CSS on my site might a little messy to read as I never bothered to completely clean it up, but if you take a look at it you should find what you need to round most corners.

Re: Adding a rounded edge

liquidat0r - His own uses 2 (left small image and a long right image as all the other styles I have seen so far) I have not seen a single theme for punbb that uses 3 images. If they exist can someone lead me to it.

CodeXP - The theme I've created works. You can see it on http://megapun.com - It all looks fantastic but I don't think you guys did what I did. I could be wrong. You need to look at my stylesheets. Paul also said there is no extras in there for the other image as his post above states. One major hurdle was the admin and plugin files. You can't use <div class="block2"> because it throws the whole layout out. If you look at my stylesheet_cs.css on that site you will see what i did.

Bingiman

Re: Adding a rounded edge

I jsut checked out that theme CodeXP. It is very similar to what I have done excpet that I am using an image in the center of the <h2> so here is my example:

.pun h2 {
font-family:verdana,tahoma,arial,sans-serif;
font-size:11px;
font-weight:700;
color:#2E5B82;
border-top:0px #bbb solid;
border-bottom:0px #bbb solid;
border-left:1px #bbb solid;
border-right:1px #bbb solid;
}

.blocktable, .block, .blockpost, .blockform, .blockmenu {
background:#F8F8F8 url(../../img/ShowcaseIII/h2_bg.png);
background-repeat:repeat-x;
}

.pun h2, .blocktable span tcr, .block span tcr {
background: url(../../img/ShowcaseIII/right_rounded.png) top right no-repeat; 
border-right: 0;
}

.pun H2 span {
background-repeat : no-repeat; 
background-image : url(../../img/ShowcaseIII/left_rounded.png); 
padding: 5px;
margin-left: -7px; 
padding-left: 25px;
}