Adding Widget to Post.Info Area of Wu Wei Theme

  • makingwordscount · Member ·

    I’ve been told that using CSS it’s possible to add a text widget under the page title (post.info) for the Wu Wei theme by first creating in the bottom sidebar and sliding it up the side of the page. I wondering how to do this and if its possible to place a graphic image there rather than text.

    If anyone can help, I would be greatly appreciate it.

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    You can either put an image in a text widget, or you can use the image widget. One that widget is created and placed in the bottom bar, then you can use position absolute, top and left declarations to move the widget up under the post info section.

    http://en.support.wordpress.com/links/text-widget-links/
    http://en.support.wordpress.com/widgets/image-widget/

  • thesacredpath · Member ·

    We can’t really do anything until you have the widget in the bottom bar.

  • makingwordscount · Member ·

    Hi, The support links were super easy to follow – if only they had them for everything.

    I was able to add an image to the bottom of my footer and have to figure out how to play with sizing. I’m assuming I have about 70em or 900px to work with in total as a page area and for a small picture to fit on the side of the main body of copy maybe 200px. I tried narrowing the center.column width and widening the width of my page.info area but it didn’t keep the appearance of the page.info in its own column. The page title just moved over the page copy.

    Also wondering what language determines the padding? between the 3 columns in the footer? Thank you again – !

  • thesacredpath · Member ·

    For the area under the title, figure about 190px in width as far as I can see. The first thing I had to do was to declare a left margin for .center-column so that the left side of the theme was “fixed.” For the widget, what I did was to look at the source and find that the image widget was designated as id=image-2. I then created the the CSS to move the widget up under the title and then aligned it to the left so that it.

    .center-column {
margin-left: 115px;
}

#image-2 {
position: relative;
left: 100px;
top: 250px;
}

    Give this a try and see what you think. @hallluke might have another way of doing this so that the image will float with the browser window width in relation to the rest of the elements. He is much better at CSS than I am.

  • hallluke · Member ·

    To change the spacing between the footer widgets you can use the following code:

    #footer-widgets .widget-area {margin-right:3em;}

    If you want to add an image under your blog title it is probably easier to specify it as a background image to one of the header elements, maybe the tagline/description.

    Can you post a link to the image you want to use and a bit more of an explanation to how you want everything to appear?

  • makingwordscount · Member ·

    AGH!! I learn something with every change and on occasion change something I don’t know how to fix. In this case my post-content is not flush with the post-info.

    Thank you SacredPath and Hallluke. I have a better grip on how these footer margins work and made the change. I was able to insert an image in the footer but not move to the side which I suspect has something to do with the margin choices I made below:
    .center-column {width:68.334em;margin-left:200px;}
    .post-info {width:220px;margin:.5em 1em 0 0;}
    .post-content {width:50.333em;margin:.5em 1em 0 260px;}

    In any case, I’ve realized late, that an image box on the side, won’t let me change the image for each page which was the trickery I was attempting. I apologize, I should have realized that earlier. I wanted to put the image in the blank space under the post-info rather than in the post.content.

    Thank you again for all your help and patience.

  • thesacredpath · Member ·

    Remove the “margin” stuff from .post-content to get the page body copy back up beside the title.

  • makingwordscount · Member ·

    And it worked! Thank you!

    Is my idea of putting images under the page.info unworkable with the Wu Wei theme?

  • thesacredpath · Member ·

    I can’t think of a way to put a different image (widget) under the post info that would really work. Well, OK, I can, but it would be a ton of CSS work since you would have to “hide” the other widgets on each page.

    What can be done though is to use inline CSS on an image that is put into the post itself. Basically you insert the image, left aligned, right at the beginning of the post and then use position, top and left properties to move the image over and under the title.

  • makingwordscount · Member ·

    Thank you SacredPath,

    So I code in the page post area in html view the image to be left aligned but do I need to change the CSS settings to get the image to be under the page title and then create some sort of padding around the image area (the whole left side of page) so the copy continues to fall down one side?

  • makingwordscount · Member ·

    Hi,

    Any interest in helping me solve question about playing with page images and columns?
    Please….

  • thesacredpath · Member ·

    Do you have a post up with an image in it so that I can take a look?

    [One note: now that we are not repositioning a text widget, remove the margin declaration from .center-column on your CSS.]

    The image that you will put into the post needs to be no more than 220px in width so it matches the width set for .post-info.

  • thesacredpath · Member ·

    The problem I have is that your CSS is modified, so if I use my test blog with the stock Wu Wei theme, what I’m giving you can only be used as a guide.

    1. Insert an image left-aligned at the very beginning of the page or post (220px max width).
    2. Switch to the HTML tab and add the margin-left and margin-top inline CSS to the image code (you will have to adjust the numbers to get it to work with your customized theme).

    style="margin-left:-240px;margin-top:120px;"

    You can see an example here: http://allthekingshorses.wordpress.com/

    Do remember that in doing it this way, if you ever change to a different theme, you will have to edit things, and if it is a more standard designed theme (title above post/page content) you will have to edit each page and post to get rid of the inline CSS that moved the image over in Wu Wei

  • makingwordscount · Member ·

    The delight still hasn’t worn off for me. It worked! Thank you!

    I find the way the margin works counterintuitive – to push further left I increase the pixels rather than decrease. But one day it will all make sense. You have such an apt username.

  • thesacredpath · Member ·

    The margin-left will will move the image to the right when you use a positive number. If you use a negative number, it will move the image to the left.

    You are welcome, and thanks.

  • makingwordscount · Member ·

    Sacredpath,

    My friend suggested I add a splash page – is that possible? I hide the visibility of the page.info and just have the page.content appear? I guess that could get very annoying if someone was to visit more than once in a day

  • thesacredpath · Member ·

    Splash pages are a bad idea for several reasons as outlined here: http://webdesign.about.com/od/navigation/a/aa020303a.htm .

    The main things are that people are tired of them and don’t like them and the absolutely will kill your search engine ranking since there is virtually nothing for a search engine to get its teeth into.

    My advice, don’t do it.

  • makingwordscount · Member ·

    Yes – excellent reasons. Thank you again.

  • makingwordscount · Member ·

    Easy question. Have you noticed that you can create a page and uncheck the sharing button box and you still see the blog comments box appear? I’ve checked the box, unchecked the box and saved and it’s still showing up on one or two pages.

    I’m sure it’s another duh moment for me.

1 2
  • The topic ‘Adding Widget to Post.Info Area of Wu Wei Theme’ is closed to new replies.