Background
I'm developing my own OOP content management system in PHP for fun and to expand my programmig knowledge
What I've got
I've got the main framework set up, users can login to the backend, add pages, edit pages, set up content in rows or columns, add logo's, billboards, etc.
Expantion
My next venture is to allow users to modify the style of their website through the panel. including header colours, font size, font family, etc
How to Implement
I thought of a number of ways to do this, but i wanted to ask the community to see if they can come up with a better solution or justify one of my solutions.
Idea 1:
I could write/find a php class that parses a css style sheet, and then re-writes it as the new style sheet with the editted values
Idea 2:
I could separate the existing style sheet into structure, colors, fonts, etc, and just allow the user to modify the colors and fots separately.
Idea 3:
I could ditch the whole separating style from content idea, and make php to write the user specified styles right into the html...
Information
Does anybody have any other methods they could think of?
If not which one of mine would work best/be most efficient/optimal etc
This is not a discussion, I'm asking a specific programming question.
I understand that the panel must have an interface for the user to change the values and save their configuration in a Database OR save their configuration directly in the new css file.
I'm just not sure which way would be the "best" way.
How would 'you' do it?
I would change the stylesheets with JavaScript, like:
<link rel="stylesheet" href="somestyle.css" id="stylesheet">
function changeStyle(cssfile) {
document.getElementById('stylesheet').href = cssfile;
}
I also would enter the user's selections via AJAX into the database, so when PHP creates the next page, it knows which styles the user has selected.
Related
I've been trying to wrap my head around a good way to do this, but so far have come up empty, and needed some guidance.
Basically, what I have at the moment is a style selector, which gives 10 pre defined styles for the site that a user can choose from. Most of them are grotesque, and are merely proof of concept.
This is controlled by PHP and mysql. When a user logs in, and slects a non-default style, it is added against their user record in the DB. The site then refreshes, and loads the selected style.
It works really well, but now I want to try and have some granular control. For example, I would like users to be able to pick their own header background colour, heading text colour, sub heading colour and some font sizes.
It is a fairly trivial thing, and if I can't find a way to implement it, then so be it.
My initial thought was to have a table that has columns for each customizable part of the size, e.g. font size, colours etc. In the table, would be a record for each user. They then use some interface to pick and choose what they want, and then add it to the table.
My issue, was then what to do with the values that I retrieve from the DB. I would have liked to insert them straight into a CSS file, but I don't think this is possible without some server configuration changes, that I couldnt get to work.
So does anyone have any suggestions on the best way to do this, if there is any way at all.
Regards
Eds
The most obvious option to me would be to build a PHP script that would generate the stylesheet on the fly. This would only get called if there is a record in the table for that specific user that holds all the user-specific styles.
So for example, between your <head></head> you could put:
<?php if($user_has_style): ?><link rel="stylesheet" href="user_style.php" /><? endif; ?>
This calls the user_style.php script and generates the stylesheet needed.
You will have to add the correct headers to the output of the PHP stylesheet, which are:
<?php header("Content-type: text/css"); ?>
This website might be of some use, if you choose this method: http://mou.me.uk/2008/08/03/generating-dynamic-stylesheets-on-the-fly-using-php/
You have several ways to do this.
You may specify CSS properties directly in the style attribute of HTML tags, but that can quickly become tedious as you might have to insert code in scattered areas in the middle of your content, making maintenance harder.
You can also put all style definitions between <style></style> tags inside the <head> section, which partly eliminates the disadvantage of mixing content with presentation.
Finally, it is also possible to produce CSS files with PHP using database informations. Rename your stylesheet something.php, then put this at the top of the file :
<?php header('content-type: text/css'); ?>
This tells PHP that the content it will generate needs to be sent as a CSS file, so that the user's browser knows that it's a stylesheet. All that's left to do is to correctly reference your "mutable" stylesheet in the PHP script that holds your HTML content :
<link href="../layout/css/something.php"
rel="stylesheet" type="text/css" media="all" />
This will allow you to use this kind of things in your "CSS" file :
body
{
background-color:
<?php echo $userstyle['color']; // Retrieved from database somewhere above ?>;
}
However, if you care about performance, the latter solution may need some improvement using the Cache-control header, to avoid reloading the CSS file whenever the user follows a link in your website.
You can put CSS into html file in two ways. You can either put the code in the header under <style> tag or you can put css on a specific item like <body style="background-image:url('file.png')">. Both ways you do not need css file that is separated from .html file :)
I run and actively develop a forum (which in itself runs on heavily modified SMF 1.1.16) - one feature I would like to add is the ability for the user to pick custom colours (say 2-4) from a widget in the corner of the page to customize the colours of the forum.
The HTML output of the forum is structured such that modifying the colours can be done with pure CSS, and I'm wondering what the right way to insert this CSS is.
The idea I had was that once the user saves their colour information, a piece of javascript would generate the necessary CSS and save it using HTML5 localStorage (probably using a polyfill library). Then, on $(document).ready(), we check for this CSS being present and if it is, we inject it into the page head.
Is this approach sensible? It's easy to develop, but will it result in a flicker of the usual styling (given that pages are rather heavyweight) before custom styling is applied?
If so, is there a better way to do this completely client-side? I would rather not involve the server if at all possible, but if I must I can just have the server generate CSS files for every user who saves custom styling.
What's the best approach?
I suggest you have a base style for the page first so that there won't be FOUC. Then, have your JS load the custom styles, parse it, and apply it to the page afterwards. You could do a "fade-in change" (like fade in the background etc) so the styles won't load like a snap.
You could also blank the page first, like set the body to display:none, before you load the styles, then after the styles are applied, remove the display:none
You also have to note that local storage has it's size limit. Don't load too much. Consider looking for the LZW compression in JS. It might help.
I apologize for my english. Correct the title if it's necesary, please.
I want different pages of my web site to have different images in some background divs.
I'm using one CSS file for all the site.
For example, the supportingText div for the "about me" page has different image than "my project page".
Right now I use inside every pages (aboutMe.html, myProject.html) for any supportingText div a style attribute for this task.
And for example:
When I want to let surfers change entire web site style design I can change to a different CSS file of course.
But if my pages have some different images, as I explained before, should I change others html files to do it?
I know that probably there is a solution in some way like in php.
Consider that I don't know anything about php but if you explain in very easy way won't be a problem to understand!! ;)
Is there a solution in javascript?
I'm using only XHTML and CSS.
EDIT
Thank you!
You have been very kind.
I understood everything except one concept that I hope you can clarify.
I have many divs with background images, as:
title - myPicture - navigation - supportingText
All of those have a grey levels images.
I would like users can change aspect of the web site.
Something like three options:
black and white pages
green pages
orange pages
So in this case I need to set divs images in a JavaScript script into html file as your example!
So the CSS file only is helpfull for dimension and all other staffs but not anymore for images background? Is it?
Thank you a lot!
I agree with John in that you really shouldn't hardcode style attributes into the HTML. But if for whatever reason you have to you can easily change them using JavaScript.
document.getElementById('supportingText').style.backgroundImage = 'url("image.jpg")';
or if you're using jQuery
$('#supportingText').css('background-image', 'url("image.jpg")');
Update:
Assuming you're using a button to trigger the change, the code (which you would put in your HTML document) would look something like this:
<script type="text/javascript">
function changeBackground(divId, newImage) {
document.getElementById(divId).style.backgroundImage = 'url("' + newImage + '")';
}
</script>
<button onclick="changeBackground('supportingText', 'image.jpg');">Change Background</button>
Essentially what you're doing here is creating a button which calls a JavaScript function (changeBackground()), and you're passing in the ID of the div that you want to change, and the name of the image file that you want to change it to. You could have multiple buttons with different values in the 'supportingText' and 'image.jpg' parameters.
Answer to Part 2:
You can apply styles via CSS or JS (as above). However anything you do in JS will override your CSS. It's really up to you how you divide it up.
If you have hard coded your styles, even just some of them, into your HTML and you want these values to change when someone chooses a new stylesheet then you're in a tough position. Hardcoding those styles into your HTML makes your code inflexible and leaves you unable to make things such as switching stylesheets dynamically easy either with PHP or JavaScript.
Your best bet is to remove the hardcoded style rules from your HTML and place them into your stylesheet. Then switching the stylehseet can be done easily with PHP or JavaScript.
If you can't remove them then you'll need to write your own JavaScript to do this which will be tedious as it will need to dynamically alter each page when it loads. Not only will this probably take a long time to do and be error prone but it can hurt your website's performance if it isn't done well.
Basically, by hardcoding style rules into your HTML you've tied your own hands and have no good options available to you. I recommend removing the hardcoded styles and making sure you avoid doing it again in the future. Not only to avoid issues like this but to make your site faster by allowing your CSS to be cached.
I am having trouble designing a solution to a complex problem. I am building a site that creates html templates including both the css files and html files. Users will be able to create multiple templates/sites.
In an attempt to create a normalized database I have a user table (id, name, email, password, etc.), a site list table (user_id, site_id, site_name, description), and the rest I am having trouble figuring out.
I am trying to develop a way to break down both the html files and css files into a database that can be used to reproduce the designed template. Constant editing and adding to the database will take place when creating/editing a template. Basically, an extremely simplified dreamweaver. Flat files may be an option as well.
Any input or suggestions on how to go about such site would be greatly appreciated such as how to break down the html and css into mysql tables/records. Im not so much looking for code, but the fundamental concepts/workings of such a site. Thanks in advance.
First of all, are you sure you even want to store that content in the database? That's going to place a heavy burden on your servers over generating them as files onto the filesystem inside the DocumentRoot and directly servable by the web server. I can see storing the configuration options (color choices, image names, etc) in the database, but not the files themselves.
Can these websites have any content the customer wants, or are they variations on a theme? If it's the former, then you really can't automate it much. You can store the content in a database instead of a file, but it won't really be advantageous.
Your best bet, I think, is to look how CMS programs like WordPress/Joomla break up a page into separate include files (header, footer, left menus, right menus, etc) and use that as a model. The customer picks a template, and each template has defined sections that can be laid out separately with different content.
You could store the templates in text files then store settings (such as CSS attributes or images they may want) in the database. That way, you just load the template with the applied settings.
I'm familiar with HTML, CSS, and some PHP and Javascript. I've made several fairly complicated websites for which I've acted as webmaster, manually adding all content in HTML.
I'm about to put in a proposal for my first outside client at a larger business. They have an IT person that would be responsible for updating the website that I create for them.
My question is what to do about content management. I've looked into things like Drupal, but they seem overly complex for this kind of situation, with a single person adding updates of things like text, images, and PDFs.
What would you recommend as the next step above the simple way of manually uploading files and editing HTML like I'm used to? Something like a MySQL database and PHP calls? Would I then store all the images in the database as well?
I guess I'm just trying to figure out what's most common at a medium-sized business. I appreciate any guidance you can offer!
Nathaniel
My company has built large scale projects and medium scale as well. What we like to do is setup a outer page with navigation and an inside page that the client has control of by a control panel with FCK Editor or TinyMCE.
So essentially we have a wrapper page (in our case a MasterPage but in PHP you would use an include or a index.php with a query string to pull the content) and then we drop in HTML content from the database.
That database is populated by the client in their control panel. FCK Editor allows them to upload images and manage links, etc.
For our bigger clients we get very specific in our control panel allowing them to add videos, PDF attachments, blog entries, FAQ content, etc.
Some examples we have are http://pspwllc.com and http://needsontime.com and http://nwacasa.org
Drupal can be bit complex at first but if you stick with the basic modules - it is great for website content management.You can write your own mini content management system - store text and images(MySQL blob format) in MySQL.It will be couple of PHP admin pages and a good render() function responsible for page rendering.
Also have a look at wordpress, it is much easier than drupal. It is less powerful but it may serve your needs. You will NOT need to configure modules like FCKeditor, with it bcoz they come inbuilt. Anybody will be able to edit the content easily. Do note that wordpress is not just for blogs, you can create different kinds of websites with it. Another choice is Joomla, it is also simpler than drupal. But, wordpress is the simplest.