Jump to content
Denis Ciumbargi

Google Custom Search v2 VERSUS Pagelines

Recommended Posts

Denis Ciumbargi

Hi,

 

I have been trying to use Google Custom search on my pagelines enabled website. I have created the engine, I have created a custom page on my site for the search form and results. On the page template i have used custom template with content boxes where i have injected the script in one of the boxes as injecting the script directly in the page content is not really possible. Also, i would like not to edit any php files from the core as i just want control over the search page from dashboard.

 

As seen in other forums around here, there are some problems displaying the search button icon and on my case also a glow around the search input.

 

Check this link for the image please.

 

pagelinesvsCSE.png

 

https://www.dropbox.com/s/qwcruaxksntt5sy/pagelinesvsCSE.png

 

What is the best way to inject a script in pages / content boxes in order to have no conflicts with the preloaded styles from pagelines?

 

I want to use V2 of the script and not version 1 of the GCS as advanced css customization will offer some visual advantages but no functions advantages.

 

Can the framework have an update that will allow scripts injected in sections?

 

AS FOR AN EXAMPLE - Google Blogger on edit template has a button that just let's you select the section of the page you want to edit by selecting it from a drop down and displaying the php code from that region of the page so you can put your custom code scripts there. Would work great with custom templates in framework here. People could insert their ad scripts, search engines scripts or any other kind of scripts without the need of extra trouble.

 

For this problem I DO NOT WANT TO USE ANY MORE EXTRA PLUGINS that moderators usually recommend, I DO NOT WANT FOR EVERY PROBLEM to have an alternative in the PAGELINES SHOP to purchase  ;).

 

The framework should work on it's basic form with the most common scripts out there and have ways to read them and load their settings / styles instead of overriding them.

 

As for a P.S.

 

The theme still needs to better work with Jetpack (Downloads: 5,438,322 - YES 5 MILLIONS) and in my case better support for content width in galleries.

 

2 FRAMEWORK UPDATES AND PROBLEM STILL NOT SOLVED SINCE THREAD OPENED.

 

FONT AWESOME still not updated since the last 2 framework updates since font awesome major update.

 

 

 


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Why not simply use the plugin?

http://wordpress.org/plugins/google-search-cse/

 

Also the best method of inserting code is to use a hook, see here for more information - http://support.pagelines.me/docs/customization/hooks/

 

I also recommending looking at the Hooker plugin, if you're not comfortable using hooks.

 

The issue related to Jetpack galleries, from what I can remember of your topic, this requires custom CSS, I recommend you inspect the HTML using Firebug or your browsers built-in web dev tools and have a play with the CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Denis Ciumbargi

As i was saying above, i do not want extra plugins. I just want a framework that works with most common scripts out there if possible. 

 

As i was saying above, i do not want to be redirected to buy more plugins from Pagelines store.

 

Do not take this personal but users are buying products with a promise of a good product not for the promise that the product will need more money to make it work with some basic functions that should be there.

 

As for the hooks. Please do create better support pages on how to use them if we, the customers, must be also programmers by default.

 

Thank you.

 

As for the Jetpack galleries, no, custom css solved partially a problem not the problem. The problem is the define width.


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Rob

Denis,

 

I use Google Custom Search on my own site and have tried to apply custom CSS to adapt it to look closer to my own.  You can find most of the elements of the Google Search using either Chrome's Inspection Tool or Firebug for Firefox. Once found, you can test changes, copy and paste to Dashboard > PageLines > Site Options > Custom Code.

 

No plugins, and no need for 3rd party or Store products.

 

I placed the Google code directly to a text widget in my sidebar, and directly to the Text editor in a page for the results. I did not need to customize the page for results, or the text widget for the form.

 

Yes, Google does add some styling.  Controlling that is possible using CSS.

 

The use of hooks is solely necessary for PageLines customers who wish to implement extreme customizations.  We design this product to make it possible for anyone to build a very nice, professional, and even customized site without programming skills.  However, if a customer insists on doing things the product wasn't designed for normally, essentially they are redesigning the code, and then skills with hooks become important. We provide documentation, which few read carefully, to help with the customizations.  We also provide answers to those with reasonable questions about customizations in the forum in a timely manner.  So, I'm unsure why you seem so unhappy, as we're not the ones insisting on using hooks. Rest assured, we will provide the best support possible.

 

To be very clear, we are not responsible for the way any 3rd party product, including Jetpack, behaves on your site.  There are too many variables for us to take on such responsibility.  Sometimes you just have to ask the 3rd party plugin developer for answers about their product.  Keep in mind, plugins often create conflicts with other plugins, not just PageLines, so we always recommend deactivation as a means of testing the cause of a problem.

 

As for galleries, I just implemented a gallery, directly from WordPress, without Jetpack, and it looks fine. I was able to establish settings via Media Gallery.  For the record, we work incredibly well with Jetpack, and have had no other complaints about its gallery that I know about.  Considering the volume of forum topics here daily, I would expect that if PageLines had an actual conflict with Jetpack, we'd be swamped with complaints.  So far, yours is the only one, which points to a non-PageLines conflict.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Simon

If you want to include custom css and/or javascript here are your options:

 

1. Use the simple headerscripts/css area in the PageLines admin area. This will show your code on all pages.

 

2. Use the hooks plugin as recommended by Danny, its free for Plus members.

 

3. Use a WordPress hook to insert your css/javascript using WordPress page conditionals to target only your page. There are 100's of thousands of google results on wordpress hooks etc. If you tell us what page you want code on I can show you the code snippet required.

 

4. Create a custom section with your css/javascript files inside it and put that section on your page.

 

 

2 FRAMEWORK UPDATES AND PROBLEM STILL NOT SOLVED SINCE THREAD OPENED.

What thread?

 

 

FONT AWESOME still not updated since the last 2 framework updates since font awesome major update.

We bundle our own custom version of it, we will update it at some point, but its hardly mission critical.

Share this post


Link to post
Share on other sites
Rob

Denis,

 

This is the CSS. You're free to edit it, but remember, this code is created by Google. I cannot guaranty that changes you make will work.  The glow effect is not created by, nor controlled by PageLines.

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
}

It is the box-shadow which is set to create the glow.  I must point out, Google provides selections of style in their customization settings when creating the code for the search and results.   Google does not allow custom CSS changes for search results, for the record.  These are provided from Google, pre-styled, in an iFrame. You should know that you cannot style the content of an iFrame in the destination, only at the source.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Denis Ciumbargi

@Simon_P - Thank you.

 

Here is the link of the page -  http://www.sansapentrusansa.org/cautare/

 

I would love some help for steps 3 and 4 as they sound really good even if i am a stranger to hooks.

 

And, Simon, really Thank You for the way you answered. gave me hopes and a feeling of being listened. Thank you man!


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Denis Ciumbargi

@Simon_P

 

Ok, the page id is easy to get, i can also take that from the edit page dashboard.

 

To insert the script and to target that page id i need to create a hook. that means i will have to insert the script into that page or in the script section in pagelines dashboard section as i got confused. Or use the script and the page id in a hook?

 

I have to do this right and save you from myself :))


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Simon

OK lets keep it simple with a fairly generic example. Im going to assume your page ID is 12 as i cant remember what it is ;) Were going to add css and js to that pages <head> area with one hook in pagelines-cusomize or a child theme functions.php like so....

add_action( 'wp_head', 'denis_custom_head' );

function denis_custom_head() {

    // If not on the page just return.
    if( ! is_page( 12 ) )
        return;

    // If we got this far it must be page ID 12
    // So lets break out of PHP and do the js and css.
    ?>
<style>
/* css start */

.banana{
    color: yellow;
}
/* css end */
</style>
<script type="text/javascript">
/* javascript start */

/* javascript end */
</script>
    <?php
    // Now were back in php, function is finished.
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
    • MiraAdmin
      By MiraAdmin+
      Looking for some help on a recently developed issue. Editor will not load. 
      Theme:  DMS2
      Error from:  Chrome - Inspector - console view
      Error message: Refused to execute script from 'http://xxxx.xxx/wp-content/themes/dms/dms/editor/js/gettext.js/?ver=4.9.7' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
      Occurs on all sites on same server. 
      WP versions to 4.9.5, 4.9.6, 4.9.7 = same behavior. Worked properly on these same versions until 07/04/2018.
      No new plugins. Isolating plugins offers same behavior. 
      Server vendor reports no changes, patches, etc. 
      Server re-starts no impact.  

      Thank you. 
    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
×