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.
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));?>" />
Just a quick question for people who have any experience with this. I'm getting an infographic designed for my blog and noticed that other people have a function to make the infographic go to a full width template at the click of a button.
Here's an example:
https://blog.kissmetrics.com/science-of-brands-on-instagram/
If you click on the infographic, rather than going directly to the image page, it loads the header and changes the template to a full width. I noticed that the URL query goes to ?wide=1.
Is this a plugin or a built in function in Wordpress? Any help would be greatly appreciated :-)
It's hard to say if it's a plugin or the template just naturally displays clicked images like that, but I think I might consider doing a javascript instead. That way you don't move off the page when enlarging and image. Something like this:
Demo: http://jsfiddle.net/8w0ay8xs/
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
.mycol {
width: 500px;
border: 1px solid #000;
}
.myimg {
width: 500px;
}
.allwide {
position: absolute;
text-align: center;
margin: 30px auto;
left: 10px;
right: 10px;
display: inline-block;
width: 90%;
float:left;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
border: 10px solid #FFF;
min-width: 700px;
}
</style>
<div class="mycol">
<h1>Infographic: The Science of Brands on Instagram</h1>
<p>No other social platform provides an experience as incredibly focused and engaging as Instagram. With just a bit of creativity and thoughtful measuring, you can make some Insta-magic for your brand. In this infographic, discover the trends behind the big-brand Instagram experience and learn how you can catapult your company to new heights.</p>
<p>Click on the infographic below to view a larger image:</p>
<img src="http://www.jpeg.org/images/jpeg-home.jpg" class="myimg" />
</div>
<script>
jQuery(document).ready(function() {
jQuery(".myimg").click(function() {
jQuery(this).toggleClass("allwide");
});
});
</script>
I have added custom CSS to style.css file on my own custom skin in Wordpress 3.9.2. All classes seem to be working fine, apart from the new ones that I have added.
.frontpage_tile {
width: 270px;
float: left;
min-height: 1px;
margin-left: 30px;
}
.block {
display: block;
position: relative;
}
.block img {
display: block;
border: 1px solid rgba(53, 53, 53, 0.65);
box-sizing: border-box;
border-radius: 3px;
}
.block .caption {
font-size: 13px;
font-weight: normal;
line-height: 1.2em;
padding: 10px;
margin: 0px;
position: absolute;
bottom: 1px;
left: 1px;
right: 1px;
color: #FFF;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
text-shadow: 0px 0px 20px #000, 0px 0px 10px #000;
z-index: 1;
}
The above code is just ignored by all browsers. It does not appear on the page, nor on "Inspect Element" in the browser. Any ideas? This is the code I am using on the template, which I am calling on the custom page.
<div class="frontpage_tile">
<a class="block" href="<?php echo get_permalink(); ?>" data-icon="">
<?php the_post_thumbnail('home-thumb'); ?>
<span class="caption">
<?php the_title(); ?>
</span>
</a>
</div>
I just scanned your website with wpscan for the sake of it, and here's your problem:
[+] Interesting header: CF-RAY: 15644be6d86308d8-LHR
[+] Interesting header: SERVER: cloudflare-nginx
[+] Interesting header: X-CF-POWERED-BY: WP 1.3.14
[+] Interesting header: X-POWERED-BY: PHP/5.5.14
You're using Cloudflare :) , just login into your Control Panel and enable Development mode.
I'll leave the old answer below, just in case someone finds this question and wants to know how to do a bit of troubleshooting:
If you go at the top of your stylesheet you'll see the following comments:
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Author: the WordPress team
[...]
Version: 1.4
[...]
*/
Just change your number version and Wordpress now will serve the stylesheet with the new version number, forcing your browser to re-download it, otherwise while you're under development you can register your CSS in that way (which is really handy):
wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), time() );
This enforces to append a timestamp on the CSS as query variable, so your browser believes that's a new file and the new fresh CSS gets downloaded every time you refresh the page.
Generally the CTRL/CMD + SHIFT + R works without any problem, if you still see your old CSS even with those changes one of these is probably what is causing problems:
Your website is using Cloudflare and you forgot to enable dev mode
Your wordpress is running a caching plugin
You're uploading your file in the wrong place
Cheers
in the css addd the !important syntax after the lines like this
.some_class_to_edit{
text-decoration: none !important;
}
And also try to check that there is no another css coming after that, which can override it
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;