I already asked this question, sry, but ill try again.
The question is: How do i bind css to a div, only if user is logged in?
I got following, and it is working(Also session startet and so on)
if (isset($_SESSION['username']))
{
include("/view/leftmenu.php");
}
Now i want to add 20% to margin-left on my maincontent. Maincontent comes after this.
So how do i activate some css to a div only when the user is logged in. PHP!!!!
Sry for asking again:(
<?php
$class = "";
if (isSet($_SESSION['username'])) {
$class = "addmargin";
}
?>
Then in your view/HTML/...
<div class="<?php print $class; ?>">...</div>
Now you just need something like this in your CSS
div.addmargin {
margin: 20%;
}
In the <head> do :
<?php if (isset($_SESSION['username'])) : ?>
<style type = "text/css">
#maincontent{
margin: 20%;
}
</style>
<!-- or add link to the style sheet -->
<link href="logged-in-style.css" rel="stylesheet" type="text/css">
<?php endif; ?>
Related
I'm trying to display a webpage with the following tabbed style navbar when clicked :
But I getting this result, even if I click on the links several times :
(kindly ignore texts, those are examples from a reference book)
Below is my code :
<?php
// complete code for index.php
// reporting error if any
error_reporting(E_ALL);
ini_set("display_errors", 1);
// main code
include_once "classes/page_data.class.php";
$pageData = new stdClass(); // (old) declaring a new anonymous class object
$pageData->title = "My Portfolio"; // setting title name;
$pageData->content = include_once "views/navigation.php"; // setting content to page_data() class object
$pageData->css = "<link href='css/layout.css' rel='stylesheet' />"; // CSS stylesheet added from css folder
//changes end here
// URL variable starts here
$navigationIsSet = $_GET['page']; // Click to get page URL via variable 'page' in $_GET['page url'] superglobal array
if ($navigationIsSet) // checking if a page has been clicked
$fileToLoad = $_GET['page']; //get the clicked page's URL value
else
$fileToLoad = 'skills'; // default page view
$pageData->content .= include_once "views/$fileToLoad.php"; // concatenate URL in the content
//URL variable ends here
//new code below: dynamic style added below
$pageData->embeddedCSS = "
<style>
nav a[href *= \'?page=$fileToLoad\']:visited{
padding:3px;
background-color:white;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
</style>";
$page = include_once "templates/page.php"; // linking pages
echo $page;
?>
and this is from layout.css file :
body{
background-color: aliceblue;
}
nav {
background-color: #CCCCDE;
padding-top: 10px;
}
nav a{
display: inline-block;
text-decoration: none;
color: #000000;
margin-left: 10px;
}
nav a:hover {
text-decoration: underline;
font-style: italic;
}
Also if you want to check page.php :
<?php
return "<!DOCTYPE html>
<html>
<head>
<title>$pageData->title</title>
<meta http-equiv='Content-Type' content='test/html; charset=utf-8'/>
</head>
<body>
$pageData->content
$pageData->css
</body>
</html>";
?>
Now that reference book has almost same code to generate the snapshot 1, while my code doesn't show the tabbed nav bar while the user clicks on the links.
Can you please help me to find out what's wrong with the index.php dynamic style ? I'm using PHPStorm with PHP 7.2 as php IDE.
Thanks in advance
You should add a active class to the current selected tab. In that css class you can change the style for only that tab. Below here you see how to add the active class with an if statement to a li object in your navbar. Then in your style.css you can change i.e. the background-color for that class.
<li>
<a href="<?php echo base_url();?><?php echo $this->uri->segment(1) ?>/home"
class="<?php if($this->uri->segment(2)=="home"){echo 'active';}?>">
Home
</a>
</li>
I think I found my answer accidentally ;)
before $page = include_once "templates/page.php"; // linking pages
add this echo "$pageData->embeddedCSS";
this works exactly as I wanted. :D
I am attempting to change some css to display:none; when the user is logged in.
It's just a "Sign In / Register" link. ( so when the user is logged on they wont see it)
<span class="hide-this-class-when-logged-in">Sign Up / Register</span>
I have copied my _header.php file into my child theme, and replaced
<body <?php body_class(); ?>>
with this
<body<?php echo (is_user_logged_in() ? ' class="logged-in"' : ''); ?>>
thinking that this would provide an additional .class for logged in users, so I could then
.class {display:block}
.class .logged-in {display:none}
but the body got all screwed up,( everything got a float left; ) and I am back to the drawing board.
Any input on this topic, or how to use body_class() with x theme would be really appreciated. thanks.
Use this in your header.php file.
<body <?php body_class(); ?>>
This built in function already tracks user status, as well as a number of other useful states like page template, page id, etc.
Example of output:
<body class="home page page-id-403 page-template page-template-page-home logged-in admin-bar no-customize-support custom-background group-blog">
https://codex.wordpress.org/Function_Reference/body_class
SOLVED!!!
<body
<?php
if ( is_user_logged_in() ) {
body_class('logged-in');
} else {
body_class('logged-out');
}
?>
>
goes in your _header.php file
.logged-in{whatever;}
.logged-out{whatever;}
try this
//create two variables
$user_loggedin_class = "loggedin";
$user_notlogin_class = "notloggin";
// add css like this
<style type="text/css" >
.loggedin{
display: none;
}
.notloggin{
display: display:block;
}
</style>
// your span tag should like this
<span class="<?php echo ( (is_user_logged_in())?$user_loggedin_class:$user_notlogin_class ); ?>">Sign Up / Register</span>
im displaying list of results through for each array where i need to hide a button for only specific items in list ,
i tried it using an if statement , but its hiding button of whole list items , please advice me on this?
here the place i have put code. this will hide whole buttons even though the id is not equal to 83
<div class="jd-items-button-details">
<?php if(($item->categories_id)==83) { ?>
<style type="text/css">
.jd-button-details {display:none !important}
</style>
<?php
} else {
echo "test2";
}
echo $item->categories_id;
?>
<?= JHTML::_('link', $link , JText::_('COM_JOMDIRECTORY_DETAILS'), 'class="jd-button-details"') ?>
You can use something like:
<div class="jd-items-button-details" <?= $item->categories_id == 83 ? 'style="display: none"' : ''?>>
Even if written once, you css style will be applied to every links with the .jd-button-details class. Instead you should conditionnaly apply this class to your button:
<style type="text/css">
.jd-button-details
{display: none!important;}
</style>
<div class="jd-items-button-details">
<?php
if(($item->categories_id)==83){
$class = 'jd-button-details';
}
else {
$class = '';
}
echo $item->categories_id;
?>
<?= JHTML::_('link', $link , JText::_('COM_JOMDIRECTORY_DETAILS'), 'class="<?php echo $class; ?>"') ?>
Or even shorter:
<?= JHTML::_('link', $link , JText::_('COM_JOMDIRECTORY_DETAILS'), 'class="'.(($item->categories_id)==83 ? "jd-button-details" : "").'"') ?>
the easiest to do is : dont use tag <styles> since it will applied to whole html area you're displayed. use inline styling :
<div class="jd-items-button-details">
<?php if(($item->categories_id) !== 83){ ?>
<button>this is button</button>
<?php
}
I have built a Wordpress plugin that requires to me to add CSS styles through the plugin's PHP file.
Is there a better way of doing this? I can see this getting out of hand if not done properly.
function flags() {
<style type="text/css">
<?php if(get_option('display')=='Vertical') { ?>
<?php if (get_option('language_option')=='specific') { ?>
#flags {display:none !important; }
<?php } ?>
p.hello { font-size:12px; color:darkgray; }
<?php } ?>
</style>
<?php }
}
If there isn't much CSS, a better way is to add body classes that allow you to target your selectors only when they are present:
<body class="display-vertical">
...
And move the CSS from inline to the stylesheet:
.display-vertical #flags{
...
}
Ok, ive spent a few days trying to figure out why this isnt working, and so far Google has gave me nothing of use. Maybe there is a built in rule that I just am not aware of. I hate posting on sites like this with questions that could be trivial but ive exhausted my own efforts.
So I have placed a background in my CSS and it works on the alotted tag, but it is adding some padding that is not specified. Trying to change it does nothing. The background for the body stretches the duration of the screen but not this one.
Here is where the header is being included.
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if(!$loggedin){
ob_start();
header("Location: http://lolteamrecruiter.com/login.php");
ob_end_flush();
}
?>
<!DOCTYPE html>
<?php
include # 'header.php';
?>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<div id="Login">
<!--LOGOUT BUTTON -->
<p>
Results Page
</p>
</div>
</body>
</html>
Here is the php file being included.
<link href="css/header.css" rel="stylesheet" type="text/css" />
<div id="header">
<img src="css/images/angel.png" height="40px" width="20px">
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if($loggedin){
echo ' <div id="header-right-account">
<ul id="nav">
<li>My Account
<ul>
<li>Edit</li>
<li>Tacos</li>
<li>Burritos</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</div>';
}else{
echo '<div id="header-right">Log In</div>';
}
?>
</div>
This is the css file thats applying the background
#header{
background-image : url(images/black.png);
background-repeat : no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
background-origin:border-box;
margin: 0 auto;
padding: 0;
top:0;
}
The site to see this is at http://lolteamrecruiter.com/
Do you mean the spacing around the logo? Just add display:block to the image.
Edit
Okay, add margin:0 to the body.
Your image is aligned to the baseline by default, which means that gap below it is space for the lower part of letters like p, g, j, etc.
Try this:
#header a img { vertical-align: middle; }
body {
background-image : url(images/login-box-backg2.png) no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
margin: 0;
padding: 0;
}