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.  / Absolute newbie questions
Register
1
Antean
Absolute newbie questions

  • 2007/5/19 12:10

  • Antean

  • Just popping in

  • Posts: 5

  • Since: 2007/5/19


Hi, i just started XOOPS and its cool, thanks for this great tool mates

i've benn trying to create my own theme for a day, and everytime i come up with a screwed screen

i first design my page with photoshop, get a web page out of it(i guess it uses build-in imageready) then i copy the codes in default theme(left block,rigth block, center block to the corresponding table i left for them in design. and change the image sources,title head tags etc) then i limit the width of the tables to make it fit in my page

but everytime i come up with a page bigger than i planned. and i m kind a tired trying to figure out what to change everytime. i m not good with php. can use photoshop, some html and some other languages not related to this.

so here's mine question.
what are the initial steps to create my own theme while designing with photoshop. i just need to make the size and position as i need(seems i cannot do it within the html alone)
what codes to copy etc. any good step by step tutorials out there?

thanks in advance

sorry if these are asked before, been searching for a basic tutorial for a day, found some but they were not enough,and kind a bored to search for more
2
trspice
Re: Absolute newbie questions

  • 2007/5/19 19:04

  • trspice

  • Not too shy to talk

  • Posts: 193

  • Since: 2007/3/24


No doubt this has been asked many times and possibly the same response has been given. If you haven't yet, check the FAQ athttps://xoops.org/modules/smartfaq/faq.php?faqid=212

If you duplicated the default theme then the CSS file has tables set to width: 100% and is overriding the table width values you set in theme.html. Don't change the table value in style.css or it will affect other tables used in modules.

Wrap a DIV or a Table around the existing structure in theme.html and add a CLASS in it and create the values in the CSS so it will look like this;

<body>
<div class="mainwrap">
The page structure
</div>
</body>
</html>

If you prefer a table then
<body>
<table class="mainwrap">
  <tr><td>
THE STRUCTURE
  </td></tr>
</table>
</body>
</html>


In style.css create the class like this;
.mainwrap {width: 800px; margin: auto; border: 0px; padding: 0px}

The class can be added anywhere but the top makes for a logical flow.
There's nothing but science....
The Reggae Album
3
snow77
Re: Absolute newbie questions

  • 2007/5/19 19:08

  • snow77

  • Just can't stay away

  • Posts: 864

  • Since: 2003/7/23


You can check out Anatomy of the Default Theme, although the current default theme has been updated to use modules below content, it can give you a general idea.

There's an updated theme.html with the new smarty variables at < this link >, it would have been much better if it was done without tables, yet it will use the styles of the current default theme. Basically you use this and create a stylesheet for it or use the default style.css as starting point. All the layout is managed through adding id's or classes to your html and defining them in your stylesheet.
www.polymorphee.com
www.xoopsdesign.com
4
Antean
Re: Absolute newbie questions

  • 2007/5/20 18:12

  • Antean

  • Just popping in

  • Posts: 5

  • Since: 2007/5/19


thanks mates, i will link here the results(wiht psd's) as soon as i make a decent one
5
Antean
Re: Absolute newbie questions

  • 2007/5/20 22:48

  • Antean

  • Just popping in

  • Posts: 5

  • Since: 2007/5/19


That "Anatomy" is a great tool,
just some more question :)
i have 2 rows before that left-center-rigth part, which has the banner pictures i designed. (i defined almost every table an id to use it in style) i made the calculation including borders, but still the left-canter-rigth blocks part s always a 2-3px more than the actual size i need( need it same as banner sizes). when i minimize them further in style,they get even wider.
(even changed the total width in table(xxxx) part of the style.css,it doesnt effect either)

also, i cannot add borders to the banner pictures(the table cells they fill in) either. i m using the below code for them in style.css

td#res {width: 780px; font-size:10px; border-right: 1px solid #cccccc;}
td#res th {background-color: #3e434d; color: #FFFFFF;
vertical-align: middle;}


also, i ve this last cell below all that i wanna use for a footer banner. it doesnt even show up. i use a simple table layout, nothing complicated. weird...

can send the style and theme.html if u need it to solve this

any idea to how to overcome that situations?

thanks in advance
6
trspice
Re: Absolute newbie questions

  • 2007/5/20 23:34

  • trspice

  • Not too shy to talk

  • Posts: 193

  • Since: 2007/3/24


Post the link to the site so we can see the errors.
There's nothing but science....
The Reggae Album
7
Antean
Re: Absolute newbie questions

  • 2007/5/21 7:54

  • Antean

  • Just popping in

  • Posts: 5

  • Since: 2007/5/19


www.huddosk.org
looks better in mozilla,at least almost the same size in mozilla, even thou i didnt code the style for mozilla :) (still no borders with banner pictures, and still no footer picture)
8
trspice
Re: Absolute newbie questions

  • 2007/5/21 15:41

  • trspice

  • Not too shy to talk

  • Posts: 193

  • Since: 2007/3/24


Your theme.html is not properly structured. You are trying to make a single table handle all blocks and that will cause problems. Follow the methods in the links posted by Snow77 and myself.

Watch de ride....

Start from 'scratch' with a copy of the default theme. Use this image as a guide. I prefer Divs in most cases but since you are using Tables this works. Each color represent a Table:
Resized Image

The main Table (black) has 3 rows HEAD - BLOCK CONTENT - FOOT
Set the Style as;
#mainwrap {width: 780px; margin: auto; padding: 0;}
#mainwrap td {padding: 0; margin: 0; border-left: 1px solid #dadada; border-right: 1px solid #dadada}

That will give you borders from top to bottom and margin: auto will center the whole table.

Add the Table for block contents (pink) which is a single row with 3 columns/cells. You need to wrap the 'IF' tags around the cells so they don't show when not in use. The way you have it is wrong;
Your way
<td id="rightcolumn" rowspan="3">
<{if $xoops_showrblock == 1}>
<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}>
<{include file="default/theme_blockright.html"}>
<{/foreach}>
<!-- End right blocks loop -->
<{/if}>
</td>

Correct way
<{if $xoops_showrblock == 1}>
<td id="rightcolumn">

<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}>
<{include file="default/theme_blockright.html"}>
<{/foreach}>
<!-- End right blocks loop -->

</td>
<{/if}>


Follow that same principle for the center blocks but this time put the 'IF' around the Table (blue) tags.

You may need to edit the other HTML files in the folder of the theme you use like removing the (fieldset) and (legend) tags and using (div) instead if you want to customize block titles and block wraps.

Now go try all that....

Big Ups..
There's nothing but science....
The Reggae Album
9
Antean
Re: Absolute newbie questions

  • 2007/5/21 21:01

  • Antean

  • Just popping in

  • Posts: 5

  • Since: 2007/5/19


hm, thanks man, will do that as soon as possible, thanks again

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

117 user(s) are online (85 user(s) are browsing Support Forums)

Members: 0

Guests: 117

more...

Donat-O-Meter

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

Latest GitHub Commits