Docs

[JfantasyBooks]

Hello,

Details:

Name: JFantasyBooks
Site: Fantasy-Updates
Site Url: https://fantasy-updates.live
WordPress Version: 4.6
X Version: 4.6.2
Cornerstone Plugin Version: 1.3.2

Problem:

When users use the search option, the results that pop up, I would like to change the structure. An example of what I would like it to look like can be seen here: at http://www.novelupdates.com/?s=martial+god&post_type=seriesplans

I would like the featured image to appear in the results on the left, and an excerpt underneath the title. I would also like to edit the size of the title that pops up, and remove the document icon that appears next to the posts results as seen in https://www.fantasy-updates.live/?s=martial+void+king.

When I try using the featured image, it shows a very large image directly underneath the title, and that’s not what I would like.

Can you help me with this?

Thank You.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this problem, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .search .entry-title {
    text-align: left;
  }

  .search .x-main .hentry .entry-featured {
    float: left;
    width: 34%;
    margin: 0;
  }

  .search .x-main .hentry.has-post-thumbnail .entry-wrap {
    float: right;
    width: 66%;
    padding-left: 35px;
  }
}

Please make sure that you add a featured image so that you’ll see that the code will take effect.

Please let us know how it goes.

[JfantasyBooks]

Hello again,

Unfortunately, this did not work.

I added the code to the custom css as you have suggested, and it turned out like this: https://www.fantasy-updates.live/?s=martial+void+king

Not stacking the results. I think something went wrong.

Please help.

thank you.

[JfantasyBooks]

I edited the css and removed float right of the last css custom code you provided and it allowed the results to stack.

The problem now is that the featured items is not separate from the excerpt. I would like something that looked like : http://www.novelupdates.com/?s=martial+god&post_type=seriesplans

Where there are two columns. One with the featured image and the other with the title and the excerpt.

Thank you.

[Rue Nel]

Hello There,

Sorry if it doesn’t work out for you. That is because the feature image is situated in between the title and the content area. Please disregard all the given custom css. We need to have a different approach. To do this new solution, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(document).ready(function(){
    $('.search .hentry').each(function(index){
    	var element = $(this);

    	element.find('.entry-featured').insertBefore( element.find('.entry-header') );
    });
  });
})(jQuery);

And then please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .search .entry-title {
    text-align: left;
  }

  .search .x-main .hentry .entry-featured {
    float: left;
    width: 20%;
    margin-right: 50px;
  }

  .search .x-main .hentry:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
  }
}

You should get something like this; http://prntscr.com/cja4j5

We would loved to know if this has work for you. Thank you.

[JfantasyBooks]

Great!

I am thankful for your help.

But although this looks great in desktop view, for mobile and tablet view, the featured image appears quite large, almost 3x bigger than it should be.

Can you help me in changing the size of the image for the mobile/tablet view?

Thank You

[Christopher]

Hi there,

Please add this too :

@media(max-width: 979px){
  
 .search .x-main .hentry .entry-featured {
    width: 50%;
}
  }

Hope it helps.

[JfantasyBooks]

Thanks.

You guys are awesome.

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[JfantasyBooks]

Hello again.

so the search page you helped me with, I found, does not translate to when users search by tags. Can you help me fix it to look the same? For example if I clicked the action tag, link would be: https://fantasy-updates.live/tag/action/

It doesn’t show the results that I would have for search based on the css and js you provided me with above.

Can you help me with this?

Thank You.

[Christian]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[JfantasyBooks]

No, I don’t need customization.

For example,

.search .x-main .hentry .entry-featured {
float: left;
width: 20%;
margin-right: 50px;
}

I would like to know what css would I need to edit the Tag search, and not only the search engine.

Example,

would

.tag .x-main .hentry .entry-featured {
float: left;
width: 20%;
margin-right: 50px;
}

work?

I just need to know where to go to edit tag pages.

[Rahul]

Hi There,

For Tag search

.tag .x-main .hentry .entry-featured {
float: left;
width: 20%;
margin-right: 50px;
}

would work 🙂

Let’s us know how did it work for you!

Thanks again

[JfantasyBooks]

It did thanks again.

[Joao]

Glad to hear it,

Joao

[Author]

Posts