Web CMS Designs: Forums
 

 
Post new topic Reply to topic
Message
Display posts from previous:       
PostPosted: Thu Aug 23, 2012 2:31 am
Reply with quote Back to top
nextgen
Newbie
Newbie
Joined: Aug 05, 2012
Posts: 49
Location: Maryland

View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger MSN Messenger
ok i have to admit i am very jealous of your site and want the fonts rolling on mine as well. Please oh Please share with me the edits for the forum and footer please.
nextgenwith Kindness comes many rewards.
 
PostPosted: Thu Aug 23, 2012 4:48 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
Fonts
For the fonts I'm using 3 custom typefaces here, which is a little more than I might recommend for optimum performance, but I couldn't help myself Smile

The bold all-caps font is League Gothic
http://www.theleagueofmoveabletype.com/league-gothic

The main text is Junction
http://www.theleagueofmoveabletype.com/junction

which, once downloaded I took to the @font-face generator at font squirrel which created the markup and multiple formats of the font for me.

http://www.fontsquirrel.com/fontface/generator

Upload the fonts to the style directory of your theme and add the provided css to your style.css (at the very top)

The other font I use comes as ready to deploy package, which you do not need the font-face generator for.
BlackJack (script font): http://www.fontsquirrel.com/fonts/BlackJack

I ended up with something like this at the top of my style.css

css Code:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

@font-face {
font-family: 'JunctionRegular';
src: url('junction_02-webfont.eot');
src: local('?'), url('junction_02-webfont.woff') format('woff'), url('junction_02-webfont.ttf') format('truetype'), url('junction_02-webfont.svg#webfont8GGgnQl0') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic-webfont.eot');
src: local('?'), url('league_gothic-webfont.woff') format('woff'), url('league_gothic-webfont.ttf') format('truetype'), url('league_gothic-webfont.svg#webfontrU0NHBa2') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'BlackJackRegular';
src: url('black_jack-webfont.eot');
src: url('black_jack-webfont.eot?#iefix') format('embedded-opentype'),
url('black_jack-webfont.woff') format('woff'),
url('black_jack-webfont.ttf') format('truetype'),
url('black_jack-webfont.svg#BlackJackRegular') format('svg');
font-weight: normal;
font-style: normal;

}

At this point you just need to add the font family to any elements you want displayed in that font:

#someid{font-family: 'LeagueGothicRegular',Georgia,Verdana,Helvetica,sans-serif;}


body{font-family: 'JunctionRegular',Georgia,Verdana,Helvetica,sans-serif;}


.blackjack {font-family: 'BlackJackRegular',Georgia,Verdana,Helvetica,sans-serif;}


The quote marks are only required if there is a space in the font name, but were included for illustration purposes.

Footer
I didn't actually edit any core files to restyle the footer, it's all done via CSS with the exception of removing the [ and ] characters with JavaScript from the legal menu. All the footer sections have share a common class and have unique ID's so I was able to target each section for styling

<div id="rn-foot1" class="rn-footer">
<div id="rn-foot2" class="rn-footer">


I would recommend playing with Firebug to see what I did there...

Forum Customization
I did some unique customization to the Forum templates which would probably take too long to explain in this post,... But a quick overview...

I'm not using forum icons in the traditional sense (some are used as background images for table rows) which required me to declare some styling inline. In other cases I'm styling text with CSS to look like buttons with custom fonts, etc. Some of the UI enhancements are powered by jQuery Tools http://jquerytools.org/ as the jQuery UI library is fairly large for the minor enhancements I was looking for. If you have other specific questions I'd be glad to offer more info; but it will likely be after I get back from vacation, approx Sept 1st.
spasticdonkeywebcmsdesigns
 
PostPosted: Thu Sep 13, 2012 2:18 am
Reply with quote Back to top
nextgen
Newbie
Newbie
Joined: Aug 05, 2012
Posts: 49
Location: Maryland

View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger MSN Messenger
OK i found out that you can get carried away with adding new fonts to a theme (i am guilty). Was like a new toy on christmas day. At one point i had 5 different fonts for a theme. Is there a methadone clinic for font addicts. Smile
nextgenwith Kindness comes many rewards.
 
PostPosted: Thu Sep 13, 2012 4:10 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
lol, I hear ya. Counting the IcoMoon icon font, which I've only used a little, I'm using 4 here Rolling Eyes
spasticdonkeywebcmsdesigns
 
PostPosted: Sun Sep 16, 2012 1:45 pm
Reply with quote Back to top
kguske
Newbie
Newbie
Joined: Sep 02, 2012
Posts: 6

View user's profile Send private message
Really useful info, Spasticdonkey. I was going to ask your thoughts on using Google webfonts, but happened to check it today behind my company's firewall - the fonts weren't displayed. That's just another argument in favor of having the fonts loaded locally...so I followed this and have some nice fonts working on the local copy of nukeSEO.com. Once I find the right balance of appearance and readability through some @font-face love, maybe the site will get a new look... Thanks again for very useful info...

One thing that would be nice: having a font folder so themes that share fonts wouldn't need to duplicate them. Then again, since most sites only have 1 theme, it probably wouldn't be that helpful.
 
PostPosted: Tue Sep 18, 2012 3:38 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
Glad you found it useful. I had thought about nesting fonts in a particular place, but since the Font Squirrel ready to deploy kits, and the @font-face Generator deploy the fonts and CSS file in the same directory, I did the same. Just means that you can copy/paste the CSS provided, without any changes.

I had not looked at the Google WebFonts in awhile, and it looks like their selection has greatly improved since my last visit. That would have been my main complaint, but interesting about the files being blocked @ your workplace. I take it they have blocked access to google in general.

For me I prefer loading the fonts from my own site, since Font Squirrel makes it so easy to do so; and since I'm now using minify on this site, I'm not as enthused about loading external css files. But I don't see a problem with those who might prefer the slightly easier method of using Google WebFonts

For those wanting to try Google WebFonts...While you can't use external files with the
addCSSToHead
file method, there is a "hacky" way to load them. I'm not familiar with any API restrictions, but this is how you might call them within RN. I actually used this in a soon to be released demo module....
php Code:
	// hack to use external stylesheet

addCSSToHead('<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Merienda+One" type="text/css" />' . "\n", 'inline');


Excited to see a new look for nukeSEO, curious to see what you come up with Smile
spasticdonkeywebcmsdesigns
 
PostPosted: Fri Oct 19, 2012 1:23 pm
Reply with quote Back to top
kguske
Newbie
Newbie
Joined: Sep 02, 2012
Posts: 6

View user's profile Send private message
The new fonts are installed, but not a drastic change. I have many background changes to make... I was looking into icomoon and using dingbat fonts instead of images (e.g. in some admin functions). Curious - you're using sprites for the footer icons- not icomoon?
 
PostPosted: Fri Oct 19, 2012 3:57 pm
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
Cool stuff, glad you got a chance to play with your site, looks good Smile

Yes, I'm using sprites based on the IconSweet icons which I put together some time ago; prior to finding Kickstart/IcoMoon. Although I did get into trying out icon fonts, which are a little difficult to add in XHTML in a valid method. You pretty much have to use JavaScript in any use of icon fonts, at least those that can be indexed by search engines, or that are used by nukeDH meta descriptions.

It's difficult because you need to store the necessary icon font letter in an attribute; usually within
<span>
. That doesn't leave you many possible valid attributes to pick from in XHTML. I ended up using the title attribute, which isn't perfect as it will be revealed on mouseover... So the attribute is removed after adding the icons via JS. Assuming the IconFont is otherwise installed as in KickStart, the modified JavaScript might look like so:

javascript Code:
$(document).ready(function(){

$('.icon').each(function(){
$(this).append('<span>'+$(this).attr('title')+'</span>')
.css('display', 'inline-block').removeAttr("title");
});
});

If you want to use within the WYSIWYG editor, you can't use empty spans as in KickStart, i.e.
<span class="icon" title="}"></span>
, so I insert a transparent image set to
display:none
to keep the editor from removing empty tags.

<span class="icon" title="}"><img class="tranicon" src="x.gif" alt="" /></span>


.tranicon{display:none;}


I used them to a small degree here:
http://web-cms-designs.com/cms-15-highchart-statistics-for-ravennuke.html

Still a fan of both Sprites and Icon Fonts, and will still find uses for both going forward. Although hard to argue with the flexibility of Icon Fonts (color, size, and proper text alignment).
spasticdonkeywebcmsdesigns
 
PostPosted: Fri Oct 19, 2012 9:17 pm
Reply with quote Back to top
kguske
Newbie
Newbie
Joined: Sep 02, 2012
Posts: 6

View user's profile Send private message
Thanks! I didn't need to use JS or worry about SEO on the admin functions (though I haven't checked compliance yet!), so that might be a valid use for icon fonts, especially for use in lists of potentially thousands of rows, even though the difference in the sprite approach wouldn't be significant. The other advantage of sprites: multiple colors...
 
PostPosted: Wed Jan 23, 2013 10:33 am
Reply with quote Back to top
Guardian
Newbie
Newbie
Joined: Sep 22, 2012
Posts: 23

View user's profile Send private message
I know this thread is old(ish) but it never ceases to amaze me how technology like @font-face grows so rapidly from "ooh, this is new, let's try it" to "which font should I use for this theme".
I think it's great that there is now an accepted consideration for typography when developing/designing.
GuardianScript Shack
 
PostPosted: Sun Jan 27, 2013 6:24 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
Agreed! Amazing how quickly resources have developed, and the internet community has really stepped forward with some great open source fonts. Typography was one of my major complaints about web development for many years....

Google Webfonts has really grown and become a great resource as well.
http://www.google.com/webfonts

Not only can you build web ready collections of fonts, hosted free, but you can also download and install them on your pc. Create your collection and use the "Download your Collection" link at the top right. If that's not enough, you can download the entire google webfont collection
http://code.google.com/p/googlefontdirectory/
spasticdonkeywebcmsdesigns
 
Post new topic Reply to topic Web CMS Designs Forum Index RavenNuke Themes
Your AccountNew Members
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum


Powered by phpBB © 2001-2008 phpBB Group
 
 
Raven PHP Scripts