My company just converted to SP 2013 and I am now trying to create a new list. I have been trying to customize my header to have the following attribute:
Wrapped Text
Font Color Blue
Text Allignment - Center
Vertical alignment - bottom
I have found a script that allowed me to wrap the headers on all of the columns and I tried adding to it the color and text allignment. What I keep running into is that it is only updating the color and allignment on my one header that is not filterable. I have tried to look up what each of the .ms items mean because I am assuming that is my issue, but I can not seem to find the answer to that question. Any help would be greatly appreciated!
<style>
.ms-vh, .ms-vh2-nofilter, .ms-vh2-nograd, .ms-vh2, .ms-vb{
white-space: normal;
color:#0000ff;
text-align:center;
vertical-align:text-bottom;
}
</style>
I have done some test and this is the css file
---------- Table Rows ----------*/
ms-vh-div,ms-vh2-nofilter,ms-vh-div{
background: #2E4C70;
}
/* Set background for every row */
.ms-listviewtable > tbody > tr {
background: white;
}
Set border for every row */
.ms-listviewtable > tbody > tr td{
border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
}
Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #E2E3E5;
} Table Header Row
Remove background set in SharePoints general data table style */
.ms-listviewtable tr.ms-viewheadertr {
background: transparent;
width:100%;
}
.ms-viewheadertr,
.ms-listviewtable {
width:100%;
}tr.ms-viewheadertr > th.ms-vh2-nograd { color:white;}
Modify background color */
tr.ms-viewheadertr > th.ms-vh2-nograd,
tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
tr.ms-viewheadertr > th.ms-vh, /* Text */
tr.ms-viewheadertr > th.ms-vh2 ,
tr.ms-viewheadertr >th.ms-vh2-nofilter,
tr.ms-viewheadertr >th.ms-vh-div/* Text */ {
background: #2E4C70;
}
.ms-viewheadertr {
width:100%;
}
Modify background color on hover */
tr.ms-viewheadertr > th.ms-vh:hover,
tr.ms-viewheadertr > th.ms-vh2:hover {
background-color: #273C51;
border-color: #273C51;
}
Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
color: grey;
}
Modify font color on hover */
.ms-viewheadertr a:hover,
.ms-viewheadertr div:hover {
color: blue;
}
more details heresharepoint experience
Add a Script Editor web part, and insert this:
/*Choose your background colour*/
.ms-viewheadertr{
background:#00426A;
}
/*Choose font style*/
.ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink {
font-weight:bold;
color:white;
font-size:1.05em;
}
</style>
With thanks to Nate Chamberlain:
https://natechamberlain.com/2018/07/20/customize-styles-formatting-of-sharepoint-list-column-header-rows/
The formatting does not apply to multiple line of text field.
Related
I am using the Sphinx "cloud" theme. The main body of text has "justified" text alignment, and I want to turn that feature off. All options for alignment that I see refer to table elements, which is not what I want.
I tried adding an element to the _static/style.css file:
body {
text-align:left;
}
but this did not un-justify the text.
TIP: Don't guess at the CSS selector, inspect the source code or through the web.
In your custom override, you will need to override every instance of text-align: justify; in the theme. I found three.
div.body p {
text-align: justify;
margin: 1.5em 0 1.5em 0;
}
div.body li, div.body dd {
text-align: justify;
}
table.docutils .justify-align {
text-align: justify;
}
This ought to do it:
div.body p,
div.body li,
div.body dd,
table.docutils .justify-align {
text-align:left;
}
I have the following problem: when toggling custom full-screen mode from the Web application, the surrounding background is black and I want to change it (as the actual background).
Details come below.
1) Javascript code to toggle fullscreen and focus an inner element
function toggleFullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
$(function () {
$("#fullscreenButton").click(function () {
var actualBody = document.getElementById("#FullScreenElementId");
if (actualBody) {
toggleFullScreen(actualBody);
}
});
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenChange MSFullscreenChange", function (/*data*/) {
var actualBodyJq = $("##FullScreenElementId");
if (actualBodyJq) {
actualBodyJq.toggleClass("fullscreen-style");
}
$("body").toggleClass("fullscreen-body-style");
});
});
2) Css styles
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
}
.fullscreen-body-style {
background-color: rgb(255, 255, 255) !important;
}
Switching to full-screen mode for the div works, but applying the style for the body seems to be ignored. For the shown image, I can see this computed style for background:
Question: is it possible to control how the browser (Chrome, Internet Explorer 11+) displays the "missing area"?
I have found a way to trick the browser (Internet Explorer) not to display the black area anymore. I have changed div style to use the whole viewport with the following style:
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
/* this is remove black area in IE */
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
}
I have been trying to solve my grid and I'm not sure why my columns are not stacking up next to each other. when I am making a div with a container and inside it a row and then 12 columns the columns are taking the full width then staking below
$screen-width: 1147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: ( $i /$number-of-columns ) * 100%;
background:#ccc;
float: left;
margin-left: $gutter;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin:0px auto;
padding: 0 $padding 0 $padding;
background: blue;
#include clearfix;
}
.row {
width: 100%;
margin: 0;
background: green;
#include clearfix;
}
You are dividing the available space by the number of columns, but then you are adding a margin to the left of each column So if you have 10 columns then each column is 10% of the total width + gutters. This adds up to more than 100% and is pushing three of your columns onto the next line.
Most grid systems solve this in one of two ways...
A) use css calc() to calculate the width of each column by dividing the space by the number of columns then deducting the gutter. E.g. calc(10% - 30px);
B) Use padding on each column to create the gutters and add it equally on both sides. E.g. padding:0 15px; This will give you an even spread of the columns and require no calculations but the downside is you'll need -15px margin on each side of your container to accommodate it and you'll need an extra HTML tag inside each column.
So I have managed to add that into a function, But now I have left margin what seems to be happening, which I'm not sure why is that, I have tried, things like putting a negative margin on the row.
$screen-width: 2147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#function grid-width($cols, $has-gutter:false) {
#if $has-gutter {
#return calc(((100% / #{$number-of-columns}) * #{$cols}) - #{$gutter});
}
#else {
#return calc((100% / #{$number-of-columns}) * #{$cols});
}
}
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: grid-width(#{$i}, true);
background:#ccc;
display: inline-block;
margin-left: $gutter;
float: left;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin: 0px auto;
height:100px;
background: blue;
#include clearfix;
}
.row {
width: 100%;
height:50px;
background: green;
#include clearfix;
}
I have an <ol> element to which I'd like to apply a background color. I don't want the background color to cover the entire width of the <ol>'s parent but rather just its contents + some padding.
Setting {display:inline-block;} on the <ol> basically does the trick but somehow Google Chrome decides that the <ol>'s width should be 462px. This causes the third <li> to break over two physical lines which is neither necessary nor desired.
Where do the 462px come from? How can I keep the third <li> on a single line? I don't want to set the <ol>'s width to a static value since I've many such <ol>s. Using {float:left;} rather than {display:inline-block} triggers similar behavior but also forces me to clear whatever element comes after the <ol>. Giving the <ol> a width of auto doesn't seem to change a thing (I suspect it already was auto). Thank you in advance for any suggestions.
Try putting white-space: nowrap onto the li elements
Try to reset your html project with this css code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before, blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
Otherwise, you can override this value like this:
Css:
ol,li {
width: 100% !important;
}
I’m not a fan of the collapsed 3 line nav button when bootstrap collapses for smaller viewports. Is there a way to get the navbar collapse to a select drop down menu, as well as place it somewhere else on the page, other than in the top right? Just like this: http://filamentgroup.com/examples/rwd-nav-patterns/
Looking at what happens on the filamentgroup site, you can see that below a certain width, the body gets the class nav-menu and removes if when sized larger. This is their rwd-nav.js complete with comments:
jQuery(function($){
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function(){
var nav = $(this),
items = nav.find('a');
$('body').removeClass('nav-menu');
// when the nav wraps under the logo, or when options are stacked, display the nav as a menu
if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {
// add a class for scoping menu styles
$('body').addClass('nav-menu');
};
})
// toggle the menu items' visiblity
.find('h3')
.bind('click focus', function(){
$(this).parent().toggleClass('expanded')
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function(){
$('.nav-primary').trigger('testfit');
});
});
Then in their rwd-nav.css, this repositions based on width
/* Media queries
------------------------------ */
#media screen and (min-width: 640px) {
.nav-primary,
.nav-primary ul {
float: left;
}
.nav-primary ul {
float: left;
}
.nav-primary li {
float: left;
font-size: 1.5em;
border-bottom: 0;
}
}
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
}
Hope that helps!