i have one little issue that cant resolve myself. I want to remove second box (at bottom) in this page but when inspect CSS found that both elements are defined as :
<pre></pre>
so dont know how to handle that box, and remove it. Form in that page are generated by "User registration & user profile – Profile Builder plugin".
in your css:
:css selector {
display:none;
}
you also can declare in html:
<pre style="display:none;"> </pre>
Try this in your javascript file, or add it in <script></script> in your <head>.
document.getElementsByTagName('pre')[1].remove()
You also have jquery on the site without the traditional $ alias, so you can also do:
jquery('pre').eq(1).remove();
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
I am using TinyCME html editor with the angular directive
and I render the output of the editor -which is data-bidden to property "description" in the scope- into a div using ng-html-bind.
<div ng-bind-html="description" ></div>
everything is working fine but I didn't get in the div what I see in the editor
especially when it comes to styling like the background color and text color
here is what I get in the editor
and here is what I get in the div
it sounds like all the styles applied in the editor will eventually be overwritten by the styles in the div context
I don't have any experience in CSS so please excuse my lack of knowledge
What I really want to do is to render the editor output in a div in a way exactly the way it looks in the editor any help?
I have solved the problem the issue comes from that the ng-bind-html strips out all the styling info comes from the editor that's why there is no styling info
to solve the problem we should use angularjs service $sec which tells the ng-bind-html not to strip out anything from the html string
so to use it in the angular expression we should make it as a filter
app.filter('trustAsHtml', ["$sce", function ($sce) { return $sce.trustAsHtml; } ] );
then you can use this filter in the binding expression like the following:
<div ng-bind-html="currentModel.description | trustAsHtml" ></div>
SO. I have a simple CSS Class just like below:
.Container
{
width: 300px;
height: 100px;
background-image: url('../images/flags.png');
}
Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...
Just to make it clear that why would I need to do this? Refer to my
previous question which is not answered with a bounty of 50+.
There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.
Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.
If the number of possible background images is well defined and small, create css classes with those background images defined.
Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.
E.g.:
<div class="image-container #imageClass"></div>
If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:
<div class="image-container" style="background-image: url(#imageUrl);"></div>
and here one using sprites where the image itself is set in the funnyimage class:
<div class="image-container funnyimage" style="background-position: #xPos #yPos"></div>
The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.
Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..
.. yeah, you can still use <style> tag injecting to manage your css.
Following the questions
Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:
$.get(url, function(myImage){
if(myImage) {
$('#mystyle').remove();
$("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
}
});
This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.
Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :
go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :
services.AddRazorPages().AddRazorRuntimeCompilation();
now save and build the project. it worked for me.
You can't change the css during runtime, but you can override the attribute by injecting the new class instead:
.ContainerUpdated
{
background-image: url('../images/newimage.png')!important;
}
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.
Is there a way to limit a css to only apply to what is in a content area and not the entire page?
I have an ASP.NET 4.0 app. I obtained some from someone else that I don't understand (It's javascript and uses a css). By his instructions, I put it on the page to style a list (UL). All of this occurs within a content place holder. However, now some UL's on the MasterPage are also being affected by this style.
Is the content placeholder an html element - if so you can add a class or id to that and use it to limit the css styling for your ul's to only those in the "main" section. If not, you may need to wrap your content in an extra div:
e.g.
<div id="main">
<!-- content here including the ul -->
</div>
then the css to style that is:
#main ul
{
// styling here
}
As Kris says, you can use an id selector. This is "The right way" to do it.
If that won't work due to your constraints (running impenetrable mystery code), you may need another option.
Fortunately, the kludge is pretty straightforward too: put the app in an iframe and host it from a separate, blank page.