Hi folks!
I am desperatly looking for some help.
While I can apply some small code snippets, or edit some easy parts in php or html, I am completely lost, as soon as it gets complicated with code. Especially at stylesheets.
I designed my own theme my WordPress Blog.
For several days now, I tried to work out the CSS for it. I’v read many webpages on the subject, tried it in WP itself, on an emulated server on my computer and even with Dreamweaver. But it just doesn’t work out the way it should be.
I want to utelize the new WP 2.5 function on themplate-hirarchy to call upon the proper template, depending on what type of page you are looking for.
I would like to work with div-tags, containers and z-layers. Because there are several text-boxes, which are shifted a little bit.
Maybe someone could help me out here?
All I need is the CSS and an empty template for the div-tags (if you can add the condition for the WP template-hirarchy too, it would be lovely, but I can try figuring that out myself), so I know where to place which one.
I prepared a visual design aid, that shows all elements of the site:
http://www.rpg-community.com/admin/pagecsssettings.jpg
The site has a main-part, which is centered. The backgroundcolor of the site is: #231D29
The centerpart consists of many elements.
There is a picture as a background. Then there are several parts (i am calling them blocks), depending on what type of site is viewed. Every element inside a block is positioned in reference to the background/secondary-layer image of the block.
A regular page would show the BGIMG-Block, several Text-Boxes (TextBox1-5) for date, title, autor, some random quotes and the main-text. Below that is some y-repeated graphic (RIMG) depending on the length of the main-text shown. And it ends with the footer, that includes a link/button(CBIMG).
Thus a standard page is:
[BGIMG-Block + RIMG] + [FIMG]
It gets a little bit more complicated, as soon as it’s a category (eg News) or if there are comments.
If its a Blog/Category with chronological postings, it starts out the same as a standard page (BGIMG-Block), then there is a graphical text-wrap that seperates one post visually from the other.
Every wrap holds an info-text-box (TextBox_a), link/button (CBIMG) to comments of that post, and date-, autor- and title-boxes, followed be the text-block (TextBox_b-e) of the post.
The text-area again is filled in the background with the 1px-line (RIMG) as necessary.
This block-set is repeated as needed, for each post.
After the last post the Info-footer-image (IFMG) with the info-text-box is inserted, followed by the actual footer.
So a category with three posts would be made of:
[BGIMG-Block + RIMG] + [Wrap-Block + RIMG] + [Wrap-Block + RIMG] + [Wrap-Block + RIMG] + [IFMG] + [FIMG]
Comments are not shown automatically. They are accessible through a link/button.
The comment-version of the site also starts off with the BGIMG, followed by an IFMG and the comment-blocks.
The whole comment-block is made out of three parts.
Each comment has its own block (CIMG_1/CIMG_2). The text-areas are more to the left on even comments and more to the right for uneven comments. Either one has a info-box (TextBox_a1/a2) for the name & url of commentator and a main-text area, where the actual comment is shown (TextBox_b1/b2). This repeates until there’re no more comment. What follows next is the comment-enter-block. Where users can add comments. If the user is registered, its the ECIMG_1-block - which has one text-block (TextBox_EC) and an area to enter the comment (EC_1Form4). If the user is unregistered, it’s the ECIMG_2 Block, which has four areas, where text can be entered (EC_2Form1-4). And at the end is the footer FIMG again.
So a post, with 5 comments, viewed by an unregistered user, would be made of:
[BGIMG-Block + RIMG] + [IFMG] + [CIMG_1] + [CIMG_2] + [CIMG_1] + [CIMG_2] + [CIMG_1] + [ECIMG_2] + [FIMG]
A post, with 1 comment, viewed by registered user, would be made of:
[BGIMG-Block + RIMG] + [IFMG] + [CIMG_1] + [ECIMG_1] + [FIMG]
The Button in the footer always show the appropriate button. On a normal page or at a post, it would be a button, that links to the comments. Viewing the comments, there would be a submit-button for an entered comment.
I thought it might be helpful to have all data in text-format as well, so here is a list of all elements and their properties (as far as I know them). You might have to add more. But that’s the reason, I am looking for help ;)
END PART 1
