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 :)
Related
I have maybe ten .php files that make up the main pages of my website and 20 .css files all in all. I noticed that when I made a submit button in one file, it adopted the attributes of a .css file that I had not linked through the normal html way.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
However, I have referenced other .php files like this:
include('config.php');
And then in config I referenced many other files in some kind of tangled web.
Does that mean that css is passed on through the PHP include method - and that in multiple layers? e.g. if I referenced a file in config.php that didn't directly reference a css file, but instead another php file which maybe DID directly reference css.
I have to apologize if this is a slightly confused question, it's just my mind cannot comprehend this... CSSCeption...
Consider this... If you go to your site and right click the page and click view source. You will see your entire document, including any items that might be included.
Think of it in this way. An include, is a sort of way of saying, at this position in the document, there should be other things. It looks for the file you include and takes it's contents, whatever that is, and sticks those contents where the include is, it will do this with every include until it finally reaches the end of the document.
In this way, it brings in HTML that has your CSS files linked, and then it reads the HTML that it just brought in, and it applies those CSS files styles to the entirety of the document after all of the HTML has been loaded.
First of all you must know that CSS doesn't "know" what php means, CSS defines HOW HTML elements are to be displayed. So it will take place after the web server converts all your php code into html.
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.
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.
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 scraping a website with HTML with php that retrieves a page and removes certain elements to only show a photo gallery. It works flawlessly for every browser BUT any version of IE (typical ;)). We can fix the problem by rewriting the .css file, but we cannot implement it into the head of the php as this will be overwritten by the .css file from the websites server. How would we go about hosting our own version of the .css file so that our website will be displayed using OUR version? Would be swap something out with a filter?
Cheers!
You do realize that it may not really be a scraping problem? It's sounds like a straightforward page display problem.
Worrying about scraping might be a red herring. After you have scraped you have some HTML (and possibly some CSS) ... does that validate at W3C? I realize that is no guarantee, but it is an indicator (I know that IE doesn't always display valid pages properly, but sometimes it's a "gotcha" when other browsers seem to display invalid HTML/CSS properly).
If it's valid then maybe you should look back at your scraping. If you already removes certain elements to only show a photo gallery then maybe you can also remove the CSS from the HTML header (or wherever) and reaplce it with your own?
If you're already scrapping the website, why not just use PHP to omit their CSS file and write your own in its place? Alternatively, you could write your own CSS file just below their's in the <head> so it overwrote their styles.
This is just another thing to check, but if one of the elements you're removing is comments, you could unwittingly be pulling out ie only stylesheets that are between conditional comments. Another thing to look at is paths. Maybe one of their stylesheets has a relative path that you can't call from your server. You would need to make that an absolute path for it to work.
Really, you should probably take a close look at the source of the original page and your formatted source side by side. You could be pulling out something that's should be left in.
You ask how you could remove their css... you do it the same way you remove the other elements you're pulling out. Just pull out style tags and tags that link to stylesheets.
Aside from that I would just write some styles to fix it and stick it them anywhere after the existing css is called. (Like every one else here mentioned)
Just add another CSS header and mark your styles as !important to override the original ones?