2008/1/15 0:37:40
|
---|
|
How can I do to create theme!Hi, I have one question to create theme.
I See a theme but that theme is Not COMPATIBLE WITH impress core Please Help me, how can I do to create this theme for impress? its means, how can i copy this theme for impress? ------ Sorry I understand a little English and can’t write well! ![]() |
2008/1/15 4:06:07
|
---|
![]() |
Re: How can I do to create theme!Thank you for the post.
Which theme are you reffering to, that is not compatible? At the moment we are working on a new Wiki site for Community documentation - but until then, you may want to check out "XoopsWiki" for some details on theme creation. We can help with any specific questions you may have of course. |
2008/2/13 1:35:29
|
---|
|
Re: How can I do to create theme!Link doesn't work anymore.
Then again, I also would like to know if there are differences between impresscms and xoops themes and CSS. Does impresscms have more/other css id's etc. which differ from xoops? Now it looks like creating a theme for impresscms is difficult, specially when I read the difficulties considering the standard provided impresscms theme. No offence but I really think at this aspect needs something to be done. AFter all, the theme is an important presentation for the cms. It is a pitty I am no designer at all. Do we have some designers in tha house who can help out a.s.a.p ? Grtz., Shine |
_________________
Environment: PHP Version 5.2.4 SQL: 5.0.77 Zend: v2.2.0 Apache: 1.3.39 |
2008/2/13 4:02:14
|
---|
![]() |
Re: How can I do to create theme!Actually - with the exception of the "xoops.css" file - there should be no issues in backwards compatibility (unless you are using a theme for xoops 2.2)... and if anyone has got a theme that wont work.... that doesn't require core hacks... then we'd love to see this - so we can deal with it.
Basically the themes will be compatible - with the exception of adding additional block locations from the backend for some ImpressCMS specific themes... (not difficult ![]() |
2008/2/13 4:39:42
|
---|
![]() |
Re: How can I do to create theme!Documenting theme making is not exactly an easy process. It would be hard to fully document it without offending one of the wings.
You have designers like snow that base all their work on Morph, and designers like myself that will not work with it. Within a cms community, attempting to define some sort of "standard" to art, will alienate our half of the spectrum. Likewise, developers like snow deserve to develop the way they choose. So how do you present a descriptive theme wiki without alienating either half? without showing preference to one side or the other? This is exactly what XOOPS did, when creating their "design team". How a developer builds their work is their decision, and trying to force feed make believe standards to them is not a good idea. I will point you to look at the theme contest on whoops. Whole lotta participants there. I doubt there will be, except for perhaps the team leaders posse. (Only 5 days left until the funniest **** ever!). You should ensure compliance, but hyping one way or the other will surely cost the community. __ That being said, please link us to the theme you are talking about. It sounds like he is looking at another cms's theme. (evo maybe). |
2008/2/13 5:54:16
|
---|
![]() |
Re: How can I do to create theme!I agree with you that sticking with one standard is not for everyone... I like both some of your own themes - and some of Kris's and Snows designs... and I think all techniques have their merits.
Would it be possible to adapt your tutorial on your site, to include on the Impress Wiki at all? At least this would provide some people with something to work from.... I think you're right about the theme the original poster was discussing being from another system... and they all have their own unique coding/design methods... |
2008/2/13 6:33:32
|
---|
![]() |
Re: How can I do to create theme!I am working on a new tutorial, and publishing it as an Impress guide. Not the only way to do it, just my own.
I could also readapt my "psd to whoops theme" as psd to impress. |
2008/2/13 11:32:30
|
---|
![]() |
Re: How can I do to create theme!If you could - that would be really appreciated!
Could we use this in the wiki as well? Then it would allow some of the multi-lingual users a chance to translate it. |
2008/5/8 4:19:40
|
---|
![]() |
Re: How can I do to create theme!Like Will, i use my own "framework" i made it some time ago when themes from 2.0 branch didn't work on 2.2 branch so i wanted for users to be able to use the same theme on both branches without the need to modify things. I'm still using it and unless huge changes in core i'll still be using it
|
_________________
So you made great theme yeah that's nice, now let me see ya do the same thing twice, 3times 4times and a couple of mo' times/Please, you're Amateur Night, it's Showtime |
2008/5/8 8:22:01
|
---|
![]() |
Re: How can I do to create theme!I don't think it would hurt if different designers made their own how-to's, providing we don't categorically state what's right way, when perhaps there are many.
MrTheme's guide to Table-less perfection - Theming Aph3x's guide to making visual stunning, mouth watering themes (I really like the new design on his website) I actually think if some of you smart designers made your own tutorials this would be good for the end user and new designers, as they would have different comparisons, and may even develop their own methods of madness over time. |
2008/5/8 15:39:03
|
---|
![]() |
Re: How can I do to create theme!To create a theme you don't need to use anybody elses framework or theme. Every designer has their preferred framework but those are just the ways each have to make the html layout and css structure. First you must know at least some basic concepts of html and css and this is an external learning apart from the ImpressCMS essential code of themes.
The themes code that displays the content are a set of smarty variables. This is the code you need to learn to make a new theme or make an update. For example this smarty: <{if $xoops_contents}><div id="xo-content"><{$xoops_contents}></div><{/if}> displays the module content, it's up to you where you put it in the html and if you insert it in a div or table. So all you have to do is identify the set of basic smarty variables that make part of the theme and place them in your html layout.CSS and id's have nothing to do directly with learning what's needed to make a theme and do not influence compatibility as the designer has the freedom to make them however they want. It's the smarty part that you have to take care to use as exactly defined by the system. At the wiki there is this page: [[Theme Structure]], here you see the default theme explained by sections that will help you identify what content is displayed by each variable. However it is to notice that this theme in particular has an extra special usage of additional smarty not found in most themes in creating the order of how top and bottom center blocks are displayed, what I call the LCR feature (if you do a search here you might find more about it). The additional code this has in the theme is found in the head where the smarty values are assigned, and in the body in the center blocks code that looks like this:
<div class="xo-blockszone xo-<{$theme_top_order}>pageblocks" id="xo-page-topblocks">
<{includeq file="$theme_name/centerblocks.html" topbottom=top lcr=$theme_top_order|substr:0:1}>
<{includeq file="$theme_name/centerblocks.html" topbottom=top lcr=$theme_top_order|substr:1:1}>
<{includeq file="$theme_name/centerblocks.html" topbottom=top lcr=$theme_top_order|substr:2:1}>
</div>
So below I've pasted the html structure derived from this framework but without this LCR feature in case it doesn't want to be used. The example has id's and classes and the elements have been grouped in div's, you can erase all the div's, classes and id's and make your own layout. theme.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
><html
xmlns="http://www.w3.org/1999/xhtml"
lang="<{$xoops_langcode}>" xml:lang="<{$xoops_langcode}>"
><head>
<{assign var=theme value=$xoTheme->folderName}>
<title><{$xoops_pagetitle}> : <{$xoops_sitename}></title>
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<link rel="shortcut icon" type="image/ico" href="<{xoImgUrl /favicon.ico}>" />
<link rel="icon" type="image/png" href="<{xoImgUrl /icon.png}>" />
<link rel="stylesheet" type="text/css" media="all" title="Blue" href="<{xoImgUrl /style.css}>" />
<link rel="stylesheet" type="text/css" media="screen" href="<{xoImgUrl /layout_screen.css}>" />
<{$xoops_module_header}>
</head>
<body class="<{$xoops_dirname}> theme-default">
<{if $xoBlocks.canvas_left and $xoBlocks.canvas_right}>
<{assign var=columns_layout value='threecolumns-layout'}>
<{elseif $xoBlocks.canvas_left}><{assign var=columns_layout value='leftcolumn-layout'}>
<{elseif $xoBlocks.canvas_right}><{assign var=columns_layout value='rightcolumn-layout'}>
<{/if}>
<div id="xo-canvas"<{if $columns_layout}> class="<{$columns_layout}>"<{/if}>>
<{if $xoops_banner and $xoops_banner != ' '}>
<div id="xo-banner" class="commercial">
<a href="<{xoAppUrl /}>"><{$xoops_sitename}></a>
<div id="xo-banner-ad"><{$xoops_banner}></div>
</div>
<{else}>
<div id="xo-banner">
<a id="xo-site-title" href="<{xoAppUrl /}>"><{$xoops_sitename}></a>
<div id="xo-site-slogan"><{$xoops_slogan}></div>
</div>
<{/if}>
<div id="xo-canvas-content">
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.canvas_top zoneClass='' zoneId='xo-canvas-header' }>
<div id="xo-canvas-columns">
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.canvas_left zoneClass='xo-canvas-column' zoneId='xo-canvas-leftcolumn' }>
<div id="xo-page">
<{if $xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright}>
<div class="xo-blockszone" id="xo-page-topblocks">
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.page_topleft zoneClass='' zoneId='xo-page-topleftblocks' }>
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.page_topright zoneClass='' zoneId='xo-page-toprightblocks' }>
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.page_topcenter zoneClass='' zoneId='xo-page-topcenterblocks' }>
</div>
<{/if}>
<{if $xoops_contents}><div id="xo-content"><{$xoops_contents}></div><{/if}>
<{if $xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright}>
<div class="xo-blockszone" id="xo-page-bottomblocks">
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.page_bottomcenter zoneClass='' zoneId='xo-page-bottomcenterblocks' }>
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.page_bottomleft zoneClass='' zoneId='xo-page-bottomleftblocks' }>
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.page_bottomright zoneClass='' zoneId='xo-page-bottomrightblocks' }>
</div>
<{/if}>
</div>
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.canvas_right zoneClass='xo-canvas-column' zoneId='xo-canvas-rightcolumn' }>
</div>
<{includeq file="$theme/blocks.html" blocks=$xoBlocks.canvas_bottom zoneClass='' zoneId='xo-canvas-footer' }>
</div>
<!--{xo-logger-output}-->
<div id="xo-footer">
<{$xoops_footer}>
</div>
</div>
</body>
</html>
blocks.html
<{if $blocks}>
<div class="xo-blockszone x2-secondary<{if $zoneClass}> <{$zoneClass}><{/if}>"<{if $zoneId}> id="<{$zoneId}>"<{/if}>>
<{foreach from=$blocks item=block}>
<div class="xo-block <{$block.module}>">
<{if $block.title}><div class="xo-blocktitle"><{$block.title}></div><{/if}>
<div class="xo-blockcontent"><{$block.content}></div>
</div>
<{/foreach}>
</div>
<{/if}>
* These two html's were done by Skalpa. I guess this brings about the importance of documenting more the smarty variables used in theme rendering. Also I keep the doubt if really there should be no standard in maintaining certain predefined style selectors and if having predefined selectors will be part of the way the theme can be applied to the admin when the admin becomes themable, I don't really know how that will work. |
_________________
www.xoopsdesign.com (impresscms & xoops themes) "what is essential is invisible to the eye" Antoine de Saint-Exupéry |