Need help? Check out our Support site, then


Any way to hide page title WITHOUT a CSS upgrade?

  1. My theme is Chateau, and I've got a static front page. I've managed to hide the page title by using an image positioned to hide it. However, I am finding it difficult to do the same thing for other pages. I have tried using a "banner-shaped" white image to hide the title... but this leaves me with a huge white space between the "banner" and the page text.

    Any ideas? Or do I HAVE to purchase the CSS upgrade? Thanks!

    The blog I need help with is sumanbolar.com.

  2. Oops, sorry, just wanted to say... the site is: http://www.sumanbolar.com.

  3. You can leave the page title blank in the editor I think, but for search engines, that isn't the best idea, and it would not get rid of the white space.

    I have a couple of thoughts though, so let me try them out and see what I can do.

  4. Actually on your Syntax page, you have done what I was thinking about and moved the entire post up.

    There is no way to cleanly get rid of the post titles and have the content move up without the CSS upgrade really.

  5. dont give the page any title. see my blog, ive done the same http://truehadithfinder.wordpress.com/chapter-18/

  6. instead of writing the title in the "enter the title" bar, write the title directly in the page content. it will require more editing but it will work.

  7. But that leaves the large white space at the top where the title would be, which is what she does not want.

  8. And besides, your site is set to private so none of us can see it.

  9. o shoot i really forgot that ive set my blog to private. actually im just a beginner; still learning from professionals like you =) thanks, and now you can see my blog.

  10. Thanks guys. I do not understand why there is that huge white space. If it helps at all, I'm pasting the code here... I have never written code in my life, and tried to learn by myself. Not bad for one day's learning, I thought :)

    <img class="alignleft" style="position: relative; top: -94px; left: -85px;" src="http://sumanbolar.files.wordpress.com/2011/10/untitled2.jpeg" alt="" width="2200" height="100" /></p> <p><span class="Apple-style-span" style="color: #690000; position: relative; left: -85px; font-family: Arial; font-size: 18px; font-weight: bold; line-height: 32px;">Syntax helps individuals and organizations define what they want to say – and how they need to say it – in order to achieve business results.</span></p> <p><img class="size-full wp-image-309 alignleft" title="tree rings" src="http://sumanbolar.files.wordpress.com/2011/10/tree-rings4.jpg" alt="" width="172" height="172" /></p> <p><em><span style="color: #333333;"></em><em>--------------------------------------------------------------------------------------------------------------------------------------------------</em></span></p> <p><em><span style="color: #333333;"></em><em></em>The word <strong>"syntax"</strong> refers to the patterns formed by words within sentences and phrases. Communications consultancy <strong>Syntax</strong> imbues words with the structural precision and beauty of the patterns found in the natural world.</span></p> <p><em><span style="color: #333333;">------------------------------------------------------------------------------------------------------------------------------------------------------</span></em></p> <p><span class="Apple-style-span" style="color: #000000; font-family: Arial; font-size: 16px; line-height: 28px;">Suman Bolar, owner and founder of Syntax, has over two decades’ of professional and web writing experience to her credit. She excels at translating abstract ideas and concepts into copy that is easy to understand and relate to. Her writing is crisp, straightforward and powerful.</span></p> <p><span style="font-family: Arial; font-size: 16px; font-style: normal; font-weight: normal; text-decoration: none; text-transform: none; background-color: #ffffff; color: #000000;">When you entrust Syntax with your communication needs, Suman puts her vast and varied experience to work to help you:</span></p> <ul> <li><span class="Apple-style-span" style="font-family: Arial; font-size: 16px; line-height: 28px; color: #000000;">Define your audience</span></li> <li><span class="Apple-style-span" style="font-family: Arial; font-size: 16px; line-height: 28px; color: #000000;">Balance what you want to say with what they need to hear</span></li> <li><span class="Apple-style-span" style="font-family: Arial; font-size: 16px; line-height: 28px; color: #000000;">Choose the appropriate form and medium of communication</span></li> <li><span class="Apple-style-span" style="font-family: Arial; font-size: 16px; line-height: 28px; color: #000000;">Craft audience-focused messages that work</span></li> </ul> <p><span style="font-family: Arial; font-size: 16px; font-style: normal; font-weight: normal; text-decoration: none; text-transform: none; background-color: #ffffff; color: #000000;">Syntax has helped companies in India, the United States, and the United Kingdom communicate coherently with their stakeholders using every conceivable form of media.</span>

  11. @sumanbolar: You don't need to paste the HTML of a published page - we can see your sourcecode.

    If you mean the space below that strip, it's the space the image would occupy if you hadn't sent it elsewhere via position relative. To counter that, you must add a negative bottom margin to the image. Also, your left:-85px; and your width="2400" have no effect (and why on earth 2400?). In all, the style of that image should be:
    style="position:relative;top:-94px;margin-bottom:-94px;max-width:960px;"

    Couple of other remarks:

    • class="Apple-style-span" has no place in your HTML editor.
    • The span tag is used for words inside a paragraph. When you want to change the style of an entire paragraph, you don't use the span tag, you use the p tag:
    <p style="ETC ETC ETC">PARAGRAPH HERE</p>
    • Instead of typing a bunch of dashes above and below that text, you could have enclosed it in a div with top and bottom dashed borders. See here:
    http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

  12. @ panaghiotisadam: Thank you for your suggestions.

    As I said before, I don't really know what I'm doing... I spent all of eight hours trawling the forums for assistance with each little obstacle I faced... how to cover up the page title with an image for example.

    You asked:

    Also, your left:-85px; and your width="2400" have no effect (and why on earth 2400?).

    Erm... clueless me trying to get the darn strip of brown to expand lengthwise. Obviously, it didn't work.

    I pasted the code you suggested in my page:

    In all, the style of that image should be:
    style="position:relative;top:-94px;margin-bottom:-94px;max-width:960px;"

    While it reduces the white space between the brown strip and the top of text, it doesn't reduce it enough, IMO. What can I do?

    I did try substituting the dashes with the code you suggested, but it turns into a box rather than lines above and below. Also, the box encloses my image, which I don't want it to do.

    Sorry about pasting code... I am a newbie to HTML etc, so am not sure what to do and not to do.

    Thanks so much
    s

  13. "While it reduces the white space between the brown strip and the top of text, it doesn't reduce it enough, IMO. What can I do?"

    You can add a negative top margin to the text that follows. Change this:
    <span style="color:#690000;ETC ETC ETC</span>
    to this:
    <div style="margin-top:-50px;color:#690000;ETC ETC ETC</div>
    You can change the margin-top number to adjust the white space.

    "I did try substituting the dashes with the code you suggested, but it turns into a box rather than lines above and below."

    The post I linked to doesn't give just one code, it's a tutorial on borders; among other things it explains that a border doesn't have to be on all four sides.

    "Also, the box encloses my image, which I don't want it to do."

    Sorry, I forgot about the image. To arrange the text (and the dashed border) well in relation to the image, you need a table. Now this has to be more complicated than it would be in a different theme, because the CSS of the theme you're using imposes various things you need to override:

    <table style="border:none;font-style:italic;">
    <tr>
    <td style="border:none;vertical-align:middle;padding:16px 24px 0 0;">
    IMAGE CODE HERE
    </td>
    <td style="border:none;vertical-align:middle;padding:0;">
    <div style="border-top:2px dashed #ccc;padding:18px 0 9px;">
    The word <strong>“syntax”</strong> refers to the patterns formed by words within sentences and phrases.
    </div>
    <div style="border-bottom:2px dashed #ccc;padding:9px 0 18px;">
    Communications consultancy firm <strong>Syntax</strong> imbues words with the beauty and structural precision of patterns found in the natural world.
    </div>
    </td>
    </tr>
    </table>

Topic Closed

This topic has been closed to new replies.

About this Topic