1.9.4.2
Seneste spørgsmål og svar fra det danske support forum på cmsmadesimple.org
Danish - Dansk • Re: nedarvning af css
webform wrote:
Et til bud - Der mangler nemlig et par divs i mit forrige indlæg
Code:
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
{literal}
<script type="text/javascript">// <![CDATA[
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// ]]></script>
{/literal}
</head>
<body>
<!-- start content -->
<div id="content">
<!-- start header -->
<div id="header">
<img src="uploads/images/highonlife.png" alt="Highonlife-Prosperity" width="285" height="48" />
</div>
<!-- end header -->
<!-- start menu -->
<div id="menu">
{menu}
</div>
<!-- end menu -->
<!-- start page image -->
<div id="image">
<img src="uploads/images/{page_image}" alt="{title}" />
</div>
<!-- end page image -->
<!-- start main -->
<div id="main">
<!-- start left content -->
<div id="main_left">
{content}
</div>
<!-- end left content -->
<div id="seperator"></div>
<!-- start right content -->
<div id="main_right">
{content block="Højre"}
</div>
<!-- end right content -->
</div>
<!-- end main -->
<!-- start footer -->
<div id="footer">
{global_content name='footer'}
</div>
<!-- end footer -->
</div>
<!-- end content -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
{literal}
<script type="text/javascript">// <![CDATA[
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// ]]></script>
{/literal}
</head>
<body>
<!-- start content -->
<div id="content">
<!-- start header -->
<div id="header">
<img src="uploads/images/highonlife.png" alt="Highonlife-Prosperity" width="285" height="48" />
</div>
<!-- end header -->
<!-- start menu -->
<div id="menu">
{menu}
</div>
<!-- end menu -->
<!-- start page image -->
<div id="image">
<img src="uploads/images/{page_image}" alt="{title}" />
</div>
<!-- end page image -->
<!-- start main -->
<div id="main">
<!-- start left content -->
<div id="main_left">
{content}
</div>
<!-- end left content -->
<div id="seperator"></div>
<!-- start right content -->
<div id="main_right">
{content block="Højre"}
</div>
<!-- end right content -->
</div>
<!-- end main -->
<!-- start footer -->
<div id="footer">
{global_content name='footer'}
</div>
<!-- end footer -->
</div>
<!-- end content -->
</body>
</html>
Og så ville jeg i indsætte følgende (eller hvad der nu passer til din site) i Global Metadata under "Site Admin » Global Settings":
Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Hej ved ikke hvad er er rigtig og forkert, men fik nu løst problemet, der er flyttet lidt rundt på nogle ting i css filen som jeg ved 100% sikkert på der ikke er blevet ændret på, og så har vi redigeret i header filen, hvor vi har en lumsk mistanke til at WYSIWYG: da det er blevet slået til har ændret i noget... underligt... må nok heller bruge en aften eller to på at få læst mine færdigheder op efter 12år som ikke web mand.
takker meget for hjælpen
2012/05/04 14:30
Danish - Dansk • Re: nedarvning af css
Et til bud - Der mangler nemlig et par divs i mit forrige indlæg
Og så ville jeg i indsætte følgende (eller hvad der nu passer til din site) i Global Metadata under "Site Admin » Global Settings":
Code:
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
{literal}
<script type="text/javascript">// <![CDATA[
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// ]]></script>
{/literal}
</head>
<body>
<!-- start content -->
<div id="content">
<!-- start header -->
<div id="header">
<img src="uploads/images/highonlife.png" alt="Highonlife-Prosperity" width="285" height="48" />
</div>
<!-- end header -->
<!-- start menu -->
<div id="menu">
{menu}
</div>
<!-- end menu -->
<!-- start page image -->
<div id="image">
<img src="uploads/images/{page_image}" alt="{title}" />
</div>
<!-- end page image -->
<!-- start main -->
<div id="main">
<!-- start left content -->
<div id="main_left">
{content}
</div>
<!-- end left content -->
<div id="seperator"></div>
<!-- start right content -->
<div id="main_right">
{content block="Højre"}
</div>
<!-- end right content -->
</div>
<!-- end main -->
<!-- start footer -->
<div id="footer">
{global_content name='footer'}
</div>
<!-- end footer -->
</div>
<!-- end content -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
{literal}
<script type="text/javascript">// <![CDATA[
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// ]]></script>
{/literal}
</head>
<body>
<!-- start content -->
<div id="content">
<!-- start header -->
<div id="header">
<img src="uploads/images/highonlife.png" alt="Highonlife-Prosperity" width="285" height="48" />
</div>
<!-- end header -->
<!-- start menu -->
<div id="menu">
{menu}
</div>
<!-- end menu -->
<!-- start page image -->
<div id="image">
<img src="uploads/images/{page_image}" alt="{title}" />
</div>
<!-- end page image -->
<!-- start main -->
<div id="main">
<!-- start left content -->
<div id="main_left">
{content}
</div>
<!-- end left content -->
<div id="seperator"></div>
<!-- start right content -->
<div id="main_right">
{content block="Højre"}
</div>
<!-- end right content -->
</div>
<!-- end main -->
<!-- start footer -->
<div id="footer">
{global_content name='footer'}
</div>
<!-- end footer -->
</div>
<!-- end content -->
</body>
</html>
Og så ville jeg i indsætte følgende (eller hvad der nu passer til din site) i Global Metadata under "Site Admin » Global Settings":
Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2012/05/04 13:39
Brug af faneblade i Cataloger
Cataloger modulet er et alternativ til Products, hvis man for eksempel vil vise varer frem.
Det er et lidt simplere modul, men ofte brugbart.
Cataloger har muligheder for at lave en Element side hvor man kan have flere indholdsblokke, det er tit en nem måde at overskue forskellig information der er tilknyttet elementet.
Hvis man tager det at lave en lille butik der skal vise varer frem vil der typisk kunne være følgende indhold omkring varen :
- Information om varen
- Specifikationer om varen
- Evt. forskellige test og anmeldelser vedrørende varen.
Disse forskellige indholdsblokke kan man selvfølgelig bare have efter hinanden med overskrifter men tit vil det give en lang side, og overskueligheden forsvinder.
Man kan med fordel bruge jquery scripts som dette til at gøre det lidt pænere.
Nedestående er de dele der skal kopieres ind i Element siden og som vil lave indholdsblokkene om til faneblade.
Først kommer selve CSS og Jquery delen som bestemmer hvordan det hele skal se ud, det er wrappet med literal tagget(det vil sige omkring fra starten af style til slutningen af script delen). Derefter kommer selve Cataloger delen der generer fanebladende.
<style type="text/css">
ul.tabs {
margin: 0 !important;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0 !important;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<ul class="tabs">
{section name=at loop=$attrlist}
<li><a href="#{eval var=$attrlist[at].name}">{eval var=$attrlist[at].name}</a></li>
{/section}
</ul>
<div class="tab_container">
{section name=at loop=$attrlist}
<div id="{eval var=$attrlist[at].name}" class="tab_content">
{eval var=$attrlist[at].key}
</div>
{/section}
</div>
Delene fra Cataloger der ikke har noget med fanebladsgenereringen at gøre er fjernet.