CSS + FONT + Image replacement - html

I stumbled on a site yesterday and forgot to bookmark the url. I'm stumped though because google is not helping me trace my steps. The site was basically a text to image converter for preserving your specific fonts in the browser. What made this one unique was that the text was fully selectable, however what was being displayed was the image that was generated using the desired font.
They required a subscription to their service so I disregarded it and moved on. Turns out I left too quickly and I'm interested in trying the product now. Does anyone know what website I stumbled upon, and if they have experience with it?
BTW, I'd recognize the link if I saw it. It was something like freemefont.com or something like that.
Thanks

You may mean cufón: Take a look here. It's at least something like you describe, you upload fonts, and it generates javascript to render the same or as close as possible I guess, as those fonts would.

I'm using TypeKit for that - they don't really create images, but rather supply a font via CSS.

Here's a list of commercial webfont service:
fontspring
kernest
typekit
typefront
typotheque
if it's not one of these you stumbled on you can try the free alternatives (harder to setup) listed in the other answers.
Ill add to the (free) ones already proposed a php based one:
PCDTR

Do you mean Facelift? http://facelift.mawhorter.net/
Another alternative, which I'm pretty sure you don't mean, is sIFR: http://wiki.novemberborn.net/sifr/

these links should help you out
link1
link2

Related

How can I add a table in a theme using Wordpress

I’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.

Find all elements in website to which a certain css rule applies

For a big site renovation project I am looking for a way to find all elements in a website to which a certain css rule applies. This site has been extended for 6+ years, so CSS rules are not systematic/logical at all.
For example: I want to know on which pages form input[type='text']{} is mentioned on the entire site.
I cannot do this with a simple 'find text' search, because there are a LOT of CSS rules that are specifically set to a certain element (e.g. #login form input{} or form textarea.forminput_small{}), so there probably is quite some overlap. Furthermore there are a LOT of pages, so I really don't want to do this manually.
My desired output would be:
input[type='text']{} is on: /index.html, /search.html, /contact/form.php etc
For me a solution like a browser plugin, external website tool or PHP script would be fine.
Hope someone has a nice solution for this problem!
Edit 9 August 2018: digging up an old thread. However, still not found a good solution, but I did find the element-finder plugin for Atom. Unfortunately, it doesn't work anymore. The GIF image in the description shows what the purpose of this plugin (i.e. my question) is. Any ideas for an alternative?

What is sfdocready?

I see sfdocready in some footers of pages I have been working on. I cannot find anything about this?
For example:
<sfdocready id="sfDocReady"></sfdocready>
Thanks!
This has to do with Superfish (the <sfdocready> and <sfmsg> tags).
I just determined what was doing it in my case. Using Safari, I have (well, had, it's gone now for this bizarre behavior) the Awesome Screenshot extension installed. There is a checkbox in its settings called "Enable similar product search powered by Superfish" which looks for images on the page and uses them as search parameters to provide comparison shopping deals for you.
In its defense it did prompt me if I wanted to see price comparisons, but it did so on Amazon in a way that actually looked like the prompt came from Amazon.
To the answer above me about Firefox inserting it when you save the document, that's only because an extension or some JavaScript inserted it first, it has nothing specific to do with Firefox. It also has nothing to do with Wordpress.
Somewhat sleazy stuff, imo.
This looks like it's got something to do with Wordpress themes.
I have, an assumption, that this tag means: "safe document is ready", so something is running only after whole document has been loaded. But what exectly does it mean and how does it work, it`s a big question.
Near this tag I have also also often seen <sfmsg> tag.
This tag is inserted by Firefox when you save the page as an HTML document.
I issued this problem yesterday. I have firefox with a plugin named Awesome Screenshot. In order to solve this you need:
Click over the Awesome Screenshot
Select options
UNCHECK/DISABLE the option: "Enable similar product search powered by Superfish"
And that is all!

template removal/detection/difference utility for HTML and other text

I remember reading a while back on some random website about a program that would look at multiple pages on an HTML site and detect the differences/similarities between the pages to automatically detect which parts were template "boilerplate" and which parts were new content, and then based on this, automatically spit out just the parts that are content.
Unfortunately, I didn't remember enough details about this utility to actually find it on google, so I wonder if any of you guys have run across anything like this, and CAN remember the name of it.
Thanks.
Murphy's Law (or is it some other law) has stricken, and I've found it just moments after I'd given up and posted this question. The project I am thinking of is this:
http://code.google.com/p/boilerpipe/
Thanks.

Enlarging Image in New Window?

I just did a quick search for my question and couldn't find anything directly on point.
I'm still very new to HTML and was wondering if someone could tell me how I could add a picture to my website and set the code so that if I click on it, it enlarges the picture in a new window.
I'm going to be adding around 600+ pics to my website so I was also wondering if there's a way to write the code once and have it apply to all the pics I add.
Thanks in advance,
- Danny B.
There's many many ways in which you could do this. The basic HTML for inserting an image with a link to a new window will be:
<a href="enlarged.html" target="_blank">
<img src="photos/photo-name.jpg" />
</a>
But it is a fair bit more complicated if you want to be able to dynamically display a large number of photos. If you want to code this yourself, you'll want to look into using something like PHP to output the HTML code automatically for 600+ images. Then instead of pointing the link for each to a new page, you might want to consider having the images load in a cool way, such as a javascript lightbox/colorbox some of the other answers suggest.
One possible alternative solution might be to look for some pre-created photo album script. I don't have any experience of these so I'll let someone else make some suggestions on that.
There are several ways to do this, but I'm assuming you'll have a simple site with lots of images on one page, and you'd like the images to zoom open "in a cool way".
Check out this: http://colorpowered.com/colorbox/
... click on View Demonstration and then see the various photo handling options.
This needs just some basic HTML and minimally configured Jquery. Very simple to use and produces a nice effect.
Google around using the keyword lightbox. Most of the solutions are ready-to-use Javascripts. Just include once, assign some IDs/classes, execute during onload and that's it. I personally have good experiences with Lightbox2 and jQuery Lightbox plugin.
I decided to go w/ target="_blank" -- Lightbox2 seems like it'd be great, but I'm really not sure how to use it and where to put all the code. The instructions I've found for it still assume the user has some standard knowledge in the field, that of which I do not currently possess. So, I'll stick to the target/blank approach until I can get more familiar w/ coding and then I'll upgrade to Lightbox.
Once again, I want to say thanks to everyone. You guys always respond quickly and accurately.
With much appreciation,
- Danny B
The simplest way would be to add a link to it, and set the target attribute to target="_blank". The link should point to the image itself. This would regularly open a new tab though, if you want a whole new window, you should tryhref="javascript:window.open('myimage.png','_blank','toolbar=no,menubar=no,resizable=yes,scrollbars=yes')",which would open a new, standalone window. If you're looking for fade/resize effects and such, try one of the other answers posted.