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.
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 created my website that compiles my scss (boostrap, node_modules, my own custom css) to a single file. Now I'm wondering what would be the best way of styling gutenberg blocks in the editor?
I want to keep the responsive nature of my blocks from bootstrap and my styling what would be the best approach to do this?
If I'm understanding correctly, you want the CSS file for the front-end of your site to also apply to the block editor?
If so, that's as simple as adding add_theme_support('editor-styles'); in your theme files (such as in functions.php).
I find it helpful to create a second block-editor stylesheet to use only in the editor. Sometimes I find the media query breakpoints are too different or just need to tweak the front-end styles a little for the editor. For that file, you can use wp_enqueue_script() on the enqueue_block_editor_assets action hook so it applies only to the editor.
I have de-enqued the WooCommerce default CSS styles.
I also enqued my own CSS style .
Now the question is how will I know which class names to use in my own CSS for styling the WooCommerce?
Will I copy the original CSS to my own CSS and then edit them? I don't know LESS and the original CSS is in compreseed form making it hard to edit it.
2ndly, is using the Firebug tool and then copying the CSS used is a good method to go with?
I want to know the most easiest method of using my own CSS on the WC templates.
Thank you
I'm creating a small WordPress theme, which has a separate control panel. This panel has a lot of color and font changes. I had no problem in saving all the data into mysql, but I can't figure out the best way to apply these changes to the design.
What I want to ask, is what is the best, most efficient and popular way to apply color and font settings?
Should I apply these changes with style="" while generating the design? Should I edit it with JavaScript? Include it in headers <style>, or maybe even edit the .css file?
The best way would be to make the changes directly to the css file. For this you would need to parse the css content. Grab a specific selector content and change it's properties.
An easy way is to output the custom properties in the page header (after the style.css in order to overwrite the default properties) or to put them in a separate css file.
Also, it my be helpful an existing Wordepress theme generator, like http://www.lubith.com
I have a wordpress theme that has a back-end layout styler that allows me to easily change the font, color, & look of my site. Its nice and all however the customization ends up in a <style> </style> tag in the template; inside the header. How can I tell it to save to a "custom.css" instead? The theme I'm referring to is WooThemes- Canvas.
Unless you want to dig into the php of the theme and redesign how it works, leave it the way it is. Functionally, it's not that bad. It may not be pretty, but many frameworks do custom CSS that way.