What I DoI make you look good.
What my clients say

My site launch demanded design savvy, WordPress expertise, and a fair amount of problem-solving, and Randa turned out to be the perfect match for the job. ~ Ken Doctor

Help out a newbie WordPress theme designer

I’m almost to the point of releasing my first theme for WordPress called “Round and Round”. My goal for this first one, was just to design a clean, uncluttered theme that has a different look than others I’ve seen out there. I’m more of a design person than a code person, so I didn’t set out to create a theme with lots of fancy options. My original idea for the post area was to use transparency so that you could see the background faintly through the white, and it looked really cool… until I realized what you CSS uber-gurus already know: the transparency will apply to everything in the div, not just the background. So, images in the posts were transparent to the same degree as the background, and that would never work and I had to get rid of the effect unfortunately.

This being my first theme, I thought before I released it, I would ask any who are willing to check it out here, and give me some input. Any constructive input is appreciated! I’m considering offering a couple of different background options here on this site that users could easly switch out if they wanted something different than the swirly dots. Is that something you think people would make use of?

screenshot

 

15 responses to “Help out a newbie WordPress theme designer”

  1. Blogging Tips

    its a very basic theme however its clean and easy on the eye. i like it and im others will too

    only think i would suggest is the left hand side of the letters of the site name at the top clash with the spiral pattern behind it. perhaps use a more bolder color for the title :)

  2. Phil

    Hi Randa,

    I like it, simple but clean as you were aiming for.

    I wanted to suggest a way of solving your transparency problem but things got quite complicated, so I’m not sure if this is too much work or a reasonable workaround.

    I found how to do CSS tranparency here, but the problem was that only IE could be coaxed into stopping child elements inheriting the transparency (with a position:relative; strangely enough).

    Of course, the other option is to add a transparent background to the .item class, but we know that IE6 and below won’t deal with that.

    Adding the above together could be a solution though, add transparency to IE using CSS properties and sort out the other browsers with a transparent background.

    I might look into this myself, I haven’t tried any of this, but at least the theory is there!

  3. Laura

    I’m not a designer, but I’m happy to give some input. I think it’s a very elegant theme and it will no doubt be popular. You obviously have a great deal of talent.

    The only pointer that I would really give is to label things clearly in the presentation files so that when non-designers (like myself) go in to add google adsense and other items they can find the insertion spots easily.

  4. Randa

    Thanks for the input so far. Keep it coming! Does anyone else think the colors clash in the title over top of the background? The overlap was intentional, but maybe it makes it difficult to read??
    @Phil- thanks for the tip on the transparency thing. Will have to play around with that.
    @Laura – I will double-check to be sure that things are labeled clearly, thanks for your comments.

  5. Phil

    Hey Randa, firstly I’m sorry I’ve screwed up the comment! Could you edit my comment so that the original link http://www.domedia.org/oveklykken/css-transparency.php appears and doesn’t mess everything else up! I think I meant to write “I found out how to do CSS tranparency here, but the problem…”

    Secondly, I think I have a solution. I’ll be putting a post up later so be sure to check it out!

    The only other thing, and this is because I’m a little obsessed maybe, but there’s a few validation errors that I think you should sort before you release. The problem being that, you may have been able to get things to display properly, but if someone else tries to edit the theme for their own uses a lack of valid working code could break it for seemingly no reason.

  6. Aaron :: miLienzo.com

    It’s nice Randa, well done.

    Just a couple of small things that bug me. Hyperlinks are styled differently in the comments as to how they’re styled in the article – ie they’re not underlined in the comments – this is a bit confusing. Plus I would include some kind of hover effect on the hyperlinks as this is expected behaviour.

    Also I’d probably style up the comments slightly. Not a lot because the overall feel is quite understated, but maybe just making bold the name and date of the commenter, just so its easier for the eye to spot where a new comment begins at a glance. And maybe tweak the spacing as the gaps seem quite large.

    And are the commenters’ names hyperlinked? If not there might not be many comments.

    Other than that I like, and I think people would appreciate the simplicity of it as it allows flexibility for customizing it.

    @Phil – I’m not sure there’s a way of doing the transparency background with solid text which works in all browsers. If you’ve discovered one I think I might love you for ever :)

  7. Court

    I think it looks great! The only thing I noticed was that the screen was really blank on the right side. I would maybe like to see some circles over there as well.

    Since I obviously don’t have as much design talent as you, you should probablt trust yourself a lot more than you trust me! I think it will do very well – it should be very popular.

  8. Randa

    @Aaron – thanks for your comments. I made the changes you suggested. The commenters names were hyperlinked, but I had neglected to enter a URL when I was entering those test comments.

    @Phil – I fixed your comment above, and I’ll look forward to your post on transparency.

    @Court – thanks for your comment. There is definitely some white space over there on the right depending on your resolution. I think adding something there might take away from the very “uncluttered” look I’m going for, but I’m going to think about it some more. Maybe I’ll include an easy way for users to make the post area wider if they choose so the theme would easily work at 1024 width as well.

  9. Cross Browser Background Transparency With CSS :: Unintentionally Blank

    [...] can add something beautiful to a design. Randa Clay thought so whilst designing her first WordPress theme and I have been considering something very similar for a design that has been going round in my [...]

  10. Brett Evans

    I love the template. I wish I new a little bit to know how to create something like that.

    I really like the simplicity of it. I am always a big fan of less.

    I like the borders around the post helps separate it from the rest.

    The only thing that catches me is the giant whitespace to the right. For some reason my eyes wonder over there while reading. I have no clue. Not sure if anybody else has the same effect.

    Overall I like it. It is different from the rest. I think where the circles are It would be a great editing place for other people who download it to put a vertical header img to separate it from the rest of the people who download it.

    Keep up the good work!

  11. Tara

    Hi Randa

    I like the overall look and congratulations on making your first wordpress theme. My only suggestions would be to try and continue the circle theme by maybe introducing circle into the menu somehow (dotted lines? bulleted heading?) The text boxes might look nice with rounded corners again sticking with the round theme? But being a coding dummy I have no idea if any of this is easy to do or is practical.

    Would love to hear how you started the project -
    with a sketch, or straight on screen?
    if you started the theme from the standard wordpress one or from scratch?
    How easy it was to do?

    I would like to be able to create a theme eventually.

  12. How to make your backgrounds transparent using CSS at Randa Clay Design

    [...] Contact « Help out a newbie WordPress theme designer [...]

  13. Randa

    @Tara – bringing the circle in elsewhere subtly is a good idea. I added bullets to the sidebar, and I’m thinking of doing a circular feed icon. Maybe I’ll work on rounded corners on the posts for version 2.0. I’ll write a post on how I did the theme soon. Thanks for your input.

  14. Jenny

    Hi Randa,

    I think it looks good. But, I’d “dress up” the menu a bit. It looks very plain. Apart from that, Great work!

  15. Dave

    Thats a really good looking theme. Clean and not so busy. I wish I knew how to code. Congratulations.