I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.
Related
On the homepage of my developing ecommerce store just below the carousel, there is an image under the H1 "I Wish I Were Knitting..." that has a paragraph sort of wrapped to it.
I have applied a float class to the img tag which is located within the p tag. I have one line of text floating correctly by removing the bootstrap img-responsive class from the img tag.
Why won't the full paragraph wrap? I would put markup and CSS in this text here but because this code in question is part of a huge .asp system, I wonder if folks would please check out the markup and CSS with the Inspect Element on the page itself where you can see the other code and CSS around it.
I see you added class="floatleft" but you need to add the css float: left;. Tested using Chrome Dev Tools and it works :).
You can always add the class to your css using the following :
.floatleft {
float: left;
}
Then you will only need to change the CSS and not your HTML. Good luck!
I found my main error. It's an understandable error given the state of my development. Turns out I was editing the wrong css file. When I put my css in the correct file, everything worked. I'll examine your kind ideas and observations with appreciation. Yes, padding will help.
I'm making a few changes to a site and want to change the width of the container to go across the whole page. I'm a bit of a noob so not sure if I've don't it correctly, but want the width to be 3000px. I have the option of container id and container class. So basically what CSS do I put in which box?
The theme I am using is Porto by Spyropress. But looking for some CSS help:)
Thank you very much!!
In the CSS style page (or code) where you have the container, you should write the following line:
width:3000px;
The most straightforward answer would be to use the style="width: 3000px;" definition instead of the id or the class (even if it is not a really clean choice).
If you have no chance to add a style and you have called a CSS, you can do it by id or by class, depends on how often you will have Elements with 3000px width (single time go for id, multiple times go for class). In general classes and id link the parts in your CSS with your html definitions (named-links). They do not serve you with direct CSS, this is done by the style="" Element.
Some Code:
#some_id {
width: 3000px;
}
.some_class {
width: 3000px;
}
And some additional info about general css (because it is much more than just id's and classes if I think about the cascading part): http://www.cssbasics.com/
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }
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.
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.