I've built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I'm using a PHP include for the separate header & footer PHP files. I've linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is "bleeding through" to both the header and footer PHP files.
For instance, I'll apply a dark gray to my body text & links to my footer.css file:
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->
#footer { width: 100%; height: 20%; background: #181818 ; }
//footer-nav style
#footer-nav {
list-style-type: none;
padding: 0;
float: center;
}
#footer-nav li {
display: inline;
}
#footer-nav li a {
float: center;
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}
</style>
`
This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn't be happening as I'm linking header.php to it's own header.css file).
What I'm essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.
If there is a more efficient way of doing this please let me know!
Technically, should only belong in the of your page, not in inline blocks (though it does work).
You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.
Right now you are just styling top-level elements and the last to load is taking effect.
You could try putting something like this on the background of the particular css.
Ex.
background: #181818 !important;
Related
everything was working fine then randomly any CSS I add to my Message-inbox.CSS or any other CSS file in my project none of the added CSS gets applied I'm using a required once to link the header and footer and a html link for the pages own CSS. below is the links and my CSS code. I have tried clearing my browser cache and other data and also tried the link with the echo to stop storing cache but no results.
<?php
require_once "../addons/header.php";
?>
<link rel="stylesheet" href="Messages-inbox.css" type="text/css"/>
.secondarynavigation-messages a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-messages a:hover::before {
width: 100%;
}
.secondarynav-messages ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-messages a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.messages-nav-line {
width: 100%;
background-color: #e6e6e1;
padding: 1px 0px;
position: relative;
z-index: -1;
top: 10px;
}
You have to options.
Check whether your CSS can be accesed from the URL that you provide. Just open up source code in Chrome (Ctrl+U) and try clicking on your linked CSS file and check whether browser opens it, and it is the correct file.
In order to avoid cache just add version to your css file in the section in HTML where you refer to it, not the of the file itself in the storage, smth like "style.css?v=1". Any new parameter will be considered as new file by browsers and they will redownload that. And it won't affect your code.
To clarify, do smth like this:
<link href="/css/stylesnew.css?v=1.1" rel="stylesheet">
I have used PHP require function to link my header and footer style.css to all my other pages however the other pages also have their own specific CSS files but when I make a change to them it doesn't have an effect but I know that the style on the pages is being provided because they are the only pages with that specific style and it only deletes it if I remove the CSS link to them. Any suggestions as to why this is? I want to add CSS to these pages but its not being affected.
<?php
require_once "../addons/header.php";
?>
<link rel="stylesheet" href="Messages-inbox.css" type="text/css"/>
I used require for the header CSS and then the html link for the pages own unique CSS but I noticed the changes I make to each of the CSS files only happens if I rename the file after each change not sure why its like this
.secondarynavi
gation-messages a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-messages a:hover::before {
width: 100%;
}
.secondarynav-messages ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-messages a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.messages-nav-line {
width: 100%;
background-color: #e6e6e1;
padding: 1px 0px;
position: relative;
z-index: -1;
top: 10px;
}
this is the CSS for the page I'm working on and if I delete this CSS from the page it doesn't do anything to the webpage the effect only takes place when I remove the link to this CSS but this is the only page with this specific CSS
As an option you can prevent your css files from being cached by adding a query string with a random number.
Try somehting like this where you call your css file
<link rel="stylesheet" href="Messages-inbox.css?ver=<?php echo(mt_rand(1,500));?>" />
I have a webpage written in PHP that displays a table, and I use nvd3 to also show a graph based on the table, however according to this tutorial: http://lsxliron.github.io/nvd3Tutorial/ I should use several css stylesheets, inlcuding
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />
in my head for the page. I also use my own external stylesheet. However the linked one has the code
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
}
td,th {
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%;
display: table
}
,th,td {
border: none
}
*,*:before,*:after {
box-sizing: inherit
}
in it which messes up my table, short of either not including this stylesheet, explicitly overriding it with my own local css, or making the graph show in a new webpage is there anything I can do? And if those are my only options, how could I override the *,*:before,*:after section? It is making my headers off center
Thanks in advance
Edit:
The code being affected by
*,*:before,*:after {
box-sizing: inherit
}
is a div inside of a td used to space out my headings and subheadings, I added box-sizing: initial to the div, and it works fine now (everything was shifted to the left before). The box-sizing inherit was shrinking the content and increasing the margin.
materialize is not required for NVD3. I would ignore that part of the tutorial unless you want to use Material Design. If you do want to use materialize, then just make your selectors more specific.
e.g.
.my-table-wrapper td, .my-table-wrapper th {
padding: 15px 5px;
/* etc. */
}
put your CSS after all others
add !important to every rule you want to override
check with inspector in your favorite browser which rules you have to override additionally and do it also with !important
remember that the more specific your rule is the higher its priority: ul li a.menu-link will override a.menu-link for all anchors in ul>li
Example
td,th {
padding: 15px 5px !important;
display: table-cell !important;
text-align: left !important;
vertical-align: middle !important;
border-radius: 2px !important;
}
You only need to import the materialize fiel in your new css3 file, how you know css work over waterfall, that mean that whe your use import in css on the top of the page, that style will charge in the same css, and beacuse css work over waterfall all the last style overwrite the first style (As long as styles repeat themselves). Go:
#import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
padding: 0
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0
width: 100%;
}
*,*:before,*:after {
box-sizing: inherit
}
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
I'm no .php expert, so I'm looking for a little help (or at least an explanation)
A plugin I'm using on my organization's site (called Coin Slider 4 WordPress) is slowing the site to a crawl. I ran a full page test on pingdom tools and the plugin's .php file (coin-slider-4-wp.css.php) takes more than 11 seconds to load. The .php file itself is only 1kb, and nothing else is particularly slow.
Here's a screen shot:
And here's the text of the .php file in question:
/* Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 920px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
#coin-slider-coin-slider { width: 940px}
Not really sure what's going on, but any tips/advice would be great, as this is obviously making our site unusable :/
Thanks!
The coin slider 4 WP plugin hasn't been updated in 2 years. I'd recommend adopting something more stable and actively maintained such as Nivo Slider
UPDATE: You could also tell the plugin not to call that php file.
Open the Editor in WP in your Plugins sidebar. On the right you will see a drop down with the different plugins you can edit. Slect the coinslider plugin. Now below that dropdown, you will see a list of files. In your coinslider-content.php file, there is a link to your CSS file.
Remove this line:
<link rel=\"stylesheet\" href=\"".$path."css/coin-slider-4-wp.css.php\" type=\"text/css\" media=\"screen\" charset=\"utf-8\"/>
From:
function cs_head(){
$path = get_bloginfo('wpurl')."/wp-content/plugins/coin-slider-4-wp/";
$script = "
<link rel=\"stylesheet\" href=\"".$path."css/coin-slider-4-wp.css.php\" type=\"text/css\" media=\"screen\" charset=\"utf-8\"/>
<script type=\"text/javascript\" src=\"".$path."scripts/jquery-1.4.2.min.js\"></script>
<script type=\"text/javascript\" src=\"".$path."scripts/coin-slider.min.js\"></script>
";
echo $script;
}
Once you have removed that line, copy the content from your coin-slider-4-wp.css.php file. Click Editor on you Theme sidebar on the left. On the right you will see a list of files, one of them being style.css. Paste the contents of your coin-slider-wp.css.php at the bottom of your style.css (stylesheet) file.
Once you have done all this. It should remove that 11s it takes to request the file. Try it out and let me know if it works.