Adding left side-bar to ‘Wu Wei’ theme
-
We’ll if you’ve only just tried it that is because the links it was targetting have been replaced by new links in your widget as you’ve posted new entries since then! You might also want to test it out in different browsers to see if that helps. I’m testing in FF 3.6.8 on a mac.
The bit of code you’d need to repeat for each new entry is formatted like so:
.widget_recent_entries a[href=”PERMANLINK-URL”] {background:url(“IMAGE-URL”);}
-
I’m going to beat a dead horse here, but I would strongly suggest using “%” units for margins and paddings… “em” units _should_ be used for text only… in this post I explain why:
https://en.forums.wordpress.com/topic/removing-items-from-the-menu?replies=21#post-478758
-
I’ve run onto a couple of the newer themes here that use em units for everything sadly. Not sure what skewl the designers went to.
-
thanks halluke. now, i think i understand that principle of this.
what i put was
.widget_recent_entries a[href=http://winkypedia.wordpress.com/2010/10/31/can-i-can-grow-tomatoes-from-the-seeds-of-supermarket-tomatoes/] {
background:url (http://www.flickr.com/photos/8417601@N05/5132480321/);
}i did include the “s but they disappeared after i hit ‘save stylesheet’.
anyway, i don’t quite understand why but i don’t seem to see any image. what have i done wrong?
-
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 how to reset the width of the grey box so that it is the same as that of the orange bar?
-
Find .menu-main a in your CSS and add the following to it.
width:auto; padding-right:20px;You can play around with the 20px value. I just popped it in as a placeholder.
-
thanks thesacredpath!
i just tried it but it seems to only change the spacing between each menu title, not the width of the grey box which shows the sub-menu. not sure what i have done wrong. any idea?
-
-
oh, just discovered the following:
if i open a post from ‘recent posts’, and the titles of the premlinks of the posts before or after this post as both long, the texts of the premlink on the right hand side started to ‘pile up’. (pls click ‘Gelupo: an Italian ice-cream place with a twist’ as an example)is it possible to define the width of premlinks on both sides so that they are equal? ie. when the first line reaches certain width, it moves to another line by default?
many thanks.
-
This one I can’t figure out. Hopefully Luke will drop by and have a look at it for you. I can actually change it, but one will look fine and others not so fine.
-
I should have mentioned this a long time ago, but taking a theme that was designed with “bottom” sidebars and turning it into a theme with “sidebars” provides very unique challenges since the structure of the theme is not really set up for it. I should have a long time ago suggested you switch to a theme with a left sidebar and then just style that theme to look like this one.
.center-column .hentry, .center-column .page { width:45em; .navigation { width:30em; } .alignleft { width:12em; .alignright { text-align:right; width:12em; }On a theme that was designed with a left sidebar, this would have taken probably 25% of the work that has gone into this theme and been a lot easier. Then again, you’ve learned a lot from this exercise as have I.
-
Oops, I missed a closing bracket. Use this instead.
.center-column .hentry, .center-column .page { width:45em; } .navigation { width:30em; } .alignleft { width:12em; .alignright { text-align:right; width:12em; } -
Try this out and see what you think:
.navigation .alignleft {width:50%;} .navigation .alignright {width:50%; text-align:right;} -
-
Thank you guys!
I started looking for theme with left bar but there are not that many available. And I had no idea how much CSS can do until I asked all these questions! I agree. I did learn a lot. Thank you for your guidance!I made some adjustments according to what you suggested above and it is looking good! I like the left and right alignment with the main content. It is much neater than before. Thank you. How could I reduce the size of the orange font in the those links so that they are the same size as the orange font in left side bar? Thanks.
In an attempt to work the above out myself, I might have messed up the positions the ‘tags’ and ‘categroies’ at the bottom of each post as now they are overlapping. Do you know what I have done wrong?
-
.navigation {font-size:1.167em;}The above will resize the previous and next links like those on your permalink pages to the same size as the sidebar links.
-
thanks halluke. i’ve adjusted the margin as well so the permalinks before/after are now working fine.
however, i noticed that the ‘tags’ and ‘categroies’ at the bottom of each post are overlapping.
and some of the posts like http://winkypedia.wordpress.com/2010/10/31/can-i-can-grow-tomatoes-from-the-seeds-of-supermarket-tomatoes/ have the photos squashed even though i previously had successfully set the image to be the same width as the main content. the same happened in http://winkypedia.wordpress.com/category/buying-guide/shoes/
i found that this problem does not exist if i remove the latest CSS codes for navigation. (see follow). is that mean there is some form of interference with the new CSS codes?
.center-column .hentry,.center-column .page {
width:45em;
}.navigation {
font-size:1.167em;
width:38.5em;
}.alignleft {
width:18em;
}.alignright {
text-align:right;
width:18em;
} -
You need to add the .navigation bit before the align-left/right declarations if you only want it to modify the previous and next links, otherwise it will mess with everything that you align in your post, such as the photo. See the code I posted above for an example.
I’m not sure what you’ve added that messes with the meta and comment section but you should be able to fix it by specifying the width and removing the padding/margin on the left.
#comment-wrapper {width:45em; padding-left:0;} .post-meta-data {margin-left:0;} -
thanks halluke. that certainly solved the problem with overlapping of ‘tags’ and ‘categories’. thanks a lot!
with the Permalinks before/after, i now referred to your percentage version. do you know how i could align the right side of the ‘after’ Permalink with the main content? by doing so, the readers don’t need to scroll to the right to read the ‘after’ Permalink, which would be better. please have a look below to see what i have at the moment. it is a combination of what you and thesacredpath suggested. i just could not figure out how to set the right alignment of the ‘after’ Permalink to align with main content. thanks!
.center-column .hentry,.center-column .page {
width:45em;
}.navigation {
font-size:1.167em;
}.navigation .alignleft {
width:50%;
}.navigation .alignright {
width:50%;
text-align:right;
} -
micraclously, i just worked out how to set up the alignment mentioned above! no need to bother you! thanks
- The topic ‘Adding left side-bar to ‘Wu Wei’ theme’ is closed to new replies.
WordPress.com Forums 