How do I completely remove the sidebar from MediaWiki, and I mean in the sense that the content div occupies 100% of the width of the browser space? I've successfully implemented an extension where non-registered users do not have a sidebar or toolbox to begin with and hence the extra space now seems rather superfluous in such cases.
I'm trying to create my own skin from Vector and have tried so far to change the margin-left: 10em and corresponding tags in div#content and mw-panel in the skin's css file but no luck so far.
Why use CSS when you can edit the sidebar menu and have this stored in the database
Navigate to MediaWiki:Sidebar edit the page and remove the components you don't need
If you want to use CSS then you can try,
#sidebar{
display:none;
}
to see if it gives you the desired effect.
Or you can do what dreamweiver said and use JQuery
$('#side-bar').remove()
If, as you are writing, you are creating your own skin, then you simply do not have to print the sidebar! It is there because you have a piece of code in your skin printing it.
Search your skin code for $this->data['sidebar'], and you will find the loop that prints the sidebar.
However, I'm guessing that you skin has some kind of navigation,and rather than reinventing the wheel, I would recommend using the sidebar, with it's built-in functionality (possible to set from MediaWiki:Sidebar, etc), even if you chose to use it in another fashion. it doesn't have to be printed as a sidebar,just because that's the name -- it could be a top menu, a dropdown, ...
Related
I'm using CSS Hero which makes it easy for the element to break down.
On one page the wrapper, which bleeds over to other templates, shows this:
html>body>#wrapper>#main>#content>div
Since I only want the changes to be for this element on this page what would I do? I tried this:
.page-id-89 .html>body>#wrapper>#main>#content>div
Unfortunately, this did not work.
I've been trying to figure this out all day but have reached my code knowledge limit as I try to change the child theme to achieve this.
Here's an image showing what my site currently displays, next to an image of the desired result.
What I have VS What I want
I've tried using a few snippets of code I've found on the Stack Exchange that remove Woocommerce descriptions but with no luck. I'd like to remove the gap, the description title, but must keep the description box itself because that's what allows the tabs at the bottom of the page.
Here's a link to the page itself, I can find and isolate the gap and fix it using the html, but I've no idea how that relates to the CSS (I'm new to this) Link : https://folduptoys.com/product/space-garden-playset/
Here's how it's currently set up, I'm using the Salient theme, with the 'Product Tab Position' set to 'Fullwidth Under Images'.
Any help would be really appreciated. Thank you x
-Alex
Here's what will work but it's important to note that if other tabs show up, like 'Attributes' or 'Dimensions' that they'll be visible, but the `Description' tab won't be. So you'll have to consider whether you want it to work that way or not.
There's two things going on, first, the margins on the tab menu were big. 70px on top and 50px on the bottom. Seems too large in my opinion but I long ago gave up guessing on why Salient's devs do anything.
The second thing is to hide the 'Description' tab. If other tabs end up being present though, they'll show up in it's place.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
margin:0 auto;
}
#tab-title-description{
display:none;
}
If what you want is to entirely remove the tabs navigation, meaning that if other tabs are there, no one will be able to see/access them, so not a good idea unless you're also modifying the tab content layout so that they all display, then use this to hid that whole bar.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
display:none;
}
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.