Community Forums › Forums › Search › Search Results for 'svg'
-
AuthorSearch Results
-
June 4, 2013 at 9:22 pm #44106
Topic: Creating tables in HTML
in forum Design Tips and TricksAnahereMemberHi,
I was wondering if some one here could help. I'm creating a small website for a friend who owns a Fish and Chip shop. I've chosen Executive theme because it is responsive. All is good with the template however, I need to create an HTML table so I can list the menu - which is really extensive. I have spent hours searching for a plugin but couldn't find one, or one that didn't have horrific reviews. Anyway, I have the basics of the table sorted but....My challenges are: 1. I can't get the cells equally spaced 2. I need the content of second and fourth columns to align right as these will be the prices 3. I need each heading to stretch across two columns.
Details follow but any help would be hugely appreciated.
AngelaThis is the code I've written:
June 2, 2013 at 4:41 pm #43682In reply to: Simple Social Icons: securing wp-content
cehwithamMemberYou'll need to allow access to the eot, svg, ttf and woff font file formats so the plugin can load the fonts required.
Chris
Twitter: cehwitham Web: cehwitham.com
May 29, 2013 at 10:12 am #43074In reply to: Executive Call to Action
Natr0nMemberWell, that's what I thought at first, so I checked it a few times. It's a bit hard because, in the instructions, the sample code is written length wise so that you need to use a slider to view the whole thing. That doesn't seem possible in the widget, so you just have to write it all out in a paragraph. Here's a screen shot of the code I copied from the instructions:
March 29, 2013 at 11:54 am #31951In reply to: Adding a Font Face to a theme (.tff file)
SusanModeratorThanks, Brad & Diane - still not there yet!
I used the Font Squirrel generator, and created the zip file. I created a folder in my theme folder and uploaded the .eot, the .svg, the .ttf, and the .woff files.
Then, I added this to my stylesheet:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 29, 2013 */ @font-face { font-family: 'simplyglamorousregular'; src: url('simply_glamorous-webfont.eot'); src: url('simply_glamorous-webfont.eot?#iefix') format('embedded-opentype'), url('simply_glamorous-webfont.woff') format('woff'), url('simply_glamorous-webfont.ttf') format('truetype'), url('simply_glamorous-webfont.svg#simplyglamorousregular') format('svg'); font-weight: normal; font-style: normal; }
Then, where I want to use it, I have this:
font-family: 'simplyglamorousregular', arial, serif;
But, it's not working.
Brad's #2 had a second part of CSS styling, which I haven't added because I'm not sure where this goes:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
March 29, 2013 at 11:08 am #31945In reply to: Adding a Font Face to a theme (.tff file)
Brad DaltonParticipantDid you try this generator http://www.fontsquirrel.com/tools/webfont-generator.
Installing Webfonts
Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.
1. Upload your webfonts
You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
2. Include the webfont stylesheet
A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:
@font-face { font-family: 'aurulent_sansregular'; src: url('aurulentsans-regular-webfont.eot'); src: url('aurulentsans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('aurulentsans-regular-webfont.woff') format('woff'), url('aurulentsans-regular-webfont.ttf') format('truetype'), url('aurulentsans-regular-webfont.svg#aurulent_sansregular') format('svg'); font-weight: normal; font-style: normal; }
We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
3. Modify your own stylesheet
To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change.
For example:p { font-family: 'WebFont', Arial, sans-serif; }
4. Test
Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.
Troubleshooting
Font-Face ProblemsHaving trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
Fonts not showing in any browser
This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted
http://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts
March 29, 2013 at 10:57 am #31943In reply to: Adding a Font Face to a theme (.tff file)
Diane KinneyMemberThis is how I do it:
Create a folder called fonts in your theme directory and upload the variations there.
Add the following to your style sheet:
@font-face {
font-family: 'Nexa';
src: url('fonts/nexa.eot?#iefix') format('embedded-opentype'),
url('fonts/nexa.woff') format('woff'),
url('fonts/nexa.ttf') format('truetype'),
url('fonts/nexa.svg#StRydeRegular') format('svg');
}
Also note, you will want more than just the .ttf file.
Need more help? Find me on Twitter @gidgetthegeek
January 24, 2013 at 9:39 am #14301In reply to: Using @Font_Face for custom fonts
GrimwolfMemberI didn't find anything inside minimum > style.css that looked exactly as you descriped, with the font code immediately following h1 {
But I found similar things, like this:
/* Headlines
------------------------------------------------------------ */h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 1.25;
margin: 0 0 10px;
}And tried changing
font-family: 'Open Sans', sans-serif;
to
font-family: 'immortalregular', Open Sans, sans-serif;
but it didn't work.Also, I tried re-uploading all the fontsquirrel files unaltered.
The code inside the stylesheet.css included in the font folder now looks like this:
@font-face {
font-family: 'immortalregular';
src: url('immortal-webfont.eot');
src: url('immortal-webfont.eot?#iefix') format('embedded-opentype'),
url('immortal-webfont.woff') format('woff'),
url('immortal-webfont.ttf') format('truetype'),
url('immortal-webfont.svg#immortalregular') format('svg');
font-weight: normal;
font-style: normal;}
I tried using the .ttf font on my computer itself and it works properly, so the files aren't broken.
I've also tried viewing it in three different browsers, including Firefox, IE and Chrome.
January 9, 2013 at 5:07 pm #10824labecsMemberI am trying to reproduce a website for my friend. Her regular designer disappeared and she wants me to help her get the site redone. I have a special font that she had on the old website and I need to implement it on the subnav and the footer on the new site. I have no idea how to do this.
The font she has is ‘CarnivaleeFreakshowRegular’ and this is the code she had on the old website... how can I do this? Please?
<code> @font-face {
font-family: ‘CarnivaleeFreakshowRegular’;
src: url(‘fonts/carnevalee_freakshow-webfont.eot’);
src: url(‘fonts/carnevalee_freakshow-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/carnevalee_freakshow-webfont.woff’) format(‘woff’),
url(‘fonts/carnevalee_freakshow-webfont.ttf’) format(‘truetype’),
url(‘fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
} <code>January 8, 2013 at 9:07 pm #10576In reply to: How to use images as secondary navigation?
labecsMemberOh, Buddy... I got the plugin and I love it, but... I don't like how it looks on my page, so I decided to go with the special font for the navigation and the footer, so can someone help me with that?
I have this code from the old page
<code> @font-face {
font-family: ‘CarnivaleeFreakshowRegular’;
src: url(‘fonts/carnevalee_freakshow-webfont.eot’);
src: url(‘fonts/carnevalee_freakshow-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/carnevalee_freakshow-webfont.woff’) format(‘woff’),
url(‘fonts/carnevalee_freakshow-webfont.ttf’) format(‘truetype’),
url(‘fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
} <code>But I have no idea of where to place it within my Lifestyle theme 🙁
January 3, 2013 at 8:25 pm #9356In reply to: How to use images as secondary navigation?
labecsMemberThank you so much, Marybaum... if you had seen my face when I started reading your answer you would have laughed hysterically... my ignorance of php is gargantuan.... I understood the html code perfectly but after that you started speaking some death tongue 🙁
I sort of like the last "simplest thing" you mentioned, but I have no idea where to start...
<<Or 3. Copying the subnav chunk of the original menu.php — the action ‘genesis_do_subnav’ to a new file in your theme and naming that new file subnav.php, then editing that to take out almost all the php and leaving just the html markup with the images as links.>>
Where is the original menu.php and so on? Would you mind explaining that to me in simpler terms, or with step to step instructions, please?
I'm still not past css and html 🙁
For a simpler option, I also have a special "old western" font that I could use for the Navigation and the footer, and I don't know if it would be easier to do that.
I have this code from the original website (I'm actually trying to reproduce it with a different theme)
<code> @font-face {
font-family: 'CarnivaleeFreakshowRegular';
src: url('fonts/carnevalee_freakshow-webfont.eot');
src: url('fonts/carnevalee_freakshow-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/carnevalee_freakshow-webfont.woff') format('woff'),
url('fonts/carnevalee_freakshow-webfont.ttf') format('truetype'),
url('fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular') format('svg');
font-weight: normal;
font-style: normal;
} <code>But I have no idea of what file to put it in and where so that it only appears on the subnav and the footer.
What do you think would be easier, or how can I do both...?
Thank you in advance.... I will owe you dinner 🙂
-
AuthorSearch Results