How can I give the user the ability to change the style of a webpage, of course I have to make several CSS files , but how can I make the code that permits the change upon the user's choice
We're all pretty unlikely to give an answer as thorough as A List Apart's.
They even provided some freely-usable code for you.
You would basically have css classes for all the major components of the page such as header, content, footer, nav_menu items, heading, etc. Everything that you want the user to be able to customize you would create a css class/ID for it.
Then you would show all these classes to the user and let him either type in the CSS code manually, or show him dropdown boxes with all the possible colors, for example, or other settings.
When the user changes an option, you could use javascript to change that property of the css ID/class he selected. E.g if he changes the background color of the header from black to blue, you could do this:
document.getElementById("header").style.background-color="#ABCDEF";
(Jquery might have an easier way of doing this)
At the end of the page you could have a submit button which would POST all the css settings to a php script, which would write these settings to the database. Then you would do a query like:
SELECT css_id,css_class,css_code FROM css_styles WHERE user_id='$user_id';
This would return all the css code, and then you would put this in the <head> command instead of an external css file.
Related
I want to add the ShareThis buttons for every topic on my forum. I have already modified the overall header and added the code to the head tag.
How can i modify the templates so they appear for each topic? Also is there anyway to add them to the footer of or under each topics first post rather than besides the title?
I am using PHPBB 3.1.10
Many thanks
I don't know which code fragment you are trying to inject, but I assume you have already included a link to a javascript script in your header (you can also include it in your footer instead) and now you need to add the html element of the button that triggers this script.
If you want to show something only in the topics page, then you should change the styles/your_style/template/viewtopic_body.html file. You can choose where to insert it and, depending on your style and the place, you may need to do some small modifications (e.g. using the inline style="" attribute).
If you want to show it on the footer of each post, you can try putting your element just before or after the line <!-- EVENT viewtopic_body_postrow_post_after --> in your viewtopic_body.html file. The events are like "interesting points" in the styles and you can see a list of them here.
In any case, make sure that you don't make any syntax errors (and always keep a backup). You can validate your page using the W3C validator.
We recently changed our front-end and start using Metronic responsive theme.
I have a left menu like:
Now since this is responsive if you click top left of the menu it resizes perfectly like this:
The problem is even if you resized it( for ex: small), when you click a link (or when page is refreshed), regardless of the size it automatically displays the big menu.
if (resize) { use -> page-header-fixed page-sidebar-closed }
else { use ->page-header-fixed }
I know it must be something like that but how to implement this in php?
EDIT: I have an body class inside index.php like :
</head>
<body class="page-header-fixed">
<?include "left.php"?>
left.php is the page that has the left menu.
body class is the css class that I need to check
Do this setting must be stored on your database? If not, why not use localStorage and manage it with - and only - JavaScript?
I don't know your menu code, but if you can watch it open and close event, you can just use:
window.localStorage.setItem("menu", 1); // 1: open - 2: closed
Then on page load read it:
window.localStorage.getItem("menu");
No need to set ajax requests to the server nor cookies and that kind of crap.
You should perhaps add another js condition to test minimum offsetWidth before choosing css classes.
Otherwise, I wonder if you added responsive CSS #media min-width on both classes, page-header-fixed page-sidebar-closed.
If your JS doesn't overide these classes, CSS should do the job to keep your menu on "small size" look.
In any case you need a variable to store the state of your menu i.e., big or small.
If you want to do it with PHP you can use session variables and use ajax to update that value when the menu is resized.
OR you can set a cookie with Javascript for the same purpose. I would go for this option.
Either way you will need to check the value of the cookie / session var and change the class of your menu depending on it.
---EDIT---
Or as our respectful fellow programmer says, it might be a good idea to use localStorage since the information doesn't need to be sent to the server.
I have a bookmarklet and recently I have changed the CSS properties, using cleanslate css because the bookmarklet design was not the same on third party websites, when used.
This CSS file, should reset all the properties of all the tags within a specific tag, and it does that, but when I need to manipulate the settings, I can't;
<div class="mainclass">
<div id="login">a</div>
<div id="form">b</div>
<div id="details">c</div>
</div>
I have many forms, which I hide and unhide at specific actions, like: I show the login form, if the user in not logged in, I show the the detail form, if the user is logged in and if I know the history of a URL, and other forms;
So, if I set the div id details display property to block, and the rest to none, and then try to set all to none and the div id form display property to block, the css it doesn't do anything, but I can see that the javascript runs the actions
This CSS should do the job, but because I used the !important property on all the tags properties, I can't set from JavaScript new values to properties, like:
document.getElementById("form").style.display = "none";
in this image, I use the old CSS, a reset method was used, and also, the js code worked fine, but the design was not the same on third party websites
in the actual project, the design is the same on all the third party websites, but the js code can't set CSS properties
Important is a really bad idea in general and should try to be avoided as it breaks the rules of specificity in css. Is there no way you can make your css more specific to overide the current styles rather than using !importnat.
You can still apply importnant by doing some thing like this
element.style.setProperty("display", "none", "important");
Or jquery makes it quite easy
element.css("display","none !important");
But again best to just not use important
In the site i'm developing i would like to have users set their own custom "css" on their profile pages.
For example, i give users the ability to select a background color for <body> with a js color picker.
Then with php i create a 'css-ready' string and save it on db.
What i am asking is: how i can make this css apply everytime a user enter another user profile?
Probably will be there a lot of thing a user can customize, so there will be a big css string and i need something that will be cross browser and if possible that work also without javascript..
Thank you.
You could try a php file with header for content-type text/css which echos the CSS according to one fetched from Database, you could add default CSS to your website and just create a last in list of link tags the path to that php files, this way you have a default CSS to fall back and customized CSS to be applied on top of default if defined any..
This can be done with Handler in asp.net. I am sure there will be similar solution available in PHP also. First you need to save the style properties in a database for each user. Make sure that the syntax of the styles (selector name, curly brackets, semi-colons, etc.) are in order. You can get the user information from session object or pass the variable with query string to the handler.
The response received from the handler can directly be put between tags as content type - text/css like this:
And with this you should be ready to go!
However, it will lead to performance losses as everytime the page loads, the entire file will be loaded (in normal css file, it is loaded only once). It will be a better idea to save only those items in database which you really want your user to customise. You may cascade it with your parent css file for better performance.
you can use this is user-profile.tpl.php
<?php
if(isset($account->user_css)){
?>
<style>
<?php echo $account->user_css; ?>
</style>
<?php
}
?>
I need to adapt my template to mobile versions, without creating different page files for each case, or subsites. I think the easiest way to do that is to change the css files to "rearrange" some elements.
So this is what I´ve done so far:
I´m working with php.
I´ve made use of #media queries, adding inside the <head> this: <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" />, so it will call the smartphones.css file each time the users access the site with a small device.
Everything goes kinda smoothly, up until now, when I decided to adapt the dropdown menu.
I´ve got a dropdown menu in pure css, that gets activated on mouse over. I use :hover to get the menu to actually drop down.
I want to replace that big dropdown menu with many items (horizontally and vertically), to a single button, that onclick will dropdown, and show just a couple of things.
In order to do that I need to adapt my php page file to hidden the entire dropdown menu and show the "mini-onclick" dropdown menu instead. And here is what I don´t know how to do it.
I need some -javascript I guess- inside my body tag (as the menu appears inside the body) to say something like:
IF the screen is less than 700px, show this XXXX code. ELSE keep going with the rest of the page.
I´m planning to hide the normal dropdown menu using css inside the smartphones.css file, but don´t know how to show the special dropdown menu instead.
Any help will be greatly appreciated! THANKS!
Rosamunda
You can use the User-Agent HTTP header in PHP to determine if smartphone-relevant code should be generated instead of normal code.
You could also get screen properties via the screen object, and if it's a smartphone, attach the dropdown state to the onclick event and if not to the onmouseover event.
That's pretty simple. You just change your CSS from someclass:hover to someclass.hoverstate and when the dropdown needs to be triggered, you add the hoverstate class to the target element.