I'am currently working on a website that is using the wordPress content managment system and i was trying to get rid of some inline style definitions for some inputs that i wanted to put into the css file.
I copied the exact inline style definition into the stylesheet in a class that targets input (i.e input.className, ClassName having the same elements as the inline style definition) and then added said class to the input.
What happened is the button was rendered with the browser's default appearance settings instead of the ones i defined in a class.
I did some testing and ctrl+f in the css file to see if there we're any more specific css definitions for inputs but there we're none.
Then i copied the whole css into a file and i created a quick html pointing to that local stylesheet, putting just an input with my newly create class on the page to see if it had anything to do with wordpress.
On my local machine the class is applied to the button, but on wordpress it does nothing.
Does anybody know where does the problem comes from or can anybody suggest some possible hints into where i should look.
Thank you in advance.
If the code works outside of Wordpress but doesn't work inside of Wordpress, what led you to the conclusion that the problem lies with the browser overriding something? Isn't it infinitely more likely that something Wordpress is doing is causing the issue?
Inline styles have high specificity. By moving the CSS rules to an external stylesheet, you lowered its specificity. It's likely that Wordpress' CSS includes rules that conflict with yours, and have a lower specificity than your inline styles, but a higher specificity than the same rules moved to an external stylesheet.
To fix this you need to raise your rules' specificities. The quick hack fix for this is to use !important, but you should really figure out what you are conflicting with and address it by tailoring your CSS to match.
To answer your question title, yes browsers can override CSS but only if you wittingly installed a plugin/extension to do so (eg facebook themes), but by default the browser does not do so.
You could check if your Wordpress install or browsers has cached the page (you can delete/remove the cache to do so), I know this is an issue while editing PHPBB themes while live, but I suggest go all out, create a separate CSS file and new unique class name in it (avoid any confliction) and double check to be absolutely sure
Related
I've added a widget element (my account widget) to a page using a shortcode (there is an annoying bug when I use the widget).
and of course the element is missing the theme's style.
I've found one post about this, and how to resolve it, but I can't seem to understand WHERE do I find the html and css relevant to that element, and where to place them.
I would love to understand how it is done.
link to my page (you need to create an account to see it): https://rotemy12.sg-host.com/%d7%94%d7%97%d7%a9%d7%91%d7%95%d7%9f-%d7%a9%d7%9c%d7%99/
link to the explanation I found
Many thanks!
You might find it useful to look into how to edit templates/themes.
It seems you will have to access files inside the wp-content/themes/[theme-name]/; there you should find a style.css, a function.php, (and a bunch of other files). You can edit style.css to customise styles to your liking: edit the style.css to insert styling information for your widget; you might need to look after specific selectors depending on your theme.
Also please note that depending on the browser you are using, you should have developper's tools that will be useful to find out about parents' selectors Chrome / Safari.
I've got a lot of custom stuff to style inside my current project ( first one made with Gutenberg) and editing two files (that include a lot of media queries) makes the task deeply infuriating.
Is it possible (and viable) to merge the 'frontend' styles and the editor styles within one CSS file in WordPress? So I can have the 'frontend' and 'editor' versions opposite one another in the CSS file and nothing flips out?
This will cause unnecessary code in the admin panel.
Write CSS Separately for Gutenberg(editor styles). Gutenberg CSS file must include these: heading(h1,h2 etc...), , quote etc... Add this style even if the style element is for your front end. These attributes must be placed in editor styles.
Then enqueue the editor styles CSS file both.
Ali is mostly right but the reasoning is kind of reversed.
You want the public views to be as small as possible, so while adding weight to Gutenberg would suck, adding weight to public views is much worse and will negatively impact page scores?
I've got a local server set up and i've been editing the CSS of my child theme in Dreamweaver. I've now seen, through the WordPress dashboard, the additional CSS area and the Appearance > Editor.
What's the difference between them and do I need to choose one and stick to it? I was testing some code in the additional CSS box and then erased it but now the stuff i'm writing in Dreamweaver isn't updating when i view my site through the WordPress dashboard.
Thanks
Custom CSS allows you to add your own styles or override the default CSS of a plugin or theme.
And CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
If your newly added style rules doesn't seem to work you need to need to perform some troubleshooting steps
Scan your style file for missing ";" which can prevent following style
rules from being recognised.
Use inspect feature of your browser check for conflicts , style rules that override the css that doesn't work.
Test from a different browser and make sure that the css file loaded in your browser is the correct version not a previously cached one.
Here is a useful reference https://codex.wordpress.org/CSS_Troubleshooting
Also read about css priority and specificity rules.
you can use "!important" as a quick fix but it is not considered as a good practice.
Customizer settings are stored in the database and loaded after the main styles, lastly loaded rules override same previous rules if it has higher spesifisity.
I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.
I would like to control which parts in Stackoverflow are visible to me by a css file.
There are about ten css -files in Firefox installation folder. I am not sure whether I should edit them or not.
How can I customize Stackoverflow by CSS in Firefox?
You can create a file called "userContent.css" in your profile folder and it will be loaded on each page. Here's more information: http://www.mozilla.org/unix/customizing.html
If you need to make changes which only affect one particular site instead of every site, then you can use this syntax:
#-moz-document domain(stackoverflow.com) {
body {
background-color:#f0f;
}
}
The CSS equivalent of GreaseMonkey is the Stylish extension which allows you to overwrite site CSS without modifying your userChrome.css file.
With Stylish installed, you can simply create a custom user style for stackoverflow containing your css overwrites without risking messing up userChrome.css. You can also disable or enable that particular stylesheet at any time. Also, make sure to use !important in your style declaration as CSS specificity comes into play.
Try using firebug from http://getfirebug.com
You can also use greasemonkey to do further customization.
You can get a very handy addon in Firefox, called GreaseMonkey. It executes a custom javascript after a page loads, and is able to modify the html on the client side. For example people use it to strip out various elements, change color, fonts, rearrange elements etc
There is also a book about it available online for free
You can get the Greasemonkey add-in here.