I am trying to understand how to integrate google custom search into websites, I want to accomplish the same result php.net has on their search page:
http://www.php.net/results.php?q=dummy+text&l=en&p=all
As you can see, their google custom search button and textbox purple border and search results frame is embedded in their layout, it doesn't look out of place. How did they do this?
I have read the google custom search help pages, they are too obscure to assimilate for newbies like me. I have also tried tinkering with the display settings of google custom search, and tried to understand the custom development docs to no avail. If someone could show me by example it would be greatly appreciated.
The custom styling can be achieved via css. If you are using Chrome browser, you can right click on search element, select "Inspect element" from the menu and this will bring up the Chrome console, where yu can find which element has what css class. The cse elements have usually classes starting with gsc- prefix. Then you can use those classes to write your custom css. E.g.:
.gsc-input-box {
border-color: purple !important;
}
Here is a jsfiddle example: http://jsfiddle.net/m8Twp/
Related
I'm creating some project using HippoCMS 10 and I need to add RichText editor as part of the page, so that customer can use it and fill something there. This editor must act exactly the same way as in Document Editor (customer can click Image button in toolbar and select image from ImagePicker dialog box).
Can't find anything about it in HippoCMS official documentation. I learned how to create custom plugins and how to integrate CKEditor into page separately, but for image picking, I need default behaviour as in Hippo.
How can I achieve this? Any help will be appreciated!
I think your question was answered on the community group. The answer there was:
"it should be quite easy to have a CKEditor in the website.
However, it doesn't really make sense to me to have site visitors able to pick CMS documents and images from the site. The picker dialogs are designed to work inside the CMS only. You should be able to create your own picker dialog that can read from a REST service that exposes the images/documents.
I don't think it will be possible to reuse the CMS picker dialog in the site."
and
"your use case is fine, when I said "it doesn't really make sense", I was really referring to the technical limitations of the pickers. You should be able to achieve what you want with a custom dialog that plugs into a REST service though. Unfortunately there is no quick solution for this that I can think of."
Just adding this for future reference.
A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/
Fullpage.js creates a fullpage scrolling website design if you use this Jquery plugin on your website.
If you prefer you can add image tags to this website using attribute "data-src" instead of "src" which will lazy load images (they only show up when you scroll to them). This works perfectly, but not when you do a search on the page (CTRL-F). In that case it jumps to the right section and the right word on the page, and if that is a page with images, those images will not show up.
There undoubtedly would be a solution for that, but does anybody knows a solution?
There undoubtedly would be a solution for that,
Not really.
There's an open issue in fullpage.js issues forum and no solution has been found for it yet.
The only solution is using the fullpage.js options scrollBar:true or autoScrolling:false. which will create a normal scroll bar on the site.
Greeting and thanks for your generosity in providing this wonderful forum,
I'm using jQuery Orbit Slider and Reveal Modal. I setup the slider to include content and within the content are hotlinks to a series of modals.
I can't get the first modal, in the series of modals, to open. It appears the plugin is programmatically generating inline CSS that is overriding my CSS stylesheet. Mainly z-index selector is keeping the first modal hidden (or invisible). The subsequent modals in that series work as intended.
When viewed using Chrome Inspect Console shows the inconsistency please note at "featuredContent10" which is where the slide4 resides (it's actually a background image). The data-reveal-id="slide4-1" is the first one in the series of modals. I did not add the inline styles it's in the reveal.js file.
Unfortunately, I don't know enough about reveal and can't find any information regarding a solution. The information I came away with is to ask for assistance on stackoverflow.com. 99.9% of the time I find solution on my own, however, I'm at a lost and my client likes the features of both plugins. Any help you can give me would be very much appreciated.
If it helps here’s a link to the beta site: http://www.partnershipwithearth.com/thecooperationway-1/
Go to Slide 11 lower left link is the culprit. You'll notice the dialog box and close button do appear without the image (slide4-1).
Your expertise is greatly appreciated
Textbox of google translate (the left textbox- please view my screenshot: http://s970.photobucket.com/albums/ae190/swenteiger7/technology%20screenshot/?action=view¤t=google_translate_textbox_event.png) have a lot of nice effects such as automatic highlight a word, automatically scaled ...
I am currently need to create a textarea so in my web application. I want to know a technology (prefer based on ajax and work well across platforms JSP) or website tutorials which help me to make a textbox like google translate textarea.
Thank you for viewing my question
Just to get you started see: https://developer.mozilla.org/en/HTML/Content_Editable and the links at the bottom of that page.
Basically it's not actually a textbox. It's a regular html element, but is marked as editable so people can type into it. But because it's regular html you can do special effects with it.
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.