Right now I'm making nicely formatted CSS files for our temporary WordPress site, until the new site is ready. After making a CSS style sheet and pretty HTML files, I found they didn't work in WordPress if they were inline in a post, but instead I had to put them in a separate raw HTML file (using "WP File Manager" plugin to upload them to a separate folder.) After that, the way they display on the site matched what they look like on my HDD or on my personal (LAMP) test site (using Safari 10.1.1 OS X), and if I display source in my browser it looks identical to what I uploaded.
Then I created a tooltip style with CSS following the tutorial on w3schools. In the style sheet I define "edit" as a style for changes I made to the original text
.edit { /* changes made, */
color: navy;
position: relative;
display: inline-block;
}
.edit .tooltip {
font-size: medium;
visibility: hidden;
background-color: navy;
color: white;
text-align: center;
width: 20em;
padding: 0.5em;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.edit:hover .tooltip{
visibility: visible;
}
Then (per the tutorial) I add "tooltip" text inside "edit" text
<h5 class="edit">ΒΆ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>
On my HDD and my personal site, the tooltip is invisible until I hover over it and then it pops up a balloon.
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored. To work around this bug for now (so I don't have to re-edit the HTML files), I was able to disable and hide all the tooltips by defining the tooltip style as
.edit .tooltip {
visibility: hidden;
font-size: 0%;
}
This suggests that the "tooltip" is being seen, but some aspect of the hidden part is being parsed differently on WordPress.com.
So is there some CSS style or property that WordPress could be using that causes my text to be shown? Any way to pre-emptively override this with CSS? Should I write a JavaScript that goes through and manually hides the tooltips?
Any experiments I should try to make it go away?
PS: This is different than the question at CSS Tooltip will not work on WordPress page because my text is shown inline.
You are saying:
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored.
This is an indication that the file with the styles for tooltip is loaded before other css styles are loaded. Thus files that load last override what's been loaded before.
For debugging, try adding !important to your tooltip style rules like this:
.edit .tooltip {
visibility: hidden !important;
font-size: 0%;
}
and see if that makes any changes.
Then, modify your WordPress files so that your tooltip styles are loaded last. That will allow you to remove the !important flag. (because using that flag is not a best practice and should be avoided whenever possible)
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
I am trying to change the background on the Blog page of my website. The current website is all black backgrounds, but I would like the Blog page to be white with black text. I need to have my own CSS as Squarespace does not support this as a custom setting.
I have already tried codes provided for things like this, but nothing has worked. For instance: https://answers.squarespace.com/questions/14800/how-can-i-change-the-content-background-color-on-only-one-page-using-css.html
#main { background-color: #ffffff; }
I would like the background color to change.
You may target the blog specifically via its collection ID, which Squarespace adds as a class for you, on the body element. From there, we must target the div that is its immediate child, .overflow-wrapper.
Insert the following CSS via the CSS Editor:
.collection-5d0a3c81de1f2b00012ccccc .overflow-wrapper {
background-color: white;
}
Because the text is white, it will appear invisible. You should be able to adjust the titles and other meta-information (author, date, tags, categories, etc.) using the Style Editor.
However, I don't believe the style editor will give you an option to alter the body text (p elements) on the blog separately from the rest of the site. Therefore you may also find the following CSS helpful for changing body text on blog pages to black:
.collection-5d0a3c81de1f2b00012ccccc p {
color: black;
}
In addition, you may need to add some CSS to address the header, which as a result of setting a white background will be unreadable.
.collection-5d0a3c81de1f2b00012ccccc.site-spacing-small .site-header, .site-spacing-small .site-page, .site-spacing-small .site-footer {
margin-top: 0;
margin-bottom: 0;
padding-top: 3vw;
padding-bottom: 3vw;
}
.collection-5d0a3c81de1f2b00012ccccc #header {
background-color: black;
}
And finally, the page title should also be set to black:
.collection-5d0a3c81de1f2b00012ccccc .page-text-wrapper .page-title {
color: black;
}
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.
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
I am building a mobile site using jquery.mobile-1.0b3.min.css. If I download the css file, I lose some of the effects and icons from the theme I'm using. But I need to override some styling in that file even though it's hosted at jquerymobile.com.
The style I need to override is ui-select. The width attribute of this style is width: 60%, but I need to remove that style altogether while leaving the rest intact.
.ui-select {
width: 60%;
display: inline-block;
}
Is there a way to remove width: 60%; without effecting display: inline-block;?
You can add your own stylesheet that overrides any previous styles. (Just make sure your custom stylesheet loads after the jQuery stylesheet.)