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
}
?>
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 been searching for hours and probably because of my limited java knowledge, I'm a little but stuck..
I'm developing a website and I want to make things as easy to change as possible. I want the users to load the home page, and then by clicking on different buttons, the html "main content" of the page will change accordingly.
My reasoning for this is that I want to keep everything really clean and simple, so that if i want to update the Index page's format, I will only have to update one page..
Im assuming i need java for this..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prodigy Doo Design</title>
<link href="template/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include('template/header.php'); ?>
<div class="pad50px900wide"><!--Padding after headder--></div>
<?php include('template/nav.php'); ?>
<!--*****************************
********* BODY CONTENT***********
******************************-->
<div class="bodyContent"><?php include('text.html'); ?></div>
<!--*****************************
******END OF BODY CONTENT********
******************************-->
<?php include('template/footer.php'); ?>
</body>
The part that is very heavily indicated as the "BODY CONTENT" is the part i want to change.. i was thinking i could somehow say:
if home button click -> include 'home.html'
if about button click -> include 'about.html'
...
...
I just dont know how to put this into code..
you can view what i'v got so far here http://pddtest.webuda.com/ (if you didnt know, when you display the source code for the site in most browsers, it will load reference files as if they were all together in the first place, so it might be easier to understand what im trying to do)
Sorry if I'm a little vague, any help would be really apreciated, iv been crawling the interwebs for ages and i know this is probably fairly simple
I think what you're trying to achieve is a base template, where only the main content changes. Which means editing the base template (or page if you want to call it), edits all the other pages.
For this all you need is some basic PHP, where you send the file name in a GET variable with the response.
About
And wherever your includes are, you just add this variable to the php extension:
<?php include ($file.".php"); ?>
And of course don't forget to check if the variable is in the request.
This is a very basic way, and may not be safe but it's a good application of basic php.
Hope this will help.
You've already got PHP includes happening so that means you're cutting down on the amount up updating needing done to your pages and changing something in your header , footer etc will change it all throughout your site.
It would be better to simply have seperate pages i.e. index.php, about.php (your pages would have to be .php rather than .html as you are using php within the pages for your includes) and link to those pages just using regular links.
This method would also be better for SEO.
If you really wanted to do it the way you're originally talking about you could use the jQuery load() method.
More info here:
http://api.jquery.com/load/
I think you need to read up on the basics of what javascript, HTML and PHP are; this way you should be able to get this on your own and be a better developer.
Javascript is client-side scripting. What that means is that your javascript code is interpreted by the user's browser. This can cause issues when certain browsers interpret your javascript differently.
PHP is server-side scripting. It will behave the same no matter what browser your users are browsing from. As long as the same data is passed in, the functions will behave in a consistent manner. It sends HTML (or other data, but that's a bit more advanced) to the client.
HTML is markup. All it does is tell the browser how to display the data you've returned from the server.
Combine these three and you get a better idea of how they interact with each other. If something on your page can be "dynamic" in the background, but static (unchanging) once the user is viewing it, use PHP. If something relies on user input to change dynamically without the page refreshing, you're going to need to implement some sort of javascript.
There are multiple ways of achieving this,here are 3 simple ways without reloading index.html:
Using iFrames:
make index.html contain all your buttons and an iFrame called PageContent On click of every button call a JS function which simply
changes the src attribute of PageContent to the relevant html.
Using Client -Side JS:
make index.html contain all your buttons.ALso include the content of all the related pages into hidden DIVs. On click of each button hide all the other "option DIVS" and show only the relevant DIV.
Using AJAX:
make index.html contain all your buttons and an DIV called PageContent On click of every button call a JS function which simply
hits the server, gets the content for the page which is linked to the
button and renders it into the DIV using innerHTML.
I need to change values in a stylesheet from an admin panel using php. I know I can do this inserting the values to my MySql database but isn't there a better way?
So far I have converted my style.css to style.php and it looks like this:
<?php
header("Content-type: text/css");
$pageBG = '#ff0';
?>
What I want to do is to change the hex value (#ff0) from my admin panel with a color picker.
You are asking too much.
A color picker needs at least javascript
An admin control panel needs at least a database + an auth plataform
You should open another question with more specific stuff.
If you want the easiest way you can just edit your style.css file and make your changes by hand.
If you want to use color picker it's a frontend issue not related to having it configurable at all. If you want to make admin panel's or site's look customizable, there's no other way than storing some settings in database. You may utilize INI files, but's that only other container. One tip: Generate CSS file and don't regenerate it until you tell you script to. If you save new settings - regenerate it, other way use the already existent one.
You cannot change css, though you can dynamically generate it.
Supposing you are using apache you can have .css files go through php before being served. thus you could have something like
.dynamicColor
{
color: <?= $color ?>;
} /* $color must be exctracted from mysql */
more general solution would be to create a php script createCSS, which would load variables from mysql and include prebuilt css script (like in previous example) and set content-type header to text/css
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.