Changing code font size on wordpress - html

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

Related

Specify line-height css propery for span class within code-tag block

Can someone help me with this CSS, jquery problem please! I have a simple website. I have as you can see a class named code (that I assume overrides the original code tag that I also have). I also have a class named codeComment. In the later class I would like to add a smaller line-height than for the code-blocks because I don't want to wrap all the code in code-blocks. Im lazy and was thinking it will work somehow to just have one big code-block and separate comments with different classes and it seems to work fine with the other properties in codeComment like for example color. I guess my custom code-tag overrides it. I also tried by using jQuery but I guess the correct way doing it would be using css?
ps. Also when I try a simple jQuery line like this (the test-class contains only line-height). I get the same line-height as from original code-tag:
$("span").addClass("test");
(snip from my code).
html:
<div class="border1">
<p class="code"><code>
document.querySelector("h1");<br>
<span class="codeComment">Javascript library for shorter, more efective code. We need to get the CDN from jQuery to use it. The CDN has to be placed before the custom js-link
so that it can recognize the code from this js-file.<br></span>
$("h1");<br>
<span class="codeComment">//Change h1 to green.<br></span>
$("h1").css("color", "green")<br>
css:
.code { text-align: left; font-size: 1.5rem; font-weight: bold;
}
.codeComment { font-size: 1.0rem; padding: 2% 0 2% 0; color: #000000; line-height: 10px; }
Picture: As you can see below the line-height seems a bit big!

Proper CSS required to make text and href alignment perfect

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.

On page CSS to override server added value

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"

Why would a CSS snippet work in the HEAD but not in an external Style Sheet?

I have the following simple piece of HTML:
<p class="indexsub">Browse by Name</p>
and I have the following piece of css to style it:
.indexsub {
font-size: 1.3em;
color: #efb03e;
margin: 5px 0 0 5px;
}
When I place the css in the HEAD of the web page, it works on all three accounts; size, colour and margins, all applied. If I then take it out to an external style sheet, it completely fails to get applied. Why would that happen?
A few hopefully helpful notes. 1. The rest of the external style sheet works fine. 2. The external style sheet has no conflicting entity called 'indexsub'. 3. I tried placing the css snippet at the very bottom of the external style sheet (so last thing mentioned) in case other settings were somehow countermanding it. This made no difference either. 4. I tried changing the HTML to use a SPAN tag instead of a P tag. Nothing made any difference.
It's important to me to have the css external to the HTML because I need to apply some media-queries to the font size to make it smaller in smaller mobile devices. Thanks.

Overwriting CSS properties, a line-height issue

I made a layout for www.phpbb.pl and I want to apply the same layout for phpBB3 style.
I did that almost, but there is a difference in the footer. I think it's related with line-height and overwriting CSS properties from phpBB3 style. I tried to reset properties, but it doesn't help.I don't know how to go around it.
For css and html please look at www.phpbb.pl and www.phpbb.pl/forum/ source code.
Images to compare:
#oberon_footer #oberon_left_side {
float:left;
}
Needs to be
#oberon_footer #oberon_left_side {
float:left;
line-height: 18px;
}
Style.php line 3975 (may not be the same in the source file)