Welcome to the Graphic and Web Design Forum

your forum for all things Design

  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box

YES! I want to register an account for free right now!

  1. #1

    Req: Need help with my Wordpress Theme CSS

    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:

    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: 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: 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 ---

    - 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: w:766px; h:131px;

    - CBIMG: w:159px; h:29px; top:30px; left564px;


    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:

    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!

  2. #2
    blueocto's Avatar
    Join Date
    Oct 2007
    Newcastle upon Tyne, United Kingdom

    My Social Networking

    Follow blueocto On Twitter Add blueocto on Facebook Add blueocto on Google+
    Add blueocto on Linkedin Follow blueocto on Tumblr
    Sorry I can't read through all of that at work, but would it not be simpler creating a site from scratch using xhtml and css? Instead of fannying-on with the crap they put in wordpress pages (or so I've been reliably told lol)

  3. #3
    I'd say if you can detail your problem like that your easily learn CSS basics in a few days, also download some css cheat sheets to avoid making small errors.

    I was confused with your mock-up, XHTML & CSS are easier to learn and read than that mock-up.

    If you design your site from scratch with XHTML and CSS, there plenty of tutorials for converting a standard web site into a wordpress site.

    Good luck

  4. #4
    I use WordPress for the content. I have several users and that way, its much more convinient for the project I am working on.

    I'd say if you can detail your problem like that your easily learn CSS basics in a few days, also download some css cheat sheets to avoid making small errors.
    Believe me, if I could, I would.

    I live with computers for 23 years now and 18 with internet. And still, I just don't get code. I am a code-dyslexic. I am very creative, can do a lot of things. And I don't have proplems putting together some code-snippets by trial and error. But code just eludes me. Its not that I did not try. My eyes hurt from the hundred of sites I have read in the last week (and still do), trying to figure out how to do that. I tried online, offline, with different editors, visual editors and just with a text-editor. I am playing artound with it. But it just doesn't do, what I want it to do.
    I place a graphic, I set some properties in the css and it doesn't work. I change the properties and it doesn't work.

    Believe me. This is my last resort.
    I prefer learning stuff and then doing it on my own and share what I have learned with others. But I just don't get code.

    For a coder, this should not be much of a proplem. For me, it is.
    And if someone would make the whole thing in html/css I might be able to copy what I need in my templates for WP. But I am just unabole to code. And in all my years with computers and internet, that never changed much. I did try.
    I can follow logical structures. I can combine logical parts. And I can abstract information. But code... Never did.
    It just doesn't make any sense to me.

    Back in the times, when we had our sinclair or our ZX81, we copies basic-code from magazines to make programms. Sure, copying it, was no proplem. But when my Bro started to change the code, I just did not really understand anything he did with it.

    I have many other skills. But coding is non of them. And althought I don't like to admit it (especially not to myself), I don't think, it ever will...

    oh and the grafics you see is just a graphic, i put together in a graphic-programm. Its not an actual site. Its just an aid, to help understanding of what I need.
    Last edited by OMorchoe; 06-05-2008 at 12:40 PM.

  5. #5
    tommylogic's Avatar
    Join Date
    Apr 2007
    Virtually Everywhere
    John, thats a very good tutorial find you have there. I especially like how simple the author makes it appear and his "layman's terms"

    Very funny...
    That’s where the coolness of Wordpress comes in. Basically, you manage your links in your Administration panel, under (holy crap!) the “Links” area.

  6. #6

  7. #7
    tommylogic's Avatar
    Join Date
    Apr 2007
    Virtually Everywhere
    Quote Originally Posted by drewbie_wan View Post
    ahhhh stop with all the long posts.
    funny.. must be a content writer, no doubt.

Similar Threads

  1. My First Wordpress Theme
    By dannynosleeves in forum Web Design Forum Showcase
    Replies: 11
    Last Post: 04-12-2013, 06:49 AM
  2. Wordpress Theme with slider
    By Laura Lynne in forum General Web Design Forum
    Replies: 1
    Last Post: 07-03-2008, 07:20 AM
  3. How to create a WordPress 2.3.x Theme
    By Andy in forum Graphic Design Tutorials
    Replies: 1
    Last Post: 04-03-2008, 01:47 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Log in

Log in