css styles

[micha]

hi,
i am a little bit confused about css.
how does css work - i found a stylesheet i can edit in the template, i found another in the css administration. which one is used in the {stylesheet} tag and how do i get the style tags working in the content editor (i guess only the old style tags from the default_blue_lt appears !)

thanks a lot

micha

[Ted]

CSS Management is one of the most confusing things about CMS, and I'm on the quest to make it easier before the next release..

Anyway, it's basically 2 different options.

1 is the "easy" way, which is that there is a stylesheet for that template that shows up in the edit template screen.  This stylesheet will always be sent when that template is displayed.

2 is the "advanced" way.  Basically, the CSS Management screen is a way to keep your stylesheets separate from your template.  First you add/edit a css stylesshet and give it a name.  Then, you go to the template management page, look for the little CSS icon next to the copy, edit and delete ones.  In that screen, you can then "attach" that stylesheet to the template.  Now the tricky part about this is that now BOTH stylesheets (the template one and the "attached" one) will be sent, with the template one being first.

In the case of the included default_green, etc stylesheets, they're meant to override the values in the default template's stylesheet.

I hope that makes a little more sense.  I just hope it's more intuitive in the next release.

[matt]

Riight...

Shouldn't we just copy/paste stuff like this into the User Handbook on the wiki site? It took me some time to find that on the forum, while the handbook is still almost empty.

[Ted]

That would be great!  I'd just love for the initial content to get into it.  I can edit and move stuff around after the fact...

[matt]

OK, I added sligthly modified text of your post to the stylesheet chapter of the User Handbook.

[ritalcnyc]

It also appears to me that if you *don't* use phplayers you can edit this stylesheet (layersmenu-cms.css) to have the user have files you want to be reflected in the content management styles drop down.

[tww]

Hi, everybody!.
I am still a little confused how the css styles are used in CMSMS.
I downloaded version 0.9.2 (last stable, as i am not really good in PHP).
I edited the styles in my new template.


I also tried to find out, where for example the position for the phplayer menu is fixed. I can change the border position, but not the position of the menu itself. Screenshot below shows what i mean. The green border should be around the grey menu, the green border is positioned like i want, where do i place the position for the grey menu?
(img after unquote of the horrible style attributes delivered with the cms pages) .

When i call the side, and look into the css, i am shocked how many times the same tag styles are listed.
Here is the delivered style:
quote
.horbar {
color: black;
background-color: #FFFFE4;
/*border: 2px outset #cecac1;*/
}
.horbaritem {
float: left;
white-space: nowrap;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.horbaritem a {
display: block;
text-decoration: none;
}
.horbaritem a:link {
color: #000000;
text-decoration: none;
}
.horbaritem a:visited {
color: #000000;
text-decoration: none;
}
.horbaritem a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}
.horbaritem a:active {
color: #ff0000;
text-decoration: none;
}

.verbar {
color: black;
background-color: #EDF2F5;
}

.submenu {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}

.subframe {
position: relative;
display: block;
background-color: #EDF2F5;
border: 1px solid #64879d;
}

.item {
padding: 3px;
text-align: left;
white-space: nowrap;
}

.separator {
background-color: #ff0000;
border-top: 1px solid #9e9a91;
border-bottom: 1px solid #ffffff;
margin: 2px 1px 2px 1px;    /* top right bottom left */
height: 0;
font-size: 1px;
line-height: 0
}

.item a {
position: relative;
display: block;
text-decoration: none;
}

.item a:link {
color: #000000;
text-decoration: none;
}

.item a:visited {
color: #000000;
text-decoration: none;
}

.item a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}

.item a:active {
color: #ff0000;
text-decoration: none;
}

.item .fwdarr {
position: absolute;
top: 5px;
right: 7px;
}

.horbar {
color: black;
background-color: #FFFFE4;
/*border: 2px outset #cecac1;*/
}
.horbaritem {
float: left;
white-space: nowrap;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.horbaritem a {
display: block;
text-decoration: none;
}
.horbaritem a:link {
color: #000000;
text-decoration: none;
}
.horbaritem a:visited {
color: #000000;
text-decoration: none;
}
.horbaritem a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}
.horbaritem a:active {
color: #ff0000;
text-decoration: none;
}

.verbar {
color: black;
background-color: #EDF2F5;
}

.submenu {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}

.subframe {
position: relative;
display: block;
background-color: #EDF2F5;
border: 1px solid #64879d;
}

.item {
padding: 3px;
text-align: left;
white-space: nowrap;
}

.separator {
background-color: #ff0000;
border-top: 1px solid #9e9a91;
border-bottom: 1px solid #ffffff;
margin: 2px 1px 2px 1px;    /* top right bottom left */
height: 0;
font-size: 1px;
line-height: 0
}

.item a {
position: relative;
display: block;
text-decoration: none;
}

.item a:link {
color: #000000;
text-decoration: none;
}

.item a:visited {
color: #000000;
text-decoration: none;
}

.item a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}

.item a:active {
color: #ff0000;
text-decoration: none;
}

.item .fwdarr {
position: absolute;
top: 5px;
right: 7px;
}

.horbar {
color: black;
background-color: #FFFFE4;
/*border: 2px outset #cecac1;*/
}
.horbaritem {
float: left;
white-space: nowrap;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.horbaritem a {
display: block;
text-decoration: none;
}
.horbaritem a:link {
color: #000000;
text-decoration: none;
}
.horbaritem a:visited {
color: #000000;
text-decoration: none;
}
.horbaritem a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}
.horbaritem a:active {
color: #ff0000;
text-decoration: none;
}

.verbar {
color: black;
background-color: #EDF2F5;
}

.submenu {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}

.subframe {
position: relative;
display: block;
background-color: #EDF2F5;
border: 1px solid #64879d;
}

.item {
padding: 3px;
text-align: left;
white-space: nowrap;
}

.separator {
background-color: #ff0000;
border-top: 1px solid #9e9a91;
border-bottom: 1px solid #ffffff;
margin: 2px 1px 2px 1px;    /* top right bottom left */
height: 0;
font-size: 1px;
line-height: 0
}

.item a {
position: relative;
display: block;
text-decoration: none;
}

.item a:link {
color: #000000;
text-decoration: none;
}

.item a:visited {
color: #000000;
text-decoration: none;
}

.item a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}

.item a:active {
color: #ff0000;
text-decoration: none;
}

.item .fwdarr {
position: absolute;
top: 5px;
right: 7px;
}

.horbar {
color: black;
background-color: #FFFFE4;
/*border: 2px outset #cecac1;*/
}
.horbaritem {
float: left;
white-space: nowrap;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.horbaritem a {
display: block;
text-decoration: none;
}
.horbaritem a:link {
color: #000000;
text-decoration: none;
}
.horbaritem a:visited {
color: #000000;
text-decoration: none;
}
.horbaritem a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}
.horbaritem a:active {
color: #ff0000;
text-decoration: none;
}

.verbar {
color: black;
background-color: #EDF2F5;
}

.submenu {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}

.subframe {
position: relative;
display: block;
background-color: #EDF2F5;
border: 1px solid #64879d;
}

.item {
padding: 3px;
text-align: left;
white-space: nowrap;
}

.separator {
background-color: #ff0000;
border-top: 1px solid #9e9a91;
border-bottom: 1px solid #ffffff;
margin: 2px 1px 2px 1px;    /* top right bottom left */
height: 0;
font-size: 1px;
line-height: 0
}

.item a {
position: relative;
display: block;
text-decoration: none;
}

.item a:link {
color: #000000;
text-decoration: none;
}

.item a:visited {
color: #000000;
text-decoration: none;
}

.item a:hover {
color: #ffffff;
background-color: #4b6983;
text-decoration: none;
}

.item a:active {
color: #ff0000;
text-decoration: none;
}

.item .fwdarr {
position: absolute;
top: 5px;
right: 7px;
}

body {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

font-family: niamey, verdana, arial, helvetica, sans-serif;

color: #03FF03;

background-color: #000000;

}

a {

text-decoration: none;

font-weight: bold;

color:  #FF03CE;

outline: none;

}

a:visited {

color:  #FF03CE;

}

a:active {

color:  #FF03CE;

}

a:hover {

color: #FF03CE;

text-decoration: underline;

}

.ahem {

display: none;

}

strong, b {



font-weight: bold;

}

p {

font-size: 16px;

line-height: 22px;

margin-top: 20px;

margin-bottom: 10px;

}



/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/



h1 {

font-size: 24px;

line-height: 44px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h2 {

font-size: 18px;

line-height: 40px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h3 {

font-size: 16px;

line-height: 22px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h4 {

font-size: 14px;

line-height: 26px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h5 {

font-size: 12px;

line-height: 22px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h6 {

font-size: 10px;

line-height: 18px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

p.sectionname {

font-size: 16px;

line-height: 22px;

margin-top: 0;

margin-bottom: 0;

}

li {

font-size: 12px;

line-height: 22px;

margin-top: 0;

margin-bottom: 0;

}

img {

border: 0;

}

.nowrap {

white-space: nowrap;

font-size: 10px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

/* must be combined with nobr in html for ie5win */

}

.tiny {

font-size: 9px;

line-height: 16px;

margin-top: 15px;

margin-bottom: 5px;

}

div.menu {

top: 80px;

left: 5px;

float: left;

padding: 1px 2% 1px 2%;

margin: 1px 1% 1px 2%;

background: #000000;

position: fixed;

border: 2px solid #03FF03;

width: 120px;

z-index: 10;

}

div.content {

position: fixed;

top: 80px;

left: 190px;

float: right;

padding: 10px 2% 10px 2%;

margin: 20px 3% 20px 3%;

background: #000000;

border: 2px solid #03FF03;

width: 68%;

/*height: 90%;*/

/*overflow: scroll;*/

z-index: 1;

}

pre {

font-size: 12px;

line-height: 22px;

margin-top: 10px;

margin-bottom: 10px;

}

div.heading {

    background-color: #cccccc;

    color: #03FF03;

    padding: 9px;

    text-align: left;

    font-size: 16px;

    font-weight: bold; 

    text-transform: uppercase;

}

div.thebody {

    padding: 5px;

    margin-left: 150px;

    font-size: 10pt;

    font-family: Tahoma;

}

p.smalltitle {

    font-size: 12pt;

    font-weight: bold;

    margin: 0;

    padding: 4px;

    background-color: #CCCCCC;

    text-transform: uppercase;

    color: #03FF03;

}



/*  All the menu css */

.verbar {

    color: #03FF03;

    background-color: #cccccc;

}



.submenu    {

    position: fixed;

    /* position: absolute; */

    left: 0;

    top: 0;

    visibility: hidden;

}



.subframe  {

    position: relative;

    display: block;

    background-color: #cccccc;

    border: 1px solid #03FF03;

}



.item  {

    padding: 2px;

    text-align: left;

    white-space: nowrap;

}



.separator  {

    background-color: #cccccc;

    border-top: 1px solid #9e9a91;

    border-bottom: 1px solid #cccccc;

    margin: 2px 1px 2px 1px;    /* top right bottom left */

    height: 0;

    font-size: 1px;

    line-height: 0

}



.item a {

    position: relative;

    display: block;

    text-decoration: none;

}



.item a:link    {

    color: #000000;

    text-decoration: none;

}



.item a:visited {

    color: #000000;

    text-decoration: none;

}



.item a:hover  {

    color: #000000;

    background-color: #cccccc;

    text-decoration: none;

}

.item a:active  {

    color: #000000;

    text-decoration: none;

}



.item .fwdarr  {

    position: absolute;

    top: 5px;

    right: 7px;

}





.headcontents {

position: fixed;

top: 0px;

left: 0px;

margin: 15px;

padding: 20px;

}
unquote




Your great help would be very nice.

[Ted]

The repeating styles bug was fixed in the 0.10 beta.

[tww]

thx 4 ur info. Is 0.10beta stable?As i am not a PHP Professional, i usually do not like to use beta versions.

[Alex_Leipzig]

thx 4 ur info. Is 0.10beta stable?As i am not a PHP Professional, i usually do not like to use beta versions.

Neither am I, but I used all the last betas without major problems and not in dev environment.

[Ted]

beta4 is pretty stable.  Most of the remaining issues are language and cosmetic.  There shouldn't be any major problems with upgrading, but PLEASE, backup your database just in case.

[tww]

Dear Wishy and all others who will understand my problem. I am not very familiar with php, but CSS. I used to make all my websites with css layouts. But to understand, what layout i have, i must know where all that css code is coming from.
I installed beta 10.4, looks very good.
But still, there is some css code in my css.file delivered with the page that i did not put in there, also the page still is displayed in other colors than written by me in the template style sheet AND in the delivered style sheet with the page. I never had something like this.
I copied the default_pink style who says, for example,
div.leftsidebar {
    float: left;
    width: 120px;
    background-color: #ccaaaa;
    font-size: 12px;
    padding: 7px;
    border: 1px solid #440000;
    color: #440000;
}
I changed the styles.
My style sheet (i copied this from the delivered stylesheet with the page in Firefox) says

div.leftsidebar {
position: fixed;
top: 130px;
left: 0px;
    float: left;
    width: 120px;
background-color: #000066;
    font-size: 12px;
    padding: 7px;
border: 1px solid #b98400;
color: #b98400
}

And here is what it does:


Color 000066 is the blue color you see on top of that image (there is a flash file from me as header),
and b98400 is the gold/brown color you see in the flash fiile.
Where does he have the information from that he still uses the pink style? He accepted the new font style, but no colours.

Meanwhile, in the delivered css file there are also css informations like
a.phplm:hover {
font-family: bitstream vera sans, luxi sans, verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
color: #841212;
background-color: #fff0c0;
text-decoration: none;
}

a.phplm:active {
font-family: bitstream vera sans, luxi sans, verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
color: #ff0000;
text-decoration: none;
}

a.phplmselected:link {
font-family: bitstream vera sans, luxi sans, verdana, geneva, arial, helvetica, sans-serif;
font-size: 13px;
color: #dd0000;
background-color: #ffdd76;
text-decoration: none;

that i did not put there. Where is it coming from, and what is it good for?
I can not find such code in the delivered pages.

Wouldn't it be the best to take only the code wich is included in the template style sheet, and to tell us wich classes are used with the default cmsms?

Sorry, but i think it would be much easier to work with cmsms when user know how the code is produced.

Nevertheless, i love cmsms, as it has a very nice und easy to understand user interface. You did a great job, it is me who is too silly to understand it.

I hope, you now understand my problems i have with you pretty nice cms.

Sorry that i ever make such long inputs in that forum, but i cannot explain it better what i mean.

[lauren4521]

color: #b98400
}

Skyrider,
I'm a CSS layout lover too!  Though by no means anywhere near an expert.  Anyhow, did you notice that you're missing a semi colon in your code above?  That could throw everything off.  Try that. 

I am not sure what you mean but "delivered css" and where they are coming from.  I created my own template and stylesheet and deleted most of the CSS code that I didn't need.  I figure (hope) in my playing with it that I'll discover the things that might need to be put back. 

I have aspirations of helping Wishy with the CSS stylesheets later on down the line when I learn more but I've seen some way more experienced than I offer to work on it so hopefully we all won't have to wait too long.  I think the KEY would be a map of which selectors go with what. 

The CSS code you found with the php in it are link codes but they are in the wrong order.  I read you are supposed to use the LAVH order (link, active, visited, hover) in order for there not to be problems.  It must be in a template you are using or from a module you are calling up? 

Lauren

[Ted]

Ok, quick answer for classes that come out of nowhere.

Because of phplayers is basically a table hack, it requires a LOT of css classes to display properly.  What we do is put out all of the default classes that phplayers requires, and then give you the ability to cascade (copy) over them to do what you need.  If you're missing even one class, it's not going to work right and cause more headaches.  So just copy the classes you want to "fix" and you'll be set.

[tww]

Oh, thanks for quick reply.
To Lauren:

color: #b98400
}

I am not sure what you mean but "delivered css" and where they are coming from.

I mean i call up the website and the CSS wich is delivered with the website (you can look at it if you call a website in firefox and when you have installed the web developer tool in it).
The semicolon went away when copying the code. Sorry. In original style sheet, it is included.

to Wishy
But where are these phplayers styles defined?  They are not defined in any stylesheet (default_green or whatever). To change these, i need the place where these styles are defined in Original.
Thank you all for your kind help