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
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'm trying to make a modal appear on a user's screen if they are using Google Chrome.
I have like zero idea what I'm doing. I know that I am detecting the browser correctly, but I do not know how to open up the modal. The modal opens if I put the if/else statement into a comment, but that means it will open up in every browser.
<?php
$browser = get_browser(null, true);
$detectBrowser = strtolower($browser['browser']);
if ($detectBrowser == "chrome") {
header("Location: #BrowserWindow");
}
else {
}
?>
In the body:
<div id="BrowserWindow" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
The modal is obviously just for a test. When I load it on Google Chrome, it says "This webpage has a redirect loop."
The location header causes a redirect every time the page is loaded in chrome, even if the anchor already reflects #BrowserWindow. This is causing a redirect loop.
Unfortunately, the hash(#) part of the URL is never sent to the server, so you couldn't check this if you wanted to.
You're going to have to use javascript, which is a much better way to do this anyway.
Take a look at http://www.php.net/manual/en/function.header.php
The header function is made to send http headers like 404 or redirect to a special page. You are trying to access the content of a page with header which is basically impossible.
PHP is a server-side language and can't interfere in your html once sent.
Instead try to write in your html the browser detected to open your modal in JS.
echo "var browser = ".$detectBrowser;
and then write JS
#+
The problem is that you're trying to redirect via header() to #BrowserWindow. Because you're not calling a path on a web server you're stuck in a redirect loop (because the header() function is looking for a resource on a server and you're trying to have it open an element on your page). More info on header(): http://www.php.net/manual/en/function.header.php
Your best bet would be to script it out in Javascript and have it open the modal on detection. Here is a tutorial to get you started: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
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.
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;
Having issues displaying some websites within iframes.
Live example of code
This one works.
<article class='nobackground'>
<iframe src='http://en.wikipedia.org/wiki/<?php echo $myid ?>'></iframe>
</article>
This one does not display. (neither will youtube, google or facebook, however static html seems to display fine)
<article class='nobackground'>
<iframe src='http://www.google.ie/search?tbm=isch&hl=en&source=hp&biw=1280&bih=679&q=<?php echo $myid ?>'></iframe>
</article>
CSS used:
iframe {
width: 100%;
height: 620px;
background: white;
border: 1px solid rgb(192, 192, 192);
margin: -1px;
}
article.fill iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: -1;
}
Google and many others forbid iframing of content through both Javascript (using top.location to detect current framing) and the X-Frame-Option header mention by Grzegorz Grzybek (which forbids framing for compliant browsers).
If you want to capture content you'll have to write a work-around page that does a file_get_content() or cURL call to fetch the code of the page and modify the code slightly (make URLs absolute, remove unwanted scripts) and then echo the code onto a local page.
You cannot iframe Google or other sites because of their X-Frame-Options sent through with the header. Your browser respects this and refuses to show the page you are trying to link.