We have had a site re-designed by a company who also maintains and hosts it, as well as providing us with our CRM system. The issue I am facing is they add a bit of a backlink to the footer, which I am unable to edit as its not part of the page until the server generates it.
I would like to use On Page CSS to style this to white, or completley remove it. Either is fine
<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 7pt;margin-bottom:4px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>
The above is the code I can see when I look at the source of the page in Firefox. I cannot see this code in the editor they provide, however I can edit the css files.
Is it possible to use on page CSS to style this out?
Well in my mind with pure CSS, no since there doesn't seem to be something unique to reference it by.
Alternate Solution:
If you can use Jquery it should be relatively easy though.
Do following in head:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>
Depending on the build of the page you should be able to isolate that HTML element. For instance, if that span is the only element in the
<footer>
tag, you could simply use:
$('footer').hide();
Note: They may already be referencing jquery, which means you could just do the code.
One More:
$().ready(function () {
$("a:contains('ProspectSoft eCommerce')").parent().hide();
});
Will delete all parents of anchor tags that contain that text though, so be careful.
EDIT:
$("span:contains('Powered by')").hide();
In line CSS will typical override stylesheets declared in the document head.
If you find certain properties remain stubbornly unaffected, try using the "!important" modifier.
Example:
color: #ff0000 !important;
Beyond this, I can't give you any further advice given that you haven't specified exactly what your problem is.
Not good looking but works:
div span, span a { color: #FFF !important; }
Bad thing is you would have to set the color to all other similar nests "div span" and "span a"
Related
I'm new to CSS. I have copied a CSS from existing code and changed as below:
.feedback_h1 {
width: 100%;
float: left;
margin: 0px;
font-family: Arial;
font-size: 12px;
font-width: 400;
color: #000000;
margin-bottom: 15px;
}
<div Class="feedback_h1">
We will use only personal information. Our <a href="https://example.com" target="_blank">privacy
policy</a> agreed?
</div>
Right now I'm getting result as below:
We will use only personal information. Our
privacy policy
agreed?
However, I'm expecting a result like (in one line) :
We will use only personal information. Our privacy policy agreed?
I think, I need a right alignment (as left is aligned properly) OR
Am I missing something in CSS? What additional attribute can I consider in CSS to make this in a single line?
Is VS 2013 provides a designer view to align cshtml page?
It seems as though your <a> anchor element might have a display of block. This will cause the words wrapped between the anchor elements to have a width of 100% by default.
Try putting the following in your css
.feedback_h1 a {
display: inline-block;
}
<a> elements are display: inline by default, so not sure why it might be like this. But from the code, that seems to be the most obvious reason your code is having this result.
To figure out what's going on, I would suggest using your browser's inspector tools and directly inspecting the element. It usually helps with debugging to look at the CSS styles applied to an element, and test by unchecking them, or changing them, to see the live effect of this on your site.
Currently working with a website, and I'm running into a weird issue. The code at fault is this:
The style sheet behind the <ul>, <b>, and <li> tags looks like so:
ul.secretariat {
list-style-type: none;
font-style: italic;
font-size: 12pt;
text-align: center;
}
li {
margin-bottom: 25px;
}
<ul class="secretariat">
<li><b>Item one</b> Faculty Advisor</li>
<li><b>Item two</b> Secretary-General</li>
...
</ul>
I am well aware that the majority of those don't affect the text; I included them to show that the CSS isn't the culprit (I don't think so, anyway. I'm no expert on HTML, someone just asked me for a favor). The issue I'm having is that in the webpage, the first item in the list has a background color that I can't get rid of. If I inspect element, I find something even stranger; a style has appeared in the <li>! I don't know where it's coming from. I've Ctrl+F'ed ever file in the site and can't find that text anywhere. Overwriting with style = "background: none" doesn't seem to do anything, (I don't know if that's valid, I can't find much documentation for creating an empty background) so I would really appreciate any help I could get on this small but annoying issue.
In order to find the code that is messing with your elements style attribute, you can:
Select the element in chrome dev tools
Toggle Break on Attribute Modification
Refresh the page
Execution will pause in the violating code
Since your question is very broad it is very difficult to see where the change is taking place, however this JQuery should fix the issue, add it to the bottom of the page, right before the closing </body> tag, see fiddle http://jsfiddle.net/c5moax9h/1/
<script>
$(document).ready(function() {
$('.secretariat > li').each(function() {
$(this).css('background-color', 'inherit');
});
});
</script>
In a post of mine in wordpress I'm posting source code as described here.
An example of the code goes like this:
[code language="csharp"]
// Code goes here
[/code]
The result looks like this:
What I want to do is change the font size and make it smaller.
I've inspected the element of the code which gives the following:
I've tried adding custom css using the Simple Custom CSS plugin to change the font size but to no avail.
The CSS that I've tried is the following:
code {
font-size: 10px;
}
.csharp plain {
font-size: 10px;
}
.csharp keyword {
font-size: 10px;
}
How can I change the font-size of the code?
Your element seems to be part of the page therefore custom CSS should work. Most probably it is not working as the CSS rules of another stylesheet (probably the WordPress.com default) are stronger or more specific.
Try with the CSS !important rule:
code {
font-size: 10px !important;
}
.csharp plain {
font-size: 10px !important;
}
.csharp keyword {
font-size: 10px !important;
}
If this still does not work use more specific CSS selectors with the important rule.
If this still does not work your custom stylesheet is not applied yet and you have to check your configuration.
You are trying to style elements based on their css classes, but your code doesn't have the "." before their names. Based on the example of the link:
.syntaxhighlighter { font-size: 10px; }
should do the trick.
Changing the font size of your code on WordPress is pretty easy. This is what you need to do.
1. Switch from the Visual tab to the html tab in the editor
2. Surround your codes with these tags:
<pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>
for example:
That's it.
This was what my code looked like in preview mode BEFORE I used those tags (While I used [language= "java"])
And this is what it looks like AFTER using the tags:
The available font sizes are xx-small, x-small, small, medium, large, x-large, xx-large.
If you are not familiar with html, it is advisable to switch back to the visual tab. Hope this was helpful
I know this has been asked before here. But let me put my problem in a different way. I am using PHP and would like to show a HTML string coming from database in my page. But the problem is as the CSS of the page is of a generic style, it's taking the them in the HTML string also. But I want it to show without any styling whatsoever. I have gone through some searching the internet only to find about the "not" selector of CSS. I would like to know whether there is a way to identify a single element in my html page that would “not” take the general styling/css? What “not” does is specify all other element and “not” the one in the argument. I just want the opposite.
<style>
.div-class p{font-weight: bold;}
.div-class p:not(.no-style){font-weight: normal;}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold.</p>
</div>
I would like the “p” with the “no-style” class to have a normal font weight. It’s currently the opposite. I hope to have made myself clear.
Thanks,
You may place your script output in div with certain id/class. And reset css to this div. There are a lot of various css resets available.
P.S. IMHO there is no css rule to disable all css for certain elements.
P.P.S. You may create an empty iframe (src="about:blank") and place your content there with javascript.
<style>
.div-class p
{
font-weight: bold;
}
.div-class p.no-style
{
font-weight: normal;
}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold. </p>
</div>
Edit: see it working: http://jsfiddle.net/C3jqc/
Edit 2: you can't avoid heritage. You could use "not" in your CSS in this way:
<style>
p:not(.unstyled){
font-weight : bold;
}
</style>
<p> this should be Bold</p>
<p class='unstyled'> This shouldn't be bold</p>
Then add the "unstyled" class to every content you create from your PHP and the ":not(.styled)" to every CSS declaration.
Another option is to redefine every style in your CSS to match my original response.
Bear in mind the availability of the "not" selector across browsers.
there is a simple way to override the styles applied
you can use !important
for example
p{
font-weight:bold;
}
will not be applied if u have
.nostyle
{
font-weight:normal !important;
}
JSfiddle
I am working on a website management utility for a friend of mine. In the index page, I have a link to a CSS stylesheet that came with a template I've bought. I use CKEditor to edit files, but the CSS stylsheet applies many bad styles to the editor.
I am not quite familiar with CSS (that's why I bought the template...) and I want to unlink the stylesheet only from the div/tag. I don't want to unlink it from the whole page, because it uses the stylesheet.
<div style="UNLINKED"> [CKEDITOR CODE GOES HERE] </div>
I don't know if it is possible, but I need to do something with it.
Thanks!
You must override the styles, there is no way to "unlink" a specific element from the page styles.
Therefore, for example, if your stylesheet defines bold text for all paragraphs like this:
p { font-weight: bold; }
you have to override that to bring the paragraph back to normal text:
div.unlinked p { font-weight: normal; }
Assign a class to the div and create style for it- the styles defined in the class will override global styles.
div.nostyle {
margin: 0;
padding: 0;
text-decoration: none;
border: 0 none;
}
<div class="nostyle">CKEDITOR CODE</div>
It cannot unlink the stylesheet once if was linked on the beginning.
Only some circumstances can help:
put the all the <div ... </div> period into an iframe.
or override all the style elements of the div
In this case, I would advise embedding the code into an iframe element. Otherwise, there is no way to avoid the cascade without overwriting every rule affecting the content with more specific rules.
ok, so the solution may be different for every dev. if it's ckeditor, try deleting the table selectors. for me the problem was with the <td> selector. thanks for the answers...
Easy! All you have to do is delete the code at the top of the HTML! Once you do, the page automatically unlinks from the stylesheet. No need to override what was provided. :)