Need help? Check out our Support site, then


Hiding Column Title (and space) on Posts Page

  1. I was able to get rid of the space around the title of the home (static) page by getting rid of the column-title by using the following:

    .home .column-title {
    display: none;
    }

    What do I want to use for the same purpose on the POSTS PAGE?

    The blog I need help with is parishconnections.wordpress.com.

  2. Hi there, are you talking about on the "parish life & news" page? Did you want to delete that title from the top and move the content up below the orange line?

    If so, you can use the following:

    .blog .column-title {
    display: none;
    }

    If you wish to get rid of the title and space on the category and archive pages, such as on http://parishconnections.wordpress.com/category/faith-formation/ , you can use the following. The below also get rid of the breadcrumb navigation to the upper left on that page.

    .archive .column-title {
    display: none;
    }

    If I misunderstood, or if you have additional questions, please let me know.

  3. The first one. That worked like a charm. Thank you. Is it also possible to raise the left and right columns on the post pages. Here is an example page:

    http://parishconnections.wordpress.com/2013/10/05/towards-restructuring-our-parish-faith-program/

    I am not sure if I really want to do this (I like the white space, too), but it is worth trying out. I would appreciate any help you can give me.

  4. Hi, you are welcome, and yes it is possible to move them up quite easily. Add the rule below to the end of your CSS and see what you think.

    .column-narrow {
        position: relative;
        top: -60px;
    }
  5. Thanks. Although that worked for the article pages quite nicely, it caused everything on the front page and blog posts page to also be moved up. On those pages I have the title set to display:none. Is there a way to change the above rule so that only individual post pages and archive posts are affected?

  6. I think for the homepage you would add a rule for that page.

    Try this.

    .home .column-narrow {
    position: relative;
    top: 0;
    }
  7. amazing. Thanks mrdirby. That fixes the homepage; and with thesacredpath rule (which fixed the individual post pages)... I am two third's of the way done. What about the post's page?
    http://parishconnections.wordpress.com/the-latest-news/

    I would appreciate help with that page, too.

  8. I think I came up with that rule for the post page. Is it

    .blog .column-narrow {
    position: relative;
    top: 0;
    }

  9. That should do it. Looks like it is working to me.

  10. mrdirby: Let me ask you something real quick. I hope its okay (or do I have to start a new thread?) One thing that really bothers me about academica theme is that the img rule is set for AUTO for both height and width. My understanding then, is that is what prevents me from going into the html code to change the pixels. Am I stuck with just using the media settings, or is there a way to disable the CSS auto setting for images?

  11. You can set img height and width for each image individually. The inline html style will override all css rules. So if you set the height and width of an image inside the image tag or use

    style="height:XXpx; width:XXpx;"

    inside the img tag.

    Or do you want to have a global height and width? Then editing the default css might be the way to go.

  12. A follow up thought. If you can edit your images to be the exact final size you want that is the best for page load. Then you don't have to worry about the image size in the code and use the full size option when inserting your images into the post.

  13. There is something not right. Look on the following page. http://parishconnections.wordpress.com/ministries/outreach-pastoral-care/outreach-to-mexico/

    I want to stretch the bottom photo to 240px. So I changed the html code to as follows. But it does not seem to work.

    <img src="http://parishconnections.files.wordpress.com/2013/10/ricedelivery.jpg" alt="ricedelivery" width="240" height="347" class="alignright" />

  14. Your original uploaded photo, http://parishconnections.files.wordpress.com/2013/10/ricedelivery.jpg, is only 227px in width, so if you resize the image in the HTML, it will become fuzzy and lose quality. I would suggest creating a new image in an image editing program at the width you want and then upload and use that image. An image editing program will do a much better job of enlarging the image.

  15. That would be correct. I often do that. But the issue here is, I can't enlarge or decrease any images at all. For example, I even tried decreasing the image above to 200 px and that won't work either.

  16. I see the image on the page you referenced at 140px in width (width of the caption background) with an image width of 129px on the page you referenced.

    What I might suggest, if you are going to insert an image at a size other than the predefined thumbnail, medium, large, or full-size, that you use the "insert from URL". What you would do is find the image in the media library, get the URL of that image and then use the insert from URL function. Once you have inserted the image, you can then click on the text tab and if you want a specific width for the image, remove the "height" part and then adjust the width as desired. Same if you wanted to control the height, you would then delete the "width" part. With only one size declared in the code, the proportions of the image will be preserved.

    Here is an example where I tested this in one of my test blogs in Academica.

    <img class="alignright" alt="" src="http://allhatnocattle.files.wordpress.com/2013/04/island-cabins-on-easter-island.jpg" width="300" />

    If after inserting an image that you want to size differently, you see something like

    ?w=240&h=161"

    after the image URL, delete that so that the image URL ends in the extension (.jpg, .png, .gif) as in my example code above.

    Another way you can change the size of an already inserted image is to click on the image in the post/page editor, click on the edit image icon at top right of the image and then either adjust by percentages, or click on the advanced tab and enter a height or width (whichever you wish to change) and delete the other value. As an example, you want to set the width, so you enter the desired value in the width field and then delete the value in the height field and update the image.

  17. That very well articulated (and sure to help other people). Unfortunately, I have tried these things. No matter what I do, the theme will not allow me to use any other sizes than the settings I had put in the MEDIA settings page. (I never had a problem with any other theme). The only way to work around this is too manipulate the image size in a text editor and upload it.

    I went ahead and inserted the image below using the URL function, and then for S&G's I picked an absurd height (47px --obviously to distort it) to see if it worked...and it did not. The image appeared normal.

    <img src="http://parishconnections.files.wordpress.com/2013/10/ricedelivery.jpg" width="227" height="47" class="alignright" />

  18. I found the following code in the custom css. I took it out. Maybe this was the problem. The min-width and max-width looked suspicious.

    img {
    border: 0;
    width: auto;
    height: auto;
    min-width: 20px;
    max-width: 100%;
    vertical-align: middle;
    }

  19. Hmmm, yes the min-width is definitely suspicious. The max-width should be ok though.

    Have you tried resizing an image after taking that out of your custom CSS?

  20. That very well articulated (and sure to help other people). Unfortunately, I have tried these things. No matter what I do, the theme will not allow me to use any other sizes than the settings I had put in the MEDIA settings page.

    This is because the media settings will now affect any image that has a class name of "size-SIZENAME" in the HTML. When you insert an image, a size class name is added by default. To remove it, click on an image while in the visual editor then click on Image Edit > Advanced Settings and remove the "size-SIZENAME" name from the CSS Classes field. Example: https://cloudup.com/cheNMDVY5UY

  21. yea, i am aware of that. Once again, I am sure that will help someone. I have tried that without any results. This is so frustrating, because sometimes all I want to do is resize an image by 5 or 10 px (not enough to distort it) and for some reason I can't. I have had other wordpress blogs before and never had the problem I am currently having.

  22. Hi, using the code you had above, I activated Academica on one of my test sites and then changed the code to the below, taking out the class, and then adding the float, height and width in the style section instead. I also added a touch of left margin to the image style.

    <img style="float:right;width:227px;height:47px;margin-left:10px;" alt="" src="http://parishconnections.files.wordpress.com/2013/10/ricedelivery.jpg" />

    Take a look here: http://intheoutbox.wordpress.com/2013/10/15/academica-image-test-resizing/

    Give that a try and see if the above will get you what you want.

  23. that works! thanks.

  24. You are welcome. It took a while, but we got it! If you have anymore problems, or questions, please don't hesitate to ask.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags