Default style not inheriting theme style
-
I have a dark theme on my website but all of the front end pages generated by PMS are not inheriting any of the styles and instead has black text that is unreadable. I’ve tried tinkering with Custom CSS but it is not working or making any changes to the styles. Also the input fields are not inheriting the styles either, creating a very clashing UX for new members.
Users have to highlight the text in order to see it. See attached image.
The page I need help with: [log in to see the link]
-
So, I went to Appearance > Editor and went to where I can enter Additional CSS (it’s different for every theme, so you’ll have to find this) and entered CSS styling for high level classes instead of the style classes that PMS uses.
/* These are all top level CSS styling so they will apply to all classes on your theme */
/* This styles ALL links, including the links in PMS' generated front-end pages like Account, Register, Login etc */
a {
color: #fff !important;
}
/* Class for styling text labels on input fields in PMS form */
label {
color:#1bf5e6 !important;
}
/* Class for styling input fields in PMS form */
input {
background-color:#404040 !important;
color: white !important;
border-radius: 20px !important;
border: 1px solid #808080 !important;
font-family: Oswald, Roboto;
font-weight: 200px;
padding: 5px 5px 5px 5px;}
/* Class for styling a comment box or text box in a PMS form */
textarea {
background-color:#404040 !important;
color: white !important;
border-radius: 20px !important;
border: 1px solid #808080 !important;
font-family: Oswald, Roboto;
font-weight: 200px;
padding: 5px 5px 5px 5px;}In the above CSS that I used, I simply styled label since they use that HTML tag for the text in the forms. Then styled input and textarea and marked them as !important so they would be prioritized over all other styling that came down in the hierarchy of CSS. Feel free to grab this code and modify it however you wish.
- You must be logged in to reply to this topic.
