Adding left side-bar to ‘Wu Wei’ theme
-
oh, forgot to bring this up again:
i noticed that when i put the cursor over the menu, an orange bar appears on top of the menu tile highlighted and the grey sub-menu box(es) is(are) shown.
do you know if it is possible to reset the width of the grey box so that it is the same as that of the orange bar on top of the menu title?
many thanks.
-
Its late so this is probably awful but try it to see how you get on:
.menu-main ul ul a {width:105px; line-height:1.2em; padding:2px 10px 6px;} .menu-main ul ul li {min-width:125px;} -
thank you and sorry to keep you up hallluke! it’s not awkful at all. it works perfectly!
thank you very much for your guidance.
i think my blog is nearly ready to be launch now in terms of content (exciting!). though i discovered a bug in the process of sorting out the layout. it is to do with the menu. when i put the cursor over any menu bar that has more than 1 sub-menu, i cannot see the full list of sub-menus. i can only see the first title of the sub-menu. when i move the cursor towards the title, it disappears. i cannot click the menu nor sub-menu.
this problem does not happen to menu bars with one sub-menu.i have reported it to the admin team. they confirmed that it is a bug related to this theme for users who use internet explorer 7. they said they are looking into it but it is unclear how long it is going to take. i can understand that it probably depends on the complexity of the bug and availablity of resources to solve the matter.
just wondering, is there any CSS code that can overwrite this problem? i was going to wait for the bug to be resolved before launching the blog. but i’m getting a bit worried that it might not be solved until quite some time. :(
-
I’m afraid I probably can’t help much seeing as I use a macintosh and can’t check in IE. Your blog only uses single level drop-downs at present so it shouldn’t cause too much of a problem at this stage.
One thing I would recommend for readability is to left-align your text. It looks like you’ve gone through every post and added in the justify styles to each paragraph but it can be overwritten with the code below. It is only a suggestion, but everyone, especially people with sight problems, find text easier to read if the space between words is constant. This isn’t too much of a problem for most of your site but if you look at the first paragraph in your Falafel post (yum) because of the way the words fall the spacing looks messy. Just an idea though!
.post p {text-align:left!important;} -
Thank you for your suggestion.
I noticed that problem with the text spacing too and it is also bugging me. I originally prefer ‘justified’ because it looks neater with the alignment in terms of layout. thesacredpath wrote me a code to make all the text ‘justified’ but I noticed the problem with the spacing. After discovering that actually that is a function key for the ‘justified’ mode in the expanded ‘Visual’ menu, I then also ‘justified’ the text in each post, hoping that the spacing would improved. Unfortunately, it does not!
What I don’t understand is with Word, if you use ‘justified’, the spacing bewteen the words are less uneven than with WordPress. Why is it so uneven here?
If I were to keep the ‘justified’ setting, do you know if there is any code that can make the spacing more even? Other blogs, e.g. http://smittenkitchen.com/, which also uses ‘justified’ as well but it does not seem to have that spacing problem. :(
-
I think it is just the sentence and word length, try rephrasing it a little bit and see if the words fit the line any neater.
-
that is a good idea. i just need to adjust the spacing manually when i do the proof reading. thanks for the suggestion.
do you know whether it is possible to shift the menu-bar so that it aligns with the left side of the left bar? thanks!
-
Something along the lines of the code below. These flexible width themes are a pain to customise with CSS!
.full-column .center-column {padding:0; margin-left:-42em; left:50%;} -
Fantastic! it works beautifully and with the extra length, I can add one more item to the menu. Thank you! You are a genius!
Do you happen to know how to move the header image up a bit too? There is a big gap between the menu bar and the header image itself.
The header image default size is 700 x 144 for this theme. The logo I have doesn’t have 144px in height. I have to put some white in the header image, above and below the logo, to meet the height. As a result, there is a big gap mentioned above. I know I can put more white at the bottom of the logo but the spacing won’t work as good if I do.
If the margin between the menu bar and the header image can be reduced, it would be wonderful. Is it possible?
-
The code below will remove the top and bottom padding from the header, the other alternative is to upload your header image without the white spacing yourself.
#header {padding:0;} -
thank you hallluke, the code definitely helps.
i’ve also shifted logo up in the overall header image. the new arrangement significanly improve the home page as it is less top heavy. thanks a lot for your help!Another question about the home page. Half way through some of the longer post, I have added the <!–more *> tag cut it short for the home page. Ideally, I would like it closer to the main content but thesacredpath said it is not possible.
I have shown the Home page to a few friends and watched how they read. All of them failed to realise the ‘more’ tag as it is too far away from the main body. As a compromise, I added a symbol […] in the text just above the more tag. When the main content is expanded, however, the symbol continues to appear in the main body of the article. My question is: Is there a symbol I can use, which is similar to […] but it is only visible on the Home page, not in the expanded article? Thank you!
-
Add the following to your CSS and the more text will appear in the paragraph that appears directly before. This should make it more obvious to readers that they can click to view the rest of the article. Either that or move your more tag to be earlier in the post. If the article seems to end before it has even got started people will be hungrier for more (hopefully) and click through to read the rest of the post on the permalink page.
In my own portfolio blog I use the more tag to hide things like images and code that would otherwise make the page take longer to load. I’d recommend giving this approach a try. Maybe have one picture and a couple of paragraphs before the break and then have the rest of it available after clicking the more tag or the title of the post.
It is a little bit more work for your visitors but the excerpt you provide should be enough for them to decide if they want to carry on reading or not. The advantages are that you can track which specific posts are most popular (the post will show up with a view in your blog stats rather than just for the home page) and it should also help you focus your writing skills to create engaging introductions for each post (not that they aren’t already!)
Let me know how it goes.
-
Completely forgot to post the code after rambling on:
.more-link {display:inline; margin:0;} -
thanks hallluke! that is exactly how i want the ‘more’ tag to be placed!
and thanks for the tip about where is good to put a tag. it is a good practice for myself to write like this, otherwise the reader might get bored! i have edited a few posts accordingly. it does motivate me to write more interestingly in the first paragraph and post a more attractive 1st photo to capture the attention!
unfortunatley, the bug problem with the menu bar when the blog is read via IE is still not solved. i think i might have to launch the blog without it as i would love to find out about the statistics too! since IE still have a over 50% coverage of the market, it is a problem i can’t ignore.
as a compromise, i have removed all sub-menu from the top menu bar. And,
with the widget, i have chosen to list all catogries out and chose to ‘show hiearchy’. however, it is unclear where one has a higher hiearchy. is there any code that can be added to put those with higher hiearchy in bold orange? thanks. -
I’d recommend adding bullet points and some indentation instead, it makes it a bit easier to tell the relationship between all the categories. I think your site looks really great so far!
#footer-widgets #categories-5 li ul li {list-style:inside circle; padding-left:10px;} -
Thanks. You guys helped me to make it look good- so a big THANK YOU!!
About the bullet points and indentation- that’s a good idea. It is much clearer-Thanks for suggesting. One little request- is it possible to have the bullet points in a smaller orange dot instead of grey circles? :p
Athe moment, the categories are arranged in alphabetical order. What do I need to do in order for them to appear in the same sequence as the menu? Thanks!!
-
I’m not sure if this is an option using the regular Categories widget. You could perhaps try using the Custom Menus or Text widget instead. Create a custom menu, order the category pages however you like, drag the child categories across so they appear indented and then name and save the menu. Then on the widgets page, select the menu you just saved and it should appear on your blog in the oreder you specified. You’d need to slightly change the CSS I posted above. To display an orange bullet you’d need to create an image of one and upload it to your media gallery.
Once you’ve done this post the URL to the image here (and add change the widget if you want to), then I’ll take another look and give you the updated CSS code.
-
Thanks Hallluke!
Good idea. I did not realise there is a Custom Menu widget. I just created one and showed it.
I can create the orange dot later tonight. Do you think putting extra images like these will slow down the loading of the page? If so, is it better to just have the indentation not the images of the dot? Thanks.
-
Hi. I just uploaded an image of an orange. (dot.http://winkypedia.files.wordpress.com/2010/11/dot.png)
Any good?
Thanks!
-
The image is tiny and it only gets loaded once per visit as most people’s browsers will add it to the cache and not download it for each new page view. This is the code you will want to use, however I think the gray circles look better!
#footer-widgets #nav_menu-3 li ul li {list-style:inside url("http://winkypedia.files.wordpress.com/2010/11/dot.png"); padding-left:10px;}
- The topic ‘Adding left side-bar to ‘Wu Wei’ theme’ is closed to new replies.
WordPress.com Forums 
