I've been working on a project at work where the each page has its own css file. However, these pages share some css classes' names, .PSBOTTOMLINE, but each script has different properties for it depending on the page.
However, I've been getting some problems because my pages are getting properties from similar classes from other scripts, besides using <link rel="stylesheet" type="text/css" href="/Content/Project/styles/ProjectCss7.css">
to specify what script should be used.
For example, in that one script, i have this class:
.PSBOTTOMLINE {
vertical-align: bottom;
margin-left: -2px;
background: url(/Content/Project/images/PT_TAB_BOTTOM_LINE_SD_CSS_1.JPG) repeat-x scroll bottom left transparent;}
However, this is being imported from script Css2:
.PSBOTTOMLINE {
border-bottom: 1px solid black;
height: 2px;}
How can I prevent properties from being "imported", and make sure my page use only the properties from the appropriate script? I've been renaming the classes but was hoping for a more intelligent way.
You can overwrite some properties in the page css file like this
margin-left: 0px !important;
Related
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 am using the Redux theme and I added this:
If this “img” entry already exists, we’re going to add one simple
piece of code to it. Within the { } brackets following “img”, add this
code (in bold) just before the closing } bracket: height:auto;
in the style type="text/css" part of the code.
Since then, the photosets on the "Edit Theme" page show Tumblr error messages. This doesn't happen on single image posts.
I've installed new themes, reinstalled Redux but it stays the same. Here is what is on the inspect bit when I right click on the error on my photoset:
<p class="error-message-text" data-localization="message">
Whatever you were looking for doesn't currently exist at this address.
Unless you were looking for this error page, in
which case: Congrats! You totally found it.
</p>
How do I fix this?
We need to see the code blocks for your tumblr template. And also a link to the live tumblr would be helpful. Are there errors being thrown in the console?
Please find at requested.
</style>
<!--[if lt IE 7.]>
<style type="text/css">
#wrapper #sidebar #bottom {
background: transparent;
}
#wrapper #sidebar #top #avatar {
background: none;
}
#wrapper #sidebar #top #avatar img {
border: 5px solid #f1f1f1;
http://biscuitsarenice.tumblr.com/
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.
I need to overwrite the header style from style.css.
Here's the style that I need to overwrite.
.t_header{
text-align: center;
background-color: #bfd4f0;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
Now I created another css file name black.css and I need to create a different background color for .t_header
.t_header{
text-align: center;
background-color: white !important;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
I already used !important to overwrite the style from style.css but its not working but for some reason, the other style class and id that I overwrite using !important worked well.
I hope someone can give me another way to overwrite the style aside using !important. Thanks
Try to clear your browser cache, then add the files in your code in the following sequence -
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="black.css">
The overriding css doesn't need to have all properties -
This much code will be enough -
.t_header{
background-color: #fff;
}
Using !IMPORTANT is generally not recommended. Try increasing specificity
body div.theader { background: white; }
Also keep in mind that it's generally frowned upon to use more than four selectors.
you get the idea...
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}