I use valaddthis on joomla 1.5.25 but i have a problem with its css. I spotted with firebug that the problem is margin-top which should be altered to 215px for my webpage. Its css derives from widget76.css which is imported for the iframe utility from http://s7.addthis.com/static/r07/widget76.css address. How can i add this change?
#at16p
{
margin-top: 215px !important;
}
This is all i need.
I think you can solve this problem with overriding css of addthis.com.
You have to create one division(or existing) before addthis widget, give some id(myid) to that division and this was you can override css property.
#myid at16p {
margin-top: 0;
}
I think this was you can change default css of addthis widget. Try it and let me know.
Related
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
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,
I'm trying to fix an alignment issue that's caused by a row of social media share buttons, specifically the code generated by the Google+ button. I didn't set this site up and I'm not sure how the button was implemented, only know that it was part of an AddThis plugin or something.
The Google+ button seems to automatically generate a div with inline CSS styling:
<div class="google_plusone_iframe_widget" style="width:90px;height:25px;">
I need to get rid of the width and height, but how can I override it externally? I've tried the following but it didn't work:
div.google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Does anyone know how I can do that? Thank you in advance! Here is the page for reference, I am referring to the top left social media buttons:
http://www.canadianoutback.com/events/crime_investigators.php
Your CSS selector should be:
.google_plusone_iframe_widget {width:auto !important; height:auto !important;}
Remove that [style] attribute in your selector, and there's no need to specify the div tag.
Try to add this code #leftNav .addthis_toolbox .google_plusone_iframe_widget {width:auto!important; height:auto!important;} to make it.
Could please try this once #leftNav a.addthis_button_google_plusone .google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Please do try with this
#leftNav a.addthis_button_google_plusone.at300b .google_plusone_iframe_widget {
width: auto !important;
height: auto !important;
}
If it is inside iframe we can't apply any style or script for it.
I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.
I am using Active Admin, is there a way to override CSS used by the active admin theme?
For eg:- I have to change css of submit button which is disabled to cursor: wait; and make it unclickable.
What's the best way to do this?
just make a new file
app/assets/stylesheets/active_admin.css.scss
and put your scss code there.
(Or just active_admin.css with css code)
You can override any CSS property by overriding the CSS class or IDs in you own stylesheet with !important attribute if you do not have any access to the original stylesheet
For example, use
.submit-button {
color: white !important;
}
to change the color of the submit button text.
It is easy to change the styles in Rails 4. Go to
app/assets/stylesheets/active_admin.css.scss
OR (depending upon where you have kept the file)
vendor/assets/stylesheets/active_admin.css.scss
and add styles in there.
I put my form classes in a container class to create a more specific reference. Like..
.form-container {
font-family: 'open-sans';
width: 420px;
.text-field-class {
input{border:none; border-bottom: 1px;}
}
}
this is working so far... for the most part. Better than important. Though maybe using an ID would be the more appropriate way.