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
Related
I would change the color of the menu items in wordpress. In this site https://www.modacapellishop.it/ I have four voices in the menu (Brand, Prodotti, Modacapelli Choice, Outlet) and I need to change the color of Modacapelli Choice (grey to blue). I added this code on the CSS file:
/* Change color menu Modacapelli Choice */
#menu-item-427 a {
color: #2976ce;
}
It work but just on desktop. On the mobile version in menu navigation sidebar the menu item "Modacapelli Choice" doesn't change the color.
How can I solve that?
Since this is an extremely specific case you can either .menu-item-427 > a { color: red!important; } or do .nav>li.menu-item-427>a { color: red; }
I would recommend the latter.
However both are not great, since it is bound to the ID. I would recommend making an ACF field for the page or the menu-element, then checking if it exists, and creating an inline style or adding a class if it is true.
The user can then also change the color of other elements he wishes to change without contacting you about it.
You would then add a class like this to your menu markup for example.
.is-highlighted-element {
color: red;
}
In Mobile view doesn't have #menu-item-427 this id. so replace with .menu-item-427
Try this css it's works
.menu-item-427 a {
color: #2976ce;
}
Vaadin text field has a default underline. I want to remove it.
I am using it inside of a Vaadin combo box.
In dev tools I can see that a div with the attribute part="input-field" is the cause.
Setting it to display: none; works in the browser.
I can't seem to target it with code. I've tried the following:
`[part="input-field"] {
display: none !important;
}
.vaadin-text-field-container [part="input-field"] {
display: none !important;
}`
Add Viritin add-on (use latest version) to your project, and configure:
TextField field = new MTextField().withSpellCheckOff();
OR
you can use the low level API to configure the html element:
new HtmlElementPropertySetter(yourTextInputComponent).setProperty(
"spellcheck", false);
I solved it by adding this module to the HTML file.
I placed this above the first script tag in the file.
<dom-module id="vaadin-text-field-module" theme-for="vaadin-text-field">
<template>
<style>
div::before, div::after {
display: none;
}
</style>
</template>
:before is the underline before the input has a value and :after is the line after.
Therefore this would disable both.
[part="input-field"] disabled the input and the value was not seen after selection.
Website: http://www.otislandscapedesign.com/
I am trying to remove the website title from the following selected pages/posts using id: category-portfolio, clients, about, contact.
I've tried the following css code unsucessfully:
.postid-576 .gk-logo-text.inverse > span { display: none; }
What am I doing wrong and how do I resolve this?
On the body tag, you'll see a class containing the page type (page, post, category) and its ID. For example on the Clients page, the class is .page-id-576
So for that specific page, the CSS that would hide the title is:
.page-id-576 .gk-logo-text.inverse > span {
display: none;
}
You would need to do the same for all pages, just look for the page type+ID class on the body tag of each page.
Your code is correct, you just need to add the !important keyword to override the existing style declaration in the stylesheet. Here is your final code:
.postid-576 .gk-logo-text.inverse > span {
display: none !important;
}
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.
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.