Surreal Reality Theme

srlink

My third theme, Surreal Reality. This one is a 4 column split-sidebar, widget-ready theme in soothing Cream and Green colors. There are 2 sidebars on the left and 1 on the right. My first attempt at fluid width that holds the layout down to 800px. Features an author box, author info page, gravatars and highlighted author comments in the comments section along with custom Archives, Sitemap and full width No Sidebars page templates. Tested in Firefox, Opera, Safari, IE6 and IE7. And as with all my themes it’s valid XHTML 1.0 and CSS 2.1 out of the box.

Demo & Download

About Mina

I'm just a regular person who spends her days at work on the computer and comes home and spends her evenings on the computer. I've been using WordPress for over 3 years and after enjoying all the WP community has to offer I've decided it's time for me to give back. This is my humble attempt at that.
This entry was posted in Wordpress Themes and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

48 Responses to Surreal Reality Theme

  1. vh says:

    I really like this theme. I’m new in the wordpress and css world… I’m using this theme right now for my blog, but I want to use or add a banner in the top. How do I go about doing that?

  2. Mina says:

    Hey, glad you like it! Are you saying you want to add a graphic in your header? To do that just ftp your image (right now the size is 800 x 150 but you can change that) to the theme’s image folder and add some code to the stylesheet.

    In style.css find:

    “#header” and in that section look for “background: #bcbc9a;” and change that to “background: #bcbc9a url(images/yourheaderimage.jpg);” To change the height just find “height: 150px;” (in the same section of code) and change the 150px to whatever your image is.

    I hope that helps, if not let me know some more details and we’ll get it straightened out.

  3. vh says:

    Thanks for the help! This is my blog: http://vhudgens.net/ how do I make it so that the image is in the middle and not repeating itself?

  4. Mina says:

    Your site is looking good! :)

    Okay first off I need to apologize, I said earlier that the banner size was 800 x 150, but that was a bit misleading. There actually is no set width for this theme. I guess I shouldn’t do these things so early in the morning. But with that said, we can still address the issue.

    To center the image change this line:
    background: #bcbc9a url(images/banner.jpg);
    to this:
    background: #bcbc9a url(images/banner.jpg) no-repeat center;

    That will center the image and stop it repeating. To blend it in to the rest of the space you could change the background color of the header section from #bcbc9a to #fff.

    Again, I apologize for my earlier error and please let me know if you’re still having problems.

  5. vh says:

    Thank you sooo much. It looks great now. Can I just ask…do you know what’s the real banner size of your header? I might just go back to photoshop and maybe edit the size for it. I actually like the background color you used, so I might still use that and maybe put a layer banner on top of it.

    Anyways…thank you! I might just experiment with it later and see if I can learn css more. ^^

  6. Mina says:

    It does look good!

    As for a banner size, there really isn’t one. This is a fluid theme so it sort of depends on a person’s screen resolution. If you make it too big and someone has their monitor set at a low resolution it will mess up. That’s why 800px is good because that’s usually the lowest you can set your monitor.

    That’s just a general rule, you can technically make it any size you’d like. I know…it’s weird! :D But if I can help you with anything else, please let me know.

  7. vh says:

    thank you for explaining. I guess what I have now will work too. I’ll just have to make the banner blend more with the background and experiment w/ photoshop. Once again, thank for explaining!

  8. Mina says:

    No problem, glad I could help.

  9. Alan Kellogg says:

    For my aged, lop sided eyes (extreme myopia) the text is a bit hard to make out against the background color. What’s the best way to lighten things up.

    Yes, over all the theme looks good.

  10. Mina says:

    Hi Alan,

    I’m not sure there is a set answer to your question. The only things I could suggest would be to play around with text and background colors to find the right combination. Also possibly increasing the font size would help.

    I’m sorry I don’t have a better answer.

  11. Jim says:

    I just wanted to let you know that this is one of the better themes I have come across in a long time. I am currently using it on my site. Great Job!

  12. Mina says:

    Jim,

    Thanks very much! :D

  13. A says:

    Hi !
    Your theme is really great , congrats !
    We intend to adapt it for our site .
    How can we place an Add Banner ( code ) in the header , in the left and/or right sight of the title ?

    Thanks !

  14. Mina says:

    Thanks, glad you like it. As for the ads, I’m not really a big ads person so forgive my ignorance on this subject. I guess I’m not sure what you plan on doing? Would it be Google ads or possibly a widget? If you give me a little more information I’m sure we can work it out.

  15. A says:

    We promise to not spoil your elegant theme . But adds are sometimes necessary , unfortunately .
    And we would want to use those free spaces in the header .
    It’s about Google AdSense, indeed ( but others too ), which come under a HTML code format .
    Text widgets – positioned on the left and right side of the title – would be a great solution … With adjustable dimensions ( are we asking too much ?! )

    Meanwhile we have another problem with your theme’s “Pages toolbar” .
    It shows all published pages , but we would want to select some of them ( because we have too many ). The normal WP Pages widget allows that , but in Sureal Reality’s case there is a built-in one . Nevertheless this shouldn’t be complicate .

    Thank you !

  16. Mina says:

    It’s not that I’m concerned about whether or not you “spoil” my theme. I realize that sometimes ads are necessary it’s just that I’ve never used them so I have no experience with them. You can do pretty much whatever you want with the theme once you download it.

    First I’ll address the Pages issue. You have 2 choices…either use the wordpress widget or go into the left_sidebar.php and find this line:

    <?php wp_list_pages(‘depth=3&title_li=Pages’); >

    and change it to:

    <?php wp_list_pages(‘depth=3&title_li=Pages&exclude=X,X,X’); ?>

    “X” would be the page id’s of the pages you don’t want to show in the sidebar. To exclude pages from showing in the horizontal navigation bar use the exclude parameter again in menu.php.

    Now about the ads…keeping in mind that I am basically a average WordPress user who’s learning as she goes, this is what I’ve come up with.

    In header.php add this code above the final /div:

    http://the-cloisters.net/files/2008/09/example.jpg (<– click to see the image of the code)

    And in style.css add:

    #header-ad { float: right; } /* change to float: left; for left-hand ad */
    #header-ad img { margin: -120px 50px 0 50px; padding: 0; height: 100px; width: 300px; border: none; }

    Of course you’ll need to adjust the margin, height and width settings to suit your needs.

    If you want ads on both sides at the same time you could duplicate all the codes and name them #header-ad-right and #header-ad-left or something similar.

    That at the moment is the extent of my abilities in this area I’m afraid. I hope it helps get you on the right track.

  17. A says:

    Hi !
    Thank you for the detailed answer .

    Didn’t have the time to try your solutions but I’m sure they’ll work great .

    The one for the header adds looks great for that type of add – an imaged linked to the sponsor’s site … If I’m not wrong .

    But an Adsense Add – a 468×60 banner , for example – comes with a Java script like this one :
    ( my mistake – I have spoken about HTML code before )

    Is there any solution to place it in the Header, at the already mentioned locations ?

    If I’m asking to much … Just drop it !
    You have already been extremely kind and your theme is perfect as it is .

  18. Mina says:

    No problem, it’s a great learning experience for me.

    I’ve emailed you further about this.

  19. Maurice says:

    I find this theme to be really really great. It doesn’t burn the eyes with bright or dark or mixed colors, it isn’t blurry and difficult to read. And to make it better, it has this cozy feeling.
    Overall great, and I am proud to be able to use it on my site ^^

    Well, the only thing I want to say is – Keep Going!

  20. Mina says:

    Thanks Maurice, I really appreciate that! And don’t worry…I do plan to keep going.

    And I have to say that I love how you’ve set your site up. Your graphics are great!

  21. Maurice says:

    Thanks, but I wouldn’t be able to achieve such satisfying effect ifs not for the splendid foundation I had in your theme :) .

  22. Adrian says:

    Hi Mina !

    I’m coming back with a big delay ( sorry ! bussy period ) .
    In fact it was only today that I’ve finally checked your solution to exclude unwanted pages from the horizontal navigationr bar .
    It didn’t work out for me . But I might have done mistakes somewhere ( I wanted to exclude no less than 25 pages ! )

    Anyway it would have been a bit illogical to apply this solution, taking into consideration that I publish more and more pages … And this would have required reediting menu.php over and over .
    It is much better to state/choose what are the Pages to be kept ( like the WP Pages widget does ), isn’t it ?

    Now I would like to change Pages in the horizontal navigation bar with Categories , because I have only 5 ( stable ) categories and my site is somehow category-oriented .
    Is it possible ? Would you be so kind and tell me how ?

    Thank you !

  23. Adrian says:

    In fact I’ve already put categories in the subheader bar .

    In menu.php I’ve just replaced :
    <a href=”">Home

    with

    And it seems to be working .

    Is it OK Mina ?

  24. Mina says:

    Unfortunately your code isn’t showing here in the post but if it’s working the way you want then yeah, you are good to go.

    About the pages thing, you’re right. If you have more pages to exclude than you want to show then the way I originally told you. It looks like you might have already worked it out though but in case you haven’t in order in include pages in menu.php instead of exclude then then just change ‘exclude’ to ‘include’ and add the pages you want to show.

    Let me know if I’m off the mark here or if you need any other help.

  25. Dawn says:

    I love this theme and use it on my website, and probably will for a good long while, unless I figure out how to make my own. (Which is unlikely.)

    Is there a possibility you will make more clean, 4 column themes like this in the future?

    There is a serious lack of good 4 column themes like this one out there.

    It is a gem.

  26. Mina says:

    Hi Dawn,

    Thanks so much. I like getting feedback from people who are using my themes.

    And yes, I am actually planning another 4 column. Probably not exactly like this one but along the same lines. I’ve got a few ideas and I’m just trying to decide which would be best.

  27. Adrian says:

    Hi Mina !

    Sorry if I’m wrong but does your theme support trackbacks ?

    If I’m not wrong there must be – in single.php and page.php template files – a line like this:

    <!– –>

    … and I didn’t see it or anything similar .

    Hope that I’m not bothering you . I like this theme and I want to make sure that everything works , before changing my old one .

    Thank you !

  28. Mina says:

    Adrian,

    No you are not bothering me, all the questions and feedback I get can help me make better themes. So bring it on. Just be patient with me if it’s something new to me, like trackbacks.

    To be honest I know nothing about them but will certainly investigate. Unfortunately I have to leave for work in a few minutes and won’t be able to do it right away.

  29. Alan Kellogg says:

    Hi Mina,

    Hope your days are good, and your projects proceeding as they should.

    I just got through looking at a post on updating themes for 2.7. The author doesn’t know how to explain things for goobers like me. You know, start with the basic layout of the file in question, show what needs to be changed, and how to change it. The result? I’m quite at sea.

    So I’m commenting here to encourage you to update Sureal-Reality for 2.7. Think of it as coding practice.

    My current plans are to use S-R for Mythusmage, which will act as my portal to my blogs. So why use WordPress as a CMS? Because it isn’t as fussy or confusing as “real” CMSes. It’s more intuitive.

    Hope you’re doing well, and your new themes are coming along fine.

    Yours,

    Alan

  30. Mina says:

    Alan,

    You do realize that even without being upgraded, older themes will still work with 2.7? The only real noticeable frontend change would be in the comment threading that comes with 2.7.

    But yes, I will be updating the older themes and Surreal Reality will top the list. :D

  31. Alan Kellogg says:

    I know they will, I just like the extra functions. :)

  32. Alan Kellogg says:

    BTW, I just noticed something. no “/body” tag anywhere to be seen in the index.php file.

  33. Alan Kellogg says:

    Found the ‘/body’ tag, in footer.php where it belongs. Do I feel . . .

    BTW, here’s a bit of PHP WordPress Stats needs to function. Goes into the footer file just above the ‘/body’ tag.

    wp_footer();

  34. ToubiV says:

    Hello Mina,

    first, I want to say that you made a cool, flexible theme which I like to use on my (german) page.

    I costumized it a little bit, mainly the color scheme, so that it fits to the rest of my page.

    But there is one little problem: I want more space for the main content column, so I decided to comment out one of the three other columns. But how do I now broaden the main content column.

    When you look on my blog you can see it. On the right is still the free space, which I’d like to use for the main content column.

  35. Mina says:

    Hi,

    Your site looks good!

    Go into style.css and find these 2 lines (the bottom one is for that nasty IE):

    #container { float: left; width: 45%; margin: 15px 0 0 25px; padding: 5px 0 0 0; border: #dcd7bc 1px solid; border-top: none; border-bottom: none; }
    *html #container { width: 45%; margin: 15px 0 0 15px; border: none; }

    And change the width percentage keeping in mind to change both settings accordingly.

  36. ToubiV says:

    Wow, thank you for the very fast answer! A little try and error to get the right percentage fixes the problem! Cool.

  37. Annemieke says:

    Hi Mina

    Today the right sidebar of my surreal reality theme dropped to the bottom of the page. Do you have any idea what could have caused that.

    Thank you in advance,
    Annemieke

  38. Mina says:

    Annemieke,

    I went to check it out and I’m not seeing that happening on any browser I try. Is it sitewide or on one specific page?

  39. Annemieke says:

    Wow, that was a fast reaction. I went back to say that suddenly everything was right again and saw you already reacted. I was hours busy trying to get the sidebar up again, and finally thought I might ask you.

    Thank you very much for your reaction, but I am so very happy it did get right again, even if I have no idea how that was possible

    Annemieke

  40. harunist.jak says:

    I love its 2 sidebars on left. and wish to change the body color with white colors. Is it eligible?

    thanks alot,

    H

  41. Dear Mina,

    Surreal Reality is the best theme I’ve ever used on a blog. THis is the first time I’ve ever used more than 2 colums and your template makes it easy.

    I’ve actually considered switching all my blogs to use it. (probably not though)

    I created a PhotoShop Action that blends my pictures into the gray background so the posts are seamless.

    Thank you for a great job. Check your tip jar.

    Gregg

  42. Hi, firstly I want to say I love the theme and use it on two blogs. I am having a bit of trouble. I am trying to put an image in the background of the header but it keeps repeating.The main image to the left then a part of the same image appears to the right.

    Do you have any advice or the code I could use. Sorry to take up your time, any help would be appreciated.

  43. Tine says:

    Good morning Mina!
    This past month I have put up WordPress and love Surreal Reality! I’ve made a number of changes and added in plugins. However, I’m having 2 issues that I thought you might have an idea about.
    1. I can’t get the comments to work. (I change to the generic template and it’s ok.)
    2. How do I get multiple posts to show? Unless I’m in admin, I can’t see old posts.
    Any input would be greatly appreciated.
    Thanks,
    -tine

  44. Mina, thanks for the prompt reply. I will try your advice and let you know how it went.

    Many thanks for your time.

  45. Mina says:

    Hi,

    To change the body color go to Admin >> Appearances >> Editor >> style.css and find this line:

    body { margin: 0; font-size: 10px; text-align: center; vertical-align: top; background: #f1efe4; color: #6b6b47; } and change the background value to background: #fff;

  46. Mina says:

    Gregg,

    I’m so glad you like it, thanks for the nice words.

    Oh yeah…my tip jar IS looking a little fuller! Thank you so much, I really appreciate it. :D

  47. Mina says:

    Hi,

    Are you trying to get the image to fill the entire background? Adding you image to the #header css should accomplish that. See the bolded code below for the change:

    #header { float: left; width: 99%; min-width: 800px; height: 150px; background: #bcbc9a url(images/BGIMAGE.jpg) repeat; padding: 0; margin: 0 auto 0 auto; border: #dcd7bc 1px solid; border-bottom: none; }

    Am I misunderstanding your question?

  48. Mina says:

    Tine,

    1. Exactly what kind of problems are you having?

    2. They should be showing…Go into Admin >> Settings >> Reading and see what is says for “Blog pages show at most“. It might only be set to 1, change that to however many posts you want on a page and save.