TinyMCE link tool - how to add CSS styles to links dynamicaly? - javascript

I have searched around but wasn't able to find a solution.
What I want to find out is a way to edit the tinyMce link plugin (or make an edited copy of it) to work in a way that adds specific styling within the link tag, and the ability to specify in the initialization of the plugin what style to add, so that it can be done dynamically. So that I can have result like this(for example):
<a style="color:#00FFFF" href="www.google.com">Google</a>
Any solutions for this? Or a point in the best general direction?
Thanks

In this case i think the best is to wait until the link has been inserted and then do the following action assuming your color has been set in the tinymce init like my_link_color: 'green',
$(ed.getBody()).find('a').attr('style','color:'+ed.getParam("my_link_color"));

Related

Navigation hover effect wordpress

So I've seen a hover effect which I want to apply to my WordPress navigation, but I can't make sense on how to add it or where to start as I don't have access to any of the HTML
The code for the effect
https://codepen.io/ohsoren/pen/QNoQwX
Please, could someone guide me on what I need to do to make this apply?
Maybe look for this
Anyway you have to edit your header.php, look here -> editor , add this html code, then you have to add also the .js file, also the example use postcss not css.
It's better with ftp access.

Javascript bookmarklet to remove navbar?

I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';

Don't display anything below some element

is it possible to hide every content after a certrain element (e.g. after a certain class of div)?
The problem is: I'm using a 1&1 webpage builder with a layout-template (annoying like hell) because of my boss. I'd like to remove the footer, but nothing has worked yet as it seems that the template prevents me from hiding the footer with simple CSS (I'm happy for any suggestions here as well).
But maybe it's possible to hide anything that comes after a certain element like a div or image (or whatever) so that I can put the element right before the footer?
Thanks in advance.
You should be able to use JS if it is possible on 1&1.
As you probably have JQuery you can do it like this:
$('.footer-class').remove();
or
$('.footer-class').css('display', 'none');
I don't think that 1&1 would have different classes or ids for footers each time someone refreshes it, so I think it should work.
Please provide a working example or your website address. This will help us.
Can you give us the footer's classes, id and all attributes? The simplest solutions is style="display:none" added to the footer

How do I edit Liferay's HTML code?

I was wondering if it's possible to edit Liferay Portal's HTML code, add a couple of <br> to have more space between portlets. Or even add some Javascript to it?
Is this possible? If so, how?
Thanks
You can create your own theme, extending another theme (e.g. classic, _styled, etc.) and adding the 'diff' files, aka the ones you want to extend. In that case, you could extend a default css files, adding a rule like:
#content .portlet-layout .portlet-column-content {margin: 10px;}
Another quicker but less flexible approach is to use the
'Insert custom CSS that will be loaded after the theme.'
feature. This can be found at: Manage Pages > Look & Feel > CSS
The Theme answer has already been given - if you just want to change the appearance (e.g. linebreaks) this is the way to go instead of your original question to change HTML output.
If you literally need to change the HTML code - e.g. add something to or remove something from the page, you should read about Hooks, particularly those that can override jsps. This is exactly what they've been built for.

What's the easiest way to show a tooltip on my web pages?

I'd like to modify some parts of my website to show popups when a user clicks on some <td> elements. I'd like to keep the modification very simple, which is why I considered using a JavaScript framework. It does not really matter which, but I'd like to be able to include html in the tooltip's text.
What's the easiest way to achieve this? Could you maybe give an example?
qTip, a jQuery plugin, works very well for creating tooltips. It also supports HTML markup inside the tips. To have the tooltip show when clicking the element, rather than on mouseover, you can use the 'show' option:
jQuery('.selector').qtip({show: 'click'});

Categories

Resources