PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

Where and how do you recommend I add a search bar to my site's pages?

(19 posts) (4 voices)

Started 10 months ago by wcamp
Latest reply from paulw406

wcamp

offline
Member

Hi, all:

I'm nearly finished building a massive photo album that uses PVII's Flex Grid Magic (FGM), Pop Box Magic (PBX), and Magic Box (MBX).

I'm very thankful that every PVII element works extremely well and was routinely easy to implement. But before I complete and upload all sixteen photo album pages, I need to add a "search bar" to every like-kind page.

Question #1: Where on my pages would it be wise to place the search bar?

Question #2: How do I integrate a search bar feature that works on *all* of my domain's pages, none of which has a search bar yet?

Here's a fully functional TEST page for my new photo album: pages 1 through 13 are operational; 14 through 16 aren't.
https://www.warrencampdesign.com/peter/peter-masterpieces.pg1-TEST.php

Here's my domain's Home page.
https://www.warrencampdesign.com

Many thanks, in advance, for your helping me add a search bar to my site's web pages.

Warren

Posted 10 months ago
Stephen

offline
Member

I have never understood why search is such a pain for websites.

I have Search at the bottom of my Adaptive Menu. Main Menu > Home and Search > Search.

This is implemented with a free Microsoft Azure account. Microsoft will let you set up an account for an unlabelled in-site Bing search. If you stay below a certain number of searches (the number being some business size), they don't charge you, though they do send invoices occasionally.
I did that, and didn't find it easy to implement, but got it done. See https://onh.eugraph.com/search/index.html.

I have tried some free domain-level php (or similar) search engines in the past, but never liked them much, and there can be a lot of setup.
There are commercial solutions, if you are willing to pay for a subscription.
You can set up an in-site Google search. (That's just a Google search similar to "Covid site:.gov")

Posted 10 months ago
wcamp

offline
Member

Thanks for weighing in on my two-part inquiry, Stephen.

I'm a Mac-only developer. I don't see value in attempting to accommodate Microsoft's coding with Bing.

Does someone else have a suggestion that addresses my two concerns?

I want a simple, no-cost, local search bar feature.

Does PVII include that in any of its page-building tools?

Sincerely,

Warren

Posted 10 months ago
Stephen

offline
Member

"I'm a Mac-only developer. I don't see value in attempting to accommodate Microsoft's coding with Bing."

I'm a Mac user (since 1989), but not really a developer.
There's no coding involved in using the Microsoft service. (Or the Google service, I assume.) Both just present a site-specific search. Not that I'm promoting either company.

"I want a simple, no-cost, local search bar feature."
Me too. Especially the "simple" part. I'd even pay for it, but I'm not a lover of subscription software.
I have an email from 2005 about "Go-Search Extension for GoLive CS"

Please post if you find such a product.

Posted 10 months ago
wcamp

offline
Member

Not hearing back for five days, I'll reactivate my two-part inquiry.

Can someone please suggest (1) how I can implement a search bar feature on my site, and (2) where I ought to place it on all of my like-kind pages?

And, Gerry, does PVII provide search bar availability in one or more of its products?

Here's hoping. . .

Warren

Posted 10 months ago
Gerry

offline
PVII Team

PVII does not have any search bar or site search tools.

The usual solution is to use Google Search, it's very popular and gets the job done. They do have a lot of documentation on implementation.

You would usually place the search box in the hear section of your page, near the navigation.

Posted 10 months ago
wcamp

offline
Member

I appreciate your guidance going forward on this, Gerry. I plan to work on it next week.

Hopefully then, you and the PVII family won't mind checking my newly added "search feature" and weigh in on its placement and functionality.

Till next week, . . .

Posted 10 months ago
wcamp

offline
Member

Following Google's directions, I've entered the JavaScript (inside the <head> section) and the <div> tag (in the <body> section) for the new Google search feature that I need for this page. Unfortunately, my attempts to style it aren't working.

To begin with, I want the search <div> to have a transparent background color. I've entered the following style rule but it doesn't work.

.gcse-search {
background-color: transparent !important;
color: #504330;
}

The search bar is also way too wide. And it pushes down the title text and the top-right graphic. Can it be styled as "an overlay" with an assigned width so that it's narrow and doesn't create its own space?

Please tell me how to control those three styling interests. Thank you.

https://www.warrencampdesign.com/peter/peter-masterpieces.pg1-TEST.php

Posted 10 months ago
wcamp

offline
Member

Hi, Gerry.

I certainly don't mean to pester you. A week ago, I followed your suggestion to use Google Search and implemented it on a TEST page. Unfortunately, my attempts to style the look and location of the Search feature don't work.

Would you please show me how to accomplish the three above-referenced style elements?

Much appreciated, my friend.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

Hi Warren,

The styling rules will all need an !important directive so that they over-ride the default Google styling. Use these two:

/* controls outer box */
.gsc-control-cse {
background-color: transparent !important;
border: none !important;
}

/* controls the search button */
.gsc-search-button-v2 {
background-color: #e2dbcf !important;
border-color: #cfb58c !important;
}

Posted 10 months ago
wcamp

offline
Member

I appreciate very much your helpful suggestion, Gerry. I've added the two additional rules and the styling is much improved! Thank you!

Because I might want to style it differently, where would I find the two [new] rules that you suggested? I looked on Google's https://developers.google.com/custom-search/docs/element page but see nothing related to a ".gcs" class rule.

In addition, there are two problems that need to be corrected.

1. The search results that I get after conducting a few TEST searches no longer bring up anything at all on my site. Do I need to add or redirect a pathway to my site?

2. The search bar and button push downward the title "Peter" and the top graphic on the page. Can I prevent the two push-downs by making the box and button an "overlay"?

I'm also curious about the page's URL: It's been changed. It now has an extension that I didn't add.
https://www.warrencampdesign.com/peter/peter-masterpieces.pg1-TEST.php#gsc.tab=0

Is that an erroneous extension that I might have created? Or is that a required extension to every page to which I add a Google Search Bar feature?

Wondering Warren

Posted 10 months ago
Gerry

offline
PVII Team

The style rules I gave you are simply the actual rules that the Google Search box style sheet. These can be found by using Developer Tools in Chrome or Firefox. If you want to use Google's Control Panel to set the look and feel read through this:

https://developers.google.com/custom-search/docs/ui

The Google Search needs to be set to search only your site. Refer to this for complete instructions:

https://developers.google.com/custom-search/docs/start

especially the 'Sites to search' section which your will want to limit only to your site.

Posted 9 months ago
wcamp

offline
Member

Wow, there's so much data and hyperlinks on the Google Search site. I got lost numerous times.

Nevertheless, I thank you for the suggestions and hyperlinks, Gerry.

I have good news as well as bad news.

Good news 1: The strange URL that appeared last week on my pages is gone. Thanks for guiding me on the "start" page.

Good news 2: I've fit a full-width search bar atop three pages that have a white background. I like how all three look.
https://www.warrencampdesign.com/amazinggrace/index.html
https://www.warrencampdesign.com/amazinggrace/index-phipps.html
https://www.warrencampdesign.com/amazinggrace/index-god-who-sees.html

Good news 3: My test searches bring up my site's pages only, along with thumbnail images, as I'd requested. It appears to work with each test effort.

. . .

Bad news 1: My Home page (and the majority of my site's pages) has a colored body. I want the box to have a transparent background. How do I accomplish that?
https://www.warrencampdesign.com

Bad news 2: Currently, the search box is the full width of the Home page; where in the Control Panel can I find the rule that sets a fixed width for the box?

Bad news 3: For no apparent reason, with the new search box added to the Home page, the page title ("Hearty Boys") and the graphic each drop ±30 pixels. I don't want that to happen. Please advise how to prevent that from happening.

Many thanks, Gerry!

Posted 9 months ago
Gerry

offline
PVII Team

1. I don't have any experience with using the Google Control panel, best to post for help on the Google forums or support. I can only advise how I would do it directly, use the rule I gave you earlier to set the box to transparent, and/or any other attributes you may want:

/* controls outer box */
.gsc-control-cse {
background-color: transparent !important;
border: none !important;
}

2. The usual way to control the position and width of the search box is to wrap it with your own div, and then set that div with the max-width and alignment styling; this way you can control it directly.

3. The drop is being cause by the position setting of your background image. Currently it is vertically centered (default). To fix, look at this rule in your style.css stye sheet:

header {
width: auto !important;
max-width: 100%;
margin-bottom: 8px;
background: url(../images/headright.png) right no-repeat;
}

-Add: top just before the right so that it now looks like this:

header {
width: auto !important;
max-width: 100%;
margin-bottom: 8px;
background: url(../images/headright.png) top right no-repeat;
}

The header background will no longer shift.

Posted 9 months ago
wcamp

offline
Member

What a valuable asset and resource you are, Gerry! I look forward to following your suggestions next week.

Incidentally, I emailed the Google Programmable Search Engine Community eleven days ago, requesting answers to my basic start-up questions. I've yet to receive an e-reply directly or on its forum. ( ; - (

Thanks, again, Gerry, for your expertise and continued support of your family of customers.

Warren

Posted 9 months ago
wcamp

offline
Member

My, my! Following your suggestions, Gerry, the new Google Search Engine box appears where I want it on my Home. I like its look.

May I ask if you might recommend a change to its width or placement or color or style? I've never created/styled/positioned a search box so I don't know the recommended parameters to meet.

In addition, would you suggest that I add a media query or two for small devices viewed vertically?

One question: I see that a "#gsc.tab=0" extension has again been added to the URL. I must have done something wrong. How do I correct that?

Much appreciated, Gerry!!!

https://www.warrencampdesign.com/#gsc.tab=0

Warren

Posted 9 months ago
Gerry

offline
PVII Team

Looks pretty good!

For the mobile presentation I would add this media query to position the search box at the top, full width and adjust the space between it and the title:

@media only screen and (min-width: 0px) and (max-width: 700px) {
.placementHome {
float: none !important;
max-width: 100% !important;
margin-left: 0px !important;
}
.header_titleTop {
padding-top: 0px !important;
}
}

The #gsc.tab=0 seems to be a setting in the console, see this article on how to remove it:

https://techubber.blogspot.com/2020/11/how-to-remove-gsctab0-appearing-at-end-of-url.html

Posted 9 months ago
paulw406

offline
Member

PVII does not have any search bar or site search tools.
The usual solution is to use Google Search, it's very popular and gets the job done. They do have a lot of documentation on implementation.
You would usually place the search box in the hear section of your page, near the navigation.

I assume all the listings that appear first for the search term are Google paid ads and cannot be removed from the listing?

-pw

Posted 9 months ago
paulw406

offline
Member

PVII does not have any search bar or site search tools.
The usual solution is to use Google Search, it's very popular and gets the job done. They do have a lot of documentation on implementation.
You would usually place the search box in the hear section of your page, near the navigation.

I assume all the listings that appear first for the search term are Google paid ads and cannot be removed from the listing?

-pw

Posted 9 months ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.