I am new to all these styling things. I entered a sort of instruction note to not-at-all techy person for his blog in the post editor as how he can upload a media. I gave that the following lines.
HTML
<span class="uploadmedia">Click Upload Media and Add your image</span>
CSS
.uploadmedia {
display:none;
}
Now, I know with this class, both the text and the image within it will be hidden. The person is supposed to click anywhere in this line Click Upload Media and Add your image & enter an image. But only the image should show up since that line is just acting as a instruction to him as how and where should he click to upload an image. Please help me correct this code.
I suggest to use Nicolas Gallagher's image replacement technique. You could add the following class to your element in order to hide the text:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
WORKING FIDDLE
Related
I need some help making a responsive button that includes both text and a custom image. It also needs to link to an external URL and I am trying to match it to an existing built-in button on the site.
I am using Wordpress, the theme is Vantage and the button that I am trying to match is a SiteOrigin button widget. The site is still under development but can be found here
The button is in the Contact section at the bottom of the Home page and is the one with the words "Link to" and the image of the Broadmeadow Medical Centre on it. At the moment the button is just an image and it isn't responsive.
Try this
.siteorigin-widget-tinymce.textwidget p{
text-align:center;
}
#media (max-width: 780px){
#panel-15-4-0-2> .panel-widget-style{
width:100%;
padding:0% !important;
}
.siteorigin-widget-tinymce.textwidget p a>img {
width: 90%;
}
}
Example template:
https://eamon-demo.squarespace.com/#overview-eamon
Is there any possible way to change the background color of a single white section with text in the Ethan / Eamon theme? I've had no luck with
<style>
.body {
background-color: lightblue;
}
</style>
in the Advanced section of the page editor. I am looking to change only one of the section's background colors, I do not want to change them all. Thanks.
Solution!
I was able to make it work on a section called "titles" adding the following to the CSS Editor:
section#titles {
background-color: lightblue !important;
}
Yes, it is possible by targeting via the CSS attribute selector. For example:
[data-url-id='titles-eamon'] .content, [data-url-id='titles-eamon'] .content-inner {
background-color: lightblue !important;
}
The above code would be inserted via the CSS Editor. The data-url-id value corresponds the URL Slug of the index page section (see image).
You can inspect the code of the page user your browser's developer tools (often by hitting F12 or CTRL+SHIFT+I). That will help you explore the code of the page for this and other similar issues/customization.
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
Hi I am building a wordpress as per requirement of my client I need to show posts featured image only when hovering on post's title.So far I tried doing this by simple css in this way
li.wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:none;
}
li.wpp-post-title:hover .wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:block;
}
but this doesn't made the trick can you help me achieving this by any other process thanks in advance.
If you are trying to change the property of one element wpp-thumbnail from the event of other element li.wpp-post-title:hover, I think you have to use Javascript.
You should attach onmouseover="OnMouseIn" to the li.wpp-post-title element and write a function in java script file to handle that. Eg:
function OnMouseIn (elememnt) {
// find and assign the thumbnail object to a var
// make thumbnail visible
}
The CSS way of doing it would be setting the thumbnail as background of image of the title, using padding to align it and then displaying it on hover.
Same as setting different background for navigation items on hover.
In your CSS there seem to be a couple of dots missing and it is hard to see the logic when the HTML is not provided. However, it's not so difficult to achieve this with CSS. Just make sure that the featured image is included in the frame with the title.
Example, following your CSS:
--- HTML ---
<li class="wpp-post-title">
<h3>title</h3>
<img class="wpp-thumbnail wpp_cached_thumb wpp_featured" src="[your-ft-img-url]" />
</li>
--- CSS ---
.wpp-post-title .wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp_featured {
display:block;
}
Note:
While you may, it is not recommended to add the li.
Likewise, you do not need to add all the classes of the featured image. One is enough.
If you would need to add all classes for a different reason, you need to add dots in between instead of spaces.
So, then the CSS would look as followed:
.wpp-post-title .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:block;
}
I hope that helps. GL!
I’ve got the following CSS to add a PDF icon to any link that links to a PDF:
a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}
Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method.
No, content only accepts raw text and image data, not HTML.
You need to use JavaScript to dynamically add tooltips to your existing HTML elements.
As for the icon, you could use a background image and some padding:
a.pdf-link {
padding-left: 2px;
padding-right: 20px;
background: url(../images/icon-pdf-link.gif) right center no-repeat;
}
If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.
You can this, these days, using CSS3.
According to https://www.w3.org/TR/css-content-3/#alt:
1.2. Alternative Text for Speech
Content intended for visual media sometimes needs alternative text for speech output. The content property thus accepts alternative text to be specified after a slash (/) after the last . If such alternative text is provided, it must be used for speech output instead.
This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.
Here the content property is an image, so the alt value is required to provide alternative text.
.new::before {
content: url(./img/star.png) / "New!";
/* or a localized attribute from the DOM: attr("data-alt") */
}
Based on the answer I just did the following with jQuery:
$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");