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.
Related
In one of my php functions I add some quite simple css. It worked very well until today. Actually the css is still doing his job, but in addition it prints in the middle of my layout whatever is written between the <style></style> tags - in my case it shows .element {display: none !important;} .
My code:
echo'<style>.element {display: none !important;}</style>';
Has there been any update to php or WP that doesn't allow this anymore? Is there any other way to do this?
Thanks a lot for your help!
I am not sure if it might change anything, but can you try print?
Also I think if <style> is not within <head></head> it will not work.
I found a working solution. Previously, I had a function in functions.php, which did some user type specific PHP and also CSS. Now I removed the CSS from functions.php and added it to header.php just before </head>.
The function is in two places now, which I wouldn't prefer, but it works very well.
Still a riddle to me is, how the echo "<style>...</style>"; used to work in functions.php for approx. the last 6 months or so and then suddenly yesterday created mentioned issue.
Btw, I also tried ?><style>...</style><?php and print "<style>...</style>";. All created the same issue. Again, the "<style>" was not shown on the browser, only whatever was inside. Also, the CSS worked. Whatever, statements I entered was interpreted as correct CSS, but in addition also shown as text right between the layout. Here is an example source code at the browser at my example page :
source code at browser
if you wanna to add a custom style to your WordPress theme (that probably you do not design it) its better to add it to custom styles from your admin area.
Alright, so I struggled with this for days. I'm still in the process of learning PHP. Meanwhile, I'm building a site that I need to make a custom blog template so multiple authors can post blogs on it. The authors know nothing about any code language at all, and therefore, the easiest way out of this (have them manually apply CSS classes) is out of the question. Therefore, I need to apply CSS to all new blog posts but not to any other kind of page dynamically. I've scoured the interwebs trying to find a way out and can't find any solution that works.
Heres what I've tried to implement into my functions page so far:
if (is_singular('post')) {
echo '<link rel="stylesheet" type="text/css">#primary p{margin-bottom: 10px; font-family: Alice; color: #fff; text-align: justify;
text-indent: 50px;}';
}
I know in advance that this code is butchered. I also know that this question is a bit unclear. When the answers start rolling in I'll be glad to clarify in any way I can. I'm still a student so bear with me. Thanks, all.
UPDATE: After a lot of digging around and trying different things I got it figured out. I couldn't understand why so much of my code wasn't working the way the codex said it should. After much frustration, I came to see that I was placing my code in the wrong place. I was trying to work from within functions.php (outside of the loop) but finally got it to work as intended from within it.
For any other students out there just now learning to code within WordPress, the loop is, in fact, the same as the main() within other programs. Many codes only work right from within it. Valuable lessons learned. Thanks to everyone for the help! Trust me, it is appreciated.
OK .. So your code IS butchered ... But not to worry we can work with that.
I am going to break the tags down into separated echo statements so they are better understood. First off you don't need the link tag as you are not calling to a separated CSS file. Use the style tag instead (Of which you need a start tag and an end tag!).
<?php
if (is_singular('post')) {
echo '<style>';
echo ' #primary p{';
echo 'margin-bottom: 10px;';
echo 'font-family: Alice;';
echo 'color: #fff;';
echo 'text-align: justify;';
echo 'text-indent: 50px;';
echo '}';
echo '</style>';
echo '</head>';
}
?>
I think it will be better if you define your CSS class/code in the main CSS file of the theme (usually this is style.css).
Then you can find the render for the posts in your theme (check wp-content/theme/mytheme) and apply the CSS class depending of the conditions.
Using <link rel="stylesheet"> is for linking to an external stylesheet file. You could try something like this:
echo "<link rel='stylesheet' type='text/css' href='author1.css'>";
However, if you wanted to include all of the CSS properties within that same file, you could use a <style> tag. I would recommend against this as it can be difficult to work with since all of the CSS is not formatted/inline.
echo "<style>#primary p { margin-bottom: 10px; font-family: 'Alice'; color: #fff; text-align: justify; }</style>";
Zak! Thank you so much for your help. This is just what I needed. The post is now active on the page. Your time is well appreciated. I have, however, ran into another issue in implementing the solution.
The issue is that even though I was using the is_singular() command to differentiate between post types I kept seeing the same css active on my main page. After some digging, I figured out that this is because I'm using the Beaver Builder plugin. The plugin is a visual editor and uses posts within posts so-to-speak. To fix this issue I have moved to trying to display the css according to author, as all the blogs are published by different authors than the pages.
In my attempt to modify the above if-statement I have looked into the WordPress Codex, finding the get_the_author() and get_the_author_meta() commands. The new issue is so-far that while I've looked up syntax for these commands, I have only been successful in crashing my site, or affecting no change at all. Any help you can offer me in this regard would be a big help. Thank you.
Link
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'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
I am trying to customize the links on my site that are inserted via php. The reason they are inserted via php is for checking user login and editing the log options (the links in question) depending on their status so removing them from php is a no go as far as I can see. I've tried inline and external styling, and though, if I remember correctly, it has worked in the past for other things, it just will not work for these links. Anyone have any good ideas?
Here is the (immediate) code:
$logOptions = $PM_envelope . ' home profile settings logout' ;
The styles are this:
.loginmenulinks a:link {
color:#09C;
text-decoration:none;
font-family:GeosansLight, sans-serif;
font-size:12px;
}
same for hover, etc.
I call for this in a div in the header:
<div><?php echo $logOptions; ?></div>
Why in the world is there "no way to customize" the CSS of a link that PHP generated? PHP generates HTML, HTML and CSS are on the browser side. The browser has no way of knowing what came from PHP and what didn't, so how can it discriminate against such dynamic content?
<?php echo "Text"; ?>
CSS:
.blah {color: orange;}
Suddenly, an orange link appears.
Are you forgetting to maybe specify any styles in the first place?
You may add additional classes or id's to the a-tags to gain the ability to add your stylessheets from an external resource.
However it is not a good Idea to keep such things in your PHP Code, you should use some seperation between a view and a logical layer in your application.
Furthermore you should not use but css to gain spacing, as it is not intended to do that.