I tried to hide the left Navigation bar and it works without problems. The only problem now is that when I go under: Site settings > User Permissions > People and Groups
It hides me my Groups I created there on the left side. Is there any possibility of hiding the left navigation bar in all sites and leaving "People and Groups" alone?
I made my own css file and used this to hide the Navigation bar:
MyOwnCss.css:
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0px }
Best regards
Andrew
Solution:
Try below css (instead of yours):
.ms-core-sideNavBox-removeLeftMargin { display: none } /* hide only quick links */
#contentBox { margin-left: 0px } /* make content take full page width */
Explaination:
Div with id sideNavBox is the main container of left navigation box. But it is not the actual container that holds the quick links.
Actually quick links is contained by another div with class ms-core-sideNavBox-removeLeftMargin which is a child div of div with id sideNavBox.
Now people and groups left panel items are not contained in this div with class ms-core-sideNavBox-removeLeftMargin but is instead contained in div above it with class ms-ql-additionaltopsection (as shown in above image).
So our solution above hides this actual quicklinks containing child div:
.ms-core-sideNavBox-removeLeftMargin { display: none } /* hide only quick links */
instead of parent container
#sideNavBox { display: none } /* hide left navigation box */
You can find my detailed blog on this matter here.
If you wish to remove the sidenavbox only in special cases then you should do the following:
1. Edit the Relevant master page in SharePoint designer (in my example below I edited the System Master Page.
Below example checks for form pages and removes the sidenavbox only there.
2. Add the following script (jQuery):
Code:
<script>
$(document).ready(function () {
if(window.location.href.indexOf("newifs.aspx") > -1) {
$('#sideNavBox').css('display', 'none');
$('#contentBox').css('margin-right', '0px');
}
if(window.location.href.indexOf("editifs.aspx") > -1) {
$('#sideNavBox').css('display', 'none');
$('#contentBox').css('margin-right', '0px');
}
if(window.location.href.indexOf("displayifs.aspx") > -1) {
$('#sideNavBox').css('display', 'none');
$('#contentBox').css('margin-right', '0px');
}
})
</script>
3. Save and check-in the Master Page.
Now, you will not need to edit every page containing a form to add content webparts and such. This will work on all pages specified in the script.
Related
I am building a roadmap kind of thing on my website, the plan is if you hover over the green dots some speech bubbles should pop up. .road1 is the class of the first green dot and .road1k is the card or speech bubble that should show up. .road1 reacts to :hover as it is making the dot bigger as intended but somehow .road1k is still not showing up.
Here is my code:
.road1 {
display: block;
}
.road1k {
display: none;
}
.road1:hover {
-webkit-transform: scale(1.1);
}
.road1:hover .road1k {
display: block!important;
}
And my site
http://rebitsoft.dev.rebitsoft.com/
You might change the language on the top right corner to see the green dots on the mainpage.
Your CSS definition is targeting elements with .road1k within elements that have the road1 class. In your html structure, road1k is not contained by a .road1 element. Please see https://stackoverflow.com/a/13444826/8083244 for better details.
Include JQuery Library (head script):
<script src="http://rebitsoft.dev.rebitsoft.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0"></script>
A simple JQuery solution would be something like (footer script):
$('.road1').hover(function() {
$('.road1k').show();
}, function(){
$('.road1k').hide();
});
Leaving as an answer because I don't have the rep to comment on the question.
Edit - added outFunction to hover
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
Here's my website http://tapash.atwebpages.com/
As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks
I have seen that you already use jQuery on your website. This makes it very easy to implement.
Give your image an ID for JavaScript:
<img src="LOGO_WHITE" id="test" />
Execute a function on scrolling:
$(window).scroll(function (event) {
...
});
When scrolling (your header turns white), a different image should be set:
$("#test").attr("src", "LOGO_BLACK");
But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
}
Your function should therefore look like this:
$(window).scroll(function (event) {
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
} else {
$("#test").attr("src", "LOGO_BLACK");
}
});
Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/
It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.
I've been using for some time a "BEM like" syntax in my projects. Recently, I was just re-reading some CSS articles when I saw this: https://en.bem.info/methodology/css/#single-responsibility-principle
Basically, instead of putting all the styles of header__button inside that class, it also relays on styles from button class. Aren't we in this case coupling the element of header with the button class? That means that if in the future, we're gonna change the button class, we also need to remember exactly where we're using this class.
In this example maybe it makes sense because you're trying to have the same styles, but what about a layout component? For instance, let's suppose that I have a Menu class that position some children vertically, and I have a Sidebar class that's also going to apply some style to those children. And we use them like this:
menu.css
Menu {
}
Menu__item {
}
sidebar.css
Sidebar {
}
Sidebar__item {
}
index.html
<div class="Menu Sidebar">
<div class="Menu__item Sidebar__item">
</div>
<div class="Menu__item Sidebar__item">
</div>
</div>
If we don't put all the code about how to position items in the Sidebar class and in the future we change some of this code from Menu, maybe the Sidebar class is going to be broken. In the other case, if we repeat code in both classes Menu and Sidebar we're violating the SRP (single responsibility principle) discussed at the begging of the question. That's what lately, in my projects, I've been favoring code duplication, so I would write all the code needed for a Sidebar into the Sidebar class.
But, what would be the best practice here?
There's also a chapter which partially answers your question: https://en.bem.info/methodology/css/#external-geometry-and-positioning
In your example I'd day Sidebar should be responsible for Menu positioning but it shouldn't know anything about Menu__items. And Menu in its turn should not know anything about its own positioning but should position its items inside.
If you really need to change something in Menu__item positioning when it's inside Sidebar use nested selectors:
.Menu {
}
.Menu__item {
}
.Sidebar {
}
.Sidebar .Menu__item {
}
I think, you should decide, what is it: menu or sidebar, and use one of these classes. If blocks are different a bit, you should use modifiers. If it is impossible to do this with modifiers, use two different classes.
Using modifiers:
// your menu
.menu { }
.menu__item { }
// your sidebar
.menu--some-modifier { }
.menu__item--some-modifier { }
//
.sidebar__menu {
// set some styles (margins, positioning) for .menu
}
Two independent different blocks:
// your menu
.menu { }
.menu__item { }
// your sidebar
.sidebar { }
.sidebar__item { }
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.