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.
Related
we use WordPress and Elementor to build a page. We currently have 2 different checkout systems - one for ourselves and 1 with Shopify for Affiliates.
Because of that, we have 2 "Buy now" buttons, and we display only 1, depending on a cookie "ref".
Our own checkout uses www.digistore24.com as link and the Affiliate checkout uses neuroprogrammer.myshopify.com..
The ref cookie is set from the Shopify Affiliate plugin, which also is implemented in the WordPress page.
I placed the following code to hide one of the buttons into the header.php:
<?php if(isset($_COOKIE["ref"])) : ?>
<style>
.btn-ds24{
display: none !important;
}
</style>
<?php else: ?>
<style>
.btn-shopify{
display: none !important;
}
</style>
<?php endif; ?>
My problem now is, that if I open the page with the ref code, the correct button is only visible after refreshing the page again. The cookie is placed correctly after the first load, that's why I can't explain, why it shows the wrong button at first.
You can test it yourself here:
https://biotonics.de/playlist/biotonics-vol-1/?ref=ticverdun
Embedded in the green "Jetzt bestellen" button should be the .myshopify Link, but it's the Digistore24 link.
Is there a better way to achieve my goal?
You can test for $_COOKIE & $_GET
<?php if(isset($_COOKIE["ref"]) || isset($_GET['ref'])) : ?>
<style>
.btn-ds24{
display: none !important;
}
</style>
<?php else: ?>
<style>
.btn-shopify{
display: none !important;
}
</style>
<?php endif; ?>
Without actually seeing your code first hand and the order of operations, the only thing I can pick up on is that your cookie, while being set AFTER a person visits a page, may not be set BEFORE this style is generated.
Honestly, this is a bit of a redundant way to do it. You're better off adapting the template itself to the button, rather than using a conditional style to show/hide the button. Makes for a better experience and less prone to errors.
I get that you're using Elementor, and I'm assuming that means you're building these on the fly and somewhat need to use styles, but it's not something I'd generally suggest.
A better option may be to look at a JS library like js-cookie for easy reads, and that way you cun run the test once the browser has actually built (make sure you start with 1 button always hidden, or actively build the URL to the button based on the cookie).
Still a shoddy way to do it, but a more robust, better shoddy way
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.
Picture to get understanding of my question!
So, this is the site I made for fun and It's a little dice game where you can guess the outcome of the dice. Anyways, as you can see there is a border under the other div. That's where the output comes from the dice game.
After rolling the dice.
So my question is:
Is there a way to make the CSS style before doing the 'game' different than after playing the game? (Border width: 0px; before and 1px after) Or is there a better way to do this instead of changing the CSS??
Edit by Martijn: The code given in the question makes to question obfuscated and didn't really need to be added. IMO it decreased the value of this question.
Yes, but first no: PHP can not change css. PHP is serverside, meaning it's build on a server and the result gets send to your browser. CSS styles the htmlpage on your computer, your computer´s browser calculates how big everything should be etc.
You can however, add a class to the html, depending on the result. This class can be styles.
You have not provided code, so´ll write you a small demo.
$indicationClass = ""; // not good or bad, so no class
if( $Guess=="correct" ){ $indicationClass = "CorrectAnswer"; }
elseif( $Guess=="wrong" ){ $indicationClass = "WrongAnswer"; }
<div id="ImTheResultDisplayer" class="<?=$indicationClass;?>">
The color of my text will change!
</div>
This isn't perfect code, but it does demonstrate my point.
If this is done via AJAX or Javascript (meaning the page never refreshes, you can use the same principle.
There is no way to modify your CSS with PHP
Try to learn Javascript add "movement" and other things to your web page, this language allows you to modify the style of your website after this is served by the server
Its a long way on web development but I wish you luck
I'm interested in simplifying the dokuwiki login page so it displays without the page header and page footer. Because these appear dynamically I can't seem to figure out how to prevent them from displaying.
I'd like all subsequent pages to load with the header and footer. Only the login page should appear in simplified form.
This would not work with Dokuwiki's own features. The login-page is simply a content, like any other content of Dokuwiki too, and so it is displayed in the content-area.
You would have to write an plugin for Dokuwiki, which intercept the parser/renderer-chain an displays only the login page you created. It's not trivial, tough.
This depends on the template you are using. If you are using the default 'dokuwiki' template, you can create userstyles with the following CSS which will simply hide the header and the footer:
.mode_login #dokuwiki__header,
.mode_login #dokuwiki__pagetools,
.mode_login #dokuwiki__footer,
.mode_login .pageId,
.mode_login .docInfo {
display: none;
}
.mode_login #dokuwiki__content {
padding-top: 1em;
}
If you're not using the default template, you only need to make sure that <?php echo tpl_classes(); ?> is inside a class="" somewhere around most of the code in your template's main.php. When you do that, the class mode_login is added whenever you're on the login page.
The rest of the CSS might need to change as well depending on how your template is structured.
I want to include the same navigation menu on multiple pages, however I do not have PHP support, nor can I affect my server in any other way.
I want to avoid simply copying and pasting the html onto all the pages as this would make updating the menu a pain.
The two options I can think of are as follows:
1) Have all the content exist on one page, then determine which content to show based on a keyword appended to the url:
example.com/index?home
example.com/index?news
2) Include a javascript file that has a function that writes the menu out and call the function on each page
function setupMenu() {
$("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}
With Option 1, the updating process would consist of editing one nav menu on the one page
With Option 2, updating would mean changing the function in the javascript file
My concern with Option 1 is that the page would have to load a lot of content that it wouldn't need to display. My concern for Option 2 may seem trivial but it is that the code can get messy.
Are there any reasons doing it one way would be better than the other? Or is there a third superior option that I'm missing?
You have a few options, each with its own advantages and drawbacks:
Server Side Includes, or SSI. If you don't have PHP there's a good chance you don't have SSI either, and this option requires some irritating mucking-about with your .htaccess file. Check Dominic P.'s answer for a writeup of SSI. The benefit of SSI over JavaScript or Frames is that it doesn't require the user to have JS enabled - which a lot of users don't - and it also doesn't present any navigational difficulties.
Frames. You could either use standard frames to put the navigation in its own separate file, and with the correct styling it would be seamless. You could also use an iframe to place your navigation in an arbitrary part of the site, like a sidebar or whatever. The downside to frames, particularly standard frames, is that they tend to make bookmarking, links and the forward/back buttons behave oddly. On the upside, frames don't need browser compliance or server support.
JavaScript. You can refer to any of the other answers for excellent explanations of the JS solution, particularly if you're using jQuery. However, if your site isn't otherwise dynamic enough that your users will want to have JavaScript enabled, this will mean that a large number of your viewers will not see the menu at all - bad, definitely.
-
Yes use .load jQuery ajax function
$('#result').load('ajax/menu.html');
That way your code stays clean, and you can just edit the includes in seperate HTML files just like PHP.
You should consider AJAX for this task. Include a third party library like jQuery and load the separate HTML files inside placeholders, targeting them by ID.
E.g, in your main HTML page:
<div id="mymenu"></div>
Also, in your main HTML, but in the HEAD section:
$('#mymenu').load('navigation.html');
But your best bet would be to switch to a hosting that supports PHP or any other server-side includes. This will make your life a lot easier.
Check out Server Side Includes. I don't have a whole lot of experience with them, but from what I recall, they are designed to be a solution to just your problem.
Server-side includes: http://www.freewebmasterhelp.com/tutorials/ssi/
You can use HTML Imports http://w3c.github.io/webcomponents/spec/imports/
Here is an example from http://www.html5rocks.com/en/tutorials/webcomponents/imports/
warnings.html contains
<div class="warning">
<style scoped>
h3 {
color: red;
}
</style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
<div class="outdated">
<h3>Heads up!</h3>
<p>This content may be out of date</p>
</div>
Then index.html could contain
<head>
<link rel="import" href="warnings.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>