Adding left side-bar to ‘Wu Wei’ theme
-
Hi
I really like the the Wu Wei theme. The trouble is it has no left side-bars. In fact, it does not have any side-bar. I am a beginner and not an IT talent. Does any one know how I can edit CSS to achieve that?
Many thanks for your help!!
Regards
Winks -
Try the code below which will move the footer widgets and position them on the left of the main content. I only used an example using one widget on my test blog as yours is set to private, I’m not sure how it will work if you use the other footer widget areas but it should be fine:
.center-column {position:relative; padding-left:19em;} #footer-widgets {position:absolute; left:0; top:0; width:18em; border-top:none;} -
Thanks hallluke!
Knowing that it might be possible to do add a left side bar , I’ll now purchase the upgrade and give it a go.
May I ask some stupid questions:
Do I just choose ‘ Add this to the Wu Wei theme’s CSS stylesheet (view original stylesheet)’, then copy and paste what you have written above and hit ‘preview’?Do I have to write anything else?
Thanks a lot!
-
I just tried the ‘preview’ function of CSS.
I have widgets for footer left, middle and right. They all move to the left side like a left side bar. First step to success!
The next question is: Would you know how the CSS could be edited so that the top of the first widget of the ‘footer left’ aligns with the top of the main content? At the moment, it aligns with the top of header, which is an image I have uploaded.
Thanks a lot for your help. It is very encouraging already!
-
Invite me in to see your blog and I will take a look. I’m far too lazy to keep messing around with my test blog as there are many ways I could set it up to be different from yours. I imagine that all you need to do is change the code I gave you above so that instead of it saying top:0; the number is replaced by the height of your current header in pixels, for example:
top:100px; -
-
You need to set a combination of pixels and ems to fit the way the theme is made. Try the code below:
.center-column {position:relative; padding-left:19em;} #footer-widgets {position:absolute; left:0; top:144px; width:18em; border-top:none; margin-top:4em;} -
Hi!
Thanks for the revised code.
I tried copying and pasting it in the ‘CSS Stylesheet Editor’ and hitting ‘preview’ again. Unfortunately, the position of the top of left side bar looked identical to the one generated by the first code. I tried increasing the value from top:144px to 600 or even 1000 just to test the effect but it remained the same. Do you know what else I can try?
Another thing I noticed is that looking at the preview page with my computer at work, the spacing between the left side bar and the main content is good. But when I look at it with my computer at home, which is less old, the left side bar overlaps with the header image and the main content. Would you know why?
Thanks a lot for your help.
-
Hiya,
Just wondering: does anyone know the answer of the questions above please? Thank you very much for your help.
-
The problem is I can’t see the blog so I have no idea what else you have done via the CSS. I just tried Luke’s code and changed the “top” value to 270px and it is close (at least if you want the widget aligned with the title for the first post).
With the preview, it has been wacky lately so when you hit preview, always make sure and reload the preview page again. That seems to get it to display the changes. Here is the code I put into my test blog at http://flippintestblog.wordpress.com/ .
.center-column { position:relative; padding-left:19em; } #footer-widgets { position:absolute; left:0; top:270px; width:18em; border-top:none; margin-top:4em; } -
Thanks thesacredpath for your tips. The alignment on your test blog is exactly what I would like!
Though when I copied the code and pasted your code into mine, the left side bar shot up again. I have added you to the viewer’s list. Would you mind having a look please?
Sorry not to put the blog public yet. I feel a bit ashamed to show it to everyone when I only have 2 articles written, not to mention not having the basic layout set up.
Thank you very much for your help.
-
thesacredpath- i retried this at home and kept hitting refresh until i could see any changes- it finally worked!
i found that i need to have top: 162px. it turned out the problem was, like you said, with the ‘preview’ not the code.
hence, hallluke’s 2nd suggested could have worked too!
big kisses to you both. thanks a lot!!
btw, thesacredpath- i noticed that the menu of your test blog of Wu Wei has larger size font than default setting. how do you do that?
-
Glad you got it sorted and you are welcome.
I’m seeing the same sized font on both blogs, but if you want to increase the size, you can through the CSS. Add this to your custom CSS.
.menu-main a {font-size:1.1em;margin-right:1.819em; } .menu-main {width:63em; }You can play with the 1.1em value, but the larger you make the font the more that will be pushed to the second row. The margin-right: you can also play with to tighten up spacing on the navigation tabs if you need to.
I added the second line and increased the width of the menu area so that it extends to the right size in alignment with the right side of the header.
-
thanks thesacredpath! you thought one step ahead! :)
i played around with the font size setting and i noticed that by making it the font bigger, say 1.5em value, part of the 3 pull down sub-menu disppears. is it because the fonts are so big that the originally space assigned runs out?
i also noticed that i have the same problem with what other posters mentioned in other thread: generally speaking, when there is more than 1 pull down sub-menu, the cursor can only reach the top sub-menu. as soon as i try to move the cursor down, the ones below the top sub-meni disappeared. i wrote to support to ask about this a few days ago but haven’t got a reply yet. do you know if there is a way to solve this?
finally,it seems that there is no option for the text alignment to be ‘justified’. there are options for align left, align right or centred. do you know how to achieve that?
sorry to ask you so many questions. i’m like a toddler learning how to walk in the field of blogging! i can’t thank you enough!!
-
i originally uploaded images directly onto WordPress then post it align left, full size (460 × 370). the left/right of the main content aligns with the left/right side of the image perfectly.
my friends suggested it is better to uploard images from Flickr via URL for future extension. so i tried. and that introduced an extra problem/challenge! The Flickr upload size does not have 460×370, the nearest is 500×367. This means when the image is uploaded, the photo no longer aligns with the text on both sides. it protrudes out on the right (if i choose align left)! Is it possible to increase the width of the main text so that the right side of the image aligns with the right side of the text?
i don’t mind making the ‘Permalink’ on the left of the main text smaller in order to keep a sensible screen size for reading.
thanks!! sorry to trouble you again!
-
[rant] I really don’t like it when designers use em units for widths, margins and padding. It makes it far more difficult considering images are in px. [/rant]
Add the following to your CSS to widen the content area for 500px images.
.center-column {width: 62.334em; } .post-content {width: 42.333em; }Also, in the “image width” box that is below the CSS edit text area, put 500px in there as the maximum image/video width.
As far as the font size goes in the navigation, you can go up a little, but once you get to a certain point, then other things have to be adjusted so that nothing breaks, things like line heights and widths, margins, padding, etc.
-
If you let me know the size you want the font in the navigation I can work out what else needs to be adjusted so that everything works.
-
Thanks thesacredpath! Because of your help, I finally feel confident about setting up the blog and I have officially upgraded with CSS editing!
i’ve adjusted the 500px setting. It looks good. thank you! do you know how i can have ‘justified’ alignment with the main text? it doesn’t look like there is a default option.
with the top menu, i would like to have font-size:1.3em please, if it is not too difficult to set up.
thanks a million!
-
You are very welcome.
For the justified text, add
text-align:justify;to .post-content .I’ll work with the nav and post back with the changes shortly.
-
Under .menu-main a change the margin-right to 0 (no em units) and under .menu-main change the width to to 68em (110 is too wide and causes a horizontal scroll bar to appear in the browser). The last bit (padding-left in .center-column is to put a bit more space between the sidebar and the area where the post titles are. Just modify the existing stuff in your CSS.
.menu-main a { font-size:1.3em; margin-right:0; } .menu-main { width:68em; } .center-column { padding-left:20em; }
- The topic ‘Adding left side-bar to ‘Wu Wei’ theme’ is closed to new replies.
WordPress.com Forums 