I don't know if you guys have messed with Squarespace Cover Pages but man they're hard to navigate code-wise. I'm doing a standalone promotional site that only requires a cover page and a video so I'm using the "Premier" cover page. However, for legal reasons I've got to have a footer with copyright info and a link to our privacy statement. My original idea was to use header injection with css ::after to include a full width div but I want the cover page to still take up the full screen and for the user to be able to scroll down to see the footer.
One example I tried to modify was https://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.html using this code:
<style>
#collection-559df309e4b026e5cd65a4b4
[data-slide-id="559df309e4b026e5cd65a4b5"]
.sqs-slice-group.group-social::after {
content: "some general text";
padding: 5px 0;
margin: 0 auto;
text-align: center;
font-size: 10px;
color: #fff;
}
</style>
I swapped out my collection ID and data-slide-id into this code but it put the "general text" block on top of the play button as well as in the upper-right corner of the screen. I've tried changing elements around to no avail - any help would be appreciated.
Here's what I would do, if I preferred to avoid the use of Javascript. Insert the following HTML into the "Code Injection" header area for the cover page. This will add a div that appears below the main content area, so that the user must scroll down to see it.
<div id="coverFooter">
<a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">© 2016 Your Company, LLC</span>
</div>
<style>
#coverFooter {
position: absolute;
z-index: 1;
top: 100%;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
box-sizing: border-box;
text-align: center;
padding-right: 30px;
padding-left: 30px;
/* Use this for right aligned text instead.
text-align: right;
padding-right: 60px;
padding-left: 60px;
*/
}
#coverPP {
white-space: nowrap;
}
#coverCR {
margin-left: 10px;
white-space: nowrap;
}
</style>
Here is a working example, which I will keep online for a week.
You will of course want to modify the href link, the copyright text, and perhaps the CSS rules such as colors and padding values.
Keep in mind that this is injecting the coverFooter div into the top of the body element, though CSS is making it appear at the bottom. This could encourage search engines to index the text inside the div as your page description in SERPS. Be sure to add a "Search Engine Description" under Settings -> Basic in order to help mitigate this, and keep an eye on your page description in SERPS. If this becomes a problem, keep the CSS in the header injection area, but replace the div HTML with Javascript which inserts the div at the bottom of the body element.
Finally, you'll either be linking to a privacy policy on another domain or you'll have to select "Add more pages" and add the privacy-policy page to the "not linked" section.
Related
Here is the jsFiddle that contains full code.
As you can see, the footer consists of three distinct sections:
4 columns of links
A <hr/>
A copyright notice
Links to the privacy policy and terms of service
I want to:
Center the footer (as you can see, currently it's lop-sided slightly to the right) and my attempt via center-block does nothing
As you can see, the footer is pushed right up against the bottom of the jumbotron. I want this to be a "sticky" footer, such that it is always pinned to the bottom of the viewable screen, even if there isn't a lot of content on the page (e.g., just a jumbotron).
I can get this stickiness by changing adding a position: absolute; definition to the .footer rule like so:
.footer {
color: rgb(176,205,249);
background: rgb(12,66,144);
border-top: solid 5px rgb(176,205,249);
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
However when I do this, the footer breaks out of the container and the browser displays a horizontal scrollbar - not desirable. Any ideas how I can accomplish both my objectives here?
I am doing SharePoint UI branding for my company clients. Most of the client would like to keep their footer always on bottom of the page(not sticky). When content is more it is going automatically bottom, but if the content is less, i want to keep the footer on the bottom of the screen. In normal HTML page i can able to achieve this using CSS. But in SharePoint till date i am using javascript to fix this issue.
Is there any way i can resolve this problem using only CSS in SharePoint 2013?
Solution for this is essentially the same as adding a sticky footer to a HTML page (as described here), except that it's more difficult to locate the correct positions for the divs in the seattle.master file in SharePoint 2013.
The sticky footer is created by adding 3 sections (wrapper, push, and footer) to the page using div tags. push goes immediately after s4-workspace div (main content area), and wrapper surrounds both main content area and push. footer immediately follows the closing tag of wrapper div.
CSS below is required to format the new divs.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both;
}
A couple of points to note are that footer and push must be same height, and clear property with value of both insures the footer extends across entire page in a multi-column layout.
This is a great write-up specifically about adding a sticky footer in SharePoint 2013.
If you have access to the masterpage of the solution you can use CSS to make the footer stick to the bottom of the screen.
1) find the div id="s4-bodyContainer"
2) add a div called id="footer" Your footer content here /div>
3) Add some CSS to make the magic happen:
#footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #1C537C;
color: white;
padding-top: 5px;
text-align: center;
min-height: 75px;
}
Look at this site if you want a demo, and look at the source code if you want.
https://amendeonline-public.sharepoint.com/Sider/default-en.aspx
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
I recently got a Ning account. I want to customize the site a bit more using their "Add Custom CSS" option I would like the ning site to look as close to this site as possible. More specifically the green horizontal bar across the top of the page, and the location and spacing of the header group. I'm currently using the following CSS on the ning site but can't figure out how to make the green horizontal bar span the entire width of the page. Any help, advise or direction would be greatly appreciated.
.mainTab-item.active, .mainTab-item.active > a {
color: #00a6ed;
}
.site-header {
height: 0px;
}
.header-container {
margin-bottom: 15%;
}
h2.module-name {
background-color: #88C540;
color: #FFFFFF;
font-size: 16px;
margin-top: -15%;
max-width: 100%;
padding: 30px;
text-align: center;
text-shadow: 2px 2px 0px #609F16;
}
Here is the Commonly used CSS classes and HTML (ning.com/ning3help/commonly-used-css-classes-and-html)
The problem here is that your container has a width of 960px which the green bar is included inside. Therefore when you set max-width or width of 100% it is relative to the container. E.g. 100% of 960px is 960px.
The only way around this would be to change the mark-up and take it out of .container in order for the percentage to be relative to the document.
Or another option is to absolutely position the div to take it out of the document flow. But I strongly do not advise that.
I had a look at similar questions, but i'm still stuck.
I am writing a website in ASP using MSVWD10.
For 1 page only, I want to have an image which is 960x700px that will have text displayed on top of it. This text will change frequently.
I tried to set this in the CSS, but the image seems to be duplicating itself.
Here is the CSS.
#about
{
background: url(img/about.jpg) no-repeat 0 0;
text-align: center;
background-color: #888888;
width: 960px;
min-height: 685px;
position: relative;
margin: auto;
}
Do i need to set a div on the content page?
Something like this should get you started:
HTML
<div id="outer"><div id="inner">Some text</div></div>
CSS
#outer{background:#ff0022;Text-align:center;width:200px;min-height:200px;}
#inner{margin:auto;}
You can see this in action here: http://jsfiddle.net/rvn5M/