I'm currently editing a .html file with telerik radtooltips hooked up to a mapped image. Basically there are small blocks on the image that have been set to fire the radtooltips on mouse over. The html file is ran inside of a .aspx file and it inherits the telerik namespace. However, I cannot set attributes in the radtooltips and it instead defaults to a really ugly default style that I can no longer change. I've also tried setting up divs and tables inside the tool tip however, the tooltip container isn't affected so you get a nasty yellow border from the tooltip around whatever definitions are setup for the table or div.
Example:
The orange background is defined by a div inside the tooltip:
<div style="background-color:Orange; border-color:#b24710;">
This is the current tooltip I have defined...and the attributes that are being ignored:
<telerik:RadToolTip ID="rttGeochemTip" runat="server" TargetControlID="geochem" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
I have also tried this without the nested div:
<telerik:RadToolTip ID="rttCharTechTip" runat="server" TargetControlID="char" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
the code above without the nested div is the same as the screenshot except for the orange is replaced by that default yellow border color because I'm not overriding the inside color. I have also tried using CSS to the same failed effects.
Any ideas of what might cause this behavior?
The html page was nested inside a .aspx page and some how the inheritance of the telerik skin sunset was being applied and I wasn't able to override it. To fix the problem I ended up adding in a telerik skinmanager and applied a more appropriate skin for my controls and that fixed the issue. I'm assuming our styling setup wasn't built to the telerik skin standards.
Related
I added a fullwidth menu module in divi elegant themes. This should work fine, but for some reason it always generates white space above.
I could just add some css to fix the problem but the people at divi found it smart to make the extra white space an inline style. As the page is generated dynamically I cannot prevent this from being added.
I tried to add additional css with the visual builder itself.
I also went to the style.css in WordPress to add the additional code to the div, but this does not work.
As for using the inspect function in a browser and directly editing the style it works but like I said above after the page is generated I can of course edit the inline style, but how do I make it so that this is not generated to begin with.
<div class="et_dropdown_animation_fade et_pb_bg_layout_light et_pb_fullwidth_menu et_pb_fullwidth_menu_0 et_pb_module et_pb_text_align_left"
data-fix-page-container="on" style="margin-top:48px; padding-top:0px;">
So the thing I am trying to accomplish is that the margin becomes 0 bypassing the inline styling or a method to inline style from the backend in WordPress.
As adding styling to the css file does not work.
This is generated by Divi's JS. Would be better if you could share a public URL, but if you're looking for a quick patch, you could jquery to get the "top" value after the module is loaded, then counteract it with a negative margin-top of the same value.
Add this to your Divi Theme Options integrations tab (or in a .js file, then call it from your child theme's functions.php file, without the tags of course):
</script>
jQuery(document).ready(function($){
if (!$("body").is(".et-fb")) {
var fullMenuTop = parseInt($('.et_pb_fullwidth_menu').css('top'), 10);
$('.et_pb_fullwidth_menu').css("margin-top", - fullMenuTop);
}
});
</script>
The following worked for me.
Divi's full width menu module has an inline class named et_pb_row. Set its height to 0px and reduce padding to 0px as well.
If the problem still persists, you probably have stray columns in the row. Look for the class et_pb_column and do the same.
Cheers!
I am having an issue with my Angular 7 application when initializing. I have a class called "testing", and all it does is change the text color to red. I had the class listed in either the index.html file inside a style tag, or in the styles.scss file with all my global styles. I tested both ways with same results. I'm using angular/cli and ng serve to test my application and the following is how I have my index.html page laid out:
<body>
<app-root>
<div class="container">
<span class="testing">Application is loading, please wait...</span>
</div>
</app-root>
</body>
Expectation: The text inside the span should be red with a slight indent (via bootstrap container class).
Actual Results:
When I type localhost:4200 in the url and hit enter, the text appears to the top far left of the screen with no red color before the app gets rendered.
If I hit refresh the same thing as #1 happens.
If I hit shift+refresh, for a split second #1 happens before the text gets indented into the bootstrap container div and changes to red.
Can someone explain to me what is happening here, and what do I need to do to make #3 happen without any split second style changes? If any additional information is needed to answer, please let me know.
First, of all this is not right way to write even a single word in tag because it behaves as template directive or you can say empty box to be filled by app.component.html content, and this is why you observing little flick (appears before render) and best way to write your content in app.component.html and style it through app.component.css / app.component.scss or you can write that css in main file for css (style.css) but each class should be in their component styling. Because angular is about separate modules/component/section.
Hope this helps you
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
I have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that:
<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>
The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:
http://codepen.io/rpkoller/pen/DuqBh
It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.
If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:
http://codepen.io/rpkoller/pen/rdFup
Is there a way to get things going with the base64 variant? Best regards Ralf
Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.
In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.
In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.
What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.
The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.