xoops forums
  1. Board index
  2. XOOPS Themes and Templates Support forums
  3. Theme stylesheets (CSS) help
  4. Support for Cssified xoops default theme
Register

ianez

Not too shy to talk
Posted on: 2010/11/10 18:58
ianez
ianez (Show more)
Not too shy to talk
Posts: 188
Since: 2006/1/26
#1

Support for Cssified xoops default theme

2010/11/10 18:58 In answer to some requests I open this thread about the css version of the default Xoops theme. All the info at: https://xoops.org/modules/news/article.php?storyid=5679

@aitor
for hiding left/right blocks simply look at the code in the three style sheets named style-noCol.css, style-noLcol.css, style-noRcol.css.. they show you how to put left/right col or both width to zero, by simply changing values of four classes
In the head of theme.html you have a smarty filter which import the right css as setted up in blocks admin.

Size of columns depends from two main values:
*Left column > 'left' px value in #colmid
*Right column > 'margin-left' negative px value in #colright, but pay attention that this value is the total of left col width + right col width, so if you want a left column of 120px and a right column of 200px here is the code:

#colmid {
    left:120px;
}

#colright {
    margin-left:-320px /*120px+200px*/
}


all the other values in #col1pad, #col2, #col3 should change accordingly to the values above.
Remember that #col1pad it the div that gives you the padding (distance) of the center content form side bar.

Hope this help you as a start
Ian

ps the real crashy thing could be having the possibility to use something like smarty variables in the css.. so setting up values could be really automatic..

kris_fr

Theme Designer
Posted on: 2010/11/10 21:42
kris_fr
kris_fr (Show more)
Theme Designer
Posts: 1009
Since: 2005/12/31
#2

Re: Support for Cssified xoops default theme

2010/11/10 21:42 hi,

Why not use existing variables for the central positioning of the blocks?
<{* Center blocks display order valid values are:  lrc (left right / center) lcr (left center right) clr (center / left right)        *}>
    <{assign var=theme_top_order value=clr}>
    <{assign var=theme_bottom_order value=clr}>

ex:
<{if $xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright}>
                        <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>
                    <{/if}>

and:
<{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}>

for styles depending on the number of columns displayed? it is much simpler

on themes based on div, we already have some models

for proper disposal according to the screens, I recommend this article : http://matthewjamestaylor.com/blog/pe ... lti-column-liquid-layouts
or http://css-tricks.com/resolution-specific-stylesheets/

aitor

Not too shy to talk
Posted on: 2010/11/11 9:24
aitor
aitor (Show more)
Not too shy to talk
Posts: 148
Since: 2002/1/2 2
#3

Re: Support for Cssified xoops default theme

2010/11/11 9:24 What i have in mind is a module like this, i hope that could be understand, video is in spanish.

http://www.vimeo.com/16718058

You set most basic option, click on generate and theme is modified at the moment, later obvious modification by hand is better, but could be a start to have a bit diferent theme without work for users.

ghia

Community Support Member
Posted on: 2010/11/11 14:10
ghia
ghia (Show more)
Community Support Member
Posts: 4954
Since: 2008/7/3 1
#4

Re: Support for Cssified xoops default theme

2010/11/11 14:10 Quote:
for proper disposal according to the screens, I recommend this article : http://matthewjamestaylor.com/blog/pe ... lti-column-liquid-layouts
That's where his layout was based on! (see post 1, line 1)

kris_fr

Theme Designer
Posted on: 2010/11/11 16:11
kris_fr
kris_fr (Show more)
Theme Designer
Posts: 1009
Since: 2005/12/31
#5

Re: Support for Cssified xoops default theme

2010/11/11 16:11 doc 1
doc 2
doc 3

ianez

Not too shy to talk
Posted on: 2010/11/11 16:55
ianez
ianez (Show more)
Not too shy to talk
Posts: 188
Since: 2006/1/26
#6

Re: Support for Cssified xoops default theme

2010/11/11 16:55 @kris
the question of aitor was related to hiding left/right columns on the Cssified default Xoops theme which I posted some days ago... which is a full css theme based on the work of Mathew James Taylor.. one of you proposed link..

the first two snippet of code you sent are related to central positioning of the block you say.. even if this is not related to this post this is to me the occasion to ask you what exactly that code should be used for.. you can explain to me if you want in another post..

I understand clearly the second snippet...
ok I did not use the $xoBlocks.canvasxxx new smarty variable..
but you are telling me that creating a smarty filter, assigning a smarty var, which apply a class to main page wrapper..
it's much simplier than this code in the head of theme.html??
<{* Code for different layout structure [1/2 or 3columns]- Allows 3 Columns by default *}>
    <{if $xoops_showrblock == '' & $xoops_showlblock  == ''}>
    <style type="text/css">  @import url(<{xoImgUrl style-noCol.css}>);</style>
    <{elseif $xoops_showrblock == 1 & $xoops_showlblock  == ''}>
    <style type="text/css">  @import url(<{xoImgUrl style-noLcol.css}>);</style>
    <{elseif $xoops_showrblock == '' & $xoops_showlblock  == 1}>
    <style type="text/css">  @import url(<{xoImgUrl style-noRcol.css}>);</style>
    <{/if}>

I onestly don't think so... if you consider that the code above works in a full css, table less theme..
and also you think your code can work out of the xxxgenesis world?


the llink you sent in the end are interesting I know them.. but which is the relation with the topic?


@aitor
that module looks great.. please keep me updated about development..

aitor

Not too shy to talk
Posted on: 2010/11/11 22:18
aitor
aitor (Show more)
Not too shy to talk
Posts: 148
Since: 2002/1/2 2
#7

Re: Support for Cssified xoops default theme

2010/11/11 22:18 ianez where you set the text color for block content?, i found header text color but not block content color to change it.

aitor

Not too shy to talk
Posted on: 2010/11/12 0:11
aitor
aitor (Show more)
Not too shy to talk
Posts: 148
Since: 2002/1/2 2
#8

Re: Support for Cssified xoops default theme

2010/11/12 0:11 ianez i found a failure in the theme, if left center block is set, the module goes to the part of right center block.

If left center block and right center block are set the module goes with the right center block.

If no left center block selected and right block selected the right block goes with the module in the right part.

No problem if center - center selected without left center and right center.

Here you have two screen capture on how is seen.

http://img261.imageshack.us/img261/7770/themefailure.gif
http://img576.imageshack.us/img576/605/themefailure2.gif

aitor

Not too shy to talk
Posted on: 2010/11/12 8:40
aitor
aitor (Show more)
Not too shy to talk
Posts: 148
Since: 2002/1/2 2
#9

Re: Support for Cssified xoops default theme

2010/11/12 8:40 I have made a new video capture of the module for edit your css and also working to make it to change defaul xoops theme.




http://www.youtube.com/watch?v=y2916yGAq-4

ianez

Not too shy to talk
Posted on: 2010/11/12 9:27
ianez
ianez (Show more)
Not too shy to talk
Posts: 188
Since: 2006/1/26
#10

Re: Support for Cssified xoops default theme

2010/11/12 9:27 @aitor
your're doing an amazing work!! both in testing and supplying an easy solution for customizing the theme

the failure you found is absolutely correct
I've forget clearing the floating elements..
so here an immediate fix.. and I'll set it better in the next to come version of the theme...

around line 96 of the theme.html, after </div> and before <{/if}> you should copy this
<div class="clear"> </div>

if you're working with xoops 2.5 this should do the trick
let me know..

thanx for your efforts

Ian
(1) 2 3 »