Premise: I'm doing an Internship right now, so I am not a pro.
Hey Developers, I need your help.
I inherited a work from another guy in which I have to re-style 3 contact forms.
Problem is: two forms are generated in Wordpress with Contact form 7, and the last one is done using Woocommerce.
What's the best way to proceed to make all three forms consistent?
Do I override the styles of the theme with my own styles?
Any better solution?
Thanks in advance.
The answer to this is to identify the common fields.
In most cases you can add styling to the input and input[type="X"] fields.
This will mean not only will these forms be consistent but everything else that a form will be consistent.
E.g.
input {
background: #f1f1f1;
padding: 5px;
}
input[type="submit"] {
border-radius: 20px;
background: #333;
color: white;
}
This will style all the inputs and then also target the input with the type submit.
In most cases these stylings will be ignored due to weight of the styling so it may be necessary to nest these inside classes and divs. Or just use !important to overide them.
E.g
//Overiding with !important
input {
background: #f1f1f1 !important;
padding: 5px !important;
}
//Nesting to give extra value
html body .container form input[type="submit"] {
border-radius: 20px;
background: #333;
color: white;
}
More information on weights given to classes/id's/elements here.
More information on input types here.
Related
In my react project, I styled the buttons like this in an external stylesheet file called project.css:
button {
max-width: 150px;
margin: 20px 0;
padding: 12px 20px;
border-style: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
-webkit-appearance: none;
}
This has been working fine, however I recently installed some libraries that also use buttons. My button style that you see above, is interfering with the style the libraries use.
I was wondering how I could keep my button styles, but have the libraries I use ignore my custom button styles.
Is this doable?
Thanks!
Depending on the structure of your code and the libraries code there are a few options.
Load the library styles after your own. When two selectors have the same specificity the last one loaded applies.
Scope your selector under a parent selector unique to your application
.mycode button {
...
}
Migrate your selector to a class instead of targetting the button tag.
.mybutton {
...
}
In general its more flexible to target a custom css class than the tags themselves.
I am struggling to remove all Bootstrap 4 native styling from the Bootstrap .card component. There is a chance that it is actually not related to Bootstrap, however I do see it in Edge as well.
Please help me remove this blue line displayed on a selected .card-header!
I have tried various overrides like below:
.card-header {
background-color: white;
border-color: orange;
border: 1px solid orange;
padding: 0;
padding-bottom: 5px;
text-decoration: none;
}
Thank you!
What you are seeing here is accessibility styling that bootstrap has added to help users see where there are currently focused on the user interface. The collapse component your using also uses the card component as well.
Although I don't recommend it, you can remove the accessibility styling no different than removing other styling like you showed above, however you need to access the pseudo class.
This accessibility styling is done through the pseudo element focus.
You can access the pseudo properties of a class by adding :focus at the end. In this cases the styling is done on a class called .btn. To change only buttons within an collapsible elements do the following.
.card .btn:focus {
box-shadow: none;
}
I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause.
I am using evolve themme. I added header widgets.
Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides
Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue.
2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:
.header-block{
background-color: red;
}
.header-widgets{
background-color: #CDAE02;
}
.user-log a{
float: right;
text-decoration: none;
background-color:#581845;
color: #ddd;
border-radius: 15px;
font-size: 14px;
margin-right: 1em;
}
.user-log a:first-child{
padding: 4px 13px;
}
.user-log a:last-child{
padding: 4px 8px;
}
.user-log a:hover {
background-color:#B12307;
font-size: 15px;
}
<ul class="user-log">
Login
Logout
</ul>
I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.
container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:
.container-full{
margin: 0 auto;
width: 100%;
}
Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.
i have the following website
http://cancersurvivorshipireland.com/cancersurvivorshipireland.com/wordpress/
and I'm trying to change the header menu color. I have previously changed the colour for the menu items themselves from code that someone provided here and it was very helpful however no matter what I do I can't change that dirty blue color to something nicer.
I have tried various types of code:
top-header {
background-color: white;
}
header {
background-color: white;
}
.sf-menu {
position: relative;
padding: 0;
width: 100%;
border-bottom: 3px solid #e9e9e9;
background: #ffffff !important;
}
It you visit the actual stylesheet that's doing the overriding, you'll see that it's a custom stylesheet that's being generated by theme options. It doesn't even exist on the server as an actual .css file. It's also the last styles being called on the page.
Rather than editing a different CSS stylesheet and using !important to override this, you're better off updating it (or even removing this, if possible) from the WP Admin theme options.
Also, as mentioned by the (now deleted?) other answer, you need to make sure you're prefixing the .top-header class with a .. Your question doesn't currently show this.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D