Formatting a compact code block in Confluenc - formatting

https://en.wikipedia.org/wiki/Unix_filesystem
In the above link wiki generates a "compact" inline code block, that is, the block stops at the last letter of the code instead of the whole line.
Is there a way to achieve this effect in confluence wiki?

OOTB, the only way to do this is with monospace text, but you don't get the background and border.
On Confluence Cloud, you have no other option.
If you are on Confluence Server, you could add a new user macro:
## Macro Name: decorate-inline-code
## Macro Title: Decorate Inline Code
## Macro has a body: N
## Body processing: n/a
## Output: HTML
##
## Developed by: David Simpson
## Date created: 2016-12-08
## Installed by: Your Name
## Simple user macro to decorate inline `<code>hello world</code>` blocks with a border & background color
## This should not decorate any `<pre><code>:(</code></pre> blocks
## #noparams
<style>
#content code:not([class]) { #* ignores <code> in the code macro *#
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
padding: 1px 4px;
}
</style>
This user macro can be added to the page once.
It finds all <code> blocks on a page and decorates them with a background and border
It ignores <code> in the code macro

Related

Changes in Shopware5 less-file has no effect

I've installed Shopware
inherited from the responsive theme and
adjusting the colors (less-files).
This worked well with the header and a few other components like container.less but not offcanvas-menu.less.
In Detail:
finding the color to change:
For this I first made all colors of the entire shop unique. So I can easily tap the color value over the current shop via a pipette tool.
Then I find the color value in the source code and copy the corresponding less source code components into my new theme. Only then do I change the color.
copied inside themes/Frontend :
a) /Responsive/frontend/_public/src/less/_components/offcanvas-menu.less too
b) /MyNewTheme/frontend/_public/src/less/_components/offcanvas-menu.less
the following part :
.sidebar--navigation {
.border-radius();
background: #0492d6;
.navigation--entry {
&:last-child {
border-bottom: 0 none;
}
}
.navigation--link {
overflow: hidden;
text-overflow: ellipsis;
}
}
and changed background: #0492d6; to background: #003E7e; inside b)
Complete result: gist MyNewTheme offcanvas-menu.less
But if i reload and grap the color i got again #0492D6.
As doppelcheck i changed the color in a) to background: black; and its black.
As another doppelcheck i changed the color in themes/Frontend/MyNewTheme/frontend/_public/src/less/_components/container.less to background: red; And red is visible.
Please check if you also imported it.
Please enter in your themes\Frontend\MyNewTheme\frontend_public\src\less\all.less
#import "_components/offcanvas-menu";

Remove whitespace above header

So I'm designing the website for my dad's company and I'm trying to get rid of the whitespace above the header on the page. I tried making the margins 0 and paddings 0 but nothing is changing. Here is my code and a link to the website:
header {
font-size: 20px;
position: relative;
background-color: #DDDDDD;
height: 150px;
}
The problem is the the w3-sidebar-class you are using inside the page. It sets the top margin to a negative value. In order to analys these kind of problems, I suggest you start from a black html page and add new elements to it step by step. Then you can see which changes have which effect.

Is it possible to manipulate css variables using LESS?

With preprocessor variables it's easy to set up one variable and manipulate it so that I can use it to set multiple properties. (demo)
While experimenting with native css variables, I noticed that I could combine them with preprocessor variables, so in the following example: (use firefox)
h1 {
--length: 40px;
#length: var(--length);
line-height: #length;
border: 5px solid tomato;
}
line-height was correctly rendered at 40px
But, when I tried to manipulate the preprocessor variable - like this:
h1 {
--length: 40px;
#length: var(--length);
#length2: #length*2;
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
... the code failed.
Is this possible somehow?
As mentioned in my comment, my understanding of CSS variables is that the variable is resolved into its actual value by the UA. This happens after the Less compiler compiles the file and thus it wouldn't be aware of what is the actual value contained by the CSS variable.
To the compiler, the value of #length is only var(--length). Since this is not a number, an error is thrown during compilation indicating that the math operation is being done on an invalid type.
OperationError: Operation on an invalid type on line 4, column 3:
One way to fix this would be to make the Less compiler output the variable name as it is and have the multiplier appended to it (like string concatenation). This would then leave the control to the UA.
But since all CSS math operations have to be given within calc() function, the entire thing has to be wrapped within it. So, the below code would work fine.
h1 {
--length: 40px;
#length: var(--length);
#length2: ~"calc(#{length} * 2)";
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
Or, even the below would be enough if --strict-math is enabled during compilation:
h1 {
--length: 40px;
#length: var(--length);
#length2: calc(#length * 2);
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
Above code when compiled produces an output similar to the one in Example 11 of the specs and so it should be a reasonably good way of doing this :)
... Note, though, that calc() can be used to validly achieve the same thing, like so:
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
var() functions are substituted at computed-value time...

Why did bootstrap 3 make all my fonts smaller?

I am new to bootstrap, and I added bootstrap 3 into my project and it shrunk all the font sizes, I never had any font size specified in these classes. I thought bootstrap 3 had the default size to 14.. is there something else I need to do?
Thanks
It appears to be happening, at least as of version 3.3.6, due to this block on line 1097:
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
You can restore your font-size by adding this to your stylesheet:
html
{
font-size: 100%;
}
You can customize/override anything - if, for example, you load YOUR css file AFTER the bootstrap file, then your settings will override it. Whatever you can dream:
p {
font-size 18px;
}
and so on...
I strongly recommend digging into the source code: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
UPDATE: TO clarify, "No" you shouldn't have to do anything else. It sounds like there is another problem. The linked source code has changed since the original answer date... as of Feb 2015, it looks like this:
html {
font-size: 10px;
}
body {
font-size: 14px;
}
Assuming we've set our project up correctly, (bower install bootstrap is pretty easy)... attempting to echo text outside of the body should result in 10px text, inside body should be 14px.
If you don't see 14 point text inside the body, then something else might be stepping on it. I'd next inspect in in Chrome (for example) to confirm where the font-size was coming from.
I'd like to add that I think it's helpful to understand how these values we see in this /dist/css file are derived from less variables... the defaults should work out of the box, but you have easy control over everything, including the body text size: see http://getbootstrap.com/css/#less-variables.

Prestashop deos not reflect global.css changes

I am trying to put background image in my store.
I edit global.css file I set Performance Force Compilation = true and cache =no.
I change color of body
I put background image
like below
body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:#555 url('../img/flowerbg114.gif')repeat
background-size: contain
}
But nothing changes in my front office :(
My img file is under img folder under the selected theme..
Thank you for your time :)
try below CSS
body {
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:url(../img/flowerbg114.gif) #555 repeat;
background-size: contain;
}
After each line you end, or each css property you complete, place ; .
Check it and it will be working fine now.
Thank you
The problem was the theme I was using was probably overriding some of the style changes. I found out that it has a module which helps to set some properties like background picture or store logo. When I use the user interface of that module I managed to change the background easily.
I suggest that you edit header.tpl and change line 40
after {$HOOK_HEADER} </head>
from:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
to:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url({$img_dir}page/background{math equation='rand(1, 6)'}.png) repeat-x top center">
This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.
Note: will override the body tag in global.css.
Make a file name of a page, and then put the pictures inside
Annexation place the file in img Directory