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.
Related
I have a wordpress theme, and it looks good now, however, I want to add a custom html form to it. But when I put the code in it whith path to its own css and js. The form looks terrible because of the css from the theme.
Is there any plugin or option to fix this or do I need to do it by an other way?
I looked everywhere on the internet but couldt find any solution.
Any help is welcome.
Thanks alot.
CSS means cascading stylesheets, and that's because the CSS from the page cascades downwards onto all the elements on the page. You either have to manually reset the CSS before it hits your form, or you need to embed your form as an iframe to avoid the cascade.
Theme and bootstrap css will override input fields with ton's of styles. You don't have much options but to find and "ran over" problematic styles with your own.
Use !important only if needed.
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
I have used a template for my website. that template contains 2 stylesheets. one is for text and the other is for layout. now i have a master page and a contactUs form uses that masterpage. the master page uses both the above mentioned stylesheets. I have used an accordion in a control. The problem is that the accordion is perfect in the design view of the control control that i have used it in. but as soon as i put it in the contactUs form which uses the above masterpage with the stylesheets, the styles mentioned for a link in the above 2 stylesheets are shown instead of the styles mentioned for accordion header link. what must be the problem? how can I separate all the styles so that the browser doesn't get confused?
Just use Firebug to see what style is overriding the other style and why (more specific, declared further down below, etc).
Without seeing the contents of the stylesheet it's not possible to say exactly what the conflict between them is. Generally speaking, what's happening is that the two stylesheets have different rules for <a> tags (<a> is the HTML tag for a link).
You should look at the stylesheets, and find the rules that apply to a tags. They'll look like a { color: red } or some such. It's possible that the selector will be more complicated, so that instead of a it could be li a or a.someClass or any of a number of more elaborate things. Then, you can do something like change your template so that the links on one of the parts of the template have a CSS class, and update the relevant CSS selectors to only apply to that class, like a.accordionHeader.
1- First of all take a look at the order of your stylesheets.
2- The last one will override the first ones.
3- Change the order of the stylesheets, just guessing, I can say that you should usa the style for the contact us FIRST, so the general styles will overwrite it.
4- If that's not the case, and the results are not as desired, then you should be more specific about the code of the css with selectors more specific than the ones you are using. (Just like aem told you in his answer).
5- Like aem, with so few information, we can't tell what could happen and what could be done.
If you could be more clear in this topic we could help you in better way.
Bye.
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.