How can I target CSS to a particular sharepoint Page Layout file?
Tags: css,sharepoint,page-layout
Problem :
Is it possible to create a .CSS file for each SharePoint Page Layout I develop, or does the CSS for each possible layout in a master page need to be referenced in the master page?
IE is it possible to affect the <head> of the page a page layout is used in?
Solution :
Michal's solution can be further enhanced by including any links etc in the PlaceHolderAdditionalPageHead content placeholder tag on your layout page. This way it will be included properly in the head of the generated page.
e.g.
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<link id="Link1" href="<% $SPUrl:~SiteCollection/Style Library/mystyle.css%>" runat="server" type="text/css" rel="stylesheet" />
<SharePoint:ScriptLink id="jQueryCore" language="javascript" name="ui.core.js" runat="server"/>
</asp:Content>
CSS Howto..
So what we're going to want to do here is separate the this into two parts. We'll create a header at the top of the page and a body with...
Finally with experiments I found how to capture it. #top-menu .current a { color: orange !important; } Thank you everyone for your time and help. Much appreciated!...
Add class text-center before img. like this <div class="text-center"> <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg"> <img class="social"...
Just remove position:absolute if your ok with it and also remove transform property img { max-width: 480px; width: 100%; height: auto; display: block; margin:20px auto; } <body> <img class="one"...
Try this HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>LMUN - Home</title> </head> <body> <div class="header"></div> </body> </html> CSS body { margin:0; } .html { background-color: #FFFFFF; }...
UPDATE: As of August 31, 2015 this technique has been deprecated by Google. Google recent made it possible host a file publicly on Google Drive: Create a folder in Google...
The short answer is: don't bother trying to style file inputs The long answer: Completely controlling the styling file inputs have eluded us for years. They have components that fall...
Just change the value of transform: rotate(270deg) to transform: rotate(90deg) , then add transform-origin property for set a rotated element's base placement. div { width: 90px; height: 20px; background-color: yellow;...
Could I load the sub.html first and then have a function change the css file? Yes, and in this case you should. The reason it was not working before...
I switched out the div for a span (although an anchor link would probably be better if it's clickable) JSFiddle Demo HTML <ol> <li> <span class="button speaker"></span> Lorem ipsum dolor...
A solution using flex: http://jsfiddle.net/xgrnqxpr/3/ No changes are made to the html. Only the css changes, as shown below. .row { display: flex; align-items: stretch; } .span3 { display: flex;...
One option would be to save the edited CSS file and then compare it to your compiled CSS file, allowing you to determine what the changes are and add them...
Using :last-child: .services .span3:last-child .btn { background : green; } Using adjacent sibling selector: .services .icon_special + p + .btn { background: green; } ...
You Need to have a width defined for margin-left: auto; margin-right: auto; to work. Without a width defined auto margins don't work....
There are multiple ways One is to use attribute starts with selector - it will be better if you can enhance this with a element selector like $('div[id^="task-title-modal-"]') if all...
The img is supposed to have the vertical align property. <img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height="50" width="50" style="vertical-align:middle;"> ...
Those are both great solutions, but I would always advocate wrapping floating elements somehow. Take a look at how the wrapping div will fully span the height of it's children,...
You can set new value in the callback function of css(): $('#div1').css('top', function(index ,value) { return value + 20; }); For jQuery version 1.6+, you can use: $('#div1').css('top','+=20px') ...
try like so: box-shadow: 3px 3px 3px #777, -3px 3px 3px #777; (adjust hex colours to match your needs) Example - http://jsbin.com/ebemol/1...
First off, let me say that I'm against this for readability reasons - if you want to minify your CSS, there are plenty of tools available to do that within...
CSS: .part1 { background: url(bkgd.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; } JS: using jquery $(window).resize(function () { $(".part1").css("min-height", $(window).height()); }); $(document).ready(function ()...
try this out...My Example
solution is here I just changed main script like this: var inputLocalFont = document.getElementById("file"); inputLocalFont.addEventListener("change",previewImages,false); function previewImages(){ var fileList = this.files; var anyWindow = window.URL || window.webkitURL; for(var i =...
You will need to toggle the hover state inside the developer tools in order to view the CSS which is applied to the button on hover state. Adding this CSS...
Here's the syntax for loading style2.css only after style.css is loaded. function wpb_adding_styles() { wp_register_style('my_stylesheet1', get_template_directory_uri() . '/style.css'); wp_register_style('my_stylesheet2', get_template_directory_uri() . '/style2.css', array('my_stylesheet1') );...
Use the function for manipulate event and hide image of calendar as: var app = angular.module('StarterApp', ['ngMaterial']); app.controller('AppController', function($scope) { $scope.initDatepicker = function(){ angular.element(".md-datepicker-button").each(function(){ var el = this; var ip...
As Madara Uchiha already mentioned, this is not possible using only CSS. But you could use a data attribute like <span class="go" data-value="0,0"> 0,0 </span> and query it in CSS...
line-height: 1.4em; Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the...
I haven't seen a need to in ages (like Safari 2). Make a new question about the actual problem you're having and someone can probably tell you how to fix...
You have to apply the inline style to all of the divs you want on the same line. Spans might be better suited to your purpose since that's what divs...