I have a Webpart containing 12 tiles and there in one big row (with arrows to move left and right).
I want them as 3 across and 4 down... This is SharePoint 365/2016 I believe. Sorry not used SP since 2013... so have no idea if this is even possible.
** UPDATE **
When embedding a code I enter:
<style>
/*display rows of 3 items*/
.ms-promlink-body {
width: 480px;
}
/*hide the arrows when you have more items than viewable*/
.ms-promlink-header{
display:none;
}
</style>
This in the editor does what I want... when I save it goes.. I check 'EDIT SNIPPET' and get:
<style unselectable="on">
</style>
Any Ideas on getting this to work?#
UPDATE
These sites helped:
https://social.technet.microsoft.com/wiki/contents/articles/26522.sharepoint-2013-promoted-links-change-size-wrap-view-handle-click-event-using-jquery.aspx
http://www.balestra.be/2014/04/easy-way-display-promoted-links-tiles-multiple-rows.html
These sites helped:.........
https://social.technet.microsoft.com/wiki/contents/articles/26522.sharepoint-2013-promoted-links-change-size-wrap-view-handle-click-event-using-jquery.aspx
http://www.balestra.be/2014/04/easy-way-display-promoted-links-tiles-multiple-rows.html
Related
I am creating a SharePoint site. I want to customize the content. I am able to change color and font-size But I don't find any ways to change font-style.
Try to set font-style in SharePoint like this:
<style type="text/css">
.menu-item-text{
font-style:italic !important;
}
</style>
To have different font-style in SharePoint we can copy the text in the required font-style from another location and paste in SharePoint.
I'd like to render asciidoc pages with JBake that have the floating TOC in the left frame. However, JBake seems to only support putting the TOC at the top of the file.
If I 'bake' my site with pages that have the following document header syntax, the toc is on top.
= Software Engineer
John Doe
2019-01-01
:toc: left
:jbake-type: page
:jbake-tags: documentation, manual
:jbake-status: published
...
However, if I convert the same file using the asciidoctor cli, the toc renders on the left as expected. Is this a limitation of JBake, or am I doing something wrong?
:toc: left is not a valid option for embedded asciidoc. See [1] for details.
However, there is still hope, because you can change your stylesheet.
First, change your templates in order to add the classes "toc2 toc-left" to the body tag. This makes room for the toc on the left side.
Then copy the toc2-styles from the original aciidoctor stylesheet to the toc-style by copy & psting this into the header:
<style>
#media only screen and (min-width:768px){
#toctitle{font-size:1.375em}
#toc.toc{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto; padding-top: 60px;}
#toc.toc #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc>ul{font-size:.9em;margin-bottom:0}
#toc.toc ul ul{margin-left:0;padding-left:1em}
#toc.toc ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
}
#media only screen and (min-width:1280px){
body.toc2{padding-left:20em;padding-right:0}
#toc.toc{width:20em; padding-top: 60px;}
#toc.toc #toctitle{font-size:1.375em}
#toc.toc>ul{font-size:.95em}
#toc.toc ul ul{padding-left:1.25em}
}
</style>
this should solve your problem.
[1] https://asciidoctor.org/docs/user-manual/#using-a-toc-with-embeddable-html
I'm converting this html into a pdf using wkhtmltopdf 0.12.2.4 64-bit on Windows. I need to have a page break after every table as the next table will appear on the next page. This will be used for label printing so accuracy is key.
This is the resulting PDF
The first two pages are perfect but then it starts going south for inexplicable reasons.
I've tried the options presented in this thread and subsequent hyperlinked threads but nothing helped, I've yet to see an affect with page-break-inside: avoid !important;.
I'm using this css style for page break and it work fine.
<div class="page-break"></div>
Use this div in your html view, in your case after table.
and add style in your css.
<style type="text/css">
.page-break { display:block; clear:both; page-break-after:always; }
</style>
I want to change the position of Ribbon Tabs to the right in SharePoint foundation 2010 Master Page.
But i am not able to find any Controls related to Tabs(like:Ribbon.Tab) in "v4.master" using SharePoint Designer 2010.
similar like below image.
This page details the operation needed.
Here is a breakdown of the essential controls laid out to better
understand how it all works:
1. <SPRibbon PlaceholderElementId=”RibbonContainer”>
2. <SharePoint:SPRibbonPeripheralContent Location=”TabRowLeft”>
3. <SharePoint:SiteActions>
4. <asp:ContentPlaceHolder id=”PlaceHolderGlobalNavigation”> <SharePoint:PopoutMenu ID=”GlobalBreadCrumbNavPopout”> <SharePoint:PageStateActionButton>
5. <SharePoint:SPRibbonPeripheralContent Location=”TabRowRight”>
Applying information from here, the following seems to do the trick (add it to the master page)
<style>
.ms-cui-topBar2{
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */
border-bottom:1px solid #cad2db;
height:43px;
float:right;
}
</style>
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.