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 ;)
ALL: centered; w:766px;
BGIMG-Block:
- BGIMG: w:766px; h:100%
- LIMG: w:115px; h:100%; top:147px; left:9px
- Sidebar: w:115px; h:100%; top:147px; left:9px
- HIMG; w:583px; h:208px; top:155; left:150
- TextBox1: w:137px; h:23px; top:168px; left:582px
Text: centered/centered, weight:500, Arial, size:10, color:#232323
- TextBox2: w:203px; h:43px; top:233px; left:163px
Text: centered/centered, weight:600, Arial, size:12, color:#191919
- TextBox3: w:312px; h:68px; top:269px; left:379px
Text: centered/centered, weight:400; italic, Arial, size:10, color:#232323
- TextBox4: w:135px; h:30px; top:316px; left:168px
Text: centered/centered, bold, Arial, size:10, color:#232323
- TextBox5: w:531px; h:100%; top:369px; left:176px
Text: weight:500, Arial, size:11, color:#232323
- RIMG: w:766px; h:1px; y-repeat;
END ---
WIMG-Block:
- WIMG: w:766px; h:388px;
- TextBox_a - w:387px; h:57px; top:20px; left:167px
Text: centered/centered, Arial, size:9, color:#232323
- CBIMG: w:159px; h:29px; top:76px; left564px;
- TextBox_b - w:140px; h:29px; top:196px; left:581px
Text: centered/centered, weight:500, Arial, size:10, color:#232323
- TextBox_c - w:140px; h:29px; top:215px; left:157px
Text: centered/centered, bold, Arial, size:10, color:#232323
- TextBox_d - w:223px; h:47px; top:254px; left:292px
Text: centered/centered, weight:600, Arial, size:12, color:#191919
- TextBox_e - w:531px; h:100%; top:319px; left:176px
Text: centered/block(or left), weight:500, Arial, size:11, color:#232323
- add RMG- and WIMG-Blocks as needed
- IFMG: w:766px; h:92px;
- TextBox_a - w:387px; h:57px; top:15px; left:170px
Text: centered/left, Arial, size9, color:#232323
END ---
CIMG-Blocks:
- IFMG: w:766px; h:92px;
- TextBox_a - w:387px; h:57px; top:15px; left:170px
Text: centered/left, Arial, size9, color:#232323
- CIMG_1: w:766px; h:79px;
- TextBox_a1 - w:177px; h:34px; top:15px; left:522px
Text: centered/centered, Arial, size9, color:#232323
- TextBox_b1 - w:409px; h:100%; top:59px; left:310px
Text: centered/block(or left); weight:500, Arial, size10, color:#232323
- CRIMG_1: w:766px; h:8px; y-repeat (for lenght of text)
- CFIMG_2: w:766px; h:42px;
- TextBox_a2 - w:177px; h:34px; top:15px; left:183px
Text: centered/centered, Arial, size9, color:#232323
- TextBox_b2 - w:409px; h:100%; top:59px; left:162px
Text: centered/block(or left), weight:500, Arial, size10, color:#232323
- CRIMG_2: w:766px; h:8px; y-repeat (for lenght of text)
- CFIMG_2: w:766px; h:42px;
- ECIMG_1: w:766px; h:340px;
- TextBox_EC - w:205px; h:27px; top:149px; left:514px
Text: centered/centered, Arial, size9, color:#232323
- EC_1Form1: w:519; h:137; t:203; l:183
- - OR - -
- ECIMG_2: w:766px; h:340px;
- EC_2Form1: w:183; h:28; t:117; l:358
- EC_2Form2: w:183; h:28; t:150; l:527
- EC_2Form3: w:150; h:28; t:162; l:213
- EC_2Form4: w:519; h:137; t:203; l:183
FIMG-Block:
- FIMG: w:766px; h:131px;
- CBIMG: w:159px; h:29px; top:30px; left564px;
END---
Last but not least, there is one more version. Its for the front-page of the site.
It uses a different BGIMG and lot less text-boxes. Actually there is only one - the main-text area. Its more or less the welcome site.
Here is the link to the visual aid of it:
http://www.rpg-community.com/admin/csssettingsfrontp.jpg
I renamed every part (if its a different one), so that everything can be put into the same stylesheet.
I am also adding a zip file to this post, with all the elements (named like the elements in the visual aid) as dummy graphics, like they would appear on the site, so you can try it. And I have added each possible version with the dummy graphics as jpgs for reference.
The file: http://www.rpg-community.com/admin/csshelp.zip
As you can imagine, all this took me quite a while to put together. So I am surly not the lazy type and if I could handle code properly, I might not be needing to to all this, but would do the css myself (which would not even take a 10th of the time for someone, who can code and is familiar with stylesheets). So I really hope, that someone might be kind enough to put it all together in a working manner.
Thank you very much in advance!