Recently I'm developing some basic websites, sometimes not-so-basic.
Anyway, I'm customizing wordpress, And I'm trying to achieve 100% wysiwyg.
I'm very close to do it, however, there's one style I cannot fix.
It is related to tinymce plugin. Size of text area is fine now, however I am not able to modify style for pictures.
There aare classes .alignleft and .alignright.
I've managed to include my custom.css (which is applied, and visible for firefox, I can see it properly loaded into FF inspector - Style editor tab), however style is not applied for selected elements.
It still applies rules from wp-content.css. I believe it is related to rules overlapping, and then wp-content as it's loaded later it overwrites my custom style.
When I inspect this specific element, there's no entry from my custom.css (I mean the inspector tab).
Does anyone know how to solve it, or came into similiar issue?
I've tried plugins to niclude custom css for admin, etc. It seems to work fine to include my css, but styles are not applied.
If i'm not clear on some part, please ask questions I will provide screenshots.
Thanks in advance!
your CSS is bad. you wrote img .alignleft which would apply to something nested inside the image tag that had a class of alignleft instead of an image with the class of alignleft. what you need is img.alignleft.
TLDR: remove the space between img and the class
Related
I am working on a css template, which of course helps me to develop a beautiful website. I mean, good to see. Now, I am trying to integrate code from all over the web, such as, for example, a beauatiful contact form that I absolutely want in my website. The problem is that the css of the element conflicts with the css of the website and overwrites many rules.
How can I avoid this?
could you please share the codes or the link of your site and the form? Try to write the css after the main website css. If not solved the problem then try to rewrite the classname alongside with the css. It is quite impossible to solve problem without seeing your code.
you can add div tag surrounded in page and add a special class or id and define this class before CSS styles. actually you define the special styles for certain styles
So I am working on a web project with other students and we are creating different parts of a web project.
I am having a problem whenever I link a teammates css file to my html document. The buttons are out of wack doesn't resize right...etc etc.
I read somewhere that if you have multiple css files linked the last one takes precedence. I tried that and it didn't help. I realized that there may be styles in my teammate's css file that are not in mine and that's whats causing the problem. Is there anyway to fix this issue without going through all the of my teammate's css file and trying to figure out what's causing the styling issues?
CSS always applies based on the priority. Except debugging an element using dev tools, we do not have any other way to get rid of it.
Use !important if your CSS should override others and ask teammates not to use !important for the same CSS.
Also inline CSS overrides header CSS and header CSS overrides External CSS, in the absence of !important
I have an index.html file which includes a whole bunch of css and js files. I have MaterializeCSS included as well as a css file called style.css. For some reason if I have them both included at the same time, when I create a page and use something from materialize (the tabs for instance) they don't look the way they should. Everything is initialized correctly and there are no errors anywhere, the font on the tabs is just not the one that should be there. When I tried not including style.css the tabs looked the way they should.
The problem is that I can't not include style.css because without it, the entire website looks messed up. I tried including them in a different order but that didn't fix it.
Here is style.css.
EDIT: I just tried commenting out all the font-family elements in style.css and everything seems to be working. I could just leave it this way however I don't think this is a very elegant solution.
my guess is that your styles.css is overriding some of the css in Materialize.css and vice versa. You could check using the Dom explorer and see what is being overwritten. Chrome is very good for this as it crosses out the over written css shown in the picture linked below.
Once you find out what is being overwritten you could then write your own styles overwriting it again to make it look how you want.
Hope it helped :)
overwritten styles in chrome
I'm trying to create my own Wordpress theme just for a one page, secured form. This form looks as it should normally, as you can see in this screenshot -->
Unfortunately, even though I've included my own reset.css file, WordPress is inheriting styles from the theme's style.css file. See here -->
As you can see, the font size is much smaller, input fields aren't getting proper padding, the body background is supposed to be blue but is a grayish color in the second screenshot, fields aren't getting proper margins etc.
I know everyone is going to be asking for code, but before I do that, I'm just wondering if there is a default css file you can delete or modify that most of these styles would be included on. I'm guessing this might be included in the admin bar that gives default margin to the top?
If I need to add code, please just let me know and I will. I'm just assuming there are some wordpress gurus out there who already know the answer to this question.
Thank you
Here are some options:
Go to /wp-content/themes/YOUR-THEME/header.php and remove any stylesheet includes.
Go to /wp-content/themes/YOUR-THEME/functions.php and remove any wp_enqueue_style()
Make sure the style isn't generated by a plugin. If it is, you can deregister the style. Here is a link explaining how: http://speakinginbytes.com/2012/09/disable-plugins-css-file/
Overwrite the styles using your own stylesheet. Make sure your stylesheet comes LAST. You can do this a few ways - I'd recommend using wp_enqueue_style() with a dependency on the offending stylesheet.
You should be able to just delete the content below the theme info in the style.css file in wordpress and it will completely axe all of wordpress default styles.
https://codex.wordpress.org/Finding_Your_CSS_Styles
I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.