my head was spinning over this idea for a long time . and i though this is the right plce to ask for help ..
so what i want to do is make a really simple php file that make a search and replace in css files but the problem that i have is that a single css file can (as you all know ) have a 100 or more background tags and all i want to edit is one of them .. and what is some body added a line before or after ... so search and replace for the whole section of the css file that i want to replace well be useless unless it is all the same ..
i really have a bad time explanning but i hope that you get the main idea ..
all i want is some guidelines in this .. help is really appreciated/
I wouldn't suggest directly editing a linked CSS file through PHP (file_get_contents()) or something, but rather conditionally link different CSS files. Or perhaps, conditionally change what you need to change through CSS directly in HTML with PHP. For example, need to change background (for some reason) for different users, you would conditionally change the image source through PHP.
Why exactly do you want to do this? Maybe a CSS alternative like LESS is a viable option (it has support for variables etc)
You can either use php to load a stylesheet.php that is dynamically generated or use javascript to "compile" it on the client side (like LessCss)
Related
While i am still learning css html5 and Jquery, combined with the information from the internet, i came up with a idea to program the css in to different chapters, and call them in to the head section when need it.
from my understanding, via google it is faster to load css styles in the head as a <style></style>.
This way i will only have the css at the page that i need, and it will be better readable for me, becouse i dont use html css styling in dreamweaver anyway.
My css is now so big it is taking tomutch time to find it all.
even with dreamweaver search box.
Does any one have experience with this, or see any problems i might incounter?
Thanx in advance..
The only way to create structure if you're working in a big php project is to save a blank html page, load the existing css on to that page, use the css options/panels in dreamweaver and load the body parts you need in there.
If your using a dynamic css location link, other wise, i think dreamweaver will do just fine in php.
Not sure becouse i never used it that way...
Situation
i try'd to make more sence doing it this way, but i have just put everything back, becouse i got a unknown error, did not investigate it further. And the <style></style> has the highest level of design, meaning all the rules that where set, will be overwritten, things will get complicated fast if you start moving parts aspecialy if have a multi css styling site, so it is not recommended if you already have a big project, do it from the start...
Edit * 27-11-2015
I found the solution, i am using classes to slowely but surely replace the css file...
I have a script in the header that I'm putting on every page, for easy updating I stuck it in it's own page and added it using php include. I'm using media query break points to change the size of the layout in different screen sizes, and I don't want to include this script on small screens.
I don't think it's necessary to provide an example, it's just a php include file with a script tag, like the following:
<script>[script here]</script>
I think the solution would be to use PHP to include the file if min-width=40.063em, and for anything under that it wouldn't include it. I'm not very good with PHP, at all, so I've come here to see if anyone would know the best way to go about this and shoot me a small example. Thanks for all who help =)
PHP runs on the server. CSS runs on the client. You can't decide what content the server is going to send to the client based on information that only the client knows.
You can serve the content regardless and display: none it in your stylesheet when the media query matches.
Quentin is correct.
The only option might be to use Ajax or similar to load extra content from the server after the front end is rendered.
I have a js file that has the code for navigation for a site with ~600 pages..
Now I want to change the menu(colors, background, links etc) and I don't want to edit the JS file as the code here is like using images for the menu..so I was thinking that I will create a php file or html file and then call it inside that js file. Is this something possible?
Please advise.
You could have the js render an iframe instead of an img and pass along the url to the php/html.
You need to understand the difference between PHP, HTML and JS. They each occupy a different domain in web programming. PHP is for server side logic, HTML is a structural language and JS is an action-oriented language intended to function on top of the HTML that exists in the page (and may be rendered in JS).
All programmers have at one point tried to "hack" code like you are doing, by trying to find a band-aid fix to a complicated solution. It is not worth it. You will lose performance in the best of cases and either fail outright or lose browser compatibility and user interface quality the vast majority of the time.
In short, take your time and edit the JS. You can always do a find/replace on images to strip them out and insert CSS class declarations in their place. Do it right and you'll save yourself a big headache later on.
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?