Help with MistyLook CSS
-
HI guys!
I need some help with MistyLook’s CSS, I’ve purchased the CSS upgrade for my WordPress.com blog.
I’ve edited the CSS to create my design but I’ve seen some issues pop up ….
First thing is with the search results on my blog, my static pages are out of alignment compared to regular posts. Here’s a link to the search results with the problem, the “Social” result is the one in question – http://radishtm.wordpress.com/page/2/?s=anime
Next thing is I’ve seem to have lost the “Reply” link next to the timestamp of a comment, so no threaded comments. IIRC the original MistyLook on WordPress.com had this?
What part of the CSS will allow me fix these things? Thanks for any help you can provide in advance!
The blog I need help with is: (visible only to logged in users)
-
I took a quick look to your CSS, and you’re duplicating selectors that are already defined in the default CSS. Example:
* { margin:0; padding:0; }That’s an overkill.
I’d recommend you reading this:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
I’d also encourage you to clean your CSS up and leave ONLY your changes.
First thing is with the search results on my blog, my static pages are out of alignment compared to regular posts.
Are you talking about the menu bar tabs (i.e. Home, About, etc)? What browser are you using?
Next thing is I’ve seem to have lost the “Reply” link next to the timestamp of a comment, so no threaded comments.
Go to Settings > Discussion and in “Other comment settings”, make sure “Enable threaded (nested) comments” check box is checked.
-
Thanks for the heads up about duplicating selectors. I’m new to CSS, I’ll have a look through it to clean it up.
I’ve linked an image to show you what I mean about the search results – http://localhostr.com/files/e63eb5/alignment.jpg
In the image, the top result is a page/tab next to Home, About etc … While the bottom result is a regular post. I’m using Firefox 3.6.2 at the moment.
And that check box wasn’t enabled, all is well now. Thanks for the help so far :)
-
-
Sorry for the delay, I’ve been swamped in work.
Find these selectors in your CSS:
#content .post { border-bottom:#cccccc 1px solid; padding:0 20px 10px; } #content .post h2 { font-size:1.2em; font-weight:bold; }And add them these respectively:
, #content .page , #content .page h2So, they should look like this:
#content .post, #content .page { border-bottom:#cccccc 1px solid; padding:0 20px 10px; } #content .post h2, #content .page h2 { font-size:1.2em; font-weight:bold; }Then, add this selector definition to your CSS (right below “#content .post h2, #content .page h2” should be fine):
#content .page h2 {margin-top: 15px;}That should fix your issue.
Note:
In the definition of your “li.sidebox h2” selector you have:
padding-left: 5.75px;Pixels are absolute values, so 5.75 is incorrect.
HTH
-
Awesome! That piece of CSS did the trick, it was really irking me that it was out of alignment. Thanks so much devblog! :)
And I changed the “padding-left” to 5px as an absolute value.
I’ve got two more questions that I’m hoping you can help with ….
1. http://localhostr.com/files/f14004/search%20results%20title.png – Where it says “Search results for ….”, is it possible to align that/edit the text or is that part of the theme’s HTML (which I can’t change)?
2. I’d like your opinion on how to make the tabs at the top for my pages and the search bar/button more uniform as it were. Does that make sense? Or is it fine like the way it is?
Thanks in advance again!
-
Glad to be of help.
1. Align, yes; edit, no.
2. I think they look uniform enough. What I would do, though, is make the search field a bit higher to match the height of the Search button as much as possible.
-
1. Which selector would allow me to align this?
2. I’m trying to make the search field a bit higher but it unfortunately gets cut off at the top.
What are your thoughts on this very quick mock-up I made for the search?
Yes or no? What I don’t know is if that is possible with CSS, I’ve been trying with margin/padding but most of the time the search box goes below the border of the main body.
-
-
I’ve seen your screenshot but the only thing about having the Search field and Submit button like that is that it may confuse people thinking that they’re pages because your pages tabs are styled like that.
Now, before pasting the code I’m going to give your, find these selectors and delete them (they’re duplicates from the original CSS)
input.textbox { border:#cccccc 1px solid; background:#ffffff; font:1em Arial, Serif; color:#000000; } .textbox:focus,textarea:focus { background:#ffffff; border:#cccccc 1px solid; }Having done that, paste these selectors:
#searchform { clear: both; } #searchform .textbox { float: left; height: 16px; padding: 5px 2px 2px } #searchsubmit {float: right;}They should align the Search field and Submit button and will make the Search field’s height the same as the Submit button’s.
Now, regarding the alignment of the “Search results for” title, when I gave you the answer, I didn’t realize that aligning that title would affect other titles in other pages. Unfortunately, the theme you’re using doesn’t have different classes that would help identify which page the user is seeing (something that Sandbox does).
HTH.
-
Apologies for not replying earlier, I was busy with work unfortunately.
Anyway …. Entered the code you posted and it worked somewhat, looks more uniform in IE than it does in Firefox.
In Firefox, the search button goes down longer in length a pixel or so. While in IE, it’s a pixel shorter. Related to how they render pages or CSS?
http://localhostr.com/files/dd7150/ie.png
http://localhostr.com/files/daf4f9/firefox.pngThanks for the explanation about the “Search Results”, guess that’s one thing I’ll live with :P
-
That’s probably because of the Box Model. I will need to install your changes on one of my blogs so that I can make sure the changes work on all major browsers. If you don’t mind waiting, I’ll tackle this between Thursday, Friday or Saturday this week. If it wasn’t as hectic for me as it is now, I’d do it sooner.
-
-
Okay, add/modify the following selectors accordingly:
#navigation { font-family:Arial, Serif; height:26px!important; } .search {width:250px;} #searchform { clear:both; overflow:hidden; } #searchform .textbox { float:left; background:#ffffff; height:16px; border:1px solid #cccccc; font:1em Arial; width:160px; padding:5px 2px 0; } #searchsubmit { float:right; height:23px; width:70px; padding:2px; }This code should make the search box and button more uniform across different browsers. Those I tested this in were:
IE6
Firefox 3
Flock 2.5 (uses the same engine as Fx so the blog should look the same in both)
K-Meleon 1.5.3
Chrome 4.1.249 (blog should look the same in Safari since they both use the same engine)In Opera 9.0.1 the search box’s height looks smaller, its box model is different to that of the other browsers. You’d need to use a “hack” (I hate those things) to make it “behave” but wp.com would strip it off… I don’t like it, but it still is functional.
HTH
-
-
-
Added the selectors and it looks uniform! devblog, you rock! :D
Though, one thing that is odd. When you type text inside the search box, it’s lower than usual. Tried it in different browsers as well, is this related to the margin for #searchform .textbox?
BTW, is your avatar from Bleach by any chance? :P
-
Think nothing of it.
Though, one thing that is odd. When you type text inside the search box, it’s lower than usual. Tried it in different browsers as well, is this related to the margin for #searchform .textbox?
It’s the padding. You can modify it by changing the values to both height and padding accordingly. For instance, if the current value of the height property is set to “23px” and the current “padding-top” value is set to “5px”, to make the text a bit higher than what it is right now, then you would need to do something like this:
height: 25px; padding-top: 3px;Notice the 2 pixels I took from “padding-top” I gave them to “height”. In browsers like Fx, IE, Safari and Chrome, the height and width are affected buy their padding. You can clearly see this behavior in the search text field. If you wanted the text field to have a 28px height, but you defined its top and bottom paddings to 5px, the text field element would actually be of 38px height; therefore, you need to compensate.
Opera does not behave like this.
HTH
Yes, that’s Kurosaki Isshin, I just love his expression there… he’s so goofy.
I’m a fan of anime and manga, and some of my favorites are (in no particular order):
Naruto/Naruto Shippuden
Gurren Lagann
Märchen Awakens Romance
Eureka Seven
Death Note
Neon Genesis Evangelion
xxxHoLic
Love Hina
Black Lagoon:D
-
Awesome, thanks for that tip (and of course, all the previous help :) ). I’ll play around with the height/padding.
I thought it was crazy Isshin after rotating my head (LOL) and you got some of my favourites in there too :D
- The topic ‘Help with MistyLook CSS’ is closed to new replies.
WordPress.com Forums 
