iwillieyou iwillieyou - 6 months ago 10
PHP Question

changing border when specific site is active

Website
I want a function with php to change border of the specific div depending on what site I am on.

Example: Clicking on news -> page: ?page=news ->

div#news {border-bottom: 4px solid orange;}
. Now I only need to implement the last part, rest I got already. I tried using this function:

<?php
function chosen_page ($page) {
echo '<style type="text/css">
#header_navbar div $page {
border-bottom: 4px solid #F0641D;
}';
}
?>




body {
margin: 0;
padding: 0;
background-color: #F0641D;
background-image: url("data/RLbackground.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 0;
font-family: "Trebuchet MS", sans-serif;
color: #c4c4c4;
}

a {
color: #F0641D;
text-decoration: none;
transition: color 0.5s linear;
}

#impressum {
background-color: #383838;
width: 1000px;
margin: 16px auto;
padding: 8px 0;
text-align: center;
text-decoration: underline;
}

#heading {
font-weight: bold;
letter-spacing: 2px;
font-size: 20px;
}

#header {
width: 100%;
height: 64px;
background-color: #383838;
position: fixed;
margin-top: -80px;
}

#header_content {
width: 1000px;
margin: 0 auto;
}

#header_navbar div {
float: none;
display: inline-block;
margin-right: -5px;
border-bottom: 4px solid #505050;
transition: border-bottom 0.5s linear, background-color 0.5s linear;
}

#header_navbar div a {
display: block;
font-size: 25px;
padding: 15.5px 23px;
}

#header_navbar div:hover {
border-bottom: 4px solid #F0641D;
background-color: #505050;
}

#header_navbar div:hover a {
color: #383838}

#layout {
width: 976px;
margin: 80px auto 16px auto;
padding: 12px;
background-color: #383838;
overflow: hidden;
}

#layout_left {
float: left;
width: 684px;
margin: 0 16px -16px 0;
}

#content_left {
padding: 4px 8px;
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
}

#layout_right {
float: right;
width: 276px;
margin-bottom: -16px;
}

#content_right {
margin-bottom: 16px;
padding: 4px 8px;
box-shadow: 0 0 8px #F0641D;
}

#twitter_timeline {
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
height: 700px;
border-radius: 4px;
overflow-y: auto;
}

<!DOCTYPE html>

<html>

<head>
<title>Center of Rocket League eSports!</title>
<link href="style.php" type="text/css" rel="stylesheet" />
<link href="http://quersteil.eu//data/favicon.png" type="image/png" rel="icon" >
<meta charset="UTF-8" />
<meta name="description" content="RocketLeague-Base provides every aspect of Rocket League eSports: News, Matches, Results, Events, Statistics and many more" />
</head>

<body><div id="header">
<div id="header_content">
<div id="header_navbar">
<div id="home"><a href="http://quersteil.eu/">Home</a></div>
<div id="news"><a href="index.php?page=news">News</a></div>
<div id="matches"><a href="index.php?page=matches">Matches</a></div>
<div id="results"><a href="index.php?page=results">Results</a></div>
<div id="events"><a href="index.php?page=events">Events</a></div>
<div id="stats"><a href="index.php?page=stats">Stats</a></div>
</div>
</div>
</div>

<div id="layout">
<div id="layout_left">
<div id="content_left">
<div id ="heading">Welcome to RocketLeague-Base.com!</div>
This site is currently under construction and is getting developed further and further everyday, be sure to check every now and then. When the site has finished it will be a data and information driven website
all around Rocket League, comparable towards <a href="http://www.hltv.org/" target="_blank">HLTV.org</a>. Rocket League eSports is on the rise and as are the expectations of everyone watching, to have an easy
way looking for all the eSports action surrounding Rocket League. We are in the makings of finishing the website as soon as possible, so that every Rocket League fan has a comfortable way to look at all News,
Matches, Results, Events and Stats all around the great RL-eSports Scene. No need to go to 5 different webpages anymore to look at upcoming matches or past Results, RocketLeague-Base.com is the solution!
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div><!--

--><div id="layout_right">
<div id="content_right">
Follow us on Social Media:<br>
<a href=""><img src="data/facebook.png"></a>
<a href=""><img src="data/twitter.png"></a>
</div>

<div id="twitter_timeline">
<a class="twitter-timeline"
ref="https://twitter.com/RocketLBase"
data-widget-id="739952423586934785"
data-chrome="noheader nofooter noborders transparent noscrollbar"
data-theme="dark"
data-tweet-limit="20"
data-link-color="#primary_style_color"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div><div id="impressum">
<a href="index.php?page=impressum">Impressum</a>
</div>
</body>

</html>




Answer

Lazy way:

<body class="<?php echo $page; ?>">

CSS

.home #home,
.news #news, ... {
  border-bottom: 4px solid #F0641D;
}