I have problem with my text in wordpress I took this code from the source code and tried to write CSS in my wordpress template.
Code:
<div id="big-video-vid" class="video-js vjs-default-skin vjs-controls-disabled vjs-has-started vjs-playing vjs-user-active" style="width: 784px; height: 441px; display: block; top: 0px; left: -61.5px;">
I want to change the top and left in CSS in my template window..
Here is the website to check
www.produsers.qa
....... the glitch I need to fix in : venue to be confirmed
It's really not good practice to do this (override inline styles) and would be better that you can remove the inline styling from your html file, BUT you can do this by adding !important to the relevant css classes. So you could add the following to your external stylesheet
#big-video-vid {
top: new-value-here !important;
left: new-value-here !important;
}
so the styles would read (adapt the numerical values to what you need)
#big-video-vid {
top: 150px !important;
left: 100px !important;
}
But this is definitely somewhat a "hack" and should really only be done as a last resort in a situation where you cannot alter inline styles as I said
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 need an extra help with this, i'm just learning to code, already found this preview question but i don't understand completly how the css file must be done and upload. Or if any other way to do the same.
This is my page and this is the code that SCM provides
!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="https://www.scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'blalbla','url':'test'}]}" ></script>
<!-- SCM Music Player script end -->
What I want to do it's hide it and delete the extra space that gives to the bottom.
You need something like
#playerW {
display: none!important
}
I don't like using !important because it's usually a sign of poor code, but here I think it's required as the css properties for the scm player are being set by javascript. The other method might be:
html body iframe #playerW {
display: none;
}
This adds more specificity to the target element. You want to load this after the scm.css link in your template.
However I would also check that these things are not already configurable within your theme.
Based on your last comment (and looking at the current implementation of your theme) I have this hack
#scmframe {
display: block;
background-color: transparent;
position: fixed;
top: -30px; // change this from 0px
left: 0px;
width: 100%;
height: 120%; //change this from 100%
z-index: 1667;
}
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button:
I have this simple fiddle
Here's a screenshot from Chrome Canary:
What am trying to do is adding the following code
.player .controls button.play {
width: 40px !important;
height: 40px !important;
border-radius: 100% !important;
background-color: rgba(23,35,34,.75) !important;
}
but that doesn't work for, any help will be thankful.
Cheers
It has border-radius and background-color. but you can change it. here is the class:
.player .rounded-box {
background: rgba(23,35,34,.75);
border-radius: .5em;
}
note: this is in iframe so, you need to have the style sheet file.
Well after searching I've found the following:
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
So no luck, thanks for your time.
apologies for the question again my last question was poorly asked and code was missing.
I'm having trouble with my plugin I'm trying to implement the wordpress media uploader, unfortunately iv ran into a problem
i have it working and showing up when a upload button is clicked but it shows only half of the uploader
i think i found the problem for some reason the TB_window div opens with
margi-left: -334px;
i adjusted this in fire fox (fire bug) to auto it appears normally e.g. the current div looks like this.
<div id="TB_window" style="width: 670px; height: 351px; margin-left: -335px; top: 20px; margin-top: 0pt; display: block;">
and if i change it to
<div id="TB_window" style="width: 670px; height: 351px; margin-left auto; margin-right: auto; top: 20px; display: block; position: fixed;">
there must be a simple hook / way to change the css for this box for my plugin
how can i do this ?
Well I think the easiest would be to just edit the CSS file for your Wordpress installation. Log into Wordpress and navigate to Appearance -> Editor. Then find styles.css in bottom right. Add your CSS markup to here.
div#TB_window { margin-left: auto; }
If that doesn't work then you can insert code into the head of your blog using a callback.
add_action('wp_head', 'InsertMyStyleSheet');
function InsertMyStyleSheet() {
echo '<link href="pathToStylesheet" type="text/css" rel="stylesheet" />
}
And add your own CSS for your theme there.
As long as relying on Javascript isn't a problem, you could try the following:
_tbw = document.getElementById('TB_window');
_tbw.style.margin = "auto";
Or, if you're using jQuery:
$(document).ready(function(){
var _TBwindow = $('#TB_window');
_TBwindow.css('margin-left', 'auto');
}