Two stylesheets conflicting!

[duplay]

I have via the fckeditor my template forced to make all the text Arial Small, However, I have added a growing content box to my template that also has the following code with font info:

.text_area {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.4em;
  color: #000000;
  background-color: #FFFFFF;
  padding: 5px;
  width: auto;
  border: 2px solid #bbbbbb;
  text-align: justify;
  height: auto;
  float: right;
}

How Can I get the template just to follow the font force from the template and not the above code? **I have tried removing the top four lines beneath text_area and nothing changes. I have a link "SPARCC Newsletter" on the following page:

http://moodle.sparcc.org:16080/sparcc/i ... newsletter

The font on that page follows what is coded above, not what is in my template, if i adjust the code above to be Arial and the corrent size, it then changes the page title font and size "SPARCC Newsletter".

[Dr.CSS]

.text_area h2{your styling code... etc. etc.}

[duplay]

This is what I currently have in the code for the expanding box:

.text_area {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.4em;
  color: #000000;
  background-color: #FFFFFF;
  padding: 5px;
  width: auto;
  border: 2px solid #bbbbbb;
  text-align: justify;
  height: auto;
  float: right;
}
.text_area h2{
  font-family: Arial;
  font-size: 18px;
  line-height: 1.4em;
  color: #000000;
}

The problem I have is, I go to create a new page, the Page title looks correct size and style, but the content text looks smaller then needed. I can highlight the text and increase to SMALL in the web editor and all looks well (so that page's font now matches the rest of the site's pages Arial SMALL). If I increase the font-size in code above, it increases the fonts on this new page, and all the other page's fonts get bigger then they currently are???? I guess i am ok now by just manually increasing the fonts, but i am concerned once my users begin making pages, we'll have different fonts on different pages and they wont remember to make all fonts SMALL.

http://moodle.sparcc.org:16080/sparcc/i ... ?page=home

[Dr.CSS]

if you look at the currently associated stylesheets page for your template you will see the default Typo CSS at the top of the list, if you look thru that you will find calls for font sizes and maybe one that is giving you the problem...
some times the order of the style sheets will mess with how things render...
since the Typo sheet is at the top of the list it gets there 'first' and styles, then your last one gets there and loses control...
styling in the editor will put the style in the HTML/on the page, and anything on the page gets priority over any style sheet...
if you are using the typo sheet put all your font styles in it and the order on the sheet is important too so put your new ones at the top....

  HTH

[duplay]

Mark,

My typo one was last in the list, so I put a "A" in front of the title and made it first, then i moved the stylesheet from the grey box to the bottom, and still the same issue. What I think the issue is that it takes the SS from the grey box for any new pages being made, the problem is if I increase the size of the code, it increases the already placed Arial small on other pages and makes them bigger (then Arial SMALL).

I just want a growing content box without any text code (i want it to take form what is already there) Can this be done with the below code? *I tried removing the top 4 lines and it still takes a xsmall arial font*

[attachment deleted by admin]

[Dr.CSS]

have you evr used Firefox with the Web Developer extension?... it gives you the ability to edit the CSS in real time changes happen rite b4 your eyes, one thing about it is that i've found is it shows the CSS in the order it was set in the attached order, if you puit your layout at the top of that order you can work on it first instead of having to scroll down to the middle or bottom, well if you look at the copy/paste below of how it get shown in the CSS edit bar on the side of my browser you will see that your 2 new typo styles are on the bottom and the default Typo CSS shows not quite half way down.... this is long...


/* Layout sections */
body {
background: url(uploads/images/background.gif);
color: #333;
}

div#pagewrapper {width:760px;
border: 1px solid #000;
background: #fff;
    }

div#header {
color: #fff;
}

div#footer {
color: #fff;
background-color: #557cba;
}

/* Links */
a,
a:link
a:active, a:visited {
color: #385C72;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #000;
}

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */
    body {
        margin: 0;
        padding: 1em;
        text-align: center;
    }
    div#pagewrapper {
        margin: 0 auto;
        max-width: 80em;
        min-width: 60em;
        padding: 0;
        text-align: left;
    }
    #container {
position: relative;
margin: 0;
    }
   
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #d1c3a3;         
            text-align: left;
        }
        div#header h1 a {
            background:  url(uploads/images/) no-repeat 0 12px;
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
            margin: 0;
            padding: 0;
        }
    /* END HEADER */
   
   
    /* CONTENT */
        div#content {

        }
       
        /* MAIN */
            div#main {

            }
        /* END MAIN */
       
        /* SUB */
            div#sub {
               
            }
        /* END SUB */
       
    /* END CONTENT */
   
   
    /* FOOTER */
        div#footer {

        }

        div#footer p {
            font-size: 0.8em;
            margin: 0;
            padding: 8px;
            height: 13px;
            text-align: center;
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
  padding: 1em 0;
  text-align: left;
  font-size: 90%;
  margin: 0 1em;
  border-bottom: 1px dotted #000;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */


/* NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
    div#content {
        position: relative;
        width: 100%;
        margin: 1.5em auto 2em auto;
        padding: 0;
        text-align: left;
    }
    div#main {
        float: right;
        width: 70%;
        margin-right: 2%;
        display: inline;
    }
    div#menu_vert {
        float: left;
        width: 25%;
        display: inline;
        margin-left: 0;
    }
    div#content2 {
        display: none;
    }
    div#menu_horiz {
        display: none;
    }
/* END CONTENT */

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* FORM ELEMENTS */
form {
margin:0;
padding:0;
}
form div,
form p {
font-size: 1em;
margin: 0 0 1em 0;
padding: 0;
}
label {
font-weight: bold;
}
fieldset {
border: 1px solid #eee;
padding: 5px 10px;
margin: 0 0 1.5em 0;
}
fieldset legend {
color: #666;
font-size: 1.1em;
font-weight: bold;
margin: 0 0 0 0px;
padding: 0;
background-color: white;
}
* html fieldset legend {
margin: 0 0 10px -10px;
}
fieldset ul {
list-style: none;
margin: 0 0 1.5em 0;
padding: 0;
}
fieldset ul li {
list-style: none;
margin: 0 0 0.5em 0;
padding: 0;
}
   

input, select, textarea {
font-size:1em;
font-family: arial, helvetica, verdana, sans-serif;
       
        margin: 0;
padding: 2px;
}

input, select {
vertical-align:middle;
}
textarea {
width: 200px;
height: 8em;
}

input.check {
border: none;
width: auto;
height: auto;
margin: 0;
}
input.radio {
border: none;
width: auto;
height: auto;
margin: 0;
}
input.file {
height: auto;
width: 250px;
}
input.readonly {
background-color: transparent;
border: none;
}
input.button {
width: 10em;
border:1px solid black;
background-color: #ddd;
}
input.image {
border: none;
width: auto;
height: auto;
}

    form div.submit {
margin: 1em 0;
}
    form div.submit input {
height: 2em;
        width: 15em;
}
/* END FORM ELEMENTS */


/* A CSS Framework by Mike Stenhouse of Content with Style */

/* TYPOGRAPHY */
body {
text-align: left;
font-family: Arial;
font-size: 75.01%;
                line-height: 1em;
}
div {
font-size: 1em;
}
img {
border: 0;
}

/* LINKS */
a,
a:link
a:active, a:visited {
text-decoration: underline;
}

        div#footer a,
        div#footer a:link
div#footer a:active, div#footer a:visited {
              color: #fff;
        }

a:hover {
text-decoration: none;
}
/* END LINKS */

/* HEADINGS */
h1 {
font-size: 2em;
line-height: 1em;
margin: 0;
padding: 0;
}
h2 {
font-size: 1.5em;
                line-height: 1.5em;
margin: 0 0 0.5em 0;
padding: 0;
}
h3 {
font-size: 1.3em;
line-height: 1.3em;
margin: 0 0 0.5em 0;
padding:0;
}
h4 {
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
padding: 0;
}
h5 {
font-size: 1.1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
padding: 0;
}
h6 {
font-size: 1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
padding: 0;
}
/* END HEADINGS */

/* TEXT */
p {
font-size: 1em;
margin: 0 0 1.5em 0;
padding: 0;
line-height:1.4em;
}
blockquote {
border-left: 10px solid #ddd;
margin-left: 10px;
}
pre {
font-family: monospace;
font-size: 1.0em;
}
strong, b {
font-weight: bold;
}
em, i {
font-style:italic;
}
    code {
        font-family: "Courier New", Courier, monospace;
        font-size: 1em;
        white-space: pre;
    }
/* END TEXT */

/* LISTS */
#main ul {
        line-height:1.4em;
margin: 0 0 1.5em 0;
padding: 0;
}
#main ul li {
margin: 0 0 0.25em 30px;
padding: 0;
}
ol {
font-size: 1.0em;
line-height: 1.4em;
margin: 0 0 1.5em 0;
padding: 0;
}
ol li {
font-size: 1.0em;
margin: 0 0 0.25em 30px;
padding: 0;
}
dl {
margin: 0 0 1.5em 0;
padding: 0;
line-height: 1.4em;
}
dl dt {
font-weight: bold;
margin: 0.25em 0 0.25em 0;
padding: 0;
}
dl dd {
margin: 0 0 0 30px;
padding: 0;
}
/* END LISTS */


/* TABLE */
table {
        font-size: 1em;
margin: 0 0 1.5em 0;
        padding: 0;
}
table caption {
font-weight: bold;
margin: 0 0 0 0;
padding: 0 0 1.5em 0;
}
th {
font-weight: bold;
text-align: left;
}
td {
font-size: 1em;
}
/* END TABLE */

hr {
display: none;
}

div.hr {
height: 1px;
margin: 1em 10px;
border-bottom: 1px dotted black;
}


/* END TYPOGRAPHY */

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */

#menuwrapper {
width: 100%;
}


/* Unless you know what you do, do not touch this */

#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
    margin-left: -1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
    margin-bottom: -1px;
position: relative;
}


/* Styling the basic apperance of the menu elements */

#primary-nav a {
border: 1px solid #006699;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #ececec;
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background-color: #C7C7C7;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* clearing */
.stretch,
.clear {
clear:both;
height:1px;
margin:0;
padding:0;
font-size: 15px;
line-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}

/* end clearing */


/* replace */
.replace {
display:block;

background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
/* tidy these up */
.replace * {
text-indent: -10000px;
display:block;

background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
.replace a {
text-indent:0;
}
.replace a span {
text-indent:-10000px;
}
/* end replace */


/* accessibility */
    span.accesskey {
    text-decoration:none;
    }
    .accessibility {
    position: absolute;
    top: -999em;
    left: -999em;
    }
dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}
/* end accessibility */

/* make all links red */
    .calendar tr td a
    {
    color: red;
    }

    /* highlight "today" for the small calendar */
    .calendar-today
    {
    font-weight: bold;
    }

    /* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
    #cal-upcominglist .calendar-date-title
    ,#cal-upcominglist .calendar-summary-title
    {
    display: none;
    }

    #cal-upcominglist h2
    ,#cal-upcominglist .calendar-date
    ,#cal-upcominglist .calendar-summary
    {
    display: inline;
    margin-right: 5px;
    }

    /* tidy up text sizes for lists */
    #cal-list h1, #cal-upcominglist h1
    {
    color: red;
    font-size: 120%;
    }
    #cal-list h2, cal-upcominglist h2
    {
    font-size: 110%;
    }

    /** large calendar rules (assuming table_id='big') **/
    /* border on for #big */
    #big{
    margin: 0px;
    border-collapse:    collapse;
    border: 1px solid black;
    }

    /* nice squares for the #big table */
    #big th
    {
    border: 1px solid black;
    padding: 3px;
    width: 75px;
    }

    #big td {
    border: 1px solid black;
    vertical-align: top;
    padding: 3px;
    height: 75px;
    width: 75px;
    }

    /* format summaries nicely in #big */
    #big ul
    {
    margin: 0px;
    padding: 0px;
    padding-left: 5px;
    }

    #big li
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }

    /* background colours for #big */
    #big td
    {
    background-color: silver;
    }

    #big .calendar-day
    {
    background-color: #80ff80;
    }

    #big .calendar-today
    {
    font-weight: normal;
    background-color: #90bff4;
    }

    .calendar-event .calendar-date-title,
    .calendar-event .calendar-summary-title,
    .calendar-event .calendar-details-title
    {
    display: none;
    }

.NewsSummary {
                text-align: left;
font-family: Arial;
font-size: 130%;
                line-height: 1em; 
                margin: 5px 0;
}



.NewsSummaryPostdate {
                text-align: left;
font-family: Arial;
font-size: 100%;
                line-height: 1em; 
                margin: 5px 0;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 140%;
  margin-bottom: 10px;
}

#NewsPostDetailDate {
                text-align: left;
font-family: Arial;
font-size: 130%;
                line-height: 1em; 
                margin: 5px 0;
  }
#NewsPostDetailAuthor {
                text-align: left;
font-family: Arial;
font-size: 130%;
                line-height: 1em; 
                margin: 5px 0;
}
#NewsPostDetailSummary {
                text-align: left;
font-family: Arial;
font-size: 130%;
                line-height: 1em; 
                margin: 5px 0;
  }

#NewsPostDetailContent {
                text-align: left;
font-family: Arial;
font-size: 130%;
                line-height: 1em; 
                margin: 5px 0;
  }
#NewsPostDetailTitle {
                text-align: left;
font-family: Arial;
font-size: 130%;
                line-height: 1em; 
                margin: 5px 0;
}
/* to add specific style to the below div, uncomment them. */
/*
.NewsSummaryLink {}
.NewsSummaryAuthor {}
.NewsSummaryMorelink {}
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailCategory {}

#NewsPostDetailAuthor {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/

.text_area {
  background-color: #FFFFFF;
  padding: 5px;
  width: auto;
  border: 2px solid #bbbbbb;
  text-align: justify;
  height: auto;
  float: right;
}
.text_area h2{
  font-family: Arial;
  font-size: 18px;
  line-height: 1.4em;
  color: #000000;
}

[duplay]

When you look at the code for the content box: it doesnt even have font code, so i assume it is taking the font type from my template, i just dont understand the size. before i installed the box, everything went to defaul arial small w/o issues. any thoughts on hwo to create a grow box w/o any attachments to fonts?

.text_area {
  background-color: #FFFFFF;
  padding: 5px;
  width: auto;
  border: 2px solid #bbbbbb;
  text-align: justify;
  height: auto;
  float: right;
}
.text_area h2{
  font-family: Arial;
  font-size: 18px;
  line-height: 1.4em;
  color: #000000;
}

[Dr.CSS]

thinking about this... have you thoght about taking out the and just adding the needed calls to your     by changing to you can use the existing CSS calls and just add your border to it, which seems to be the only diff. between what you had before and what you have now.... then maybe it will revert back to using the font calls you had working before...

[duplay]

Mark,

I am confused by what you meant by: by changing to

I set up a new site
added the following code to main in the layout css
  /* MAIN */
            div#main {
  background-color: #FFFFFF;
  padding: 5px;
  width: 500;
  border: 2px solid #bbbbbb;
  text-align: justify;
  height: auto;
  float: right;

So the box shows up just fine. What I did was add font-size: 100% to the fckeditor and deleted the fonts except arial. So when I go to create a page, I get the default font to show up as Arial small (100%), but the following code over-writes it:

/* TYPOGRAPHY */
body {
text-align: left;
font-family: Arial;
font-size: 75.01%;
                line-height: 1em;

If I increase the code above to 100% it increases the size of the menu size. So basically, I need the menu text to be arial 75.01% and the content text to be 100% arial. 

[Dr.CSS]

#menuwrapper{font-size: 75.01%;}
put this in your Typo CSS...

[duplay]

Mark,

I have added the above code for the menu and had to increase the menu size to 100% (it showed up small with 75.01%) The odd thing now is that when i increase the typo #body font size, the entire page get bigger in size (not just text, its like it gets magnified. First picture is menu  size 100% #body 75%, the second is menu 100% #body 100%

[attachment deleted by admin]

[duplay]

there must be some way to fix this. The Menu is getting it's size from the #Menu we added, so their has to be some way we can force the format for the content text. How do toerh people do it? My box shouldnt have that much of a impact on this, should it?

[Dr.CSS]

there is an order to a page starting with the main "box", aka a , then you have other boxes in side that one and some of them have boxes in them so what you set in the first box is inherited by all boxes on down the line, if you have the first level box, say body, with a font size of say 75.01% then every box after that will use that as a starting point, to them that means 100%, so if you set something inside that at 50% then in actuality it is 37.505%, if you set something at 124.99% it is actualy a true 100%, so you may want to take out the font size for the body or change it to 100% then you can make individual font size calls for your diff. boxes without having to calculate them based on 75.01%....
the same holds true for the size of boxes...
if a box has 75% width the box inside that takes 75% to mean 100% and calculates it size....
assuming all these boxes are one inside the next...
first box 800px, second box 75%=600px, third box 75%=450px, fourth box 75%=337.5px etc. etc.....

[duplay]

Mark,

I think I have made some progress. I have the h2 working and the text Arial small using the code below: Now i need to figure out how to edit the text size of the Next page and previous page text size. I am assuming i need to add to the code below, but am not sure what the call is h3, h4, or something else.

This is what I have working and here is the test site: http://pages.sparcc.org:16080/test/index.php

        /* MAIN */
            div#main {
    font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4em;
  color: #000000;
  background-color: #FFFFFF;
  padding: 5px;
  width: 500;
  border: 2px solid #bbbbbb;
  text-align: justify;
  height: auto;
  float: right;

            }
div#main h2{
  font-family: Arial;
  font-size: 18px;
  line-height: 1.4em;
  color: #000000;
}

[Dr.CSS]

There are 2 places to find out where to get the call for styling, one is in the template the other is to right click the page in your browser and view source.

This is your source view.

         
^ Top


       
       

            Next page: Content Types

As you can see you have 2 div calls and each one has a call and an call so you have three ways to style these sections.

1) .right49 or .left49 {your styling here}  you can also combine these by putting a comma between them .right49, .left49 {your styling here}

2) .right49 p {your styling here}

3) .right49 a {your styling here}

Each way has a slight difference, if you just want to style everything at once you would use the first method, if you want to pick out individual parts you can use method 2 or 3.

The difference in the last 2 methods.

2) will style any call in this div, so if you happen to put any other text in this div it will take on the style you've called here and your will still take on the style for all s in the main other than the ones you put in that style call.

3) will get you down to the actual words to style, in the first div, .right49, it would be ^Top, in the second div it would be Content Types and not Next page:.

So in conclusion I would say number 1) would be your best choice as it would be highly unlikely that you will be putting any other content in these divs and it will style all the text in one stroke.