I'm using Ghost as blogging platform.
I put my code between ``` just like it's one on stackoverlfow.
This works well but the text size of my code is to big.
I know some css but I don't know how or where I can change this size somewhere?
Those code blocks are wrapped in an element (most-likely code or pre wrapped in <>) but you can check what element to apply the CSS to by right clicking on it in your browser and selecting 'inspect'. Inspect will let you look at the code and see what kind of html element it is wrapped in.
Ex:
This is inside code element
This is inside pre element
Once you know what element you need to alter you can target it with CSS and add it to your css style files.
pre{
font-size:18px;
color:red;
}
code{
font-size:16px;
color:blue;
}
<pre>Sample code using pre</pre>
<code>Sample Code using code</code>
Related
I want to apply a piece of code (for example, a specific font) to all parts of a widget
What selector or what should I call to be able to do this?
In the following code snippet, the font is applied to the selectors and part of the comments, but when a new comment is registered in the comments section of the site, the previous font is displayed again for the new comment.
/* Widget post comments */
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can use [attribute*=value] CSS Selector in this case.
/* Widget post comments */
div[class*="elementor-element-"] .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can also add a specific common comment parent class with div if needed.
you can use the body element tag to apply font on every part of element as we should write the code of element in body only.
The code written in body element (css) will be applied to every part of the body code and used to write background color so that it can be applied to whole page and used to write font size and family etc using css in style tag in head part.
using
<style> body{ font-size=34px;} </style>
I'm a CSS noob and have not been able to find a solution to my problem.
I run a drupal 7 website.
I need to change a specific block's font size. Using the CSS injector module I've only been able to change the change the font of all blocks using:
.block {font-size: 80%}
Obviously that makes sense as it's got a global application.
The div id for the block is: block-views-new-deals-block-block
The div class for the block is: block block-views contextual-links-region
There's also another div class called: view view-new-deals-block view-id-new_deals_block view-display-id-block view-dom-id-6b4fc98a10e3af5ef7e512f56f8d8c4c
I've tried this with no luck:
.block-views-new-deals-block-block {font-size: 80%;}
I've been messing around with the developer option in Firefox but haven't had any success. I don't know what to try next.
It's difficult to say without the whole HTML, but if the block you want to change the font-size has an ID you can use it like:
#block-views-new-deals-block-block { font-size: 80% }
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.
I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.