Recent Topics

1 Feb 03, 2008 18:54    

Hi,

I'm in the long process of converting my wife's blog -- www.stylefool.com -- from 1.10.2 to 2.X, and could use help in converting my custom skin (or better, recreating it from scratch to be 2.X and strict XHMTL compliant).

I tried building this skin using Andreas_01 as a guide, but I couldn't figure out:

1). How to have the banner only go across the middle column, not all three columns;
2). Which CSS elements control the widths of each of the three columns;
3). Which CSS elements control the style of the widgets so I can get a box around them like in my current style sheet.

In general, is there a styling guide for newbies which shows which CSS elements style which parts of the new skins?

Thanks for any and all help,

RocketDude

3 Feb 03, 2008 19:31

Hi rocketdude,

I use the [url=https://addons.mozilla.org/nl/firefox/addon/60]Web Developer plugin[/url] for [url=http://www.mozilla.com/en-US/]Firefox[/url] which has the option Outline -> Outline Current Element. With it you can hover across your site and it will tell you the name of the div / element.

Skip the header section and start with the main section. Andreas very little header, so that is a good place to start. But do cut it out. Andreas is limited in width because of the background image. That is the gray part on the sides called img/bg.gif. Cut it. Then you want to widen the page. The div you are looking for is called #wrap. Set it to 1000px.
Without the header you are left with two columns. #amenu is the left sidebar and #content is the main section. Make a third column #bmenu right after the closing </div> of #content. In the css you put:

#bmenu {
float: right;
}


And it will exist.
Now think about the sizes of the three columns. That will be something like 190 - 620 - 190. Adds up to 1000.
Leave the #amenu as is. Change in main.index.php or post.index.php (look for the file that controls the Andreas skin) for the #content wrapper. Directly after the opening <div> you put the complete #header div. In your css change the width of the #header div to 620. After the #header div comes the .bPost div.
This way your header is encapsulated between the two sidebars.

This isn't a menu like a recipe for baking cookies. I made it all up (but I know where I am talking about). Do start with a tool to get the names and sizes of the actual blocks (divs). That is a good starting point.
The forums are a nice place for gaining information. Do read and ask questions.
If you get stuck, do yell and I will get you going.

Good luck

4 Feb 04, 2008 00:48

Afwas and EdB,

Thank you -- the combination of your advice has helped a lot. Making slow but steady progress towards recreating my custom skin for 2.x

Cheers,

RocketDude


Form is loading...