Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Looking for New Theme Similar to MistyLook

  1. bcphotoadventures
    Member

    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.

    TBC

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

  2. panaghiotisadam
    Member

    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.

  3. justjennifer
    Member

    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?

  4. bcphotoadventures
    Member

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

    TBC

  5. bcphotoadventures
    Member

    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.

    TBC

  6. bcphotoadventures
    Member

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

  7. timethief
    Member

    @bcphotoadventures
    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.

  8. thesacredpath
    Staff

    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;
}

  9. bcphotoadventures
    Member

    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).

    Thanks!

  10. thesacredpath
    Staff

    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.

  11. bcphotoadventures
    Member

    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!

  12. thesacredpath
    Staff

    You are welcome.

  13. hallluke
    Member

    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;}

  14. bcphotoadventures
    Member

    Halluke,

    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,

    TBC

  15. hallluke
    Member

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

  16. bcphotoadventures
    Member

    Hallluke,

    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.

  17. hallluke
    Member

    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;}

  18. bcphotoadventures
    Member

    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,

    TBC

  19. bcphotoadventures
    Member

    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!

    TBC

  20. hallluke
    Member

    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.

  21. bcphotoadventures
    Member

    I'm sorry for giving you the incorrect website, and yes, because I could not make the header photo work, I finally removed it. I was either getting none or two.

    I redid it and looked carefully to make sure everything was in the right spot. Sometimes, something else sneaks in there. It all worked this time, so now I can nudge and play with the font settings until I get it to my liking.

    Again, many, many thanks!

    Take care,

    TBC

    http://BCphotoadventures.wordpress.com

  22. mentalxpress
    Member

    Thanks this helped me out 2 :-) now my blog looking pretty :-)

  23. susanmacewen
    Member

    Thanks for posting these questions @bcphotoadventures. I have been wondering about how to make some simple changes to my blog as well. Maybe it is time to explore something new.

  24. bcphotoadventures
    Member

    Everyone is so helpful, and sharing knowledge is a grand thing. I have one more item to explore to reduce the huge space at the bottom of the blog where the calendar and copyright information, but with digging and delving, I hope I can find it.

    Glad my questions helped you, too!

  25. bcphotoadventures
    Member

    Everyone is so helpful in the WordPress fori, and sharing knowledge is a grand thing. I have one more item to explore to reduce the huge space at the bottom of the blog where the calendar and copyright information, but with digging and delving, I hope I can find it.

    Glad my questions helped you, too!

  26. hallluke
    Member

    #extended-footer .block {width:296px;}

  27. bcphotoadventures
    Member

    Hallluke, As always, you've been a great help. In fact, I alluded to the very supportive WordPress forums on my blog at http://BCphotoadventures.wordpress.com.

    Take care, and thanks to all for the great job you do,

    TBC

  28. bcphotoadventures
    Member

    SacredPath & Hallluke,

    Thanks to you two in particular, I really like the way my new theme on my blog is looking (http://BCphotoadventures.wordpress.com), and I have received very positive comments on the update.

    However, I have one further tweak I'd like to make. The two navigation links for the blogs before and after the current one are hard to see. I'd like to put them at the top. Is this possible? If not, can I make them a different font color? My problem is that while I am conversant with css, I don't know where this is addressed in the style sheet. My theme is Bueno.

    Thank you, I hope,

    TBC

  29. hallluke
    Member

    Try the following, it should move your likebox too, you can always change the spacing values:

    #main .post {padding-top:120px;}
#nav-below {position:absolute; top:0; width:516px;}
#main #wpl-likebox {top:70px; left:50px;}

  30. bcphotoadventures
    Member

    Hallluke,

    Once again, fabulous input. You are always spot on.

    For those who are interested in making a similar change, I tweaked Hallluke's code, adding the following below the #main { section ...

    #main {
    position:relative;
    width:620px;
    }

    #main .post {
    padding-top:120px;
    }

    #nav-below {
    position:absolute;
    top:0;
    width:516px;
    }

    #wpl-likebox {
    position:absolute;
    top:70px;
    left:50px;
    }

    Thank you!!!

    TBC
    http://BCphotoadventures.wordpress.com

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags