Develop Reference

Customizing google custom search engine. Especially with changing the title font

I have a custom google search engine on my website. The problem is that I am facing an issue where I just can't change the font of the search result titles. So when I try to resize my webpage the results looks too large and jumbled... I did managed to change the snippet size by:
.gs-snippet{
font-size: 3vw;
}
However, when I tried to change the title like this
.gs-title {
font-size: 3vw;
}
it just doesn't budge.... I do not know why it works with .gs-snippet but not with .gs-title. If you can figure out my issue of what I am doing wrong or if you can propose a different way to change the title then that would be great!
Thanks a bunch,
Archie

If you're overwriting a CSS style from Google, then !important is your answer. Read about it here. !important overrides other styles that don't contain !important.
.gs-title {
font-size: 3vw !important;
}
Also, are you sure you want to use 'vw' as your unit for font size? I would suggest using either 'px' or 'em'. That may be the issue, or at least it's worth a shot.

Incorrect viewport size causing animations to not excute on scroll

Note: This has been solved. Look at the bottom of this post for the fix.
I have this bizarre issue that I've pulling my hair out over for the past few days. Thankfully I think I've isolated it to an issue with incorrect window / document heights causing my scroll animations to never appear. I'm trying to use the lightSpeedIn animation from animate.css to animate a h2 header in, but wow.js will simply hide the element and never reveal it despite scrolling past it. If I remove wow.js and use only Animate.css the h2 title will animate just fine.
I've done some debugging using the following code and I think I know why wow.js (I've also attempted using other scrolling libraries without success) is breaking - for some reason jQuery is reporting both the window height and document height to be 943. There's clearly a scroll bar on the website, so I'm pretty sure any scroll implementation I do won't work because the code never sees anything to scroll to.
<div id="console">
$(window).height() = <span id="winheight"></span> <br/>
$(document).height() = <span id="docheight"></span>
</div>
Will result in the following appearing on the website.
Implementation with wow.js - doesn't work
<h2 class="section-heading text-center wow lightSpeedIn">Sputnik Fact Sheet</h2>
In this case wow.js seems to be assiging the following style to the header, but it never seems to be toggled.
visibility: hidden; animation-name: none
Implementation with only animate.css - works
<h2 class="section-heading text-center animated lightSpeedIn">Sputnik Fact Sheet</h2>
The strangest fact about this is that the problem only occurs on one part of the website - I've got wow.js working just fine on other parts. Some digging with firebug revealed that animation "lightSpeedIn" doesn't exist when it does. I've even attempted copying and pasting animation names from other areas of the website (e.g. the legacy tab) into the h2 element but it'll always think the animation name doesn't exist.
I'm stumped as to how to go about fixing this. Anyone have any insight into my issue? You can view a live demonstration of this problem here.
UPDATE 1: I thought this might have been a plugin/library incompatibility, so I removed everything but animate.css and wow.js - didn't fix anything. I'm completely stumped.
UPDATE 2: Attempted using other scroll libraries. They don't work either. Narrowed it down to a possible issue with content being "invisible" to the viewport.
UPDATE 3: Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.

Found the solution. It was super simple - I had overflow-x: hidden on my html,body selector. I removed it and now the wow.js script works correctly.
Previous CSS Code
html,body {
height: 100% !important;
margin: 0;
background-color: #161519;
color: #fffafa;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14.5px;
line-height: 1.42857;
max-width: 100%;
overflow-x: hidden
}
Fixed CSS Code
html,body {
height: 100% !important;
margin: 0;
background-color: #161519;
color: #fffafa;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14.5px;
line-height: 1.42857;
max-width: 100%;
}

How to display content anywhere using html class or ids

I want to write content in a post editor and display it somewhere in the same page only.
Previously I tried:
<div class="post-header-title"></div> - Where I like to display my content.
In Post Editor:
<style>
.post-header-title:after
{
content:"Content that I'd like to display.";
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
}
</style>
The above step using Pseudo-elements worked perfectly and it rendered the text that I want to display in my desired place.
But it can not be highlighted and search engine can not index it. So it became useless. Here is a codepen:
http://codepen.io/anon/pen/Ggwjpj
This is just an example.
I want to do something like this.
So how can we do that? Can anyone help me please.

Jquery has many functions to add html to your web page. To reproduce something like what you did, just use the after method.
$(".post-header-title").after("<span class='text'>SomeContent</span>");
See an example

How do I vertically fill a container with uppercase text using JS/CSS?

I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.

line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )

Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};

Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.

So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.

Google Maps zoom control is messed up

I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
Update
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.

Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.

#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by #Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
Setting it back to map_canvas fixed it without the max-width change.
<div id="map_canvas"></div>

If you're using Bootstrap, just give it "google-maps" class. This worked for me.
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

Just share #Max-Favilli answer:
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to #Max-Favilli
https://stackoverflow.com/a/19339767/3070027

If you're a Twitter Bootstrap user you should add this line to your CSS:
.gmnoprint img { max-width: none; }

I had this problem as well and using
.google-maps img {
max-width: none;
}
didn't work. I eventually used
.google-maps img {
max-width: none !important;
}
and it worked like a charm.

If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.

Those options you guys told me didn´t work for my website.
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!

I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
http://page URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/