Boxes and Tables with Rounded Corners / Discussion

This is the discussion related to the wiki page Boxes and Tables with Rounded Corners.

Great Tip!

Ed Johnson 24 Feb 2009 14:25

Rob,

Thanks for this - it's very cool and I've already plugged it into my private wiki at work.

One thing you should clarify: As written, you must use h2 text in the header (++ Header Text) or the header section won't render correctly. This tripped me up for a second.

Which prompts this question: Is there a "method to your madness" in limiting the header to h2 only? Changing the CSS to:

.box-header {
    background: #DDDDDD;
    ...
}

would allow you to place any text with any wikidot markup you want. Or am I missing something?

Thanks again. I have a feeling we're going to see a lot of this kind of formatting on many sites. I also see a lot of potential for combining this with live templates to make it easy to have it ripple through a whole site.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Great Tip!

RobElliott 24 Feb 2009 15:27

Ah yes I will clarify the text regarding using h2. But there was no method whatsoever in my madness and you've not missed anything. I had just tried it with h2 and hadn't looked at better alternatives.
Thanks for the comment.

Rob

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: Great Tip!

kawina 25 Feb 2009 12:35

Thanks, Rob. This is really great stuff. Just a question: is there any way to apply this method to tables as well?

---

---

Eduardo R. Ribeiro
Macro-Jê linguistics, &c.

Re: Great Tip!

RobElliott 25 Feb 2009 15:10

My search through various CSS3 sites indicates that there probably isn't a way to achieve this with tables.

Rob

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: Great Tip!

Helmuti_pdorf 25 Feb 2009 17:23

I can remember - I had a page written - where such a box was surrounding div's ( block's) with images -

Like on the wikipiano it was done on the fornt page!

And in prior time on the main page for featured sites!

Without ANY CSS! Only with images - means this can work with tables ( are blocks too) .

I need only to find my own pages….

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Boxes with rounded corner without CSS

Helmuti_pdorf 25 Feb 2009 18:29

Í found it!

http://community.wikidot.com/start-featured2

Have a look at the source code!

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: Boxes with rounded corner without CSS

kawina 26 Feb 2009 02:45

Thanks, Helmut! So, is that the trick used in Wikidot's official wiki? There, all tables have rounded corners…

---

---

Eduardo R. Ribeiro
Macro-Jê linguistics, &c.

Re: Boxes with rounded corner without CSS

Helmuti_pdorf 26 Feb 2009 07:52

Yes, I can remember , i copied the trick from the official ( older) featured site tables - when they were not yet with 90 degrees corner build ( as now).

And I can not remember where I get the code - the official wikidot com has no page options to view the source.. I can rememeb I had a look on the open source wiki… or I get the code from wikpiano ?

The only bad issue is the fact that such tables & Div#s has to be defined exact in the same size as the background images - they cannot change their width and height with changing the zoom factor of the browser-window.

It is an interesting but conventional task to build such tables and div's with conventional images & tricks..

@ Kawina: can you remember: http://community.wikidot.com/forum/t-112862/the-problem-with-signatures#post-336196 ?

and Hartnells answer:
(I copy it here into my post: )

In that case, it's a table which splices the image into smaller parts.

[[image http://rosita.dd.googlepages.com/6otro.png]]

[[div]]
|| | || ||
|| [[image http://rosita.dd.googlepages.com/6otro.png]] || -- ||
[[/div]]

|
	—

The same trick I believe is used in the code I have copied into the http://community.wikidot.com/start-featured2 :

Block with round corners

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.

Maecenas in urna. Curabitur hendrerit risus vitae ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula.

Here is the code for this:

[!--  ..................................................
 - - - - -   S T A R T  Background Block
------ .................................................. --]
[[div style="background-image: url(http://static.wikidot.com/v--3/common--theme/frontspecial/images/framemedium2.png); height: 330px; width: 482px; background-repeat: repeat-y; margin: 0 auto 10px;"]]
[[div style="background-image: url(http://static.wikidot.com/v--3/common--theme/frontspecial/images/framemedium3.png); height: 330px; width: 482px; background-position: top bottom; background-repeat: no-repeat; background-position: bottom"]]
[[div style="height: 330px; width: 452px; background-image: url(http://static.wikidot.com/v--3/common--theme/frontspecial/images/framemedium1.png); background-position: top center; background-repeat: no-repeat; padding-left: 15px; padding-right: 15px; padding-top: 1px; _padding-top: 13px; *padding-top: 13px; *height: 434px;"]]
[!--  ..................................................
 - - - - -   END of S T A R T  Background Block
------ .................................................. --]
[[div style="width: 430px; margin: 20px auto 0px; text-align: justify;"]]
[[=]]
+++ Block with round corners 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \
Aenean a libero. Vestibulum adipiscing, felis ac faucibus \
imperdiet, erat lacus accumsan neque, vitae nonummy lorem \
pede ac elit. 

Maecenas in urna. Curabitur hendrerit risus vitae ligula.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \
Aenean a libero. Vestibulum adipiscing, felis ac faucibus \
imperdiet, erat lacus accumsan neque, vitae nonummy lorem \
pede ac elit. 

Maecenas in urna. Curabitur hendrerit risus vitae ligula.

[[/=]]
[[/div]]
[!--  ..................................................
 - - - - -      E N D    Background Block
------ .................................................. --]
[[/div]]
[[/div]]
[[/div]]
[!--  ..................................................
 - - - - -      E N D    Background Block
------ .................................................. --]

Make your zoom factor higher ( with "control" + "+") and you will see the pixel sizes of the background image are the same , but the fonts get higher and higher - and the text goes outside the box. - The size of the image is not changing.
On the official wikidot main site it is the same - on a high zoom factor the text goes outside….

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 26 Feb 2009 07:55 by Helmuti_pdorf + Show more

Re: Boxes with rounded corner without CSS

FuzzicalLogic 02 Mar 2009 15:10

@Helmuti
«… is the fact that such tables & Div#s has to be defined exact in the same size as the background images …»
Actually, that is not quite true. It depends on how you slice the images and borders. Also how you split the tables or divs. If you have compose the image to its composite parts, then both tables and divs can resize. Honestly while I use this frequently, it is more trouble than it is worth and not very elegant, but provides great results. Using this configuration with divs gets the trick done:

This is with CSS already defined. I use it on my site for my header which is almost perfectly resizable.

[[div class="box]]

[!-- Top Images --]
[[div class="top-border"]]
[[div class="tr-corner"]]
[[/div]]
[[div class="top-center"]]
[[/div]]
[[div class="tl-corner"]]
[[/div]]
[[/div]]

[!-- Middle Images --]
[[div class="middle-border"]]
[[div class="left-middle"]]
[[/div]]
[[div class="mid-center"]]
[[div class="my-content"]]
    <<place content here>>
[[/div]]
[[/div]]
[[div class="right-middle"]]
[[/div]]
[[/div]]

[!-- Bottom Images --]
[[div class="bottom-border"]]
[[div class="br-corner"]]
[[/div]]
[[div class="bot-center"]]
[[/div]]
[[div class="bl-corner"]]
[[/div]]
[[/div]]

[[/div]]

If you don't want to use separate CSS, but style attributes, you may use the following:

[[div class="box]]

[!-- Top Images --]
[[div style="float:left; clear:left;"]]
[[div style="background-image:<<corner-image>>; width:<<absolute-width>>; float:left;"]]
[[/div]]
[[div style="style="background-image:<<top-image>>; width:<<variable-width>>; float:left;"]]
[[/div]]
[[div style="background-image:<<corner-image>>; width:<<absolute-width>>; float:left;"]]
[[/div]]
[[/div]]

[!-- Middle Images --]
[[div style="float:left; clear:left;"]]
[[div style="background-image:<<right-image>>; width:<<absolute-width>>; float:left;"]]
[[/div]]
[[div style="background-image:<<center-image>>; width:<<variable-width>>; float:left;"]]
[[div class="my-content"]]
    <<place content here>>
[[/div]]
[[/div]]
[[div style="background-image:<<right-image>>; width:<<absolute-width>>; float:left;"]]
[[/div]]
[[/div]]

[!-- Bottom Images --]
[[div style="float:left; clear:left;"]]
[[div style="background-image:<<corner-image>>; width:<<absolute-width>>; float:left;"]]
[[/div]]
[[div class="background-image:<<bottom-image>>; width:<<variable-width>>; float:left;"]]
[[/div]]
[[div style="background-image:<<corner-image>>; width:<<absolute-width>>; float:left;"]]
[[/div]]
[[/div]]

[[/div]]

As I said, its ugly, but it works. I do prefer the solution above, but this one shows up the same in all browsers, as well.

@strath
Thanks! That really is awesome and useful.

Other Elements

Ed Johnson 26 Feb 2009 04:33

My search through various CSS3 sites indicates that there probably isn't a way to achieve this with tables.

But you can have a LOT of fun with many other elements! I've been playing around on one of my development sites. I might have to call this theme "Dizzy" since it has so many curves…

http://my-wd-local-dev.wikidot.com/

Obviously, I've still have a lot to clean up, but I actually think this playing around could turn into a nice looking theme.

I thought I'd share what I've got to get your creative juices flowing for other ideas.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Other Elements

RobElliott 26 Feb 2009 09:31

Ed, hehe that's a nice use of the rounded corners, even if the pink is a bit…er..shocking. I think you've mastered -moz-border-radius! The thing I like about it is that it degrades well for IE users, they still get a nice box just without the rounded corners. It means we can develop sites for FF without worrying that this aspect will be broken in IE.

That's a useful solution as well helmuti. This has developed into quite an interesting thread.

Rob

Edit: talking about degrading to IE, my wife's bank in the UK is Abbey and if you log in to online banking using FF3.0.6 a notice comes up saying that although it is possible to use older browsers they recommend using a modern browser like Internet Explorer! Numpties.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: Rounded Corners for Tables

RobElliott 26 Feb 2009 13:18

"My search through various CSS3 sites indicates that there probably isn't a way to achieve this with tables"

I was being daft and not thinking: of course there is a way of doing this with tables. It works with both ordinary tables and something like ListPages as shown in the image below:

This uses the following CSS:

table.wiki-content-table th {
    -moz-border-radius-bottomleft:60px;
    -moz-border-radius-bottomright:60px;
    -moz-border-radius-topleft:60px;
    -moz-border-radius-topright:60px;
    background-color:#D8E7EC;
    border: none;
}

table.wiki-content-table td {
        border: none;
}

In this example I have removed all the borders from the table data but some could be added back in, perhaps the bottom border would be one I would use.

Rob

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 26 Feb 2009 13:55 by RobElliott + Show more

Re: Rounded Corners for Tables

RobElliott 26 Feb 2009 14:25

And as another example I have now put the ListPages module into the divs using the original box css:

[[div class="box-container"]]

[[div class="box"]]
[[div class="box-header"]]
++  Support Pages
[[/div]]

[[module ListPages category="support" limit="6" skipCurrent="no" order="dateEditedDesc" separate="false" prependLine="||~ Category||~ Page||~ Edited||"]]
|| %%category%% || %%linked_title%% || %%date_edited|%e %B %Y %R %% ||
[[/module]]
[[/div]]
[[/div]]

which gives:

This is just a quick example and I haven't tidied up the link background colour, but I hope it shows some of the ways ways that rounded corners can work with boxes and tables.

Rob

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Last edited on 26 Mar 2009 10:27 by RobElliott + Show more

Corner Styles

bcammo 04 Feb 2010 23:09

By changing the -moz-border-radius: 2em 0; line in your CSS you can change the style of the corners

For those out there not all that familiar with CSS, it should be noted that changing the -moz-border-radius line will only change how the box appears in Firefox & other Mozilla browsers. Changing the -webkit-border-radius line will alter the appearance in Safari, Google Chrome, iPhone and other browsers that use Apple's Webkit.

Bryce

---

BMC Creative | RoaringApps | @brycecammo

Re: Corner Styles

Phil Chett 04 Feb 2010 23:30

Hi Bryce.
Nice theme, has it gone a bit wrong?

---

.Goal NHGC

Re: Corner Styles

bcammo 04 Feb 2010 23:51

Not wrong per se, it just took a while for me to work out why when I changed the -moz- line nothing happened (I use safari). I'm still tweaking the CSS of the theme in my private site.

---

BMC Creative | RoaringApps | @brycecammo

Re: Corner Styles

RobElliott 05 Feb 2010 00:09

I have clarified this in the main text.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.