Themes

Typography

Permalink June 12, 2012 at 3:04 PM

Hello all. I keep asking question and you keep answering them. Great :)

New problem.

I am new to the whole typography scene in css, and I am having some difficulty figuring out a couple of things.

I want all things font related to be in its own typography.css file. I have tried moving font issues (and a few classes defining how to place images) into the typography.css file.

Problem 1: After doing this, when I try editing in the Tiny MCE interface, the font is HUGE (inside the editor). It looks OK on the website, but inside the editor it is messed up. What have I done wrong?

Problem 2. Is the paragraph supposed to be the "default" class for the main text inside the content area? I thought this class was "body". The people I make the website for have statements that should stand out (in addition to quotes). I thought the paragraph class was for these. Am I wrong?

2 Attachments

djoniba replied on Jun 12, 2012 at 3:07 pm Permalink Reply

Here are the stylesheets (for those that do not want to download from the first post)

default.css:

/*
Original design: Inland Earth (v1.0 - April 19th, 2012) - A free xhtml/css website template by Andreas Viklund.
For more information, seehttp://andreasviklund.com/templates/inland-earth/...
Includes:
jQuery v1.7.1 fromhttp://jquery.org/
Nivo Slider v2.7.1 by Gilbert Pellegrom -http://nivo.dev7studios.com/
Photos by Thomas Wallström.
Adapted to Concrete5 by Asbjørn Sundalhttp://www.perk.no
*/
*{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}
/* HTML elements */
body{background:#1a1a1a url(images/bk_sand.png) top center fixed no-repeat;color:#444;}
/* Navigation */
.nav li{

Viewing 15 lines of 158 lines. View entire code block.

 
/*
Original design: Inland Earth (v1.0 - April 19th, 2012) - A free xhtml/css website template by Andreas Viklund.
For more information, seehttp://andreasviklund.com/templates/inland-earth/...
Includes:
jQuery v1.7.1 fromhttp://jquery.org/
Nivo Slider v2.7.1 by Gilbert Pellegrom -http://nivo.dev7studios.com/
Photos by Thomas Wallström.
Adapted to Concrete5 by Asbjørn Sundalhttp://www.perk.no
*/
 
*{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}
 
/* HTML elements */
body{background:#1a1a1a url(images/bk_sand.png) top center fixed no-repeat;color:#444;}
/* Navigation */
.nav li{
 display: block;
background-color: #fffeff;
padding: 3px 0 5px 3px;
margin: 0px;
border-right: 2px solid #d5d5d5;
font-size: 0.8em;
font-family: Droid Sans;
color: #919191;
text-decoration: none;
 
}   
.nav li a{
   display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
 
/* Main wrappers */
#wrapper1240{background-color:#fff;margin:20px auto;width:1240px;}
#wrapper960{background-color:#fff;   margin:35px auto;width:960px;border-radius: 15px;
   border-right: 1px solid #424242;border-left: 1px solid #424242;
}
#wrapper760{background-color:#fff;margin:20px auto;width:760px;}
#wrapper600{background-color:#fff;margin:0 auto;width:600px;}
#wrapperfluid{background-color:#fff;margin:0 auto;max-width:1260px;}
 
/* Layout IDs */
#header{position:relative; height:156px;
   background-color: #eaeaea;
   background-image: url(images/anahead5.png);
}
#sitetitle{float:left;
   margin: 20px 0 10px 30px;
   background-color: #d5d5d5;
}
#sitetitle h1 {font-size:40px;color:#fff;margin:0;padding:0;}
#header-image{height:90px;margin:0;padding:0;}
#content{background-color: white;color: #fffeff;
   padding: 15px 30px;
}
 
#content h1,#content h2,#content h4{color: #ba3b00;}
#content h3{color: #797a00;text-align: left;text-indent: 6px;}
#content a{color: #ba3a3d;text-decoration:none;}
#extended{padding:15px 30px;background-color:#fff;}
 
/* Top links menu */
#toplinks{background-color: #d5d5d5;padding:0 30px;}
#toplinks ul{list-style:none;margin:0;text-align:right;}
#toplinks ul li{display:inline-block;font-size:11px;margin:15px 0 12px 15px;}
#toplinks ul li a{color:#dadddd;}
#toplinks ul li a:hover{color:#fff;text-decoration:none;}
 
/* Columns */
#sidebar{width:25%;}
#main{width:75%;}
#trio1{float:left;width:33.3%;}
#trio2{float:left;width:33.3%;}
#trio3{float:right;width:33.3%;}
.inner{margin:5px 30px;}
#trio1 .inner{margin-left:0;}
#trio2 .inner{margin:0;}
#trio3 .inner{margin-right:0;}
.left .inner{margin-left:0;}
.right .inner{margin-right:0;}
 
 
 /* Blockquote */
 
 
/* Image drop shadow */
 
drop {box-shadow 1px 1px 5px #000}
 
/* Banner "polaroid" */
.who {border-left:10px solid #FFF; border-top:10px solid #FFF;border-right:10px solid #FFF;border-bottom:30px solid #FFF;box-shadow 0 0 15px #000}
 
/* Banner wrapper */
.banner-wrapper{position:relative;height:100px;background:#643b1b margin-bottom:55px;}
 
 
/* Earth background */
#toplinks,#footer{background:#643b1b  top center no-repeat;
   color: #797a00;
}
 
/* Light skin background */
#content, #footer{
   color: white;
 
}
 
/* Footer */
#footer{clear:both;background-color:#643b1b;}
#footer p{color:#b37c39;font-size:12px;margin:0;padding:15px 30px;text-align:center;}
#footer a{color:#b37c39;}
#footer a:hover{color:#fff;}
 
/* Image alignment */
img.alignleft,img.aligncenter,img.alignright{background:#fff;padding:4px;margin-bottom:10px;border:1px solid #ddd;}
.alignleft{float:left;margin-right:30px;}
.alignright{float:right;margin-left:30px;}
.aligncenter{text-align:center;display:block;clear:both;margin:5px auto;}
 
/* Additional classes */
.shadow{background:url(images/shadow.png) top center no-repeat;}
.clear{clear:both;}
.left{float:left;}
.right{float:right;}
 
/* Clearing fix */
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
* html .clearfix{height:1%;}
*:first-child+html .clearfix{min-height:1%;}
 
/* Alternate color scheme, add class="altcolors" to the body tag to apply */
.altcolors{background-color:#e6e8e8;}
.altcolors #wrapper600, .altcolors #wrapper760, .altcolors #wrapper960, .altcolors #wrapper1240, .altcolors #wrapperfluid {box-shadow: 0px 0px 28px #888;}
.altcolors #toplinks, .altcolors #footer{background-color:#eaecec;}
.altcolors #content{background-color:#f2f4f4;}
 
/*
 jQuery Nivo Slider v2.7.1
http://nivo.dev7studios.com
 Copyright 2011, Gilbert Pellegrom
 Free to use and abuse under the MIT license.
http://www.opensource.org/licenses/mit-license.php...
 */
.nivoSlider{position:relative;}
.nivoSlider img{position:absolute;top:0;left:0;}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box{display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;opacity:0.8;width:100%;z-index:8;}
.nivo-caption p{padding:5px;margin:0;}
.nivo-caption a{display:inline!important;}
.nivo-html-caption{display:none;}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer;}
.nivo-prevNav{left:0;}
.nivo-nextNav{right:0;}
.nivo-controlNav a{position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active{font-weight:700;}
 
/*
Skin Name: Nivo Slider Default Theme (modified)
Skin URI:http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider, modified to work with the Inland Earth One template.
Version: 1.0
Author: Gilbert Pellegrom (modified by Andreas Viklund)
Author URI:http://dev7studios.com
*/
.slider-wrapper .nivoSlider{position:relative;height:300px;background:#643b1b url(images/loading.gif) no-repeat 50% 50%;margin-bottom: 55px;}
.slider-wrapper .nivoSlider img{position:absolute;top:0;left:0;display:none;}
.slider-wrapper .nivoSlider a{border:0;display:block;}
.slider-wrapper .nivo-controlNav{position:absolute;left:50%;bottom:-41px;margin-left:-60px;/* Tweak this to center bullets */}
.slider-wrapper .nivo-controlNav a{display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.slider-wrapper .nivo-controlNav a.active{background-position:0 -22px;}
.slider-wrapper .nivo-directionNav a{display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
.slider-wrapper a.nivo-nextNav{background-position:-30px 0;right:15px;}
.slider-wrapper a.nivo-prevNav{left:15px;}
.slider-wrapper .nivo-caption{font-family:'Droid Sans',Helvetica,Arial,sans-serif;background:rgba(0, 0, 0, 0.2);text-align:center;text-shadow:0 0 4px #111;}
.slider-wrapper .nivo-caption a{color:#fff;border-bottom:1px dotted #fff;}
.slider-wrapper .nivo-caption a:hover{color:#fff;}

and typography.css

body{
font-family: Verdana; 
color: black; 
font-size:100}
}
a{color: #bc0000;text-decoration:none;}
a:hover{color: #870000;text-decoration:none;}
a img{border:none;}
p{font-size:0.9em;font-family:Verdana;color: #424242;}
h1{font-size:2.1em;font-family:Yanone Kaffeesatz;}
h2{font-size:1.2em;font-family:Yanone Kaffeesatz;margin-bottom: 10px}
h3{font-size:1.5em;font-family:Yanone Kaffeesatz;margin-bottom: 20px}
p,ul{margin:0 0 20px 0;}
#content h1,#content h2,#content h4{color: #ba3b00;}
#content h3{color: #797a00;text-align:left;margin-bottom: 10px}

Viewing 15 lines of 33 lines. View entire code block.

 
body{
 
font-family: Verdana; 
color: black; 
font-size:100}
 
}
 
a{color: #bc0000;text-decoration:none;}
a:hover{color: #870000;text-decoration:none;}
a img{border:none;}
p{font-size:0.9em;font-family:Verdana;color: #424242;}
 
h1{font-size:2.1em;font-family:Yanone Kaffeesatz;}
h2{font-size:1.2em;font-family:Yanone Kaffeesatz;margin-bottom: 10px}
 
h3{font-size:1.5em;font-family:Yanone Kaffeesatz;margin-bottom: 20px}
p,ul{margin:0 0 20px 0;}
 
 
#content h1,#content h2,#content h4{color: #ba3b00;}
 
#content h3{color: #797a00;text-align:left;margin-bottom: 10px}
#content a{color: #ba3a3d;text-decoration:none;}
 
 
/* Image alignment */
img.alignleft,img.aligncenter,img.alignright{background:#fff;padding:4px;margin-bottom:10px;border:1px solid #ddd;}
.alignleft{float:left;margin-right:30px;}
.alignright{float:right;margin-left:30px;}
.aligncenter{text-align:center;display:block;clear:both;margin:5px auto;}
 
blockquote p{
   width: 85%;
   margin: 1em 3em;
   color: #e5821c;
   padding-left: 8px; 
   color: #ba3b00;
    font-family:'Felipa';
    font-size: 1.2em;
   float: left;
   padding-top:8px;
   padding-bottom: 8px;
}

VidalThemes replied on Jun 12, 2012 at 3:42 pm Permalink Reply

Hi There,

a few things that stand out, this line:

*{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}

Maybe causing a few problems, the * declaration is universal, its not a great idea to use it, I would look into a proper CSS reset, the Eric Meyerhttp://meyerweb.com/ produces a pretty good reset, but keep in mind that some resets can override what is applied via the customisation options in Tiny MCE, and may need some tailoring.

Also this line:

body{
font-family: Verdana; 
color: black; 
font-size:100}
}

Font size 100 needs to be either percent, em or px, just 100 wont do a thing. so 100% 1em 14px etc etc.

The paragraph tag is used a lot by tiny MCE, its pretty semantic so headers will all be placed in "H" tags, links etc are in "A" tags and text will be placed inside "P", or paragraph tags, if you want to emphasis a quote then use:

<blockquote></blockquote>

Hope that helps a little.

djoniba replied on Jun 12, 2012 at 3:54 pm Permalink Reply

Great. Thanks. It was the % that was missing. Now I can edit again.

The universal tag does not seem to create any problems. It was there in the original css theme I built the concrete5 theme from. Dont know why the designer put it there.

Forums

Themes

Typography

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?