We have had an applet built for us in JSFiddle. It only works though when one ticks the box that says normalized CSS. How do we activate that on our website. I have never heard of it.
Any ideas?
Marvellous
http://doc.jsfiddle.net/basic/introduction.html?highlight=normalized#choose-framework
Next is the Normalized CSS checkbox, selected by default. If selected, the fiddle will be rendered with normalize.css which is removing most of the browser styling of many HTML tags.
You'd want to include the following file in your template/pages.
http://jsfiddle.net/css/normalize.css
I'd recommend copying it and referencing a local copy rather than referencing it on their server though, that's bad form :)
What the normalized CSS is on jsfiddle is a CSS Reset
To add it on your site, copy in paste the following code: CSS Reset
Related
I had a question on how to find out which part of your code needs changing to adjust this "display:none !important" functionality which prevents the website to be responsive on mobile. When going under 767px content simply disappears and that condition triggers.
If I change it to "display:inline !important" that works but I've only done it in-browser and I can't find where to change it in the source files. Is there any methodology on finding this out? I've even used grep on all the files in the theme looking for keywords but I don't know where else to look. Also tried adding the changed code into the "Additional CSS" menu however with no success either.
The question is:
Is there any methodology to finding this [where the CSS lives] out?
You want to know the methodology to find the CSS. Let's walk through how I did it.
Step 1
The inspector gives you the location of the styles. Using your images, I marked the locations with the red boxes:
Notice that the style in question is located in (index):557. Where is that? It's not an external stylesheet, as with the style.css example. Rather, it's been added directly into the <head> and wrapped in <style>.
Using Dev Tools, look in the <head> of the DOM (in the HTML markup). You'll find it there.
Step 2:
Where do you find it? The method that I use is to look at the style declarations first in the <head>. Are there any comments to give you clues?
Next, I look at the actual style attributes. In this case, it's .tm_pb_builder. That is giving you a clue to the component that builds the CSS.
I did a Google search for that class attribute, like this: wordpress tm_pb_builder. That took me to GitHub and the Power Builder plugin from TemplateMonster.
Step 3
Now you know that the plugin Power Builder is the one responsible for adding that style into the <head>. You can then take a look at the respective page and explore how this page is built with this page builder.
That's my methodology.
You can add display:inline !important in the style.css of your child-theme, but it will only works if the plugin css file loads before it.
If the theme's css loads before plugin css, you can create a new css style and enqueue it at the very last end of the style enqueue.
add_action('wp_enqueue_scripts', 'se_41042975', 999);
function se_41042975(){
wp_enqueue_style('css-plugin-override', get_stylesheet_directory_uri(); ?>/css/custom_css.css');
}
Hope it helps!
On a blog post on my website, I decided to share some of my code using a GitHub Gist, since I thought it would be an easy way to apply code formatting and syntax highlighting to my code.
I've embedded the Gist in the post, but for some reason my website's CSS has overridden the CSS of the Gist and so I've ended up with code which is all grey and in a serif font. I assumed that since the stylesheet in the Gist is being linked to after my main stylesheet link, it would be fine, but this seems not to be the case.
How can I make it so that my main stylesheet won't modify the styling of the Gist?
Edit: Here is the page where the problem is occurring, the Gist is near the bottom.
Are you using the embed option? There would be one located on the left sidebar the says "embed this gist" which uses different ids from your css stylesheet so it wont conflict.
You can also rename your selectors on your website, the second stylesheet takes priority not the first.
I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
I started messing with SmartGWT the other day, but ive stumbled in this ridiculous spot..
This is a question that the documentation should respond, but i havent found any simple and straightforward solution.
What i want:
add 5px to the left margin of a Hlayout.
I tried the method setMargin(), but it applies margins to the 4 margins. Since i just want the left one, i was left with the option to use the this.setStyleName(), which leads me to the problem.
How should i go about it? is there a master css file that i have to edit? should i create a custom css file and put there my customizations? where should it be saved?
I tried the solution given here, but it doesnt seem to work for me. am using smartgwt v.2.5
There are no special restrictions with CSS and SmartGWT. You can put an inline <style> in your host .html, link a stylesheet from there, etc.
There is also no need to modify a skin in order to add or customize styles, but if you do want to create a custom skin, see the instructions in the QuickStart Guide, Extending SmartGWT chapter.
Finally you don't need CSS to do this anyway since there is a dedicated Layout.setLayoutLeftMargin() for setting the left margin.