Need help? Check out our Support site, then

Styling the search, the no-results page, and special categories (Suburbia theme)

  1. Hi, I have a few questions about the search pages which I can't figure out and any help will be much appreciated:

    1a. Is there a way to position the search to appear on the home page, for example in the blank header area, on the top-right? At the moment the search is from the widgets and appears in the sidebar on posts and individual pages.

    1b. The no-results-found page is not formatted as my other pages are, how can I fix this? The CSS I have for the other pages is this:

    #single {
    	margin-left: 196px;
    	border-top: 0 solid #efefef;

    I would also like to fix a length for it so the page doesn't mess up the menu on the left. Any way of inserting additional text here, or modifying the ' this is embarrassing...' one?

    2. When I put in a search term (example: see here) I get bits from the individual pages too, which do not have any thumbnail images related. Is there a way to format the page-related results?

    2a. Or instead: is there any way to put the essays in the 'post' format but separate from the regular posts? i.e. can I make a category called 'essays', posts from which do not show up on the home page post-listing? This would mean when I click on the Essays link in the left-menu, I'd get a post-style listing of the essays instead of the static page with links at present.

    Will be grateful for any ideas. Many many thanks.

    The blog I need help with is

  2. 1a.
    Yes, but first you need to add a Search widget in the footer widget area.


    .not-found #single {
    border-top: 0 none;
    height: 444px;
    margin-left: 0;

    And yes, you can add text or modify the existing one.

    2. Define "format".

    2a. Possible.

  3. Thank you again!

    1a. I've tried something now with the following CSS:

    .bottom.widget-area {
    	position: absolute;
    	border: 0 none;
    	margin-right: 0;
    	padding-right: 0;
    	top: 50px;
    	left: 986px;
    	width: 195px;
    	height: 50px;
    	z-index: 111;

    However, this is adding the bottom area of the widget, which I'd like to get rid of but can't figure out.

    1b. That's great, works perfectly. How can I change the text on this page? And possibly remove the second search box if that's not a bad idea?

    2. Sorry, I meant that it should appear without the grey image-box, but with the heading and the <hr> element followed by text etc. But I'm more interested in 2b, so perhaps this is not required.

    2a. Great, if this is doable! Is it right to think then that it would involve creating a 'post' category which doesn't show on the front? How do I go about it?

    Much obliged for your help! Thank you.

  4. But I'm more interested in 2b, so perhaps this is not required.

    I meant 2a (sorry for the weird numbering!).

  5. 1a.
    But it's ok only if you don't add any other widget to the footer area. In the other thread we said you might also need images there. In that case you cannot position the whole area the way you did it, you need to position the search widget only.
    (So the remainder of the question will have to wait.)

    Please be precise!
    Italicized text: keep, remove, replace, or add to?
    Regular text: keep, remove, replace, or add to?


    .not-found #single .searchform {
    display: none;

    To remove the FI placeholder, you can add this:

    .search .type-page .featured-image {
        display: none;

    Adding a dotted line below the title requires additional CSS. Since you're more interested in 2a, I needn't bother, right?

    Yes, first you re-publish those pages as posts, and file them under a different category.
    Then, assuming the category name is "Essays", you add this:

    .home .category-essays {
    display: none;
  6. 1a. Thank you, yes I see your point. How can I position only the search widget in that case?

    1b. Yes, I would like to replace the content of both the italicised and the regular text underneath to something like:
    Italic: No results were found related to this topic
    Regular: Please try another term or try shortening your query.

    2/2a. Thanks! Yes I'm trying the post format for Essays (check here), this might work much better than the static page.

    Two problems so far:

    [A]. I would like to have the essays category displayed differently. Given the width of 4 columns: is it possible to keep the image in 1 column and the text content next to it horizontally, in the remaining 3 columns?

    [B]. Is there any way to remove the 'Category Archives: Essays' from this section (above the left-menu). Turning visibility off for the '.archive-heading' property removes the titles from all pages. Can just the 'Category Archives' bit be removed throughout?

    Thank you so much!

  7. 1a.
    Replace your code with this:

    #search-3 {
    position: absolute;
    right: PX VALUE HERE;
    top: PX VALUE HERE;
    width: PX VALUE HERE;

    This is tricky, so try this first and after you publish it I'll see if it needs any additions:

    .not-found #single h1, .not-found #single p {
    font-size: 0 !important;
    .not-found #single h1:after {
    content: "YOUR FIRST TEXT HERE";
    font-size: 19px;
    .not-found #single p:after {
    content: "YOUR SECOND TEXT HERE";
    font-size: 15px;

    Maybe - I'll have to experiment. But I thought you didn't want featured images for the Essays. Did you change your mind?

    In another thread I had replied that you cannot literally remove the "Category Archives" bit; you can do it indirectly, by removing the whole heading and adding a substitute.
    But if you do this, the heading will look like a menu item. So in my opinion you shouldn't do it: you should either keep the category headings as they are, or remove them altogether.

  8. Great, thanks a ton!

    1a. This works but I don't seem to be able to control the position of the search box. It shows differently placed in different browsers and also different window-sizes. Is there any way to define a fixed position in relation to the body?

    [A] Yes, I was in two minds about it as the 4-column width appears to be a bit too much for the line-length of the text. But for now, it would be better to keep it without images and probably make the text size larger to achieve the same ends. How do I go about that?

    Also, is it possible to have a sticky for a category defined like this?

    Thanks again!

  9. You're welcome.

    Sorry, my bad. (Yours too, because your original solution had exactly the same problem!)
    Try adding this then change the values for the #search-3 code:

    #wrapper {
    position: relative;

    Try this for starters:

    .category-essays .featured-image {
    display: none;
    .category-essays .grid {
    height: auto;
    width: 743px;

    Sticky for a category? I don't understand the question!

  10. Many thanks! That is fantastic.

    Sticky for category: sorry I wasn't very clear. What I meant was if a different sticky-post can be exclusively defined for a category page like Essays (probably just my misunderstanding of sticky-posts?). Essentially what I wanted was what I have now on the page through other means (the top un-clickable paragraph). Which is:

    .category-essays .grid p {
    	margin-right: 100px;
    	font-size: 19px;
    	line-height: 32px;
    	margin-top: 10px;

    I'm not sure if this is okay to do (since I've created an untitled post with just an excerpt) but if it is okay, then problem solved! Just two issues:

    1. Can I remove the hover effect from this paragraph only?

    2. How can I enlarge the font-size for the Essay-category post-titles only (i.e. without changing the size of post titles on the home page)?

    As always, thanks a ton for your help!

  11. Forgot to add regarding:


    In another thread I had replied that you cannot literally remove the "Category Archives" bit; you can do it indirectly, by removing the whole heading and adding a substitute.
    But if you do this, the heading will look like a menu item. So in my opinion you shouldn't do it: you should either keep the category headings as they are, or remove them altogether.

    Instead of removing it, is there a way to change just the position of 'Category archives' all across the site, for example, to the top area (in line with the search-box)?

    Many thanks!

  12. Stickying a post applies to the main posts page only: there's no option for setting a sticky to a category page. What you're really looking for is the category description, but (like many themes) Suburbia doesn't display category descriptions.


    .category-essays .grid:hover:nth-child(2) {
    background-color: transparent;
    .category-essays .grid h2 {
    font-size: 15px;

    I think you cannot do that directly (because the heading is a child of #access, and #access has been set to position:fixed). What you can do, if you don't mind the chore, is remove the heading, add your substitutes in footer Text widgets, click the Visibility button of each widget to make the widget show only on the respective category page, then use position:absolute for all Text widgets.

  13. Thank you so much! This is wonderfully helpful of you.

    [B] How do I remove the 'Category Archives' bit instead of turning visibility: hidden (which occupies space above the menu and shifts it down). What I would like to try is to remove the 'Category Archives', if possible, and open the menu up, i.e. turn the entire list of menu/sub-menu visible as an open list (without any hover etc). The code I have for this at the moment is:

    #access ul ul {
    position: static;

    What would I need to change for this to be a simple list? (It may turn out to be too long, but it will at least make sure the current location on the site is shown.)

    Will be much obliged for any suggestions. Thanks!

  14. a) To remove something you don't use visibility:hidden, you use display:none.

    b) I had suggested this to you more than a month ago:

  15. O sorry, that is just my total disorientation!

    Thanks, I tried the open list but it seems to limit my possibilities of adding any more categories etc, so I might just stick with the drop-downs for now.

    Thank you for your indispensable help all through!

  16. You're welcome: I like helping with a blog that's both elegant and serious!

Topic Closed

This topic has been closed to new replies.

About this Topic