Adding left side-bar to ‘Wu Wei’ theme
-
-
-
thanks thesacredpath. your suggestion about the menu is sensible. it works well! thanks a lot!
the ‘justified’ alignment works well for the text well! thank you very much!
the Permalink, unfortunately, looks out of place as a result. would it be possible to move the Permalink to the top of the main content and reduce the font size to match that of the menu so that it looks like a title to the main content? by doing so, the main content can become wider, which would be fantastic!for some reason, the default setting of the footers (now the left side bars) are quite messy- some of the widgets have bigger fonts than the others, some are in bold, some are orange and some are grey. would it be possible to change them all to just the same size and same grey colour as the main text, with no bold at all?
i am very grateful for your help. i did not expect it to be so hard to make adjustments but you made it possible for me. i would like to acknowledge your generous assistance in my blog. would you be comfortable for me to mention your username?
thank you thank you thank you!
-
To move the post title to the top of the post and widen the content column, add the following to your CSS
.post-info { width:62em; } h1 { padding-bottom:0.3em; }Then in your CSS in .post-content, change the width to 62em and add margin-top:1em; as shown below.
.post-content { width:62em; margin-top:1em; } -
On the widgets, the links will turn grey once they have been visited. If you clear your browser and then refresh your page, you will see that all the links in the sidebar will turn orange again.
The larger grey bold font is the widget title.
-
Apologies! I thought the words in light grey (no bold) are topics in the menu.
i guess i should rephrase my questions on that basis. Would it be possible to edit widget titles so that they the same font size as the rest of the left side bar?
thank you very much!
-
Sure. The following does that but keeps them bold (so that they stand out as titles).
#footer-widgets li .widgettitle { font-size:100%; } -
Thanks a million! The blog finally looks great!
I have even added <!–more *> to some of the articles! Do you know how to reduce its top margin? It seems to have a big gap between where it is and the text above, even though I put it immediately below or next to the text in HTML.
-
You’re welcome. The more tag needs to be on its own line (paragraph actually) or it causes HTML errors and can cause the blog to break.
-
oh i see. i saw some blogs showing ‘read me’ at the end of a sentence- didn’t expect this to be problematic at all! thanks for pointing this out!
do you know if it is possible to reduce the size of the main text and side bars by one size? thanks.
about the ‘recent post’ widget, is it possible to include a small image with each permalink title? a bit like this site. http://londoneater.com/about/. just wondering.
many thanks
-
On the overall font size, the declaration in the body selector would change all fonts (that is the main base size).
body { font-size:75%; }Play with the 75% number. You will find that a change down to 70% will probably get you where you want to be.
On the recent posts widget, what you see on the blog you referenced is not something we can do at wordpress.com. That is a self-hosted site and they have a lot more freedom. That is most likely built into the theme they are using.
-
Actually it is not entirely impossible. You could use something like the code below, I’ve changed the font color as an example but you could set a background image and height etc to make it look similar to the site you linked. However you would need to update the CSS everytime you added a new post so that it had its own image link and different browsers have different quirks when dealing with this attribute. Something to think about though!
a[href="http://winkypedia.wordpress.com/2010/10/24/turning-the-world-upside-down-by-anish-kapoor/"] {color:#000;} -
@ thesacredpath- Thanks for the tip about change of font size. You might be pleased to know that based on what you taught me, I managed to work out how to make the main content wider to align with the images. I also worked out how to make the permalink font smaller! It is probably pretty obvious to you but it is one little step for the CSS toddler like me!! :p
@halluke- thanks for the code. Where am I supposed to put it in particular? With the footer? I tried just copying and pasting it in the CSS edit page but I couldn’t see much difference other than it took longer to load the same page. I probably have done something wrong?? thanks
-
Indeed, I felt a bit paralized in the beginning when I knew how I would like to see on the layout but had no idea how to physically do it. So thanks a lot for your help.
Oh, do you know if it is possible to move up the header image so it is closer to the menu-bar? the header image size is 700×144 by default. even though i don’t really need 144px in height for the image, i have to put some white on top of the logo in order to fill the space. Plus the default margin between menu-bar and header, there is a big white empty space bewteen the menu-bar and header image as a result.
-
Edit your header image and take some of the whitespace off the top of it would be my suggestion. It has a lot of white showing above the text right now. Give it a different name and upload it to your media library and then change the URL in your CSS to the new image URL.
-
Hmm, I can do that though that would mean I would shift the white space problem to the space between permalink and the header image. I tried before- if I have an image that is not as high as 144px, the image would get stretched to fit that dimension anyway.
That is why I was wondering if the margin between the menu bar and the header image could be revised.
-
@halluke,
i’ve done something via widget text. (please have a look at my blog). is this what you were refering to? -
If you include the code I pasted above in your CSS it will turn the text for that article (turning the world upside down) to a different colour. You can instead set a background-image for each post you make and duplicate the code so that rather than changing colour the links shows with an image placed above or below it. However this wouldn’t update automatically. You’d need to add a new block of code for every new article you posted and update the link to that specific image.
Here’s some code which inserts hastily googled images with each “recent post” link in your sidebar so you can see what I mean. The first URL is to that of the post you want to target. The second is for the image you want to use in your media library (I’d recommend using a standard size). I’ve also included some padding and a border so you can see which image goes with which post. The first line of code is global for each link so you don’t have to copy everything out. You will notice however that I’ve set the height greater for the link with the long title that wraps to two lines:
.widget_recent_entries a {display:block; height:1.5em; padding:100px 0 5px 0; background-position:top; background-repeat:no-repeat!important; border-bottom:1px dashed #555;} .widget_recent_entries a[href="http://winkypedia.wordpress.com/2010/10/26/i-am-a-giant/"] {background:url("http://protonsforbreakfast.files.wordpress.com/2010/01/363987_x_2009-07-06_143452_626.jpg");} .widget_recent_entries a[href="http://winkypedia.wordpress.com/2010/10/24/turning-the-world-upside-down-by-anish-kapoor/"] {background:url("http://www.manasquanfasteners.com/images/hpansA.jpg"); height:3em;} .widget_recent_entries a[href="http://winkypedia.wordpress.com/2010/10/24/shoe-lounge-selfridges/"] {background:url("http://www.maf-uk.org/uploads/images/Cessna-208%234%23.jpg");} -
thank you halluke.
i’m still trying to figure these out but it doesn’t seem to be working yet. all i managed was to have a line under each recent post. :(
- The topic ‘Adding left side-bar to ‘Wu Wei’ theme’ is closed to new replies.
WordPress.com Forums 