CMS Layout in XI 3.0
i've just installed the Xi 3.0 and i may need much of help about that,
the first issue i faced, the layout of the CMS web appliaction.
whenever i select universes,connections, users,,,,, etc
i get everything in large fonts and i cant see anything.
anyone faced this before?
thank you
I've got 2 servers set up and just tested in IE 6 and 7 plus FF 2.0 and everything looks fine. I couldn't see a font setting in the page source just a CSS setting <link rel="stylesheet" type="text/css" href="../yui_2.2.1/yui/build/fonts/fonts.css">.
I'm not sure what font it's trying to use but possibly it's not installed for some reason, have you tested this on multiple workstations?
Regards,
Tim
Similar Messages
-
Tabbed panels repeat region in cms displays 2nd item as a block of content
Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
width: 700px;
background-color: #E6E6E6;
border: .1em solid #999;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
height: auto;
margin-bottom: 30px;
#item_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
color: #333;
background-color: #FFF;
height: 30px;
border-bottom-width: .1em;
border-bottom-style: dotted;
border-bottom-color: #333;
font-weight: bold;
margin-bottom: 10px;
#price {
margin-top: 5px;
float: right;
width: 150px;
background-color: #EAEAEA;
border: 0.1em solid #CCC;
.BOLDTEXT {
font-weight: bold;
text-align: center;
color: #FFF;
.BOLDTEXT_PRICE {
color: #333;
#engine_spec {
float: left;
width: 190px;
font-family: Arial, Helvetica, sans-serif;
font-size: .75em;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #099;
float: right;
width: 150px;
font-weight: bold;
text-align: right;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#overview_picture {
height: 150px;
width: 200px;
background-color: #CCC;
float: left;
margin-right: 10px;
margin-top: 5px;
.BOLDTEXT_blackprice {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#smallprint {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
color: #666;
margin-top: 2px;
table tr td {
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
.specwhite {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
#reserve {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background-color: #099;
width: 140px;
float: right;
margin-top: 10px;
padding: 5px;
text-align: center;
border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Overview</li>
<li class="TabbedPanelsTab" tabindex="0">Description</li>
<li class="TabbedPanelsTab" tabindex="0">Images</li>
<li class="TabbedPanelsTab" tabindex="0">Specification</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="item_description"><perch:content id="Title1" label="Title" type="text" />
<div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
</div>
<div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
<div class="engine_spec" id="engine_spec">
<table width="100%" border="0" cellpadding="5" cellspacing="7">
<tr>
<td width="35%" bgcolor="#EAEAEA">Year of Make</td>
<td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Current Miles</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Engine Size</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Body Colour</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Transmission</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
</tr>
</table>
</div>
<div id="price">
<table width="150" border="0" cellspacing="9">
<tr>
<td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
<td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
</tr>
</table>
</div>
<div id="reserve">Reserve Motorhome</div>
</div>
<div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
<div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
<div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponent
>CSS file
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
background-color: #DDD;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: small;
font-weight: bold;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 4px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
background-color: #FFF;
color: #333;
border-top-color: fff;
border-right-color: fff;
border-bottom-color: fff;
border-left-color: fff;
border-color: fff;
outline-color: fff;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
background-color: #F9F9F1;
height: auto;
margin-bottom: 3px;
border: .1px solid #999;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
padding: 20px;
clear: both;
margin-bottom: 5px;
height: auto;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:none !important;
height: 100%;
#TabbedPanels1 {
height: auto;
padding-top: 5px;
background-color: #EAEAEA;
width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASEI think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps -
Custom keyboard layout and Gnome3
After moving back to my native Sweden I find that the local keyboard is a pain to use for programming (mainly it's the locations of '{[]}' that are painful). I'm stuck with Swedish keyboards at work, it's mostly laptops so using an external keyboard is not an ideal solution. Currently my solution is to run the following script
#! /bin/bash
# load XKB, if there is one
XKBDIR=${HOME}/.xkb
XKBMAPFILE=${XKBDIR}/keymap/$(hostname)
if [[ -f ${XKBMAPFILE} ]]; then
xkbcomp -I${XKBDIR} ${XKBMAPFILE} ${DISPLAY} &> /dev/null
fi
and then put the desired layout changes under ~/.xkb/. I've then created a .desktop and put it in ~/.config/autostart to run the script on login. The only problem with this is that the changed layout doesn't survive putting the laptop to sleep or hibernating it.
I'd love to get suggestions for better solutions, solutions that survive sleep/hibernate.But how can I edit this file to extract an Spanish.keylayout ?? And be able to create a custom keyboard layout ??
Don't mess with those files. Just get Ukelele, it comes with copies of what you need:
http://scripts.sil.org/cms/scripts/page.php?siteid=nrsi&itemid=ukelele
What exactly are you trying to do? Some other info is
http://m10lmac.blogspot.com/2007/02/more-ways-to-type-spanish.html
http://m10lmac.blogspot.com/2007/04/typing-catalan.html -
Using Auto Adjustable Fluid Grid Layout Divs to balance two columns
I have a header band, two columns and then a footer band in the layout that I'm working on.I have Div on each side that is set to "Auto" for height so that the two column lengths appear to be the same size when they get to the footer band. That is how I envisioned it, in practice, "Auto" only seems to adjust to the text inside the respective divs.
Something that"hould" be soesy has gotten me banging my head for four days. I thught I had a solution, using "nesting tags" but saw that was not supported.
Any ideas?http://whatwouldwaltdo.businesscatalyst.com/fl0916.html
Source code:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/FL916.css" rel="stylesheet" type="text/css">
<link href="/stylesheets/FL.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="bannertop"><img src="/images/Walt w CMS PIN.fw.png" alt="Walt Disney with Disneyland Cast Members (1966)"></div>
<div id="ticker">This is the content for Layout Div Tag "ticker"</div>
<div id="blocker">
<div id="leftcolumn">This is the content for Layout Div Tag "leftcolumn"
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">HOME</div>
<div class="AccordionPanelContent">
<img src="/images/graphics/pagetitles/toallwhocome.gif" alt="The opening line of Walt Disney's dedication speech at Disneyland, "To all who come to this happy place, welcome ..."" width="192" align="absmiddle">
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Pins</div>
<div class="AccordionPanelContent">
<p>Ordering</p>
<p>Presenting a Pin</p>
<p>Collectors' Corner</p>
<p>Why a Pin?</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Cast Members</div>
<div class="AccordionPanelContent">
<p>Newest</p>
<p>Nominate Your Own</p>
<p>Alphabetical</p>
<p>By Company/Location</p>
<p>By WWWD Pin</p>
<p>Cast Members' Reactions</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Traditions</div>
<div class="AccordionPanelContent">
<p>Guests' Traditions</p>
<p>Share Your Traditions</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Adventures</div>
<div class="AccordionPanelContent">
<p>Guests' Adventures</p>
<p>Share Your Adventures</p></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">City Hall</div>
<div class="AccordionPanelContent">
<p>Waltisms</p>
<p>The WWWD Story</p>
<p>About Us</p>
<p>That First Trip</p>
<p>About Us</p>
<p>Ordering</p>
<p>About Us</p>
<p>Ordering</p></div>
</div>
</div>
<div id="social">This is the content for Layout Div Tag "social"</div>
<div id="printer">This is the content for Layout Div Tag "printer"</div>
<div id="banner"><img src="/images/graphics/reg sidebargraphic.gif" alt="White Mickey head with a circle of stars on a blue field"></div>
</div>
<div id="copy">This is the content for Layout Div Tag "copy"<br><br><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
Legacy Inc. </FONT><BR>
<FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
of Founder's Legacy, Inc.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
of the Disney Store.com Affiliate Network. As such we are authorized
to display the Disney Store banner on any or all of our webpages.
Founder's Legacy is also listed with The Disneyland Resort Press &
Publicity Department, images used are with their permission.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
of The Walt Disney Company. The only other relationship between Founder's
Legacy, Inc. and The Walt Disney Company is various members of the
Founder's Legacy Inc.'s Board of Directors and/or their family are
shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
<BR>
Additional disclosures for the benefit of insomniacs may be enjoyed
in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<div id="mission"><FONT
COLOR="#000081"><B>Our Mission Statement</B></FONT>
<BLOCKQUOTE>
<P><FONT color="#D50000" SIZE="+2"><em>To restore Magical Guest experiences through recognizing outstanding Cast Members.</em></FONT></P>
</div>
<div id="awards"><table width="100%" border="0" cellpadding="0">
<tr>
<TD VALIGN="middle" ALIGN="CENTER"><a href="http://LaughingPlace.com"><img src="/Assets/graphics/Affiliations/LPLogoHighest.gif" width="96" height="82" border="1" alt="LaughingPlace.com"></a></TD>
<TD VALIGN="middle" ALIGN="CENTER"><img src="/Assets/graphics/Affiliations/seek-button01.gif" width="120" height="80"
border="0"></TD>
<TD WIDTH="1" VALIGN="middle" ALIGN="CENTER"><a href="http://disney.go.com/investors/index.html"><img src="/Assets/graphics/Affiliations/shareholder.gif" width="106" height="48"
border="1"></a></TD>
<TD VALIGN="middle" ALIGN="CENTER"> <img src="/Assets/graphics/Affiliations/safewave.gif" width="78" height="74"
border="1"></TD>
<TD VALIGN="middle" ALIGN="CENTER"><a href="http://wdwig.com/"><img src="/Assets/graphics/Affiliations/125x125allearsnet.gif" width="120" height="120" border="0"></a></TD>
</tr>
</table></div>
<div id="bigbottom"><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
Legacy Inc. </FONT><BR>
<FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
of Founder's Legacy, Inc.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
of the Disney Store.com Affiliate Network. As such we are authorized
to display the Disney Store banner on any or all of our webpages.
Founder's Legacy is also listed with The Disneyland Resort Press &
Publicity Department, images used are with their permission.</FONT></P>
<P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
of The Walt Disney Company. The only other relationship between Founder's
Legacy, Inc. and The Walt Disney Company is various members of the
Founder's Legacy Inc.'s Board of Directors and/or their family are
shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
<BR>
Additional disclosures for the benefit of insomniacs may be enjoyed
in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Stylesheet:
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bannertop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#ticker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#blocker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcolumn {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#copy {
clear: none;
float: left;
margin-left: 4.1666%;
width: auto;
display: block;
#leftnav {
clear: none;
float: left;
margin-left: 4.1666%;
width: 100%;
display: block;
#social {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 35px;
#printer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mission {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#awards {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bigbottom {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bannertop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#ticker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#blocker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcolumn {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#copy {
clear: none;
float: left;
width: 55%;
display: block;
margin: 0%;
#leftnav {
clear: none;
float: left;
margin-left: 2.5641%;
width: 100%;
display: block;
#social {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#printer {
clear: both;
float: left;
margin-left: 0;
width: 35.8974%;
display: block;
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mission {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#awards {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bigbottom {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bannertop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#ticker {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#blocker {
clear: both;
float: left;
margin-left: 0;
width: 74.5762%;
display: block;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: none;
border-right-style: ridge;
border-bottom-style: none;
border-left-style: none;
border-top-color: #C10B0F;
border-right-color: #C10B0F;
border-bottom-color: #C10B0F;
border-left-color: #C10B0F;
#leftcolumn {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#copy {
clear: none;
float: left;
margin-left: 1.6949%;
width: 100%;
display: block;
#leftnav {
clear: none;
float: left;
margin-left: 1.6949%;
width: 100%;
display: block;
#social {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#printer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mission {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#awards {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#bigbottom {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block; -
How do you get to display checkbox items in list or detail layouts?
Hi,
I have searched everyhwere for what I felt would be standard stuff in web apps, now lost a day to it!
None of the online videos/knowledge base articles or this forum seem to cover it but I can't believe you wouldn't be able to do it.
If I have created checkbox fields in my web apps how do I get them to display in the main templates (details and list) as list items, ul, ol or dl or anything else other than raw output?
How do I wrap the nessersary html around the values? Jquery for now I guess or is there some hidden liquid layout or tag parameter/value I don't know of?
And whilst I'm on it is my only option to not show or show content based on a boolean true/false value to do it through jquery/css?
Help appreciated, so desperate now!
Regards
BangersHi Mary,
Thanks for the help. I saw that somewhere though Adobe's making this forum nice and tricky to find anything! Relied on google caching for most useful stuff I've found to bybass the redirect to the first forum page.
I needed it to wrap around the items so came up with this:
<script type="text/javascript">
$(document).ready(function () {
// Populate a dl with checkbox items or choose any other html to wrap around items
var checkItems="{tag_checkboxItems}";
$('#dlID').html('<dt>Items List Title</dt><dd>'+checkItems.split(",").join("</dd><dd>")+'</dd>');
// #dlID can be anything but identifys the html element that you setup to contain your list of items in my case it was a dl with id #dlID
</script>
If there is a better SEO method to do this please let me know.
Frankly I've been amazed that web apps don't really support conditional statments and there is little to no information on achieving it through jquery (my first projects have been fairly basic)...roll on fluild layouts I guess.
Failing that maybe Adobe could produce something in the knowledge base or videos which really do cover more advanced implementaion of web apps. I doubt anyone using web apps or having had experience of other CMS would really consider showing or hiding content based on boolean results or looping to create lists all that advanced, it's more a fundemental function of a CMS.
P.S Thanks again to both of you.
Bangers x -
How to Make a Keyboard Layout for X11/OpenOffice
While OpenOffice has a setting to use standard OS X keyboard layouts, you may find that some of these do not work correctly, especially if deadkeys are involved. In that case you will need to create a new layout in the form of a keymap file, which you place in your home folder and invoke when needed via the command "xmodmap mykeymap" in an xterm (or by putting the same line in some config file).
You keymap file should just contain the minimum necessary modifications of the default X11 map, which you can see by doing the command "xmodmap -pke | less" in an xterm (after making sure the preference item for using OS X layouts is turned off).
Some fiddling with the entries of your file may be necessary, as both X11 and apps that use it have quirks and bugs of various sorts. Below is the file I made to do Vietnamese in OpenOffice as an example:
keycode 26 = abreve
keycode 27 = 0x00E2
keycode 28 = 0x00EA
keycode 29 = 0x00F4
keycode 30 = dead_hook
keycode 31 = dead_grave
keycode 33 = dead_belowdot
keycode 34 = dead_tilde
keycode 36 = dead_acute
keycode 37 = U0111
keycode 38 = U01A1
keycode 41 = U01B0This is a feature Apple should definitely add customization to on OS X.
You can make custom keyboard layouts that include any characters you want using Ukelele.
http://scripts.sil.org/cms/scripts/page.php?siteid=nrsi&itemid=ukelele
I doubt Apple is going to incorporate this into OS X, but you can suggest it here:
http://www.apple.com/feedback/macosx.html -
How to create universe so that it can be opened for two diff CMS in designer
Post Author: basham
CA Forum: Administration
Hi,
i have created some WI reports over a universe. I need to move the report and the universe to different CMS.But i'm not able to open the .unv file for the othere CMS in Designer, i'm getting FRM00008.Could some one let me know if i'm missing any thing in the universe that i have created. or do i need to modify some thing in there.Ok.
Take a textfield
Go to Object | Allow multiple lines
Go to Layout | Height | activate "Expand to fit"
Go to the initialize-Event or readyform (You have to change the _ for your textfield) this.rawValue = "___________\n___________\n___________";
Go to the enter-Event this.rawValue = null;
Go to the exit-Event
if(this.rawValue == null)
this.rawValue = "___________\n___________\n___________";
}else{}
With this solution you can simulate the same as pattern see above.
I hope this is helpfull for you,
Mandy -
CMS (Content Management System)
Hi,
Firstly and quickly some background. I have a web design and development company and am currently bringing my company into the 21st century by revamping my site and my method of developing sites from a fixed width layout to a responsive layout using sass + compass and Zurb’s foundation framework.
I would like to add a built in content management system into my site that will allow my clients to log into an account set up for them via my website which will allow them to edit certain elements of their site such as text and images as well as adding in additional content / pages. Something that would allow me to wrap a class round elements of sites to show which sections I want to be editable by my clients would be ideal.
Ideally I would like to find a method / tutorial to build my own robust reliable easy to use CMS so I don’t have to pay a third party.
I don’t mind using third party software but it has to be able to be integrated into my site so my clients can edit content on their site through mine. Also I don’t want the CMS part of my site to have another company’s logo etc.
Hope this all makes sense, any help that can be given is much appreciated.
Kind regards
Elliot.All the websites I build are based on a custom CMS that I've been refining over five years.
If, as you say, you want to build your own CMS, here are some points:
1. You must be able to write PHP and SQL code effortlessly. Also know some javascript.
2. Allowing clients to upload and edit material on the site raises many security issues, which must be addressed. You must build the CMS so that if a hacker breaks into it, the damage would be minimal. Also, clients may "unwitingly install material you don't want to allow, like javascript.
3. If clients have the ability to create new pages, then they must also be given the ability to manage their menu system. Assuming that the menus are multi-level, this is more complex to program than just giving clients text boxes to add content to.
There is a book on creating a CMS called "Buid your own database driven website using php & mysql," but it's outdated and has many shortcomings.
PHP Solutions by Powers will teach you many of the things you need to build a CMS, although it's up to you to put it all together.
Unless you need to build a CMS that has complex features that no off-the-shelf CMS can accommodate, then I suggest you not try. Instead of learning to build your own CMS, apply your time to learning Drupal, Joomla, or even WordPress. Then modify your existing websites to work with the CMS. -
Adobe muse - How do I add cms?
Hi I've designed a couple of sites in adobe muse now, but i'd like to know how to add cms for potential client to update sites I design for them. Can you help me please?
I actually agree that WordPress (self hosted installation) could be the way to go (not exclusively, but a CMS software, either open-source or even proprietory). However, learn to code to offer a point of difference (I'm assuming you already know how to design a good site - the other point of difference).
I'm probably biased as I love the ability to have control over coding my site designs (to me, Muse is cheating, I've used it - any good designer can design a site - but coding it up yourself is a fantastic skill to have. Just my opinion).
WordPress is free, yes, but it's essentially a free CMS. For me, I used to have to charge clients for a CMS component to my site developments before the open source ones came about, so in that respect, for many sites, the CMS cost component has been elliminated for clients (some still choose to go the proprietory way). WordPress is probably the easiest CMS for clients to learn to use at the level they need to edit their own content for smaller sites (note I'm calling it a CMS, it stopped being just a blogging tool a long time ago). I can see where the comments are coming from that are saying to stay a way from WordPress, as there are many people out there calling themselves 'web developers / designers' who have found WordPress and have thought, I could use this to make some moolah, but they don't know how to go further than installing WordPress, activating a plugin, a theme (they may even know some basic css to customise the theme), and then charging people for something that they could do for themselves for free. I doubt some of them even know how to secure a site.
However, as a CMS itself, WordPress is actually very powerful, and can power a pretty large, serious site. A comment earlier mentions that the destinction between cheap and professional is apparent, and it's true for WordPress sites. You can tell the sites that use it for free, as a hobbyist, or have done it themselves (and if someone is charging for this, look at their site and client sites - you can tell straightaway if they know what they're doing - if their site & client sites look templated but they're charging web designer fees, that's a dead giveaway to steer clear ).
For me, I use WordPress on some sites as a tool to give my clients the CMS capabilities they need (along with other open-source and proprietory CMSs). If developers had to pay for WordPress as a piece of software, I'd do it. However, I go far beyond what people can get for free from it, and give people what they can't do for themselves, such as custom professional web design & development, design of their site to suit their whole branding strategy, functionality way beyond the core offerings of WordPress, and education on how to keep their sites secure (WordPress is popular, and hackers know this.)
As a designer, Adobe tools are a must (I'm a graphic design as well as web designer). Illustrator is my preferred choice for web design proofs for clients, InDesign for print, Dreamweaver I use for coding (by hand - I just like the way it colour codes the raw code).
If you need to offer professional web design as a service, with CMS capabilities, and want to go with with WordPress, or Drupal, or Mod X , or CMSMS, or a proprietory system, and don't want to outsource to a professional developer who knows what they're doing, then learning to code is a must, not an optional extra - CSS is not difficult (need to be aware of cross browser limitations though), HTML is so easy, PHP is harder but is worth knowing, for other CMSs the Smarty Templating language is often used, other web technologies can be handled by outsourcing to serious developers/programmers. Learning how WordPress works (from the backend) is not enough. Learn how to develop with it. If deciding to go with WordPress, don't rely on free plugins, get some very good quality premium ones (just the core set) and be prepared to spend some money on these tools. (Would you use a tradesperson who only relied on free or cheap sub-standard tools?) - Machine generated code is no substitute to hand written code. (Remember the old ImageReady and the spurfluous generated HTML from a sliced layout? Yuk!)
I can say, if you are a very good front end designer and can design a site layout, then learning how to develop that layout for a CMS is very satisfying indeed - at the very least, start by learning how to code it into a HTML layout with CSS, get some initial help with this from Dreamweaver and go from there. Code for me is another tool to add to my Adobe toolset to satisfy creative output. -
How to migrate adobe business catalyst cms to another hosting
how to migrate adobe business catalyst cms to another hosting
is there any way .. i have tried but how can get databaseBC is a SAAS site so you can not just migrate it to another hosting. You would have to take layouts/templates and export the data as spreadsheets through reports in BC etc.
From there you would have to replace modules and tags with flat content or what ever the system needs that you migrate to.
Like with any system to system migration it wont be straight forward or a push click solution. -
Dreamweaver website layout problems
Hello new here
an someone pls tell me why my website is perfect on my computer where as on other computer the layout is all over the place
pls help
thank youhans-g. wrote:
Hi SnakEyez02,
to explain my suggest (I quote killer): "the problem is i have tried the webpages on other computers and they are out of place where as on my pc its pefect images are out of place and the layout doe not fit to screen which prompted me to take this action because ..."
I think it would be a good interim solution if killer could search for the error first in offline way, as long as he does not have access to the server.
Hans-G.
Ok. But how does downloading the Typo3 CMS help view it offline? Wouldn't this person be better downloading:
WAMP -http://www.wampserver.com/en/
MAMP - http://www.mamp.info/en/index.html
XAMPP - http://www.apachefriends.org/en/xampp.html -
Hey everyone,
I'm quite new to Dreamweaver CC, and I would like to make a simple portfolio for the designs that I do.
I would like to set up a website, with a simple logo, navigation below it and have posts and updates below.
Similar to these websites:http://esymai.com/ http://dtshatesyou.com/
Or alternatively, any suggestions in regards to using WordPress or any other 'blog' type websites and using a layout/theme.
This would be an amazing help !Thanks ,
JamesHi James,
Ben is correct it all depends on your knowledge of coding. Wordpress is probably the esiest to use out of the cms family and there are quite a few free templates to get you started. These can be modified using Dreamweaver CC. Also you need to think about your visitors and what devices they will use to view your site; does it need to be responsive. In fact, since you have Dreamweaver CC I would advise you to make use of the fluid grid layout and HTML5 tags to set up a header, relevant number of columns and a footer. Then populate it with your content.
I hope this has been of some help. As you I am a new user too and just getting my head around web design as I wish to make this a career. -
How To Change To Hungarian Pc Keyboard Layout?
Hi there!
I've dwelved myself into learning programming and the very first day I had troubles. See, I got used to PC layouts, but whatever, I can learn it..
So I had my first big issue.. Wanting to write < and >. Sure, its easy, here, but in Eclipse, alt + shift + x (which makes the > sign), brings up a shortcut or something in Eclipse.. I believe that if I had the hungarian PC layout, which I don't, and the only one on the internet that I can find is currently missing as a 404, can't help either. I'm wondering if I buy a USB keyboard, does that give me the PC layout or the MAC layout?
Any possible solutions? I want to use Eclipse for html and php, or any other good IDE-s that may be out there, so "use a notepad" is not really a solution for me..
Thanks in advanceI'm wondering if I buy a USB keyboard, does that give me the PC layout or the MAC layout?
The keyboard is not important, as the layout is determined by software. You may be able modify the Hungarian layout that comes with OS X to match the PC version using the tool Ukelele:
http://scripts.sil.org/cms/scripts/page.php?siteid=nrsi&itemid=ukelele
Whether that will solve your problem with Eclipse I don't know. -
Correspondence management - Does CMS support dynamic functionality
Hi
We have an requirement that based on the xml input the no. of pages should get generated. This functionality we have implemented in CMSA, the pages are getting generated but the asset which we mapped to template are not displayed.
For example: My input XML consists of 4 address, In CMS, at layout design we wrote code for no. of address that many pages need to be generated on page level. The same layout we used for creating template.
While designing an template we used the fragments and assets. The pages which are generated dynamically shows fragment content but not the asset content.
i.e., Page 1 is displayed properly with all the content of the letter, but the pages generated dynamically have fragment but no asset.
Do CMS support this type of functionality?
If yes, please help me in resolving this.
Thanks in advance
Regards,
SonyIn Numbers '09 there is the function HYPERLINK() described as:
HYPERLINK
The HYPERLINK function creates a clickable link that opens a webpage or new email message.
HYPERLINK(url, link-text)
• url: A standard universal resource locator. url is a string value that should contain a properly formatted universal resource locator string.
• link-text: An optional value that specifies the text that appears as a clickable link in the cell. link-text is a string value. If omitted, url is used as the link-text.
Examples
=HYPERLINK(“http://www.apple.com”, “Apple”) creates a link with the text Apple that opens the default web browser to the Apple homepage.
=HYPERLINK(“mailto:[email protected]?subject=Quote Request”, “Get Quote”) creates a link with the text Get Quote that opens the default email application and addresses a new message to [email protected] with the subject line Quote Request.
It's what is the closest feature available.
Yvan KOENIG (from FRANCE samedi 18 juillet 2009 10:30:29) -
Hi,
I finally got the BC working with Muse and have been able to upload a Muse test site as seen here:
http://waltontest.businesscatalyst.com
Here is the thing I'm confused about. When I login to Muse, I do so with my colleague Brian's credentials:
[email protected]
PW: ***
Brian's BC URL is:
http://hammrich.businesscatalyst.com
But as you can see from the above waltontest URL, it's not Brian's BC URL but "waltontest."
What I would like to do is go into hammrich BC and play around with the Muse site "waltontest" using BC's CMS system to see it's like. One thing Brian was concerned about with Muse is he or his other co-worker want some kind of CMS to make simple textual changes to the Muse site. They don't want to do it in Muse though; they'd rather do it in some kind of CMS. When I found out BC has a CMS system, I thought - perfect! I could do all of the major site changes in Muse (because I'm the designer and am comfortable with Muse), and then if they want to do simple changes they can in BC using the CMS system.
But obviously, I don't know how to find the "waltontest" site in the "hammrich" BC. Sorry if this seems confusing. Any help is appreciated.
Thanks - Deaf Guy MikeHi Micheal,
Muse is a basic introduction to website design. It does hook into BC but only in very basic form, the lowest plan availible in fact - web basic.
When you build sites in Muse it is ONLY through muse can you change and update content.
If you want to fully explore Business Catalyst which is much more then just a CMS then you need to not use Muse. You can not update change content in BC because when you upload in Muse you overwrite this. You can not edit in BC. YOu can overide this but as mentioned you will loose changes online every time you make a change in Muse.
Like I said, Muse is to produce something but thats about it.
To full develop and design a full website for the web it is better to use coding software such as Dreamweaver and Coda or Sublime text etc. These allow management of templates, layouts and files and css, javascript etc better to develop sites. People can manage their online business and their content via the CRM and CMS aspects of BC online and you develop the site without interfearence (if done right).
If you come from Creative Cloud you have to put in a request to update a website plan, you can not do this yourself or you remake a new site with a better plan via the BC site for example.
The reason you log in with his details and get a different site is because that is a different site under his account not yours. You wont find the waltontest site in hammirch because they are completly different.
in both those URL's you can do /admin and login with the user details for that. They are not the same thing and seperate sites. BC is not one thing everyone on, its a software as a service to develop websites and the full offerings are very powerful.
You can visit the website for more information, there are links and a big faq and guide section on the ovewview page of these forums http://forums.adobe.com/community/business_catalyst and in the guides section links to 3rd parties who produce guides on BC.
Maybe you are looking for
-
Can I use Java to download webpages from the internet?
I need to be able to download webpages from different servers, search the webpage for certain data, save that data to disk and manipulate that data to create complimentary data to save as well. An example of what I need to download is at http://www.g
-
How can I send my Aunt an ITunes Gift Card in Dubai. She doens't have a credit card and I would like for her to be able to buy books.
-
sorry, i cant login in my Macbook pro,, iMessage and FaceTime.., could u please help me to fix it? im international student, so i must use facetime to chat with my family and fds.. please help me.. please help me..
-
Video issues in mac os 10.6.4 and windows 7 64x
To start with, my computer is the late 2008 model Imac, has 3g of memory, and wasn't experiencing any video problems until earlier this month. I've already had it serviced, and was told that the issue was resolved, and was unrelated to hardware. Fift
-
Hi Experts, i have developed a crystal report using tokens as the parameter field. One token i created is display only account name from OACT. but when i preview in SAP it chooses the accountcode instead. Please i need urgent help to display only acc