[Resolved] Styling custom search view

[Author]

Posts

[kjetilF]

Just to drop in, as I just received an question from your cleanup-robot:
This will work out, but I´ll probably need a hand on some final, related issues - making this site ready for release. I´ll be back over the weekend
Closing in 🙂
Kj

[Shane]

Hi Kjetil,

Thanks for checking in.

Just try to update me at least once a week with this so I can know that everything is going well.

Thanks,
Shane

[kjetilF]

Hello again, Shane
I spent a couple of days to rebuild the site, and we’re closing in!
With quite a lot of adjustments I got most things in place, which is great. I’m especially pleased to see that the awkward design glitches are gone. You absolutely pointed me in a long but correct direction. Thank you.

The main job has to compare and adjust the Views etc in our site with the one in the Ref site. Takes time, but works – mostly :o)

Sorry for my use of many words, I just try to be precese. Hopefully it is not as bad as it looks.

WHAT I FOUND OUT - For your info:
- First: I believe the main part missing in the site was the Toolset Layouts plugin. It is totally necessary to display the search pages correctly.
- Second, some code was missing here and there
- Third: One needs to have a Toolset “Template layout” selected to make pages display anything (else than “Create a new layout for Pages” warning - hidden link

Now – If I can get in place the following I believe I can manage eg the Opplevelse search page myself.

HOUSE SEARCH PAGE - hidden link
- HOUSE SEARCH VIEW
Search form: Looks fine (except that the boxed display tightly together. We’ll leave that for now.)
Search results: Where can I edit the details displayed under each house image? Can’t see any “grid” editor here.
Pagination: Fine :o)
Map: It falls outside the page. In the Toolset Layout editor I can’t see any way to adjust it, to make it narrower (to fall inside the content’s width).
So I tried to replace the existing (12 column wide) House Search View with a 10 column wide one,
hidden link
But there is no possibility to save the edited layout. I can create a new View cell, but the only option afterwards is to close it. Nothing’s saved:
hidden link

- FEATURED HOUSE VIEW:
Pagination: Displays wrong using the original code:

[wpv-pager-nav-links output="bootstrap" links_type="dots"]

so I replaced it with the pagination code from the House search view:

 [wpv-pagination][wpv-pager-nav-links output="bootstrap" previous_next_links="true"][/wpv-pagination] 

Fine – but:
Though I deleted the original code, the weird-looking pagination remains, in addition to the correct-looking one – just above the footer:
hidden link
(Does the weird-looking pagination come from somewhere else…?)

Thanks again for your patience
Kjetil

[Shane]

Hi Kjetil,

Is the credential still the same so I can have another look at it ?

Please let me know.

Thanks,
Shane

[kjetilF]

Yes, they're the same

By the way I figured out this one:
"Search results: Where can I edit the details displayed under each house image? Can’t see any “grid” editor here."

Thanks,
Kj

PS

[kjetilF]

Hi, Shane
I've solved a little more - now the only two issues that remain are the one about the map floating to far out and the extra pagination.
I've struggled quite a bit placing the details on eg the House search place. Is there some page explaining how the columns work? - like the class here:

<header class="col-sm-3" style="vertical-align: top">

Thanks,
Kj

[Shane]

Hi Kjetil,

Could you send me the link to the page so that I can have a look.

Also it helps to send links to the exact page with the issue so I can know exactly where to look 🙂

Thanks,
Shane

[kjetilF]

Hi, Shane
Thanks for looking into this
I just found the solution on the pagination, it was a theme setting. Solved.

The remaining part is just about styling - the map floating too far out, and some similar styling styling issues. I include it here, but maybe I should start a new tread?

The pages in question are our search pages (the only ones built with Toolset Layouts, by the way):
hidden link
hidden link

So...
Some styling in addition to the remaining map question:
I’d like to have light blue as the base color on hidden link - to differ it and its corresponding posts from the orange house page/posts - hidden link

1 – I managed to make to give the slider header/title (still on hidden link ) a blue background with a similar chunk of css as in point 2 below
…but failed regarding the read more (Les) button.

2 - On this search page - hidden link - I've tried to style the Search header (where it says "Søk Opplevelser/Feriebolig, filtrer etter ønsker")
I tried to switch style in the “Search Opplevelser”s Filter editor
hidden link
from search-header to search-header-opplevelser in the second line here

<header class="col-sm-3" style="vertical-align: top">
<div class="search-header">
<h3>[wpml-string context="refsite"]Søk opplevelser[/wpml-string]</h3>
<p>[wpml-string context="refsite"]Filtrér etter ønsker[/wpml-string]</p>
</div>
</header>

and define that new class in the Astra child theme’s style.css file, like this:

.search-header-opplevelser {
	color: white;
	padding: 10px 20px;
	background-color: #62c0fa;
}

but it doesn’t come through. (The styling of the search header just disappears.)

3 – Finally: On tiny screens, I’ve managed to give the search form some padding to the left (making it possible to use on mobiles) – but can’t find:
what style to adjust to do the same with the Featured Houses section (Utvalgte boliger)?
I tried to add a 10-15px padding-left to the .container class, but that only has effect on bigger screens.

Thanks,
Kjetil

[Shane]

Hi Kjetil,

Yes it would be best to create a new ticket for the styling issue.

You can assign it directly to me if you like.

The map issue I believe it just needs to be centered. To do this you just need to set it in the Zoom and Center settings when you are inserting the map into the page.

Thanks,
Shane

[kjetilF]

OK, Shane - I'll post a new ticket for the styling issues.
I also found the way to fix the map width, changing it in the Layout's row settings.

But - as a suggestion:
For the map I discovered an instruction text which is misleading.
The page - hidden link - is built with a Toolset Layout, and I tried to alter the row setting - from the recommended setting (post content width) to bootstrap width. I've found this before, but left it because it triggers a watning:
hidden link
I suggest you ask your developers to change this as it - at least in our case - had the opposite effect of what it says.

Also, it can be difficult to save a Layout because the Save button at the button falls outside the screen. This is worst in Firefox, slightly better (and possible to use) in Chrome.
hidden link

Thanks again for your help and have a great weekend.
This site is beginning to look nice :o)
Kjetil