ericdcreative.com
I'm trying to have the top golden gate bridge image hidden on all pages except for the homepage.
I believe the problem is that the header isn't the header. There is left nav bar that I believe to be the header. I think this because when I injected code into that individual s project page (not homepage) the left nav bar disappeared.
/*hide the banner from every page */
#banner-area-wrapper { display: none; }
/*show banner on home page */
#collection-5390e8b7e4b02f5a66f7e8c8 #banner-area-wrapper { display: block; }
Try This:
#banner-area-wrapper { display: none !important; }
#collection-5390e8b7e4b02f5a66f7e8c8 #banner-area-wrapper { display: block !important; }
Related
I want to retain rails_admin breadcumb as is but without a link to dashboard page. I am not clear on how to achieve this. I have tried looking into rails_admin codebase but I am not sure how to make this possible.
I figured out one way would be to hide it via css.
Adding following css in app/assets/stylesheets/rails_admin/custom/theming.scss hides the link:
ol.breadcrumb li:first-child {
display: none;
}
Had to add extra css to correct placement of separator /, this override rails_admin default before selector behaviour:
.breadcrumb > li + li:after {
content: "/ ";
padding: 0 5px;
color: #ccc;
}
.breadcrumb > li + li:before {
content: "";
padding: 0;
}
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
i'm trying to make up a different look and feel on my sharepoint site. I try to make my main content's width down to 960px under my form tag in sharepoitn designer. when I refresh the page at the first it renders the main content down to 960px but when the page fishished loading the main content stretches itself to the whole screen's width.
I found out that it's because of the onload script running in body tag. but I caanot remove this script because this work has side effects on page functionality.
the function is _spBodyOnLoadWrapper().
does anyone know this function ? or does anyone know how to come up with this problem ?
UPDATE #1:
My css code is as follows.. I added this class to the main Form on master page:
.mainContent
{
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
direction:rtl;
}
UPDATE #2:
I use v4.master template.
I have taken the ribbon out of the form tag. it's directly after body tag. because I wanted the ribbon to be streched at the top. but when i add this line of code
<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
the mainContent blows up. something at the header streches in the whole width and some panels at bottom remains 960px.
you got me interested so I recreated your issue. By default, the javascript will try to inline the width based on its calculations.
However, what you need is to set the class s4-notsetwidth on a wrapping container.
Here is what i did to fix your issue
Add this to the head
<style type="text/css">
#s4-bodyContainer {
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 960px!important;
margin-left:auto;
margin-right:auto;
}
/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
</style>
Then locate the s4-workspace (that's the immediate parent of #s4-bodyContainer and add class s4-nosetwidth. That should work for you.
Use these two references to achieve exactly what you want (not sure if you want ribbon aligned or not), Randy Drisgill post and Tom Wilson's post.
Is it possible to change body style when entering a full page preview in ckeditor 3. Maybe to set a different body style for full page than when it is not in a full page mode.
The reason for this is using ckeditor when viewing a web page on a larger screen with maximized browser... in that case it is very wide and it is hard to read the content. So I would like to add in body style (but only for full page mode) something like:
...
margin: 5%;
padding: 5%;
border: 1px dotted #666;
...
... that will give more text processor look to the content.
TNX!
When CKEditor is toggled to fullscreen mode it adds "cke_maximized" class to container span.
So you may apply styles for entire container span (body+toolbar) like:
.cke_maximized{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
or just for content body:
.cke_maximized iframe{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
Those are just examples and you may experiment and choose css selector that is more suitable for you .
UPDATE 1:
Sure, you can use javascript code if it is not enough for your purposes. You can use something like this:
var editor = CKEDITOR.instances.editor1;
editor.on("afterCommandExec", function(e){
if(e.data.name == 'maximize'){
// maximized
if(e.data.command.state == CKEDITOR.TRISTATE_ON){
// add special css class to body(e.editor.document.getBody())
} else {
// minimized
// remove special css from body
}
}
});
My content scrolls beneath the left sidebar instead of disappearing when it reaches the sidebar. Both the left sidebar and the bottom footer are fixed.
http://karpouzaki.com/finaltouch/
Any suggestions?
You need to change your background from transparent to opaque. Add these styles:
#sidebar {
background: url(../img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
height: 100%;
z-index: 1;
}
#footer {
z-index: 2;
}
That should do it - it gives your sidebar the same image background, but it looks like it flows fine into the rest of the page. It extends the height of your sidebar so that the rest of the content scrolls "beneath" it. And the z-index changes cause the sidebar to be above the content but below the footer.