XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme design questions 
  4.  / Good, at least basic, example of tableless theme/template?
Register
21
tjnemez
Re: Good, at least basic, example of tableless theme/template?

  • 2004/9/28 0:56

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


Quote:
Unless someone knows of a way of preventing the overlap effect that third-party modules have on a 3 column CSS theme,


do you have an example of this that i could have a look at.
22
JMorris
Re: Good, at least basic, example of tableless theme/template?

  • 2004/9/28 1:51

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


@PeazRitr:
When you say templates, do you mean theme, or template set? They are two completely different things.

The only theme I've released that is based on a official XOOPS theme is the LOTR theme. Essentially, I just took the "default" theme [the one that looks like this site] and started hacking the code to suite my needs. The 2cnt theme only shares some common CSS styles and META tags with the XOOPS default theme. The styles it does share have been altered extensively to match the color scheme and layout of the 2cnt theme.

The template set that I released recently [see this news article] addresses some of the layout problems with the default template set but it still uses tables. For now, I do not intent to invest much more time in the 2cnt theme since I'm going to be releasing a new tableless theme and template set that is fully compatible as a 1, 2, and 3 column layout theme.

@tjnemez:
Well, I have an example, but it's ugly. Reeeeal ugly. I discovered the problem early on in the process so I just abandoned the three column layout and started from scratch on a two column layout. I'll PM you with what I do have, but it's an absolute mess.

Best Regards,

JMorris

23
PeazRitr
Re: Good, at least basic, example of tableless theme/template?

  • 2004/9/28 2:01

  • PeazRitr

  • Just popping in

  • Posts: 7

  • Since: 2004/9/27


hey there, JMorris ~

oops, i did mean theme. my bad. i had a look earlier at your news article on the tableless two column layout and again just now following your link.

when you implemented your css modifications, what other directories/files did you look in to make sure the css changes would take? i didn't see any explanation in your article, so i ask.


24
tjnemez
Re: Good, at least basic, example of tableless theme/template?

  • 2004/9/28 2:19

  • tjnemez

  • Home away from home

  • Posts: 1594

  • Since: 2003/9/21


hey PeazRitr,

you should download jmorris' 2 column theme and check it out.
25
JMorris
Re: Good, at least basic, example of tableless theme/template?

  • 2004/9/28 2:34

  • JMorris

  • XOOPS is my life!

  • Posts: 2722

  • Since: 2004/4/11


I'm not 100% sure I understand what you're asking, so I'll just give a quick overview of the birth of the 2cnt theme. Warning: This is a looooong post.

The {xoops_root}/themes/2cnt/ directory contains the following files:
theme.html
theme_blockcenter_c.html
theme_blockcenter_r.html
theme_blockleft.html
theme_blockright.html
style.css
styleNN.css
styleMAC.css

The only files I changed were theme.html and style.css. The remaining files are carbon copies of the XOOPS default theme files. No changes were necessary.

In theme.html, I replaced the original XOOPS default theme code with the following:
Quote:




<{foreach item=block from=$xoops_lblocks}>
<{include file="2cnt/theme_blockleft.html"}>
<{/foreach}>


<{if $xoops_showrblock == 1}>


<{foreach item=block from=$xoops_rblocks}>
<{include file="2cnt/theme_blockright.html"}>
<{/foreach}>

<{/if}>




<{if $xoops_showcblock == 1}>



<{foreach item=block from=$xoops_ccblocks}>
<{include file="2cnt/theme_blockcenter_c.html"}>
<{/foreach}>





<{foreach item=block from=$xoops_clblocks}>
<{include file="2cnt/theme_blockcenter_l.html"}>
<{/foreach}>





<{foreach item=block from=$xoops_crblocks}>
<{include file="2cnt/theme_blockcenter_r.html"}>
<{/foreach}>



<{/if}>

<{$xoops_contents}>







In style.css, I replaced the original XOOPS default css code with the following:
Quote:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #F3F3F3;
margin:10px 10px 10px 10px;
padding-bottom: 10px;
}
a {
color: #990000;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
#banner {
height:70px;
voice-family: "\"}\"";
voice-family: inherit;
height:69px;
}
html>body #banner {
height:69px;
}
#logo {
font-family: Arial, Helvetica, sans-serif;
float: left;
font-size:32px;
padding:10px 10px 0px 10px;
}
#bannerads {
margin-right: 10px;
float: right;
}
ul {
margin: 2px;
padding: 2px;
list-style: decimal inside;
text-align: left;
}
li {
margin-left: 2px;
list-style: square inside;
color: #333
}

input.formButton {}

.item {
border: 1px solid #cccccc;
}
.itemHead {
padding: 3px;
background-color: #333; color: #FFFFFF;
}
.itemInfo {
text-align: right;
padding: 3px;
background-color: #efefef
}
.itemTitle a {
font-size: 130%;
font-weight: bold;
font-variant: small-caps;
color: #ffffff;
background-color: transparent;
}
.itemPoster {
font-size: 90%;
font-style:italic;
}
.itemPosate {
font-size: 90%;
font-style:italic;
}
.itemStats {
font-size: 90%;
font-style:italic;
}
.itemBody {
padding-left: 5px;
}
.itemText {
margin-top: 5px;
margin-bottom: 5px;
line-height: 1.5em;
}
.itemText:first-letter {
font-size: 133%;
font-weight: bold;
}
.itemFoot {
text-align: right;
padding: 3px;
background-color: #efefef;
}
.itemAdminLink {
font-size: 90%;
}
.itemPermaLink {
font-size: 90%;
}
.outer {
border: 1px solid silver;
}
.head {
background-color: #D0D0D0;
padding: 5px;
font-weight: bold;
}
.even {
background-color: #E3E3E3;
padding: 5px;
}
.odd {
background-color: #F3F3F3;
padding: 5px;
}
.foot {
background-color: #D0D0D0;
padding: 5px;
font-weight: bold;
}
.even {
background-color: #E3E3E3;
padding: 5px;
}
.odd {
background-color: #F3F3F3;
padding: 5px;
}
div.errorMsg {
background-color: #FFCCCC;
text-align: center;
border-top: 1px solid #DDDDFF;
border-left: 1px solid #DDDDFF;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
font-weight: bold; padding: 10px;
}
div.confirmMsg {
background-color: #DDFFDF;
color: #136C99;
text-align: center;
border-top: 1px solid #DDDDFF;
border-left: 1px solid #DDDDFF;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
font-weight: bold; padding: 10px;
}
div.resultMsg {
background-color : #CCCCCC;
color: #333333;
text-align: center;
border-top: 1px solid silver;
border-left: 1px solid silver;
font-weight: bold;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
padding: 10px;
}
div.xoopsCode {
background: #FFFFFF;
border: 1px inset #000080;
font-family: "Courier New",Courier,monospace;
padding: 0px 6px 6px 6px;
}
div.xoopsQuote {
background: #FFFFFF;
border: 1px inset #000080;
font-family: "Courier New",Courier,monospace;
padding: 0px 6px 6px 6px;
}
.comTitle {
font-weight: bold;
margin-bottom: 2px;
}
.comText {
padding: 2px;
}
.comUserStat {
font-size: 10px;
color: #333;
font-weight:bold;
border: 1px solid silver;
background-color: #ffffff;
margin: 2px; padding: 2px;
}
.comUserStatCaption {
font-weight: normal;
}
.comUserStatus {
margin-left: 2px;
margin-top: 10px;
color: #333;
font-weight:bold;
font-size: 10px;
}
.comUserRank {
margin: 2px;
}
.comUserRankText {
font-size: 10px;
font-weight:bold;
}
.comUserRankImg {
border: 0;
}
.comUserName {}
.comUserImg {
margin: 2px;
}
.comDate {
font-weight: normal;
font-style: italic;
font-size: smaller
}
.comDateCaption {
font-weight: bold;
font-style: normal;
}
#leftcontent {
font-size:12px;
position: absolute;
left:10px;
top:79px;
width:170px;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
padding-bottom: 20px;
}
#leftcontent div.blockTitle {
padding: 5px;
color: #000;
font-weight: bold;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
}
#leftcontent div.blockContent {
padding: 3px;
line-height: 120%;
}
#centercontent {
background:#fff;
margin-left: 169px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 171px;
border: 1px solid #aaa;
}
html>body #centercontent {
margin-left: 171px;
}
#centercolumn {
font-size: 12px;
}
#centerCcolumn {
padding: 0px 3px 1px 3px;
}
#centerCcolumn legend.blockTitle {
padding: 3px;
color: #000;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
#centerCcolumn div.blockContent {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #dddddd;
padding: 3px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 2px;
line-height: 120%;
}
#centerLcolumn {
width: 50%;
padding: 0px 3px 0px 0px;
float: left;
}
#centerLcolumn legend.blockTitle {
padding: 3px;
color: #000;
font-weight: bold;
margin-top: 0px;
}
#centerLcolumn div.blockContent {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #dddddd;
padding: 3px;
margin-left: 3px;
margin-right: 2px;
margin-bottom: 2px;
line-height: 120%;
}
#centerRcolumn {
padding: 0px 3px 0px 0px;
}
#centerRcolumn legend.blockTitle {
padding: 3px;
color: #000;
font-weight: bold;
margin-top: 0px;
}
#centerRcolumn div.blockContent {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #dddddd;
padding: 3px;
margin-left: 2px;
margin-right: 3px;
margin-bottom: 2px;
line-height: 120%;
}
div#content {
text-align: left;
padding: 8px;
}
#footer {
position: relative;
color: #aaa;
padding-right: 10px;
}


For the custom template set, all I did was install all the default XOOPS modules, clone the default template set and name it 2cnt. Then I went through and edited the , , and
tags so that the tables/rows/cells would either take up the entire center column, or at least be center aligned in the center column. Then I downloaded the template as a .tar so it could be imported by the end user.

Well, there it is in all its, ahem, glory. It's certainly not the most beautiful code I've ever writen, but it works. Ok, so I got a little lazy on this one.

I hope this answers your question. If not, let me know and I'll try again.

Best Regards,

JMorris
26
PeazRitr
Re: Good, at least basic, example of tableless theme/template?

  • 2004/9/28 19:06

  • PeazRitr

  • Just popping in

  • Posts: 7

  • Since: 2004/9/27


JMorris ~

yes, YES! this is EXACTLY the answer to what i asked. thanks so much for the step-by-step! i have a better idea now of what to do for three column theme.


tjnemez ~
yes, i have looked at JMorris' 2cnt (two columns no tables) and am happy now i have a better look under the hood!


JMorris & tjnemez ~

i have just come from a fabulous site by carmen mardiros and read her article: liquid css layouts - design alternatives to table based websites [ http://www.mardiros.net/liquid-css-layouts.html ] which is cross-browser and excellent, imho.

take care!

« 1 2 (3)

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

414 user(s) are online (306 user(s) are browsing Support Forums)

Members: 0

Guests: 414

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits