[Resolved] Styling custom search view

[Author]

Posts

[kjetilF]

Hello again
After I just switched theme from Toolset starter to Astra, the two custom search views we use display without styling.
The question is how to apply/make the styling come through - and hopefully there's a quite simple solution.

The view now looks like this:
hidden link
but should have looked like this (screenshot before switching theme):
hidden link

I'm not too techy, but figured I could keep the styling by copying the contents from the Toolset starter theme's style.css to my new child theme + doing the same with the child themes' function.php files (just without the inital "<?php")

I really like the way the custom search works, so I would really appreciate it if you could point me in the right direction.

The Astra child theme's adjusted functions.php file (transfered contents from line 17):
hidden link
...and style.css file (all css in it is transfered from toolset starter):
hidden link

Thank you,
Kjetil

[Shane]

Hi Kjetil,

Thank you for contacting our support forum.

I suspect that the issue here is that bootstrap is not being imported on your site.

To import bootstrap please go to Toolset->Settings and scroll to Bootstrap Loading and enable bootstrap 3.0

It should start working after this is done.

Thanks,
Shane

[kjetilF]

Wow - you are great
That work fine, or at least it is ALMOST in place.
hidden link
(Please compare to "original" before switching theme:
hidden link

Sorry - its late here and I have to get this on air tomorrow - but to tweak the styling, I'd need to find the relevant css in the child theme's styles.css file, or are there some settings...? Maybe I remember tomorrow morning but not now...
Thanks a lot again
Kj

[Shane]

Hi Kjetil,

Thank you for contacting our support forum.

Its a bit difficult to identify from the screenshot the exact styling.

Do you have the comparison site up for reference?

Please let me know.

Thanks,
Shane

[kjetilF]

Hi Shane
I've tried quite a bit today and it turns out to be too difficult for me.
I included a couple of links, like this:
hidden link
...which after my efforts looks like this:
hidden link
Its the styling of the form just below the top image/slider I need help with.

Also the pagination above the map at the same archive page is... weird looking.
Both problems appeared after switching theme from Toolset starter to Astra pro.

And... one more thing, if you look here:
hidden link
the same styling is missing from the form.
In addition: The icons are missing in each post's details' section (below each image). If you compare to how the posts in
hidden link
are displayed (with the orange icons before the numbers), you see what I mean.

If you'd need a look under the hood, please open a private form for me to post the details in.

Thank you,
Kj

[Shane]

Hi Kjetil,

This was done from our Real Estate demo site correct?

[kjetilF]

Hi
That is correct.
I switched from Toolset starter because there were several issues (mostly with Beaverbuilder/ Beaver themer) and I learned that you do not support that theme anymore.

I must say I find Toolset very functional (especially the search and multi-marker maps) but it is also hard to get my head around. It hasn't made it easier that the two setups (for houses and opplevelser, a slightly modified copy of "land" if I remember correctly) are made in different ways.

Thanks,
Kj

[Shane]

Hi Kjetil,

Would you mind providing me with admin access to this site so that I can assist better?

Thanks,
Shane

[Shane]

Hi Kjetil,

You made mention that this worked correctly before switching theme correct? Also I see that you're not using our Layouts plugin as this was used as well.

Please let me know.

[Shane]

Hi Kjetil,

There seems to be some issues with the classes.

Would you min copying over one of the searches that is there from our real estate demo and just adding your filters without removing the bootstrap class structure thats there?

Thanks,
Shane

[kjetilF]

Hi, Shane
Thank you for looking into this.

I’ve tried to do as you suggested:
I made a new reference site and transferred the code from its House search (Toolset > Dashboard > Search House) to the Search House in my site.
I started out with this because it presumably is closer to the original than the parts connected to Opplevelser, which (as far as I know is a renamed copy of Land).
hidden link
(I compared each field – details below. I also took copies of the code from my site.)

In other words: ”Search House” in my site now is the original. I have left it like that for now.
After emptying the cache in my browser and the site, I see that the styling problems remain the same – see site and screenshot 2:
hidden link
hidden link

Therefor I still believe the solution is in the style sheet.

(What confuses me, though, is that my translated text – which are removed from Search House – still appear in the Search House front end – see screenshot 2:
hidden link
This is less important, though, since the main goal is to make things look right)

Please keep in mind the most important here, to get the looks as they were before switching theme, see screenshot 3:
hidden link
To make the search form (1) and the pagination (3) appear correctly.
I believe I can fix the property details (2) and menu colours (4) myself (though the latter will take time).

Please also remember that I transferred the styling from the Toolset starter theme (to the child theme of the Astra pro’s child theme) when I switched theme. As far as I know there has been made several tweeks (mainly after advice from you) – style sheet attached here:
hidden link

You would know what styles control what, so I would kindly ask you to see what should be adjusted.

Thank you
Kjetil

PS
I checked the latest original Toolset starter child theme (v 1.1) – the style.css file there contains nothing. Maybe the styling comes from the mother theme, since the child theme’s styling will override the one in the mother theme.

COMPARING the Search House code fields:
- I see that the original includes more Query filters, the others are removed in mine (presumably because one is asked to when shose queries are not in use anymore. In the ref site they’re used in a Cred form, which I don’t use – screenshot 1:
hidden link
- Under ”Custom Search Settings” I have set ” AJAX results update when visitors change any filter values” while the original has ” Let me choose individual settings manually” (which reveals more options there)
- In Filter editor, my is obviously translated and shortened compared. The settings fields just below are equal.
- Part - Marker info popup: Translated and edited
- Loop Item – Grid: Translated and edited
- Filter and Loop Output Integration Editor – Unaltered

[kjetilF]

Hi
I realize I ask for a lot here, but A) styling a form is quite complicated and B) when I try to inspect the elements, the code keep jumping (probably because the slider keeps loading new images).
Thanks you
Kjetil

[Shane]

Hi Kjetil,

It strange that you had to switch from the toolset starter theme to the Asta theme because our demo is built using the Asta Theme.

What I recommend that you do is to backup this site and export the data itself. Keeping a full backup of the site in the event something goes wrong. Exporting the actual content only so that you can reimport them later.

First just import the New Real Estate demo and all the styling should work fine and then you can re-insert your data again.

The best way to export your Toolset setup is to download our Module manager plugin and to export all the toolset built structure that you added into a module that you can import later.

Once you have setup the real estate demo then you can just import back the module and then import the actual content data.

The content data can be exported using the default wordpress export.

Please let me know if this helps.
Thanks,
Shane

[kjetilF]

Hi Shane
Thanks for your suggestions!

No offence, but I must admit I found it slightly confusing since the steps appeared a bit mixed up. Or maybe I just needed it even more precise to get my head around it – especially exactly where to find/ do the different steps. Anyway, I did my best :o)

If you jump to point 13 of my log you’ll see that the main problem is solved (yes!) but that I have a few questions on how to bring the contents and looks back where it was.

---
I switched theme from Toolset starter to Astra after several issues related to it. One of your colleagues told me the Toolset starter theme is not developed/supported anymore and there not guaranteed compatible with your plugins and/or the beaver plugins we use.

WORK LOG:
1. Removed all styling from the Astra child theme’s style.css (didn’t have any visible effect)

2. Exported all contents (via Tools > Export > selected All contents) – I guess this is the “actual contents” you refer to for later import.

3. Also took a full site backup, including database and all files (using UpdraftPlus), downloaded all to computer

4. Installed Toolset module manager 1.6.9

5. Tried to export my Toolset setup – via Toolset > Export/Import
- In the Modules tab it says ” Exporting modules is done at Toolset modules admin screen.” BUT over in Toolset > Modules there is no possibility to export anything
hidden link

6. So then I exported everything else:
- Exported Types data (in Types tab)
- Exported “Views, WordPress Archives and Content Templates” (in Views tab)

7. Tried to download the Real estate demo site from https://toolset.com/reference-site/ - was sent to https://toolset.com/account/downloads/#application-frameworks
- so I and installed the Toolset Framework 3.0 installer.
- To install the site I also had to install the missing CRED 1.9.5 and Layouts 2.2 plugins – done

8. After reloading the Toolset > Reference sites page/panel I could import the Real estate site just after clicking ok to a couple of warnings:
hidden link

9. After completing the process our site looks exactly as the demo site. So far so good.

“Once you have setup the real estate demo then you can just import back the module and then import the actual content data.

10. I went back to Toolset > Export/ Import and imported the Types data. In the review panel I considered selecting “Overwrite settings” but left all settings as they were:
hidden link
Clicked import and got this summery:
hidden link

11. In the Views tab I imported the Views file I had exported, leaving all settings unchecked:
hidden link
giving this summary:
hidden link

At this point the site’s home page designwise still looked like the demo site, but parts of the search form had errors
hidden link
and looking into it also here some contents had gone missing:
hidden link

12. In Toolset > Export/ Import there is no Modules tab now, and I have no Layouts or CRED files to import.
- So I went to Tools > Import > Import WordPress and selected the xml file had had from exporting “all data”
- I assigned all authors correctly and left “Download and import file attachments” unselected (since all image files were still left untouched an in their original locations on the server) – getting this summary full of “failed”:
hidden link

13. So:
Looking at the site now, the initial problem is gone, so – GREAT!
Thanks a lot for pointing in this direction :o)

NOW…
The contents and layouts don’t appear as or where they should, and the question is what is the smartest way to get it back.
Still after reactivating the beaver plugins (and the other most crucial, and deactivating the CRED and Framework plugins) it appears, as
- All BeaverBuilder layouts are gone (also in the backend) while all the original demo site layouts are there instead.
I believe I had left the Toolset layouts only on the main pages for Houses and “Opplevelser”
- The Search on eg the main House page - hidden link - looks fine; but the form still has some fields that I had removed and my translations are gone.
- The primary menu is gone (and in the backend not as it was)
- The Astra settings are gone
- Some pages like the front page (I reassigned it) has “exploded”
- Details/contents in the custom fields are present in the backend but do not appear on the front end

I would be very grateful if you could have a look at this and tell me what you think would be the best steps to do.
Or see if I stepped wrong at some point in the process (puh… lot of reading, I know).
If the easiest is to do the process over again, just correcting it at some point, I wouldn’t mind. Then I could also export the Beaver themer layouts which otherwise will take time to rebuild.

Thank you,
Kjetil

[Shane]

Hi Kjetil,

That was alot to read 🙂 but i'm happy the form is now styled correctly and we are on the astra theme now.

The best way to go forward now and the steps that I would take is to go through using this site as the foundation and to build on top of it.

The backup that I asked you to create was to use in the event that anything goes wrong you still have your data. Also to use the module manager you would've needed to click the Add New module button and drag and drop the items you want to export to that module, then export the module.

For your Astra settings you will need to re-apply those because your site was white so the settings need to be updated. Not much else I can say but to just start working with the site.

I must apologize for letting you start over but this is the best way I can think of without breaking anything.

Thanks,
Shane