I have a wordpress site and am using the plugin 'Yet Another Social Plugin' to add social buttons at the end of each post. The problem is on my mobile site which I have customized with WP-Mobile is showing these buttons. I am able to remove all of them except the G+ button. I am able to get it removed using visibility: none; when I do a live edit inside of Chrome developer console but when I apply that in the css it is ignored and I am not even seeing it when I view that tag/class. Is there some trick or something weird about the +1 button that I am missing?
You can view a picture of the issue here, https://dl.dropboxusercontent.com/u/11217802/Screenshot_2013-04-28-00-07-03.png
and a good 'test page' is here,
http://jrummy16.com/test/app-manager-overview/
Our test site is currently jrummy16.com/test. I am just spoofing my User agent to view it on my computer.
Edit
Sorry, I didn't see that you were talking about your mobile site.
In this case, add
.plusone{
display: none;
}
to your CSS - it will hide the entire iframe.
As your G+ "a" as no ID nor class, edit your css to add
.socialmedia-buttons a:nth-child(2) {
display: none;
}
Consider using display:none; rather than visibility:hidden;, as the visibility property holds the placeholder of your div while display suppress it of the flow.
Visibility:hidden; =>
This should do the trick (tried with Chrome inspector on this page).
Related
I am using the following code to toggle my mobile navigation
html
<p>toggle</p>
I have a function which attaches the proper code/css and just need it to act as a button but not go anywhere (hence the '#').
However I want nothing to show up when it clicks/hover, since the browser usually indicates where the link is going, I don't want that (or anything else) to show
As Michael suggested, why not try using a button instead? Your code would look like this
<button class="toggle-nav"><p>toggle</p></button>
All you'd have to do is change any CSS/JS you have to reference the button instead of an a tag.
You may style the link with pointer-events.
.toggle-nav {
pointer-events: none
}
<p>toggle</p>
I am using video.js 5.7.1 on a single video player within a web page. The video element contains a "captions" track element. When the user clicks the CC button in IE 11, they see a menu containing the following:
captions settings
captions off
english
I would like to completely remove the first menu item "captions settings" so that the menu only shows "captions off" and "english".
I'm sure it's something simple, but I can't seem to find how to disable/remove the "captions settings" menu item. What needs to happen to remove this option from the CC button on the player?
For now, I'm setting the track kind to "subtitles" instead of "captions", to avoid the settings menus entirely.
What I ended up doing was adding the following CSS after the video.js CSS:
/* Prevent CC settings menu item from displaying */
.vjs-texttrack-settings {
display: none;
}
This accomplished what I needed; the captions settings menu item no longer appears on the CC menu. This works in 5.7.1 and 5.8.8.
In case anyone comes here looking to hide all of the caption settings this should work:
.vjs-caption-settings {
display: none;
}
I posted this same question to video js forum on github:
https://github.com/videojs/video.js/issues/3202#issuecomment-202540661
The Videojs folks posted solutions - here is the solution I used based on theirs:
after the player started up, I made that problematic area invisible with css:
$(".vjs-texttrack-settings").css("display","none");
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
Hi I'm using SquareSpace V6, with the Momentum template.
in this template there's an option to have the style of your gallery "full-bleed" or simply centered, but this setting is global and it applies to all the galleries on the website.
I'm trying to create some CSS code that will override the default and allow me to have a "full-bleed" gallery in the home page and the home page only, all the other ones will be left centered.
I've been inspecting the code with Chrome and I thought I had it, but nothing changes once I add my code to that specific page:
#collection-type-gallery { gallery-style:Full Bleed; }
Does anyone has experience with SquareSpace?
not exactly the answer I'm looking for.. but I found a workaround.
I created an empty page and added a background (with a snippet of code) to only that page.
(it only works if you want 1 single fullscreen image)
#collection-51b4ef7de4b0_use_your_own_here_62dc3410aaf3
{
background-image:url(http://static.squarespace.com/static/../background2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
You can call out the homepage specifically by using:
.homepage { }
or you can use a source code inspector and find the unique id as a class on the element and call out any individual page like so:
.collection-51b4ef7de4b062dc3410aaf3 { }
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.