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.
Related
(sorry for the probable mistakes, I'm not a native english speaker)
I'm trying to work after another developer on a wordpress website. I am triyng desperately to get a fullwidth image to cover 100vh in height too, but whatever I do, I get the div to 100vh, but the image keep the same size. I've tried in the inspector and if I directly apply the style
min-height : 100vh;
it works perfectly but I cannot found anywhere in wordpress to apply this style to the image directly. I even tried via a child selector in the global custom css
#my-image-id img
{
min-height : 100vh;
}
HTML:
<div id="title-image" class="et_pb_module et_pb_fullwidth_image et_pb_fullwidth_image_0">
<img src="PRIVATE.jpg" alt="" title="" srcset="PRIVATE.jpg 3408w, PRIVATE.jpg 300w, PRIVATE.jpg 768w, PRIVATE.jpg 1024w, PRIVATE.jpg 1080w" sizes="(max-width: 3408px) 100vw, 3408px">
</div>
or in the custom css of the element, it's like wordpress just cannot read it, the property isn't even present in the inspector (not even striked). (And I tried to add an "!important" despite everything, it changed nothing)
Thank you already !
Hey probably sounds like a repeat questions. Tried all the solutions on stackoverflow but seem not to get the answer.
www.sextoyswizard.com (no adult nudity on this site)
Only does not run on mobile . You cant add anything to the cart nor click anywhere on that page to load description for instance.
There's a container that overlaps your div with id="container". It looks as though it's your search container that exists at the bottom underneath the product options.
<div id="container">
....
</div>
<div id="secondary" class="" role="complementary">
....
</div>
You need to either move this div somewhere or remove it. So you'll have to set up your markup to take that into consideration.
For example, in css I added:
#secondary {
float: left;
width: 100%;
}
This kept the search form in the bottom.
I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.
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!
I'm a programmer trying to learn some css and I've already run into a stumbling block.
I have the following HTML:
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>
<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
In my css I have the following:
body {
background-color:#FFFFFF;
}
div.container {
background:url(/images/bck.jpg);
}
I just want to display an image for the background area for the container div but nothing shows up. If I remove the background section from the css and add background-color:#000000; then I see a black background for the container div.
What am I overlooking?
Most likely you are not specifying the correct path to the image:
background:url(images/bck.jpg);
Make sure that:
You are specifying the correct path
File name of the image is correct
The image file is present in the images folder
Note: As I answered a question today, see how to specify the path with ../.
Most likely the image path is wrong. Remember that the image must be specified relative to the location of your CSS file. Let us say that you have a folder named styles with your CSS files and you have a folder named images with your images. Then you may need to specify:
../images/bck.jpg
in order to access that image.
I find that using Firebug for Firefox, the Web Inspector for Safari, or the Developer tools for MSIE 8 helps me diagnose issues like this. Inspect your div.container element and see what path shows up for your image.
Of course, if you have access to your server logs you could also check those to find what image was requested.
I recently had a problem just like this in where a jpeg image refused to show, but only in MSIE. I had to open up the image in photoshop and use the "Save for Web" again then reupload it. I'm not certain what the glich was, perhaps it was saved in an incompatible jpeg variation or was corrupt in some way, but that worked for me.