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
Related
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
I'm a web development student, and I am helping a friend in adding some custom links and slider to her wordpress website. The thing is the developer who made her website 6 years ago didn't create a child theme and she agrees to not making any update
I need to add some links in the footer widgets, which i did, but i see that there is an image background to the container containing these widgets, is it safe if i just remove the background from the theme css file ? I mean as she isn't updating her theme nor website, can I achieve it by removing it by editing the theme CSS,
ps sorry for my newbie question but can't find any ressource on this special question.
it looks like this, there is a background on the div (i've put the same color on the smaller div)
Thank you for your help and your time.
It's not a best practice to edit the Parent theme CSS. Even if you do so when a new update comes it will all be overwritten(If you don't update your theme periodically you will be missing out on many security fixes). So it's best if you can create a child theme and update the changes there. Just change the current theme to your child theme it's just a one click action and will save you all your changes in the future. Hope this helps.
if I understand your question correctly, I'd say it's not safe to remove the background CSS from the theme's style.css (or whatever file it is using). The problem might be theme updates that'll overwrite your changes.
So the best would be to create a child theme with a fews clicks, it's really easy:
https://codex.wordpress.org/Child_Themes
So you won't have to bother with updates.
Depending on the WordPress version you might have the Custom CSS Section within -> Appearance -> Customize - https://en.support.wordpress.com/custom-design/editing-css/ - Here you can just write your own CSS to overwrite the background of the container.
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'm working a bit on this Bootstrap template (SB Admin 2) https://startbootstrap.com/template-overviews/sb-admin-2/ and I would like to know if it's possible to edit any css file to change, for example, some background color like the typical light grey or the white one, I've tried already some files like bootstrap.css, bootstrap-min.css, and the other CSS files inside the bower_components folder, but can't get any visible change, and since the HTML has correctly all the navbar classes, I think I should get easily the color changes applying them to the respective classes on the CSS files.
Thank you all so much in advance, meanwhile, I'll continue researching what I can do to get some style changes!
From question comments
CSS = Cascading Style Sheets. Just add your own custom CSS file after
that one loads and override the desired rules. They will need to be at
least as specific as the rules you're trying to override.
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