I have a wordpress theme I'm adapting to a clients needs, but I can't make the sidebar ads, which are 125x125px, show a same sized swf instead of a image. If I insert a swf link, it show a broken image thumbnail.
Please help me achieve this.
If it helps you, the url of the website is http://infodrum.ro/inde2.php/
PHP code
<?php if(get_theme_option('ads_125') != '') {
?>
<div class="sidebaradbox">
<?php sidebar_ads_125(); ?>
</div>
<?php } ?>
CSS
.ad125 {
margin: 10px;
height: 125px;
width: 125px;
}
You're usually inserting a path to an image in The backend, right? Like "http://somedomain.com/image.jpg"
Most likely, The Code Inside The Plugin then Produces something like
<img src="WHATEVER YOU ENTERED" />
Since an SWF is Not a valid image, everything ends up being terrible.
I suggest you try The normal WP Text Widget instead!
Related
I have some elements that i hide using css display: none; functions, and most ones i hide using javascript, but when ever a user stripes or disables his browser css and javascript everything i hide will become visible on the front end, though the site may be looking scattered rhen but those hidden elements will still show as html files..
Any idea on how to hide such elements so that if javascript and css are disabled in the viewers browser the hidden elements won't still show.
I was thinking php can be used since there is no way to strip it off.
Maybe you could try this:
<?php
$flag=false;
if($flag){
?>
HTML code here, flag is true
<?php
}
else{
?>
HTML code here, flag is false
<?php
}
?>
This is not an efficient way to do it, but maybe it can help you.
Anything that is rendered to the DOM might be found even if you have other means beside CSS/JS to hide it (you may simply analyse the entire server's response).
Therefore you may want to prevent entirely the HTML code that should not be shown to be sent through backend logic. An example:
<? $cond=false; if($cond): ?>
<p>I'm shown on <i>$cond === true</i></p>
<? else: ?>
<p>I'm shown when <i>$cond === false</i></p>
<? endif ?>
<p>I'm always shown</p>
<p style="display:<?= $cond ? 'none' : 'block' ?>">
I'm always rendered but hidden/shown through CSS and $cond value
</p>
You can modify it here:
https://3v4l.org/pimd5 (press the eye button at the right to check the rendered HTML).
I used add_theme_option('custom-background') in my wordpress functions.php file. And it is working but when i set background image i have not got the image. In the page style it is showing [site_url] in the url. But i need to show localhost/wordpress instead of [site_url].The style line is given below:
background-image: url("http://[site_url]/wp-content/uploads/2019/02/pexels-photo-958168.jpeg");
I got an alternative solutions. The problem is with the theme. Other theme is working correctly. For this theme i did this:
<body <?php body_class();?> style="background-image: url('<?php echo substr(get_background_image(),11);?>')">
Now it is returning- "wp-content/uploads/2019/02/bg.jpeg". And i will get background image dynamically.
You probably mean add_theme_support(), not add_theme_option().
Don't know why it's happening, but a workaround would be to tweak #Emma's suggestion a bit. Something like
<?php $url = parse_url(get_background_image(), PHP_URL_PATH); ?>
<div
class="myClass"
style="background-image: url(<?php echo $url?>)">
</div>
(Probably also need to test if the initial image URL is empty or not.)
(And of course this assumes the WordPress install is at the site root. Some further changes might be needed otherwise, and it might end being more like Emma's. I might also add that you could instead use jquery on the client side the fix the problematic URL.)
First of all: I've already looked on How to change the logo of my wordpress site and I didn't found any useful information for my problem.
In the picture you see the costume logo picture...
...and I change it, if the screen size gets smaller, with this new image:
To replace the image I must write
#media screen and (max-width: 800px){
.logo-wrapper > .logo > img {
background-image: url('wp-content/uploads/2017/06/new_logo.png')!important;
}
}
But the old logo is still seen in the homepage and covered with a part of the new logo:
The old logo is probably still seen because it comes from the IMG-tag. Which will have a 'src="path-to-image"'
In your CSS, you're setting the background of the IMG-tag to 'new_logo.png' but the IMG might still hold an image as well.
Honestly, I'm not familiar with WP code structure, but you should look at the code where the IMG-tag resides or is generated. That's where you'll have to make some modifications to change the way the default logo is displayed to also be a CSS background so that your media-query would work/override default upon resolution change.
It could be something like this:
<div class="logo-wrapper">
<a class="logo" href="<?php someCodeToGetUrl()">
<img src="<?php getLogoUrl(); ?>" />
</a>
</div>
A potential change could be:
<div class="logo-wrapper">
<a class="logo" href="<?php someCodeToGetUrl()">
<span style="background-image: url('<?php getLogoUrl(); ?>')"></span>
</a>
</div>
At which point your media query should work. It may require some additional CSS for sizing/positioning etc.
Hope this helps. I'm sorry that I couldn't be of more help. I don't have enough time to install WP and check out the code for a more accurate example.
Try checking for logo option in "Customize" section on top of admin bar.
Check header.php file for logo tag and change URL of that.
So I just added a Logo to the WordPress Theme I am working with, and I added the Logo with the following CSS:
#header {
background-image: url(img/logo.gif);
background-repeat: no-repeat;
height: 140px;
float: left;
width: 100%;
}
My Question is, how can I turn that Image into a Link linking to the Index of my WordPress Theme? I know the solution for simple HTML and CSS but I've never done something like that with WordPress...
You may want take a look at how the default Wordpress themes (twentyeleven, twentytwelve...) accomplish this. These themes are split up into several files that each cover certain parts of the website. The header image, links, navigation usually go into the header.php file somewhere.
This is how the Twenty Twelve theme links back to home in its header.php:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img ... />
</a>
From the looks of your code you have an element with class="header" somewhere, you can link it like this:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<div id="header">Header text?</div>
</a>
I suggest you read the official Wordpress documentation on developing themes, it covers the basics. And you should read up on some basic HTML and CSS tutorials maybe, or learn from the existing themes.
I'm trying to create a fullscreen, mobile friendly theme which displays Featured Images of posts as big as they can be with no cropping. This means in landscape displaying them with height:100%; width:auto;, but in portrait displaying them width:100%; height:auto. (As in many iOS apps.)
Trouble is, I'm having a real bugger of a time getting this to work in WordPress. When I developed the theme as a static HTML test site, it all worked completely fine. But for some reason, when I converted the site to a theme, it started ignoring the width:100% in portrait.
I know it's not the media query itself that is broken/being ignored, because the nav menu which is within the same portrait media query works fine.
Initially I thought WordPress' inline Image sizes had overridden my responsive ones (which would make sense, cascade-wise) but that doesn't seem to be the case as the image displays fine with height:100% in landscape viewports. In portrait, it seems to be listening to the height:auto command.
It's literally just the width: 100%; command that is being ignored.
I've also added in max-width: 100% just for good measure, and tried it with !important in various places. No effect.
Here's the code so you can see it's not a silly missing semicolon.
#content img {
width:100%;
max-width:100% !important;
height:auto;
}
I have also validated my CSS and nothing seems to be wrong there.
And here's the HTML
<div id="content">
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div class="sponsorData" style="display:none">
<?php
if( class_exists( 'kdMultipleFeaturedImages' ) ) {
kd_mfi_the_featured_image( 'featured-image-2', 'post' );
}
?>
</div>
</div>
</div><!-- End div #content -->
& here's some screenshots.
Please, oh please, somebody save me from my portrait problem.
Try this, may be...
Give this in the <head /> part.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
So I've basically solved this now in that I've got it working how I wanted it to - However I don't really understand why it now works.
I've deleted the Portrait Media Query so the default setting is portrait, and then left the landscape stuff in there conditionally. Is there something wrong with putting both a portrait and landscape media query in the same document? I can't seem to find anything about it on the web, and I'm sure I only had this problem when I converted the site to a wordpress template.