SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Google Search

5 years 9 months ago - 5 years 9 months ago #120770 by dennisth19
Google Search was created by dennisth19
Hi,

i inserted the code from google search and cant get the right css in order to show it properly.
Please can you provide me the right css? Thanks


Part of the message is hidden for the guests. Please log in or register to see it.


This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 9 months ago #120794 by Nick
Replied by Nick on topic Google Search
Hi Dennisth19,

Happy New Year! Hope you had a good weekend!

We're happy to help, however we don't want to take away the joy of learning, so we'd like to point you in the right direction initially.

We have a template design class, an HTML class, a CSS class, and a PHP class available to you as part of your subscription. Going through those should give you more than enough knowledge to make those types of modifications:
www.ostraining.com/courses/class/joomla/j3-templates
www.ostraining.com/courses/class/coding/html
www.ostraining.com/courses/class/coding/css
www.ostraining.com/courses/class/coding/php/

Another invaluable tool is Firebug:
www.ostraining.com/courses/session/jooml...introducing-firebug/
www.ostraining.com/courses/session/jooml...diting-with-firebug/
www.ostraining.com/blog/joomla/using-fir...it-joomla-templates/

After hearing all that, what are your thoughts? Would you be interested in taking the classes to learn how to do this type of change?

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121070 by dennisth19
Replied by dennisth19 on topic Google Search
Hi Nick,

fine, thanks. Hope you too?
Its not related to the lack of knowledge in css, but its a hang on in issue where i dont know a solution.
Please can you help me to get it work? Thanks

Please Log in to join the conversation.

5 years 9 months ago #121072 by Valentin
Replied by Valentin on topic Google Search
Hi Dennisth19,

Sure thing. By using Firebug, define custom CSS for this selector, which points to the box with gray border.
#gsc-iw-id1{
	height: auto;
}


Adding height: auto; will make the container wrap the google watermark image.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 9 months ago #121075 by dennisth19
Replied by dennisth19 on topic Google Search
Thanks, but the button is also affected

Please Log in to join the conversation.

5 years 9 months ago #121077 by Valentin
Replied by Valentin on topic Google Search
You're welcome!

We have a class that will help you to troubleshoot these issues: www.ostraining.com/courses/class/tools/webdev?task=view

Please give a try and let us know if worked as you expected

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121078 by dennisth19
Replied by dennisth19 on topic Google Search
Thanks, i will. But i need a quick solution now. What is the correct css code?
I tried a whole hour before and didnt get it...

Please Log in to join the conversation.

5 years 9 months ago #121080 by Valentin
Replied by Valentin on topic Google Search
One quick caveat before we continue, please check out our Support FAQ on the limit of our support: Support FAQ

The button uses this selector: input.gsc-search-button
Depending on the result you need, add CSS properties such as height, width, background and/or color.

Hopes this helps

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121089 by dennisth19
Replied by dennisth19 on topic Google Search
I asked now 2 questions/tickets and got on both the recommendation for learning css via a course.
Thats fine, but i subscribed especially because of the support if i have an issue.

Then i get the notice that i have to read the faq?!
Iam a bit dissapointed about the way now the support seems to work.
I really hope i get the support i subscribed for instead of getting this kind of answers...

Now i added this code but nothing changed:

input.gsc-search-button {
height: auto;
}

Please Log in to join the conversation.

5 years 9 months ago #121103 by Valentin
Replied by Valentin on topic Google Search
Sorry for not being clear. We'll still guide you through the process.
height is not enough, it's required more code depending on which result you need.

The button is missing text. Edit the html and include the value attribute:
value="Suchen"

and remove the src attribute:
src="http://www.google.com/uds/css/v2/search_box_icon.png"

The end result for the submit button will be:
<input type="image" value="Suchen" class="gsc-search-button gsc-search-button-v2">

Looking forward to help you

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121108 by dennisth19
Replied by dennisth19 on topic Google Search
Hmm, i have only this script in the module:

Part of the message is hidden for the guests. Please log in or register to see it.

Please Log in to join the conversation.

5 years 9 months ago #121154 by Nick
Replied by Nick on topic Google Search
Hi Dennis,

Your text didn't get attached for security reasons. It was automatically filtered by our firewall. Please add it to a .txt file and upload that instead.

Thanks,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121165 by dennisth19
Replied by dennisth19 on topic Google Search
Hi,

here is a pic:

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 9 months ago #121168 by Valentin
Replied by Valentin on topic Google Search
Hi Dennis,

Right! The embed code is just javascript, and the html is generated on the fly. Making the button visible would be a bit harder than expected since it's not easy way to inject the suggested HTML to make it more visible:
value="Suchen"

This CSS can make it a little more visible:
input.gsc-search-button {
    height: 35px;
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121288 by dennisth19
Replied by dennisth19 on topic Google Search
Hi,

even with this css code nothing changes...

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 9 months ago - 5 years 9 months ago #121308 by Valentin
Replied by Valentin on topic Google Search
Hi Dennis,

Let's make a small change:
input.gsc-search-button-v2 {
    height: 35px;
}

If that doesn't work either, include !important:
input.gsc-search-button-v2 {
    height: 35px !important;
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121312 by dennisth19
Replied by dennisth19 on topic Google Search
Hi,

with important now the high works, but now the magnifier isnt shown.

Please Log in to join the conversation.

5 years 9 months ago - 5 years 9 months ago #121316 by Valentin
Replied by Valentin on topic Google Search
Probably is due the template CSS is messing with Google search embed.

You can set a custom magnifier image as background for the button:

1. Create or download a png magnifier image from here and upload into your site.
2. Then add custom CSS to apply it as background for the button. For example:
input.gsc-search-button-v2 {
    background-image: url(/path/to/magnifier.png);
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121353 by dennisth19
Replied by dennisth19 on topic Google Search
Hi,

i have this code now active:

input.gsc-search-button {
height: 35px;
}

input.gsc-search-button-v2 {
height: 35px !important;
}

input.gsc-search-button-v2 {
background-image: url(/images/graphics/magnifier.png);
}

But it shows no magnifier?

Please Log in to join the conversation.

5 years 9 months ago #121376 by Valentin
Replied by Valentin on topic Google Search
Hi Dennis,

I was looking for the search form in your site to check it with Firebug, but I don't see it anymore.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121485 by dennisth19
Replied by dennisth19 on topic Google Search
Hi,

i needed to make a restore, but now its visible again.

Please Log in to join the conversation.

5 years 9 months ago #121512 by Valentin
Replied by Valentin on topic Google Search
Hi Dennis,

You need to include !important in order to force the background image, and add other properties to display the magnifier just once in a center position as follows:
input.gsc-search-button-v2 {
    background-image: url(path/to/magnifier.png) !important;
    background-repeat: no-repeat;
    background-position: center;
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121529 by dennisth19
Replied by dennisth19 on topic Google Search
Hi,

this is the code i have in my custom css file:
input.gsc-search-button-v2 {
    background-image: url(path/to/magnifier.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    height: 35px !important;

But it looks the same, even with important?

Please Log in to join the conversation.

5 years 9 months ago #121531 by Valentin
Replied by Valentin on topic Google Search
Be sure to replace "path/to/magnifier.png" with the real path to your magnifier.png image.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121532 by dennisth19
Replied by dennisth19 on topic Google Search
;-) works!

Please Log in to join the conversation.

5 years 9 months ago #121536 by Valentin
Replied by Valentin on topic Google Search
Wonderful! :)

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!