I'm trying to import a php file containing a HTML script with separate CSS and js files into another php file which contains my header and footer. The header and footer are from a template which uses a very messy and convoluted CSS which basically has rules for everything in almost 10 different locations/files. When I import my php into this main template page, all the imported page's styles also inherit from the base template which basically overrides my stuff. Is there a way to enforce each php/html script to maintain their own styles without having to inherit from one another while they're being imported from one file to another?
Many Thanks
How are you importing the files?
Is your answer is using include() or require() then the answer is no! When the html code is generated, all this will show it in the same page, that's what all the css and js files are applied to your html.
What you can do is add the css and js files to a file (eg: assets.php), establish an order and then import that into your main.php and resolve all the problems with the classes and ids on your html to avoid overriding.
EDIT: about CSS load order
The order in which you load your CSS files has very little influence in how styles are applied. What styles are applied to a certain element is determined by the specificity of the selectors used in the CSS rule. A higher specificity overrules a lower specificity, even if the style with the lower specificity is declared later.
CSS Specificity: Things You Should Know
Specifics on CSS Specificity
you need to name space both your css and javascript to protect them from being polluted by your header and footer.
there are many name-spacing patterns out there.. but let me suggest a few:
css: for every page you import.. you can run a jQuery script like this:
jQuery(document).ready(function() {
jQuery('body').attr('id','importedPagei');
}
then when you import the css.. you should create a build script that appends the attribute body#importedPagei to every css you are calling
ie this is a sample of the css of the importing page before running your build script:
.style1 {
color:red
}
and after running the jQuery script:
body#importedPagei .style1 {
color:red
}
so let's say that before.. your header template had the following class:
//header.css
h1 {
color: red;
}
and in your imported file you had
//importedFile.css
h1 {
color:blue;
}
then the final outcome in your old solution will have the template header style overriding yours:
//old final outcome
h1 {
color:blue;
}
but with the proposed solution above you will have (as mentioned before):
//importedFile.css
body#importedPagei h1 {
color: red;
}
and since you attached an id attribut to the body node of importedFile.html using jQuery, the html will look like this
<body id="importedFile">
..
<h1>hello world</h1>
..
</body>
so in this case.. using css cascading rules.. the css selector of your imported file is stronger than that of the template.. and so the final style applied will be color: red
javascript:
you can also use a build script to selectively import specific javascript files for specific pages..
another clean way is to use js.node modules.. the problem with javascript is that everything is in the global namespace.. there are some name spacing patterns that you can use.. but node.js provided a built in and very clean solution for it. and so you can have all the javascript in your final code but have node.js take care of compartmentalising it. it all depends on how much time you want to invest in solving this problem
Related
I need some idears or informations about the following situation.
I have a page with a own css style-file (Let us call it "Motherpage")
In this Motherpage i load a second html file file by php ("let us call it "Childpage").
<?php
$childpage = file_get_contents($pathtoloaclfile);
echo $childpage;
?>
This works fine.
In the Chilpage are one or more own css-styles and css-files.
Now i have trouble with the two(or more) different css-files and styles.
Some styles broken, caused some styles from the chilpage will overrite or add or inherit to the motherstyles :-(
in the motherfile i use a prefix for every class
.motherpage body{ ... }
But it seems that that is not enought.
What i can do to make sure, that the motherstyles (also the child-styles for himself too) will work on the elements only defined in the motherstyle css.
For example, in the motherfile is no "body" Style defined, in the childstyle, is it defined. So this will affect to a lot of styles, by inherit
I hope, i could explain, whats the problem, and whats the quetion.
Thanks a lot to inspire and helping.
What you can do is (also suggested by #jeff, in comments above), load the styles in this order, in the page where you are having styling issues.
motherpage_styles.css
childpage_styles.css
And override any specific styles required by the page in the childpage_styles.css.
Let's say motherpage_styles.css has following CSS
body {
background-color: #eee;
}
And in the childpage_styles.css you can override and change the background-color like this.
body {
background-color: #ff0000;
}
If the order is like above, then this will work without needing of !important. However, the class you are overriding has !important in the motherpage_styles.css, then you will have to use the !important flag in the overriding class in the childpage_styles.css as well.
Hope you will find this helpful. Cheers.
You could try loading the new page in an iframe so it doesn't interfere with the CSS styles.
I want to include header.php file into to one of my pages. Is it possible somehow to have separate header_style.css file for the included file? I mean, I have also included footer.php and noticed that it will inherit all stylings from header_style.css even thought I did not linked it to it. In short, is it possible to have separate CSS files so styles will not be inherited by other included files?
There seems to be a bit of a misunderstanding of what PHP and CSS files do, and how they contribute to the final look of the page in the browser.
PHP files generate the HTML which is sent to the browser. CSS files tell the browser how style the HTML once it has it. If you view the raw HTML of a web page, (in Firefox, for example, right-click on a web page and select "View Page Source") you can see what all the php files have generated, no matter how they were included. The browser never sees the php files themselves, only what the server generated after running the php files.
To see the CSS file(s) in the browser you have to enter the full URL of the style sheet into the browser's address bar. For example the one of the style sheets for this web page has a URL of https://cdn.sstatic.net/Sites/stackoverflow/primary-unified.css?v=6f059d938c2b.
To control what parts of the page's HTML are controlled by which CSS files, or parts of one CSS file, you need to use "CSS selectors" to connect the HTML and the CSS. A fast explanation of CSS selectors can be found on the w3schools.com website.
The comments by rickdenhaan and jeff above help to point you in the right direction.
There is no significance to the browser which included php file actually made the HTML, because it never knows. All the browser knows is that the server sent all the HTML from one URL. To make the header_style.css file only apply to the HTML created by the header.php file, you need to wrap the HTML from header.php in some HTML element that you can then "select" with the header_style.css such as <div id="header"> .... </div> with a rule like div#header { color: red; ...} or maybe <header> ... </header> with a CSS rule like header { color: green; ...}.
You can do the same kind of selection process in you footer.php file, with other id="..." attributes, of using the <footer> HTML tag and changing the CSS to only select that part by id. The CSS selectors can be used to "select" a lot, body { color: gray; ...} for example will apply the color gray to everything inside the <body> ... </body> tag (everything on the page) that is not changed by some other rule that is more specific. The CSS selectors can be also used to select very little, img#special { border-color: purple; ... } will only affect the one <img id="special" ...> element on the page, no matter how big the page is.
Anything that the CSS selects will have the style applied to that element, and every element inside that one, unless the CSS selects, and changes the style on some element inside it. Then that style applies to everything inside the more specific element, until some other selector, even more specific, selects an element in there. That process "cascades" until either the browser runs out of elements to move inside of, or runs out of CSS rules to apply.
I'm stuck using a theme in WordPress for a client where the header is horrible in responsive view. I can work with desktop widths but anything below 768px needs to have an entirely different markup because of the clients demands -- any attempt to try to do this via CSS has led to even more UI disasters. My hope was to utilize jQuery's .html() functionality to swap out Bootstrap grid elements at < 768px. Here's a snippet example -- say I needed to move the logo from a far right position in desktop to the first element on the left in a header. I'm using the theme's declarations for the dynamic logo correctly:
if($(window).width() < 768) {
$('.top-bar').html('<div class="col-md-3"><?php vg_ebuilder_display_logo_sticky(); ?><div class="logo-inside"><?php vg_ebuilder_display_top_logo(); ?></div></div>');
}
But this returns commented out PHP:
<!--?php vg_ebuilder_display_logo_sticky(); ?-->
and
<!--?php vg_ebuilder_display_top_logo(); ?-->
So, maybe two questions here: is there a way to add dynamic PHP like this in WordPress via a jQuery .html() function on $(document).ready and, assuming it could, would it indeed be dynamic if loaded after the DOM?
No. PHP runs on the server, not the client. The javascript would need to make a call to an endpoint that would perform the php logic, return a response, and that response put on the page. Inserting php on the client will not be invoked.
I can't 'comment' a suggestion to you as my reputation isn't yet 50, so hopefully this is the right answer. I found this worked for me with a similar issue in Joomla (Q48891999).
In the div you want to change, add a unique class, e.g. "builder".
Then, if you need to, write a new css class or classes starting with
#media (max-width: 767px) {
.your_new_class {
}
}
- but not using the name 'builder' for the new class - in your custom css file for the div you want to change.
Then use jquery .addClass to apply the css class to your div in your index.php. Something like this:
<script>
$( ".builder" ).addClass( "the_class_you_want_to_apply another_class" );
</script>
The spaces between the parentheses and the double quotes are deliberate, as used in the examples on the jquery website.
In my case, I added this to the bottom of my index.php just before the closing body tag.
You may need to have more than one of these scripts to apply to different elements.
i want to put variable inside css but i don't know how to do it. I have created a php file named style.css.php containing this simple example:
<?php $background = 'blue'; ?>
<style type="text/css">
body {background: <?php echo $background; ?>;}
</style>
But is this a good method? I need to create a customizable theme. The other universal stylesheets are in a normal css file.
Please help.
This question already has an answer.
By the way these link will help you to implement php inside css:
https://css-tricks.com/css-variables-with-php/
How to use PHP inside css file
How do i run PHP inside CSS
I think your approach is already good enough, I'm guessing you are including your style.css.php in the head, potentially putting a lot of CSS there, which isn't necessarily a bad thing.
You don't really have to include your CSS files if you need them on every page anyway, putting them directly into the file saves a HTTP Request but makes your file bigger - but bigger file size doesn't matter if you would load the css file anyway. This way you have even finer control over what gets loaded and what does not, which usually shouldn't be necessary.
I bought a script that is ioncube encoded. It's a file on my site that is called from a php include, but the text is HUGE, like 38px. Completely unacceptable. The vendor says there's no way to reduce this font size, it's coming from from CSS in the encoded file. Is there some kind of code I can wrap around the php include to override the style settings?
Thanks for any help.
There can be at least two ways:
on-the-fly replace of rule your want to change manyaly (preg_replace, for example)
just after the place you insert your CSS insert your own block with
.your-element-class {
font-size: 24px !important;
} inside it