13 Replies - 562 Views - Last Post: 13 March 2012 - 06:06 AM Rate Topic: -----

#1 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

enable client to customize their own page layout

Posted 13 March 2012 - 04:16 AM

How can i enable client(user) to customize their own page (in this case the user was registered and have an account. example like blogger..
Is This A Good Question/Topic? 0
  • +

Replies To: enable client to customize their own page layout

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: enable client to customize their own page layout

Posted 13 March 2012 - 04:20 AM

Save the user's preference for a stylesheet in a database and load it up on each load.

Show us what you've tried already (otherwise this will be closed).
Was This Post Helpful? 0
  • +
  • -

#3 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 04:31 AM

I have made this php code for default layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://>/";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo substr(curPageURL(),44,strlen(substr(curPageURL(),44))) ?></title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marvel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marvel|Delius+Unicase' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
	<div id="wrapper2">
		<div id="header" class="container">
			<div id="logo">
				<h1><a href="#"><img src="/media/pics/mytuple_logo.png" /></a></h1>
			</div>
			<div id="menu">
				<ul>
					<li class="current_page_item"><a href="#">Homepage</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Photos</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
		<!-- end #header -->
		<div id="page">
			<div id="content">
				<div class="post">
					<h2 class="title"><a href="#">Welcome to Simple World </a></h2>
					<p class="meta"><span class="date">January 26, 2012</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
					<div style="clear: both;">&nbsp;</div>
					<div class="entry">
						<p>This is <strong>Simple World </strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The photo used in this template is form <a href="http://pdphoto.org/">pdphoto.org</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)/></p>
						<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
						<p class="links"><a href="#" class="more">Read More</a><a href="#" title="b0x" class="comments">Comments</a></p>
					</div>
				</div>
				<div class="post">
					<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
					<p class="meta"><span class="date">January 24, 2012</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
					<div style="clear: both;">&nbsp;</div>
					<div class="entry">
						<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.  Mauris quam enim, molestie in, rhoncus.</p>
						<p class="links"><a href="#" class="more">Read More</a><a href="#" title="b0x" class="comments">Comments</a></p>
					</div>
				</div>
				<div class="post">
					<h2 class="title"><a href="#">Consecteteur hendrerit </a></h2>
					<p class="meta"><span class="date">January 20, 2012</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
					<div style="clear: both;">&nbsp;</div>
					<div class="entry">
						<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.  Mauris quam enim, molestie in, rhoncus.</p>
						<p class="links"><a href="#" class="more">Read More</a><a href="#" title="b0x" class="comments">Comments</a></p>
					</div>
				</div>
				<div style="clear: both;">&nbsp;</div>
			</div>
			<!-- end #content -->
			<div id="sidebar">
				<ul>
					<li>
						<div id="search" >
							<form method="get" action="#">
								<div>
									<input type="text" name="s" id="search-text" value="" />
									<input type="submit" id="search-submit" value="GO" />
								</div>
							</form>
						</div>
						<div style="clear: both;">&nbsp;</div>
					</li>
					<li>
						<h2>Aliquam tempus</h2>
						<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
					</li>
					<li>
						<h2>Categories</h2>
						<ul>
							<li><a href="#">Aliquam libero</a></li>
							<li><a href="#">Consectetuer adipiscing elit</a></li>
							<li><a href="#">Metus aliquam pellentesque</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Metus aliquam pellentesque</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Urnanet non molestie semper</a></li>
							<li><a href="#">Proin gravida orci porttitor</a></li>
						</ul>
					</li>
					<li>
						<h2>Blogroll</h2>
						<ul>
							<li><a href="#">Aliquam libero</a></li>
							<li><a href="#">Consectetuer adipiscing elit</a></li>
							<li><a href="#">Metus aliquam pellentesque</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Metus aliquam pellentesque</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Urnanet non molestie semper</a></li>
							<li><a href="#">Proin gravida orci porttitor</a></li>
						</ul>
					</li>
					<li>
						<h2>Archives</h2>
						<ul>
							<li><a href="#">Aliquam libero</a></li>
							<li><a href="#">Consectetuer adipiscing elit</a></li>
							<li><a href="#">Metus aliquam pellentesque</a></li>
							<li><a href="#">Suspendisse iaculis mauris</a></li>
							<li><a href="#">Urnanet non molestie semper</a></li>
							<li><a href="#">Proin gravida orci porttitor</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- end #sidebar -->
			<div style="clear: both;">&nbsp;</div>
		</div>
		<!-- end #page -->
		<div id="footer">
			<p>Copyright (c) 2012 Sitename.com. All rights reserved.</p>
		</div>
	</div>
</div>
<!-- end #footer -->
</body>
</html>


this is the css
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #EEEBDA url("../media/image/img01.jpg") repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #4D4D4D;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-family: 'Arvo', serif;
	color: #056303;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.8em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 240%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #C16C2F;
}

a:hover {
}

#wrapper {
	background: url("../media/image/img03.jpg") repeat-y center top;
}

#wrapper2 {
	background: url("../media/image/img02.jpg") no-repeat center top;
}

.container {
	width: 1000px;
	margin: 0px auto;
}

/* Header */

#header {
	width: 940px;
	height: 100px;
	margin: 0px auto;
	padding: 0px;
}

/* Logo */

#logo {
	float: left;
	width: 288px;
	height: 100px;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}
#logo img{
float: left;
	width: 250px;
	margin: auto;
	padding: 0;
	color: #FFFFFF;
}
#logo h1, #logo p {
}

#logo h1 {
	padding: 30px 0px 0px 0px;
	letter-spacing: -3px;
	text-align: center;
	text-transform: lowercase;
	font-size: 40px;
}

#logo h1 span {
	color: #C16C2F;
}

#logo h1 a {
	color: #FFFFFF;
}

#logo p {
	margin: 0;
	padding: 0px 0 0 0px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 12px;
	color: #FFFFFF;
}

#logo p a {
	color: #FFFFFF;
}

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

/* Search */

#search {
	float: right;
	width: 280px;
	height: 60px;
	padding: 20px 0px 0px 0px;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 10px 0 0 20px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 170px;
	padding: 6px 5px 3px 5px;
	border: none;
	background: #D0C9B7;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
}

#search-submit {
	width: 50px;
	height: 22px;
	border: none;
	background: #1D1D1D;
	color: #FFF;
}

/* Menu */

#menu {
	float: right;
	width: 652px;
	height: 100px;
	margin: 0px auto;
	padding: 0px;
}

#menu ul {
	float: right;
	margin: 0;
	padding: 50px 20px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	padding: 0px 15px 0px 15px;
}

#menu a {
	display: block;
	height: 20px;
	margin-right: 1px;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
}

/* Page */

#page {
	width: 940px;
	margin: 0px auto;
	padding: 30px 0px;
}

/* Content */

#content {
	float: right;
	width: 592px;
	padding: 0px 30px;
}

.post {
	overflow: hidden;
	margin-bottom: 20px;
	border-bottom: 1px dashed #CACACA;
}

.post .title {
	margin: 0px;
	padding: 7px 0px 0px 0px;
	letter-spacing: -1px;
}

.post .title a {
	border: none;
	letter-spacing: 1px;
	letter-spacing: -1px;
	text-align: left;
	text-transform: uppercase;
	font-size: 26px;
	font-weight: normal;
	color: #C16C2F;
}

.post .meta {
	margin-bottom: 30px;
	padding: 0px;
	letter-spacing: 1px;
	text-align: left;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 12px;
	font-weight: normal;
}

.post .meta .date {
	float: left;
}

.post .meta .posted {
	float: right;
}

.post .meta a {
}

.post .entry {
	padding: 0px 0px 30px 0px;
	padding-bottom: 20px;
	text-align: justify;
}

.links {
	float: right;
	margin: 20px 0px 30px 0px;
	text-align: right;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-size: 12px;
	font-weight: normal;
}

.more {
	display: block;
	float: left;
	padding: 0px 0px 0px 0px;
	margin-right: 30px;
}

.comments {
	display: block;
	float: left;
	padding: 0px 0px 0px 0px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 288px;
	margin: 0px;
	color: #726B63;
}

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

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 50px;
}

#sidebar li li {
	line-height: 35px;
	border-bottom: 1px dashed #A5A08C;
	margin: 0px 30px;
	font-size: 14px;
	font-weight: normal;
}

#sidebar li li span {
}

#sidebar li li a {
	padding: 0px 0px 0px 0px;
}

#sidebar h2 {
	margin: 0px;
	padding: 0px 0px 10px 0px;
	padding-left: 30px;
	text-align: left;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: normal;
	color: #2E2E2E;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 30px 20px 30px;
	text-align: justify;
	font-size: 14px;
}

#sidebar a {
	border: none;
	color: #857E6E;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	width: 940px;
	margin: 0px auto;
	padding: 20px 0px;
	background: #3D3630;
	color: #949085;
}

#footer p {
	margin: 0;
	line-height: normal;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-weight: normal;
	font-size: 10px;
}

#footer a {
	color: #949085;
}

#banner {
	width: 940px;
	margin: 0px auto;
	height: 150px;
}


can I get an example how this layout management works?
Was This Post Helpful? 0
  • +
  • -

#4 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 04:37 AM

here is the result http://makesite.your...iles/ritotombe/
Was This Post Helpful? 0
  • +
  • -

#5 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: enable client to customize their own page layout

Posted 13 March 2012 - 04:52 AM

Right, and what have you tried with regards to getting user-switchable stylesheets/themes?

If you're changing layout (ie. not just stylesheets) you need to template your code rather than having it in one big file.
Was This Post Helpful? 1
  • +
  • -

#6 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:00 AM

thanks for the replies,
I tried to save the css code in database, but how to call it? and how to enable users to modify the the css properties?
Was This Post Helpful? 0
  • +
  • -

#7 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:01 AM

As RudiVisser said, you could do this by having the user's preferences saved in the database.

The most efficient way to achieve this effect would be to use a templating system in which the variable names for the user's information is consistent throughout each template file, and then just to have the PHP template class parse each template with the correct information.

Using templates with PHP is more efficient regardless; it helps to separate the design side of the HTML and CSS from the server-side of PHP; simplifying such tasks as this

Edit:

In response to your last post; just run a simple mySQL command (PDO, actually) to retrieve the stylesheet from the database.

Then in the HTML do something like:


<head>

<link rel="stylesheet" type="text/css" href="<?php print $stylesheet; ?>" />

</head>




Where $stylesheet is the item that you polled from the DB.

This post has been edited by xxxjj18: 13 March 2012 - 05:03 AM

Was This Post Helpful? 1
  • +
  • -

#8 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:09 AM

@xxxjj18 I still dont get it, can you give an example or code?
Was This Post Helpful? 0
  • +
  • -

#9 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:22 AM

how to change exactly a property of an css element via mysql query?
Was This Post Helpful? 0
  • +
  • -

#10 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:30 AM

.... you don't.

You would store the path to the CSS file in MySQL, pull it out, then link it back in using the <link ../> element which is exactly what xxxjj18 said.
Was This Post Helpful? 2
  • +
  • -

#11 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:30 AM

Basically, you use mySQL to get the CSS stylesheet. Do you have a good understanding of connecting to a database and retrieving data? If not then I recommend:

this tutorial and this.

After you retrieve the sheet that will be used--let's say that you named this variable $stylesheet, then in the HTML file, you can print ( or echo) the variable, since it is just a string, where the href of the stylesheet for the document will go:


<head>

<link rel="stylesheet" type="text/css" href="<?php print $stylesheet; ?>" />

</head>




What this does is links a stylesheet to the page in the header, and then where the 'href' is, it prints the stylesheet that was saved by the user.
Was This Post Helpful? 2
  • +
  • -

#12 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:46 AM

thanks for all replies,
I made you're all tell me to do, but that cant make user to edit their own templates..

example: user choose to edit it's an element height..
then a dialog box will appear and ask the height..
So, the user just need to input wanted height..
then the stylesheet property for an element height will automatically change
the dialog box will look like this..
|----------------------------|
|Insert height: ..(input) |
| |
| |ok| |cancel| |
|----------------------------|
Was This Post Helpful? 0
  • +
  • -

#13 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: enable client to customize their own page layout

Posted 13 March 2012 - 05:55 AM

This would require Javascript.

It seems like this would be a big project to tackle ( in the intermediate range), and though I'm not telling you to give up on it, I discourage that you try to take it on at the moment; it appears that you're not quite ready yet.

I'd advise that you look into Javascript, PHP, HTML, and CSS a little more before trying something semi-advanced like this; this way you can have a better, more functional product in the end.

W3Schools has some nice tutorials on each of the above categories, and I recommend that you check them out.

However, I'll still help you out with your answer :)

To accomplish this task, you'll need to use Javascript's prompt method:


function disp_prompt()
  {
  var fname=prompt("Please enter your name:","Your name")
  document.getElementById("msg").innerHTML="Greetings " + fname
  }




*Note: The above example was taken from W3schools.com.

You can get more information on this subject here.

Just apply this code to your page, and amend it to function to your needs.

Good luck with your website :)

This post has been edited by xxxjj18: 13 March 2012 - 05:56 AM

Was This Post Helpful? 0
  • +
  • -

#14 ritotombe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 13-March 12

Re: enable client to customize their own page layout

Posted 13 March 2012 - 06:06 AM

thanks for the reply, i have learned javascript, and use it on my other websites just for animations and auto generate date and time, i had use it to this website, but i got stuck how to return the css property value when i had input the value in the prompt. can you help me? Sorry, maybe my english is bad.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1