I am new to foswiki, and have it spun up running on a vm at my companies datacenter.
I have most of the baseline config down, but am wondering about some more customization.
Specifically I am looking for some documentation on how to customize the sidebar. Any documentation or tips ya'll hit me back with would be appreciated!
Thanks!
I assume you are using the default theme 'PatternSkin'
One Example of modifying the Sidebar is to change the width:
to do this create a attachment 'SidebarCustomWidth.css' with the following css
#patternOuter {
margin-left: 8em;
}
#patternSideBar {
width: 8em;
margin-left: -8em;
/*background-color: rgb(200, 200, 255);*/
}
/* remove padding */
#patternSideBarContents {
padding-right: 0;
padding-left: 0;
}
then you can use it with
* Set USERSTYLEURL = %PUBURLPATH{topic="TheWebname.TopicWithAttachment" "SidebarCustomWidth.css"}%
you can find this example at
https://foswiki.org/Sandbox/StefanKr%C3%BCger/PatternSkinCssCookbookSidebarCustomWidth
and some more Documentation and Examples at
https://foswiki.org/System/PatternSkinCssCookbook
Other Options to customize the Content of the Sidebar can be found at
https://foswiki.org/System/PatternSkin#Top_44_Bottom_and_Left_Bar_customization
regarding the Sidebar you can look for WebLeftBar.
every web has its own Topic WebLeftBar. you can change this to your needs. If a Web has no WebLeftBar Topic and no WebLeftBarExample Topic (thats the fallback) the Sidebar does not render.
if you want to change the defaults for new webs you can do this in the _default web.
Related
can anyone help me? I would like to show my own Image in the Navigation List. I've already tryed it in the Shared Components / List Details / Edit Desktop Navigation menu but he didnt show my image. See Attached image
at the Page HTML shows me that he put FA in front of my image :O
span class="fa *********/r/425/files/static/v11/2018-06-13 08_34_21-Durchführung CAB.png"
In this place you put class name of FontApex or custom css class which contains image info.
For example:
Image/class: slon
Inline css for page:
.slon {
background-image: url(#APP_IMAGES#2.jpg);
background-size: 35px 35px;
}
Hello R Studio Community,
I've been developing an app in Shiny and it's be great. I have one simple question.
As different browsers have different widths, is there a way to set the rule on resizing the Shiny dashboard based on the following:
1) If browser width is more than x, limit to width to x and center the entire dashboard
2) If browser width is less than x, follow default autosizing
3) Not essential. But how do I set the blank space color to the left and right of the dashboard
The motivation is that I need a fixed width so that some pictures are scaled correctly. I hope my request can be done through some div tag on the dashboardPage.
This is the current behavior which I do NOT want.
Shiny dashboard stretches to fit window
Cheers,
Donny
Hi to achive what you are asking for just add the following code to the beginning of your dashboardBody. something like this
dashboardBody(
tags$head(
tags$style(
"body{
min-height: 611px;
height: auto;
max-width: 800px;
margin: auto;
}"
)
),
... #the rest of you ui code
hope this helps
I have made a collapsible section for the portfolio (extensive) gallery on my one page website. The gallery has Isotope filters applied to it. On default only the header is shown, but when clicking on the header, the filter names and gallery should be unhidden (content hidden via CSS using display:none) as per JQuery code below:
$(document).ready(function () {
$('h5').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
When I click the header, it expands the filter names, but gallery content isn't displayed. This only happens after clicking one of the filters. When toggling the collapsible section, the gallery remains shown as intended.
So the only problem is the initial unhiding of the gallery. I think by clicking the header, the "Show all" filter or other relevant div has to be reloaded/refreshed in order for the gallery to appear. I've tried multiple commands, but can't seem to find the correct one.
Thank you for the help and let me know if you need any more information.
Apologies for the delay, but please find setup via link below:
http://www.davidmaes.eu/#work
Thanks for the help.
I took a look at the site and isotope doesn't have time to calculate the image sizes, so it's giving the UL container a height of 0: <ul class="portfolio-wrap isotope" style="position: relative; overflow: hidden; height: 0px;"> which is why the images aren't showing up.
When the user clicks a filter, isotope recalculates the images sizes and applies it to the UL, and voila, the images reappear.
You can manage this by using the imagesloaded script, which will only call isotope once the images have finished loading.
Here's the isotope documentation on integrating isotope with imagesloaded.
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
I used the below code to get the Like button of Facebook. Now the things is, I would like to change the size of the Like button that is rendered.
I tried the width attribute which not not working at all. And I tried to override the CSS class that's used for the below code by facebook. But overriding the CSS class is also not working as well.
So tell me how can I increase the height and width of the Like button.
<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>
Or you could target the iframe with CSS and scale it by using CSS3. Something like this:
#fbiframe
{
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
Here's an example http://www.tinydesign.co.uk/like/
Facebook Like buttons are rendered in an iFrame by the Javascript snipped they provide, that iFrame is hosted by Facebook and the styles cannot be overridden.
Quite rightly so.... If you were able to change the size or style of a Like Button then we would see HUGE, bright red, flashing like buttons all over the internet - that would be awful. They're designed to be discreet, recognisable and non-obtrusive.
You can't change the style of this kind of Facebook buttons, but you can create your own ones if you use the JavaScript OpenGraph SDK, in this way you can use a div (with custom information) or use an image, basically customize it however you want it. The downside is that is not as straight forward as using the Facebook generated buttons, and that you require an App Id and that the user gives you some permissions, but aside of that you can use them as you please.
Create div class for iframe
<div class='like-btn'>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=105&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
now add this CSS
.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4}
Result:
Facebook Like Demo
If you don't want button at center, you can use float insteed of margin