Looking for New Theme Similar to MistyLook

  • Author
  • #575757

    I love MistyLook (see http://BCphotoadventures.wordpress.com), but there are a couple of things that drive me crazy, and I’m sure there is another similar theme that would address these frustrations.

    First, there is no comment box below the article on the home page. Many people don’t know to click on the article title to get to the Comments box.

    Secondly, the Like icon is tiny and well hidden. I’d like to make it easy for people to Like my blog.

    Any suggestions? I would still like to have the banner across the top and the flexibility of MistyLook.

    Another option, and I don’t know if it is possible, are there simply a couple of lines of code I can insert into my theme and have these two issues resolved?

    Thanks to anyone who can help.


    The blog I need help with is bcphotoadventures.wordpress.com.


    1) There’s a “Leave a Comment” or “N Comments” tab below each post. That’s what all themes display on the main page.

    2) The look of the Like icon is standard.



    P2 is the only exception. It’s the only theme (so far) that shows comments on the front page. http://theme.wordpress.com/themes/p2/

    But, if you have long articles and show a number of articles on your front page, having comments visible on the front page too will make it less likely that I’d scroll down to see what else you have. Just saying.

    But, having said that, the link to comment on a post on your front page really needs a little love. It’s almost tacked on to the tags and easily overlooked. If you have the CSS upgrade, why not give it a little extra white space or make the font a bit bigger?


    Thank you both for your input. I’ll nudge around with the HTML/CSS and see what I can manage.



    Another question or two:

    Under what heading is the comments dealt with? I scrolled carefully down the list in the CSS but couldn’t figure out which one to change.

    Also, is there a way to change the order of Categories and Comments, since the run together, and I would like to place Comments and some “white space” first?

    Again, thanks, I hope.



    And I’d like to change the position of the Like button, since it’s so tiny and gets lost at the bottom.



    I will flag this thread for you so it gets moved to the CSS Forum. We have only 2 Volunteers who help with CSS so please be patient while waiting for them to help you.


    The version of Mistylook here is a very old version, and the CSS is not organized to allow the changing of all the metadata separately. The metadata below the post is all together under one selector in the CSS, which means if you change the font side, all the metadata below the post (categories, tags and the comment link) will all change size.

    Again, due to the fact that the metadata is all under one selector, separating or moving the “comments” link is not possible.

    To do either of the first two things you want you would have to hack the underlying theme files, and that cannot be done here at wordpress.com.

    On moving the like button, that can be done, but it is tricky since you would have to use position relative and that means that the position (since it is now below the tags/cats) will be dependent on the height of the divs now above it. Hallluke might have a way to minimize the issues I see since he has a lot more experience with CSS. This is just a suggestion below on making the area of the like button stand out a little more. You might give it a try and see what you think. Hopefully hallluke will drop by and have an elegant answer, but we need to know where you are wanting to move it at the very least.

    #wpl-likebox {
    background: none repeat scroll 0 0 #D8EDED;
    border: 1px solid #000000;
    padding-left 10px;
    #wpl-button {
    border: 2px solid #CC0099;

    You are always very helpful, and I was hoping you would weigh in along with the others.

    I would love to put the Like button at the top, just under or beside the blog title.

    Do I understand from you that there is possibly a new version of MistyLook? When I looked, it seemed not.

    And if not, what theme(s) do you think might fit my needs? I’ve been looking at several that seem to have the most flexibility, but I’d love your input, too. A photo header is a must and unlimited widgets (within reason, of course).



    I’m pretty sure @hallluke can do this where there will be minimal issues as I’ve seen him do it before, but can’t find an example or I would try and hack something together for you. Hopefully he will pop in and take a look. I just haven’t looked closely enough at his solution to understand what he did.

    It is unlikely that wordpress will upgrade to a later version of mistylook since even a minor change in things here would send people into a tailspin in search of pitchforks and torches, especially since MistyLook is so popular here.


    Once again, thanks! I do understand about those pitchforks and torches, not to mention tarring and feathering and boiling oil from a great height. No point looking for trouble!


    You are welcome.



    Try the following code to move your like box to under your blog title on permalink pages. You might want to change the distances I’ve used until you find something you are happy with. The example should work fine when your blog post titles only take up one line, it’ll look a bit odd if it takes up two lines and it will break the positioning if it takes up any more so long post titles are something to be sure to try to avoid.

    #wpl-likebox {position:absolute; top:55px; left:0;}
    .post {position:relative;}
    #content .posttitle .post-info {margin-bottom:40px;}

    Here’s a modern browser work-around for styling the comment links sepeartely from the categories to make them a bit easier to find:

    a[href$="/#respond"], a[href$="/#comments"] {display:block; font-size:1.4em; font-weight:bold; padding-top:5px;}
    a[href$="/#respond"]:hover, a[href$="/#comments"]:hover {border:none; text-decoration:underline;}


    Thank you for chiming in. As you saw above, others active in this forum trusted you to come up with a solution.

    Now that I know about the import/export of my blog to my test one, I can try, try and try again until I get it to look the way I want. Thanks for the heads up on the issue with titles taking up more than one line.

    Take care,




    Let us know how you get on or if there’s anything else we might be able to help with. Good luck!



    One more question, since you are so helpful on CSS. I have switched my blog (http://BCphotoadventures.wordpress.com) from MistyLook to Bueno, and I have wrestled most of it to my liking.

    Several outstanding items:

    I would like to decrease the space on above and below the search field top right.

    I would like to put a “Like” button somewhere near the title of each blog.

    I would like to customize the size of my header photo as I did with Sacred Path’s help in MistyLook. Also, it is not centered but nudged to the right.

    I can’t seem to find where the font is for the search label. Right now, it is dark on dark.

    Finally, in the widget place at the bottom, the background is an incompatible blue. I would like to change that to a transparent background or a ghosted version of my background, but I am not finding where that code is.

    Many thanks for any help you can give. I have other questions, but I should be able to figure them out on my own.



    I think this just about covers it! If you change themes again you might need to get your own hands dirty with the CSS. It’s not too hard to learn and there are some excellent resources out there. There’s a line in the code below which will wrap your post titles to multiple lines so they don’t get in the way of the repositioned like-box which should mean title lengths aren’t so much of an issue.

    body #header {padding:10px 0;}
    body #description {width:400px;}
    #main {position:relative;}
    #wpl-likebox {position:absolute; top:28px; right:50px;}
    body .post .title {width:60%;}
    #header-image img {display:none;}
    #header-image {height:200px; width:910px; background:url("URL"); padding:0;}
    #pagenav {margin-bottom:10px;}
    #searchform input.submit {color:#fff;}
    body #extended-footer {background:transparent;}

    Thanks, Hallluke! Between you and TheSacredPath, the information I have received is most useful.

    I know htm, php, css, etc., as I designed my website at http://www.BCphotoadventures.com from scratch. That said, as you well know, templates have some things hidden, which is where I run into challenges. The mark-up I am used to is not necessarily in the same form as blog mark-up.You saw from my blog revision thus far how much I changed things, so this should help round things off.

    Again, many thanks to all who chimed in, and especially to you two,

    Take care,



    OK, this was a HUGE help. One final question. Clearly, I did not implement the code for the header image correctly. What did I do wrong at http://www.BCphotoadventures.com ?

    At least now, it looks much better, save for the omission of the header photo.

    Thanks again!




    http://www.bcphotoadventures.com/ is not a WordPress.com blog, the code I gave you was for http://bcphotoadventures.wordpress.com and CSS is always specific to the site/theme you are using.

    Did you delete your original header photo? The code I gave you requires a header photo present so it can take advantage of the added markup in the underlying theme code. Try adding one back in again AND using the CSS to hide and then re-display it.

The topic ‘Looking for New Theme Similar to MistyLook’ is closed to new replies.