reset wordpress default theme (TwentyThirteen) style for buttons - css

I develop a plugin that for wordpress and has a lot of content in it (forms lists etc.).
I know this is asked several times but not in wordpress contects.
The default theme for TwentyThirteen puts some ugly styles on all button:
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
background: #e05d22;
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%);
border-bottom: 3px solid #b93207;
border-radius: 2px;
padding: 11px 24px 10px;
}
and several more diferent definitions for :focus, :active, :hover.
This is not a big issue if you have heavy staled page with custom buttons look...
but in my case I rely use jquery and twitter-bootstrap and there styles get completely messedup (red borders on hover, random paddings and so on).
And overriding the styles for close button on DatePicker for example just to make it look NORMAL... is not fun.
This seems as a general issue to me but I m new to wordpress themes and plugins...
so what is good solution for clearing /normalizing this particular styles ?
(Just reset CSS will remove most of the default looks)

try !important as it has the highest priority other than inline style.

I assume that you plan to use twentythirteen, but you need to change the style for a few elements. This can be easily done with a child theme. It is very easy to do a child theme, look it up on google or there are plenty of tutorials on youtube. Here is one example of creating a child theme http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial and here is a youtube tutorial http://www.youtube.com/watch?v=mvzlw8D6pvk
In your theme style.css you only have to redefine the styles that cause problem. And they will automatically override twentythirteen, leaving the rest unchanged.

Related

Changing colors in style.css is not applying on WP theme

For changing colors in some part of a WordPress theme, I've changed the background or color property of those elements (found using inspect in chrome) in style.css. But it is not changing in the theme.
I also tried making child theme of the theme. But no result.
For example, the style.css contains -
#header .nav_bg {
background: #7bae39;
margin-bottom: -30px;
padding: 5px;
}
I've changed it to -
#header .nav_bg {
background: #109DE4;
margin-bottom: -30px;
padding: 5px;
}
N.B: I've tried with SiteOrigin Custom CSS plugins, and it works with that. But I want to do it by changing CSS.
Thanks in Advance.
Use higher selector, element that contains that div or use
!Important before ;
Just add code to custome css in WordPress
If the same selector works with other plugins you might wanna try a few test to try to see what's going on.
Go the page and look for the style you just added on the
inspector. You can see by selecting the element if it is getting
applied and overridden by other css rule. In that case you can
update the rule to be more specific.
If the css is not showing up at all, you can try:
clearing your browser cache
check the page on incognito / a different browser
Hope it helps,

WordPress Theme modification to swap logos in header

On this site: http://new.thebeatfitness.net/ I'm using a child theme of this theme: https://organicthemes.com/demo/startup/ In the theme it has two headers built in, one for light backgrounds and one for dark. The theme has the navigation swapping light and dark but not the logo. Seems stupid but when I asked the theme developers they said it was built that way.
Can anyone guide me as to how to have the theme also swap logos based on background in addition to text nav?
Basically speaking, your theme toggles a class when you scroll.
This:
<div id="nav-bar" class="dark">
Becomes this:
<div id="nav-bar" class="light">
Your logo is loaded through an img element in html. The easiest option at your disposal is instead to load the logo via css.
.dark .site-logo a{ background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_dark.png'); }
.light .site-logo a{ background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_light.png'); }
The original theme you're modifying is actually using one image for both cases. Instead they change the text color, which is easier.

Strange styling through injected stylesheets in Chrome

We've just purchased a Primeface Theme&Layout Sentinel. However I've noticed a strange styling on tables in Chrome. The Table header and footer has an orange border. My colleagues don't see this and if I change my chrome profile I don't see it either.
The original can be seen here: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38
I've noticed that Chrome is injecting a stylesheet:
.ui-widget-header {
border: 1px solid rgb(231, 143, 8);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
color: rgb(255, 255, 255);
font-weight: bold;
}
Where is this injected stylesheet coming from? How can I stop it? I know that chrome extensions can inject stylesheets but this stylesheet has a url to primefaces, or is that just a red herring and the extension just modified an existing valid stylesheet?
Update:
.ui-widget-header {
/* border: 1px solid #3f7506; */
/* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
color: #ffffff;
font-weight: bold;
}
This is the normal style sheet (it is being overwritten by some other styles, that's why some part is commented out). This style sheet is present in both profiles. As one can see from the URL, the styles normally use relative URIs but the injected one is using an absolute URI.
Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!
Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.
I had the same issue with injected stylesheet, hiding social buttons from my website.
It turned out my Adblock plus was blocking Facebook and YouTube social buttons.
Just had this with the 'Save to Pocket' extension overriding rules in a print stylesheet.
Also assuming your Google 'incognito' (privacy mode) browser isn't running your extensions viewing the page 'incognito' can be a quick way to check if a browser extension is the issue.
If someone stumbles on this as of 24-Feb-2022 because most web pages have black colored background due to color-scheme: dark right at the element by injected stylesheet, the culprit is 'Adobe Acrobat: PDF edit, convert, sign tools' - https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj
Worked fine after disabling the extension.
For Brazilians (especially) who are going through this, check if you have the Méliuz extension (chrome://extensions/?id=jdcfmebflppkljibgpdlboifpcaalolg) and disabled it.
How to debug "injected stylesheet" in Chrome
Open develop console, goto Network tab
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page
In mi case I have disabled the chrome extension called "Nimbus Screenshot & Screen Video Recorder"
remove your newly installed browser extensions and cache, that may solve your problem.
The same thing happened to me, the links disappear from the navigation bar because of an extension in chrome called "EPUB READER". I disabled it and the links show up.
For me the Shield feature was causing such a styling problem. Once disabled, the styling was as expected.
This problem seems to be caused by mostly recorder extensions. Mine was caused by "Screen Recorder" chrome extension.

Facebook comments plugin -- how to override the WordPress theme's color

I installed the Facebook comments plug-in on a WordPress website but the theme's color is overriding the chosen dark background color for the plugin.
It's all white but it should have a dark border. I've tried adding !important to the plugin's div background color to no avail.
How can I override this?
You can style .fb-comments
.fb-comments {
border: 1px solid #000;
}
That's because it uses an iframe to load the data. Your best bet may be to use javascript to select the element class and then modify the css. In jQuery, I would do:
$('.classname').css()

CSS conflict font is transparent

I have a problem that some text (a Calendar plugin) on my website is transparent, with an ugly shadow border. I think it's a CSS problem in my theme. When I place the calendar widget in my footer, the text is transparent (with a shadow border), when I place the widget on de right section it's ok. I tried to use the F12 button (inspect element), to see where the conflict is, but I can't find it. See below the details. On the website, you can see on the right side the correct text format and on the footer the wrong text format.
CMS: Wordpress 3.8.1
URL: http://www.brug.nu/
Plugin: All-in-One Event Calendar 1.10.9 Standard
Theme: Primo Pro from Cyberchimps 1.0.0.3
Does anyone know if it's really a CSS problem and which section is the cause of the transparent text?
You need to add the following CSS to your page, after any linked stylesheets in order to override the default styling of the calendar text:
#footer-widgets aside, #footer-widgets aside a {
color: #000000;
text-shadow: none;
}
Of course, you may want to change the above as you see fit.

Resources