Jump to content
Denis Ciumbargi

Google Custom Search v2 VERSUS Pagelines

Recommended Posts

Denis Ciumbargi    3
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    1,327
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    3
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    547
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    247
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    547
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    3
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    3
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    247
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

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • bnapoli
      By bnapoli+
      On my site www.modishmel.com I'm seeing the "blog post title" within the "pins" plugin section breaking words into multiple lines. See screenshot attached.
      Only seeing it in Firefox. Can you help?

    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
×