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 Modules Support forums / 
  3. Module usage questions 
  4.  / module UI design
Register
1
kootstra
module UI design

  • 2004/7/30 21:11

  • kootstra

  • Just popping in

  • Posts: 3

  • Since: 2004/7/24


The module I'm programming has come to the point where I need to create a number of forms and tables for both the interface used by the end-user and the administrator. From what I can gather from this forum is that there are two main methods to generate tables and forms: Smarty templates and the XOOPS API.

My biggest concern is that when a user changes his or her XOOPS main template, the userinterface(s) of my module pages should change accordingly. If I use Smarty temples the wrong way this could lead to undesireable colour schemes.

What is the prefered method to generate this effect. I'm not too fussy to look into both, but the currently available documentation is scattered and fuzzy at the best of times. If someone could help me get this stuff on track I'd be delighted.

--Anne
2
jmass
Re: module UI design

  • 2004/7/30 21:48

  • jmass

  • Friend of XOOPS

  • Posts: 524

  • Since: 2003/12/18


There are classes that every theme I have seen use like odd, even, etc.

I think a lot of modules take advantage of these and the look is maintained across themes pretty well. It is a lot better than requiring manual adjustment of the css to work with your theme, or worse hard coding the look.

I am not aware of a list of standard classes, though that would be most useful.

But any way you go... GO SMARTY! Too many advantages to list!

JMass
3
Mithrandir
Re: module UI design

A look in the default theme's style.css should reveal the available CSS classes to be used in modules.
4
jmass
Re: module UI design

  • 2004/7/30 22:02

  • jmass

  • Friend of XOOPS

  • Posts: 524

  • Since: 2003/12/18


Good point as always Mith.

I was thinking of something more like the API Doc for default css classes. But the default style sheet works too

JMass
5
kootstra
Re: module UI design

  • 2004/7/31 9:14

  • kootstra

  • Just popping in

  • Posts: 3

  • Since: 2004/7/24


OK, CSS classes it is then. I'll look into the Smarty templating system and the default CSS classes to generate my pages.

In retrospect I was kind of expecting some type of custom templateting API. However, this would have only added more processing time.

Thanks for the heads-up.

As ever,

--Anne
6
synistar
Re: module UI design

  • 2004/7/31 17:18

  • synistar

  • Just popping in

  • Posts: 18

  • Since: 2004/7/19


One other thing you can consider is adding a div around your interface and giving it its own class or id (make sure your id is unique within the page). That way you can tweak things in your module's interface and override CSS from the theme if necessary. For example, you could implement a local CSS based menu. This way the custom CSS would only affect your interface.

Code would look like this:
Quote:

<div class="myModuleInterface">
<!-- markup for my interface -->
</div>


CSS would look something like this:
Quote:

.myModuleInterface input {
margin-bottom: 1em;
/* ETC... */
}
.myModuleInterface h3 {
margin-bottom: 1em;
/* ETC... */
}


Just try not to stomp on too many things that would be specified in the theme (like backgrounds, text colors, fonts etc.)
7
kootstra
Re: module UI design

  • 2004/7/31 23:49

  • kootstra

  • Just popping in

  • Posts: 3

  • Since: 2004/7/24


Thanks for the info. This means that you'd have to edit the main CSS file for this, right? This is something I'd rather not do. So, unless it's possible to add CSS code to the module template(s) code, there's no real bonus for this div method for me.

--Anne
8
synistar
Re: module UI design

  • 2004/8/1 12:34

  • synistar

  • Just popping in

  • Posts: 18

  • Since: 2004/7/19


Its true that effectively you would still have to maintain at similar amount of changes in a different place. What it does give is flexibility however. Since then themes could skin your interface via CSS (which would be much tougher to do if you put everything inline in the page template due to the order of the CSS cascade.

Also it allows you to do a lot more and still have your page validate (this avoids the dreaded quirks mode and avoids breaking XHTML compatibility). And it lightens your page size since the CSS markup is cached locally.

Either way you go good luck.

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

242 user(s) are online (155 user(s) are browsing Support Forums)

Members: 0

Guests: 242

more...

Donat-O-Meter

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

Latest GitHub Commits