How can I display the "$" sign through CSS Content:" " I've tried all kinds of different codes. Putting just
div.example {Content:"$1000";}
displays on the site like "00".
Trying to do this before resorting to Javascript.
.dollar:before {
content: '$';
}
You can use the following code for displaying the dollar sign in the CSS content property
div.example { content: "\0024"; }
There isn't quite enough HTML to go on, but to take a shot:
The CSS property content is to be used with ::before and ::afterand when i put a $ inside my content declaration, everything works...
See JSfiddle here
Related
I'm working on a WordPress site and attempting to break a "Read more" link to a new line. The code is automatically generated through a widget, so I cannot simply add a break or paragraph tag :(
This could be done by simply putting a class rule of display:block but my issue is that my link style uses a background color, so using block makes it look like crap (since it spans the full width).
Code :
<div>Post excerpt is here ... Read More</div>
You can make the link to behave like a table. It then becomes to a block level element, also keeps the minimum width.
.more-link {
display: table;
background: gold;
}
Post excerpt is here ... Read More
You can also insert a line break with a pseudo element.
.more-link {
background: gold;
}
.more-link:before {
content: "\a";
white-space: pre;
}
Post excerpt is here ... Read More
You should insert your read more text within a new <p> tag if you would like it on a new line, and keep your code nice and clean.
Then as you say you have a background style applied, you could then put it inside a <span> or some other tag that isn't block based.
There's a pretty good chance you'll need to get under the hood and adjust some php to do it right...
First Check out the documentation
You'll probably need to add something like:
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<br><a class="more-link" href="' . get_permalink() . '">Link Text...</a>';
}
to your functions.php file.
Please be sure to read the documentation, don't just copy and paste the code, different setups (child themes and so on) may need slightly different code.
I am trying to show the information in the notice class.
I have try adding content: but this doesn't work.
.notice {
color:red;
content: "information below are instructions for this method for this page";
}
<div class="notice"></div>
I was wondering if the text in the content can be shown in the div?. I want to show actually what is in the notice class whenever I call the notice class. I have about 40 pages I need to do this to and some people might thing I should just type it in all pages but that information in the content changes.
Is they a way to do this in css?
The content property only works on the :after and :before psuedo classes, e.g. try:
.notice {
color:red;
}
.notice:after{
content: "information below are instructions for this method for this page";
}
<div class="notice"></div>
See this fiddle
That said, CSS should be kept for styling and not content - which should be output in your HTML, and controlled by either whichever serverside tech you're using (e.g. PHP, Python), or a JS bridge.
I think i your case it is better to make a PHP if statement for the notice. that would be pretty more usefull
Hiya,
I have run into this problem many times now using drupal or wordpress where my tinymce config files are a bit too cleverly abstracted.
The problem is that tinymce auto-wraps my <img> tags in <p> tags. If there is a way around this in either Wordpress or Drupal, that would be awesome.
My problem exists when I want to do something like this
<style>
img {
float: left;
}
p {
float: right;
margin-right: 20px;
width: 400px;
}
</style>
and I want my code to look like this
<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>
but tinymce does this
<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>
I'm trying to float an image to the left of a paragraph with a set width, without having width restraints on the image itself.
in this case the image's parent then gets a width and a float right. That is not what I want.
It is very possible that there is an easy clever fix for this but I still have not found one. I would prefer not hacking my config files if I don't have to.
1 caveat...
The only reason this problem exists is because I want clients to be able to easily do their own editing so I won't just have them wrap the image in a <div> instead of a <p>. That seems to me unintuitive for my clients who are the actual users of the wysiwyg
Previous Solution
I have been using a regex to remove the paragraph tags but it is always somehow problematic. I end up adding more images somewhere else then i have to keep tuning my regex to ignore them. 502 errors abound!
my question(s) is(are)
What can I to in my CSS to make the image wrapped in the paragraph do what I want it to do?
and if i can't
What drupal or wordpress specific can I do to make that paragraph disappear?
-- Edit --
the solution needs to be compatible with IE7+ and modern browsers. :P
Thanks!
aaron
You call tinyMCE with tinyMCE.init function, don't you?
So add this string to it:
forced_root_block : false,
Also you can change tiny_mce_src.js. Find
forced_root_block : 'p',
and change it to
forced_root_block : false,
P.S. Don't forger to clear the cache.
If you don't want it to wrap image tags, look in the Tinymce source for a function called "isBlock". There is a regular expression white list test that determines whether or not an element is a block element. If you need image tags to be treated as block elements then add "IMG" to the list of node names it looks for. I just had to do this myself, am still looking for negative side effects right now but it does solve the immediate problem at hand.
EDIT:
That was more or less a temporary solution, if you just need to stop the root level block wrapping of image tags, there's a function called "forceRoots" where you'll actually want to perform your image tag check. I did it by modifying this line of code:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {
to look like this:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {
This solves the problem quite well for me.
If we're talking about a WordPress site, there's an annoying filter that will automatically wrap some elements within the content with a <p> tag called wpautop. It's actually handled by wordpress at runtime and not by TinyMCE.
Add this to the top of your template or functions.php file:
<?php remove_filter('the_content', 'wpautop'); ?>
source:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break
In Drupal, one sort of "klugey" way of doing this would be to use hook_nodeapi() or the d7 equivalent(s) for displaying nodes, and using a regular expression to replace p-wrapped images occurring at the beginning of the field. You would have to inform your client that they wouldn't look right when editing, but that on display, they would appear properly.
If you're looking for a css option:
In css2 you have the :first-child selector, and in css3 there is also the :only-child selector. p:first-child img could be used with negative margins to offset margins you've declared for p elements. A downside would be that this would also impose the same negative margins on any images the client might put in a first paragraph. css3 might not be supported in all the browsers you aim to cover, but if you can use it - you could use the :only-child selector for images which are the sole children of p elements, offsetting the parent p's margins with negative margins.
If Javascript is an option, then you can use jQuery to reparent the img to be a sibling of the p. Something like this (untested)
$("p > img").each(function () {
var $this = $(this);
var $p= $this.parent();
$p.before($this);
});
Add logic to only the paragraphs/images you really need.
Ugly, yes, but a viable solution as a last resort.
Add this line:
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
When you want to insert a img select div:
<div>
<img src="my_img.jpg>
</div>
No need to modify anything with css.
TinyMCE 4 wraps everything in block elements. The default wrapper is P. Click on the image and choose another wrapping element like DIV. To add DIV to the menu add this to functions.php:
function make_mce_awesome( $init ) {
$init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}
add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");
There is option "valid_children" https://www.tiny.cloud/docs/configure/content-filtering/#valid_children. It controls which elements you disallow (-) or allow (+) img tag to be wrapped in.
This example is for
- not letting img tag to be child of p and h1-4
- letting img tag to be child of div and span
tinymce.init({
valid_children : '-p[img],h1[img],h2[img],h3[img],h4[img],+div[img],span[img]'
});
I fear this is not possible due to the fact that img is an inline element. Tinymce wraps everything a user enters into block elements (divs or p-tags), but img is not a block element.
This website that I'm working on has annoying alt tags popping up when you hover over links in the sidebar. I didn't put these alt tags in. But, I can control the CSS... Is there anyway to disable them?
Thank you!
Tara
Simple answer: no
They are impossible to turn off just with CSS. They are browser dependant and are not part of any CSS spec i.e. you can't style them, hide them, anything.
Though you can get rid of them by Javascript:
Javascript
var elements = document.getElementsByTagName('a');
for (var i = 0, len = elements.length; i < len; i++)
{
elements[i].removeAttribute('title');
}
They're actually title tags and you can't remove them with css (you can with javascript) but I guess they're there for a reason.
You can use CSS like below:
pointer-events: none;
From what I can see of the site, you’re getting a tooltip when you hover over the side bar links because they each have a title attribute.
I don’t think there’s anything in CSS to prevent these showing up. Showing these in a tooltip on hover is a decision the browser makes, separately to the rendering of the HTML.
The best you can do is use JavaScript to remove the title attribute.
You can use CSS to hide images with any alt text, for example alt = "LinkedIn"
[alt="LinkedIn"] {
display: none !important;
}
You can also hide the image with title for example title = "Company logo"
[title="Company logo"] {
display: none !important;
}
Dear stackoverflow members,
I wanted to remove the img alt attribute, to remove the alt thing, with css, without changing html php, or adding java elements.
I wanted simply this box (border) around the image that is appearring to be removed. I could not find anywhere this simple solution! So i post it here! I hoep will help someone! I include a screenshot.
I made height and width to be exact with the picture, no more, no less.
Also, check that font-size attribute element was set to 0.
That is (dependign on other set attributes, you may also need to adjust them, in order this "box" be adjusted to the exact size of your image:
#your_specific_ID_name .image_myclass_image {
background-position: 0px 0px;
height: 'the height of your image';
width: 'the width of your image';
font-size: 0;
}
I'm trying to add content to something before an item using the CSS :before + content: fields. I want to insert a checkmark (☑), BUT if I use that in the content option, it prints as the literal. How can I tell CSS to make that a checkmark, not the literal string ☑?
Try this:
#target:before {
content: "\2611";
}
You need to use Unicode values inside the content property. (The list of miscellaneous symbols may also be useful.)
A heavy checkmark is listed as U+2713 so you would put content: "\2713";
Use the checkbox character literally in your CSS rule instead of the encoding -
#target:before {
content: "☑";
}
See: http://jsfiddle.net/e3Wt2/