css refresh [workaround]

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
samj
Forum Members
Forum Members
Posts: 30
Joined: Mon Feb 28, 2011 4:31 am

css refresh [workaround]

Post by samj »

Solution: add {stylesheet name=yourfilename.css} into the <head> section. No explanation yet in regards to the cause.
--------------------------------------------------------------------
I have been working for hours changing a template without a hitch. Suddenly the page is not showing the proper css formatting any longer.
When looking at the rendered page with Opera Dragonfly, the "old" setting can be seen instead of the present version.
I have cleared about every cache I can think of, even restarted the PC, followed the leads in the forum, went through every setting I can imagine, and as a firm believer in user error I checked my work extensively - nada.

While I was working on the template, everything worked fine; aside from very few minor issues: for instance, a background color would not show up. I attributed those minor issues to the fact that somewhere my text input might get changed as the input travels through the code - the whole template adjustment was more an exercise in reverse engineering where the layout was pushing in an unexpected direction causing me to counter act, at times. But it was not a problem since I know Css quite well.

About six hours into the project, the page became un-refreshable, at an instance, which initiated my investigation.

Fact #1: "View Source" in Dragonfly reveals different css settings from an older version compared to what I am seeing in the editor window. Same results in opera +firefox.
Fact #2: In my desperation without any more options, I added the name of the corresponding css file to {stylesheet name=mycsscustomfile} AND out of the blue the "missing bg color" which had long been forgotten was visible. -> So, it seems, I could have been working on two different copies at the same time, somehow. Although I had to use some unusual compensations before I added name=mycssfile, I got the result which I wanted. Thereafter, the layout of the template looked more what I would have expected, including the forgotten background. However, both layouts look very different.
Somehow, 2 css files got mixed up and mangled and rendered.


??????? what to do?

thanks

{Well, I will have to redo the template again, but I still would like to/want to/need to know what happened.
Right now, based on my short experience with cmsms, hard coding one's custom css file into the template seems imperative, for now, instead of linking it through the admin panel!!!! - this seems to solve the sudden "refresh issue," but it does not explain what happend to the code prior to hard coding the css into the template. }


cmsms: latest version; xampp: latest version
Last edited by samj on Thu Mar 10, 2011 4:51 am, edited 1 time in total.
Wishbone
Power Poster
Power Poster
Posts: 1368
Joined: Tue Dec 23, 2008 8:39 pm

Re: css refresh

Post by Wishbone »

If you still have the template and stylesheet, can you send us a link to a page with the issue? Also post the content of the stylesheet as seen in the control panel. Please include more information, such as CMSMS version and any additional modules you've installed. Are you using {stylesheet} or {cms_stylesheet} ? {stylesheet} doesn't cache.
samj
Forum Members
Forum Members
Posts: 30
Joined: Mon Feb 28, 2011 4:31 am

Re: css refresh

Post by samj »

thanks for taking the time

a couple more side notes: moved {process pagedata} into the header (no impact on the layout whatsoever, just for html sake); and removing {name=mycssfile} returns the old look from before (the issue is still re-producable). After reading about TinyMce in the forums, it got deactivated temporarily; this caused no changes to the template. I am using the text editor for my coding.
I am using the default template hanging:hanging renamed to mycssfile --> therefore {stylesheet} is being used.

I am also changing the stock layout from sidebar1 float: left + sidebar2 float: right + content (float aimlessly somewhere in between) to frame1 (containing sidebar1 and content) + frame2 (containing sidebar2 only) to eliminate unexpected behavior down the line.
"Reserved" words: at some point, I inserted a new div called banner, into the "Header section" which after some time intensive juggling made me conclude that the word "banner" is used "internally" in a processing function, and was therefore ignoring or skewing my formatting. (As a result, I renamed some of the id's/variables to avoid conflict and misinterpretation, which changed some of the output but it had no effect on the "refresh issue".)
specs: in general, everything is stock pretty much, since I am only familiarizing myself with cmsms as of now, and changing the template is my first step --> no content yet, only one page created so far.
CMS Version: 1.9.3;
Installed Modules: CMSMailer 2.0.1; FileManager 1.1.0; MenuManager 1.7.5; ModuleManager 1.4
nuSOAP 1.0.2; Printing 1.1.2; Search 1.6.10; ThemeManager 1.1.4; TinyMCE 2.8.3

Config Information: process_whole_template: false; output_compression: false; url_rewriting: none;
page_extension: (empty); query_var: page; auto_alias_content: false; set_names: true; previews_path:
C:\xampp\htdocs\CMSms\tmp\cache (0777); use_smarty_php_tags: false;

PHP Information: Current PHP Version (phpversion): 5.3.5; Magic quotes in runtime: (magic_quotes_runtime): Off (False); Session Save Path (session_save_path): C:\xampp\tmp (0777); Cookies: on; memory_limit: 128 mb; disable_functions in PHP (disable_functions): checked;

MySql: 5.5.8; apache:2.2.17 (xampp on vista)

Peermissions: all 777; (fully open system on home pc);


I included both files. Since I have been troubleshooting, backtracking, deleting and trying new things a lot, my code is a mess ( big borders, etc.), but everything should give you an idea on what I am trying to do. As a result, there might be some css mistakes! however, I am NOT looking for someone to fix my styling/coding with which I have no problem with.
One hint remains: I can include the css from my PRESENT template + the html - but I can NOT inlude the "old/other/unknown" version of the file that is being interpreted by the browser, since I have no clue where the browser is taking it from.
The "refresh"issue can be caused the browser, apache, mysql, php, cmsmc, the template including it's data processing functions, or the user.

thanks for looking into that

unfortunately, I can't upload a .txt extension --> files are below:

HTML: -------------------------------------------------------------------

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{sitename} - {title}</title>
{metadata}
{stylesheet name=orgone_peak_all}

</head>
<!-- ------------------------------------------ -->
</__body>
<div id="outer">
<div id="wrapper">

<!-- nav_top -->

<div id="nav_top-wrapper">
<div id="nav_top"> {menu template="Nav_top" number_of_levels="2"}
</div>
</div>

<!-- header -->

<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="#"><span> {sitename} </span></a>
</h1>
<p>Dobbins<br>Oregon House<br>Loma Rica<br>Browns Valley<br>& nearby neighborhoods
</p>
</div>
</div>
<div id="orgpk_banner">
</div>
<div id="info"> <p>test</p>
</div>
<div id="ad"> <p>ad</p>
</div>
<div id="nav_login-wrapper">
<div id="nav_login">
{menu template="Nav_login" number_of_levels="2"}

</div>
</div>
</div>


<!-- nav_main -->

<div id="nav_main-wrapper">
<div id="nav_main">
{menu template="Nav_main" number_of_levels="2"}
</div>
</div>

<!-- page -->

<div id="page">
<div id="page-bgtop">
<!-- <div id="page-bgbtm"> -->
<div id="frame-leftandcontent">

<div id="sidebar10" class="">
{menu template="hanging : minimal_menu" start_level="1" collapse="1"}

</div> <!-- end sidebar1 -->

<div id="main_content">
<!-- <h1 class="title">{title}</h1>-->
{content}

</div> <!-- end content -->
</div> <!-- end frame-leftandcontent -->

<div id="frame-right">
<div id="sidebar20" class="">
kjl;;lkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
<!-- {Search} -->

</div> <!-- end sidebar2-->
<!-- <div style="clear: both;">&nbsp;</div> -->
</div> <!-- end frame-right-->
<!-- </div> end page-bgbtm -->
</div> <!-- end page-bgtop -->
</div> <!-- end page -->

<!-- footer -->

<div id="footer-wrapper">
<div id="footer">
<p class="copyright">&copy;&nbsp;&nbsp;2009 All Rights Reserved &nbsp;&bull;&nbsp;
Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates
</a>, modified for CMSMS by <a href="http://ww.transportbranche.de">
transportbranche</a>.</p>

</div> <!-- end footer -->
</div> <!-- end footer-wrapper -->

</div> <!-- end wrapper -->

</div> <!-- end outer -->

<__body>
</__html>

CSS:---------------------------------------------------------------------


body {
margin: 0px;
padding: 0px;
background: #EDE7DB url(/CMSms/uploads/hanging/img01.gif) repeat-x left top;

font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: white;
}

h1, h2, h3 {
margin-top: 0;
}

h1 {
font-size: 1.6em;
font-weight: normal;
}

h2 {
font-size: 1.6em;
}

h3 {
font-size: 1em;
}

ul {
}

a {
text-decoration: none;
color: red;
}

a:hover {
border-bottom: none;
}

a img {
border: none;
}

img.left {
float: left;
margin: 0 20px 0 0;
}

img.right {
float: right;
margin: 0 0 0 20px;
}


#outer { width:960px; border:5px dashed red;}
#wrapper { margin: 20px auto 20px auto; border:5px dashed yellow; width:760px;}

#header-wrapper {

}

/* Header */


#header {
margin: 0px ;width:100px;

}



#logo {
border: 1px solid yellow;padding: 5px 10px;

margin: 0px;
}




}

#logo h1, #logo p {
margin: 0;

color: #888888;
}

#logo span {
color: yellow;
}

#logo h1 {
padding: 0px ;
float:left;
font-weight: normal;
font-size: 12px;color: orange;
}

#logo p {
text-transform: lowercase;
padding: 4px 0 0 3px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: orange;
}

#logo a {
border: none;
text-decoration: none;
color: orange;
}

#orgpk_banner { background-image: url(uploads/website_images/banner_header.jpg);
border: 1px solid yellow; display:inline_block; position:relative; top: -100px; left:110px;
width:300px; height:90px;
}

#info { width:200px; height: 90px; background-color: white; display:inline-block;
border: 1px solid yellow; position:relative; top:-190px; left:470px;}

#ad {width:200px; height:90px; display:inline-block; position:relative; top:-190px; left:520px;
background-color: white; }

#search-wrapper {}
/* Menu */

/*******************************/

#nav_top-wrapper { border: 1px solid white; padding: 0px; display:block;
height:20px;
}

#nav_top { padding: 0px; background-color:green; color:orange;
}

#nav_top ul { list-style-type: none; margin:0px; padding:0px;

}

#nav_top ul li { color: white; font-size: 12px; width: 120px; height:15px; display:inline-block;
font-weight:500; background-image: url(); border: 1px solid white;
vertical-align:top;
background-repeat:no-repeat; background-position:right;
margin: 0px 3px 0px; text-align:center; padding:1px;
}

#nav_top ul li:hover ul { display:block; position:relative; top:2px; left:-5px;
width:120px;
}

#nav_top ul li:hover ul li { background-color:green;z-index:999;}

#nav_top ul li ul { display:none;}

/*******************************/

#nav_main-wrapper { border: 1px solid white; padding: 0px; display:block; width:100%;
height:20px; clear:none;
}

#nav_main { padding: 0px; background-color:green; color:orange;
}

#nav_main ul { list-style-type: none; margin:0px; padding:0px;

}

#nav_main ul li { color: white; font-size: 12px; width: 120px; height:15px; display:inline-block;
font-weight:500; background-image: url(); border: 1px solid white;
vertical-align:top;
background-repeat:no-repeat; background-position:right;
margin: 0px 3px 0px; text-align:center; padding:1px;
}

#nav_main ul li:hover ul { display:inline-block; width:800px;
border:1px solid red;

}

#nav_main ul li:hover ul li { display:inline-block; float:left;}

#nav_main ul li ul { display:none;}

/*******************************/

#nav_login-wrapper {border:1px solid purple; width:250px; height:22px;
background-color:green; position:relative; top:-87px; float:right;
}

#nav_login { border:1px solid green;
padding:0px;
float:right;}

#nav_login ul {list-style-type: none; margin:0px; padding:0px;color:red;}

#nav_login ul li { color: white; font-size: 12px; height:15px; display:inline-block;
font-weight:500; background-image: url(); border: 1px solid white;color:orange;
vertical-align:top;
background-repeat:no-repeat; background-position:right;
margin: 0px 3px 0px; text-align:center; padding:1px;
}



/********************************/


#menu-wrapper { border: 3px dashed white; background-color:orange;
}

#menu {
width: 920px;
margin: 0 auto;
height: 54px;
padding: 0px 20px;
background: url(/CMSms/uploads/hanging/img02.gif) repeat-x left top;
}

#menu ul {
margin: 0px 0px 0px 0px;
padding: 21px 0px 0px 0px;
list-style: none;
}

#menu li {
float: left;
display: inline;
}

#menu a {
height: 30px;
margin: 0;
padding: 10px 30px;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
color: #FFFFFF;
}

#menu .current_page_item a {
background: #F49A73;
color: #2E0815;
}

/* Wrapper */

#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
}

/* Page */

#page {background-color:blue; border:3px dotted blue;
width: 960px;
margin: 0px auto;
padding: 0px;
/*background: url(/CMSms/uploads/hanging/img03.gif) repeat-y left top;*/
}

#page-bgtop {border:3px solid white; width:960px;
}

#page-bgbtm {border:5px solid green;width:960px;
padding:0px;
}

/* Latest Post */

#latest-post {
padding: 20px;
border: 1px solid #E7E7E7;
}

/***************************************/

#frame-leftandcontent {border:1px solid red;width:720px; height:200px; display:inline-block;
}
#frame-right { border:1px solid red; width:210px; margin-left:730px; display:inline-block;}


/* Content */

#main_content {border:3px dashed red;
float: left;
width: 500px;
margin: 0px;
}

.post {
padding-bottom: 15px;
line-height: 200%;
background: url(/CMSms/uploads/hanging/img04.gif) repeat-x left bottom;
}

.post h1 {
font-weight: normal;
}

.title {
margin: 0;
padding: 0px;
text-transform: lowercase;
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-weight: normal;
}

.title a {
border-bottom: none;
color: #454545;
}

.byline {
margin: -4px 0px 20px 0px;
padding: 4px 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

.byline a {
color: #666666;
}

.tag {`
padding: 0 15px;
}

.entry {
padding: 0px 0px;
}

.links {
width: 80px;
height: 33px;
text-align: right;
font-weight: bold;
}

.links a {
display: block;
height: 25px;
padding-top: 8px;
text-align: left;
}

.links a:hover {
}

/* Sidebars */

#sidebar10 {border:1px dotted white;
float: left;
width: 210px;
}

#sidebar2 {border:1px dotted white;
float: right;
width: 210px;
}

.sidebar {
float: right;
padding-top: 5px;
color: #595959;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

.sidebar li {
padding: 0 0 20px 0;
}

.sidebar li ul {
background: none;
padding-bottom: 20px;
}

.sidebar li li {
margin: 0px 15px;
padding: 8px 0px;
background: url(/CMSms/uploads/hanging/img04.gif) repeat-x left bottom;
}


.sidebar li h2 {
height: 26px;
margin: 0 0 0 0;
padding: 14px 15px 14px 15px;
text-transform: capitalize;
font-size: 22px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #454545;
}

.sidebar h2 a {
}

.sidebar a {
padding-left: 0px;
}

/* Search */


#cntnt01moduleform_1 { padding-top:0px; background-color:red; }

#searchform {
margin: 0;
padding: 0 0 5px 0;
}

#searchform br {
display: none;
}

#searchform h2 {
}

#s {
margin: 10px 0px 0 15px;
padding: 2px 2px;
width: 165px;
height: 18px;
border: 1px solid #CCCCCC;
background: #FFFFFF;
font-size: 10px;
color: #000000;
}

#x {
margin: 0;
padding: 2px 5px;
height: 25px;
background: #CA8186;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
/* Calendar */

#calendar_wrap {
padding: 10px 15px;
text-align: center;
}

#calendar_wrap table {
width: 100%;
}

#calendar_wrap th {
}

#calendar_wrap td {
}

#calendar_wrap tfoot td {
border: none;
}

#calendar_wrap tfoot td#prev {
text-align: left;
font-weight: bold;
border: none;
}

#calendar_wrap tfoot td#prev a {
border: none;
}

#calendar_wrap tfoot td#next {
text-align: right;
font-weight: bold;
border: none;
}

#calendar_wrap tfoot td#next a {
border: none;
}

/* Footer */

#footer-wrapper { width: 100%;
height: 100px;
}

#footer {
width: 920px;
height: 100px;
margin: 0 auto;
padding: 0 20px;
background: #111111;
}

#footer p {
margin: 0;
padding: 30px 0 0 0;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #999999;
}

#footer a {
color: #EDE7DB;
}

#footer .link {
}

#footer .copyright {
}
samj
Forum Members
Forum Members
Posts: 30
Joined: Mon Feb 28, 2011 4:31 am

Re: css refresh

Post by samj »

after posting I stumbled across a post describing how tinymce is stripping the tags which it thinks are not necessary. (lost the post/link; but it goes like this <div></div> must change to <div><!-- --></div>).

So there are issues with "tiny." Can I uninstall "tiny" - a "What You See Is Never What You Get" editor - since I DON'T NEED/WANT an editor which fuggers up my carefully handcrafted s**t behind the scenes, unbeknown to me.

thanks
Wishbone
Power Poster
Power Poster
Posts: 1368
Joined: Tue Dec 23, 2008 8:39 pm

Re: css refresh

Post by Wishbone »

:) The div solution sounds like one of my posts... I'm not sure how it relates, but did it solve your issue?

Tiny is infinitely configurable.. In Extensions -> Tiny -> Advanced -> Extra configuration , you can put Tiny configuration statements.. You would have to research the options on the Tiny website, but the div issue might be solvable.

Tiny is great for editing text. I use it if I have to for inserting tables into a page, but it is horrible to use it for that. Anything other than text, and you would need a proper HTML editor like FrontPage or DreamWeaver that has real power to ensure that WYS is really WYG.
Wishbone
Power Poster
Power Poster
Posts: 1368
Joined: Tue Dec 23, 2008 8:39 pm

Re: css refresh

Post by Wishbone »

here's the option:

extended_valid_elements : "div[*]"
Post Reply

Return to “Layout and Design (CSS & HTML)”