I am using the predictive search plugin to search/show my products for my woocommerce website.The results page shows the products each product one row.I would like to show them for example 3 products each row.I tried
.ps_list_items_container {
display: table;
width: 100%;
}
#ps_list_items_container > div {
display: table-cell;
width: 25%;
}
#ps_list_items_container > div:nth-child(2) {
width: 50%;
}
as well as other css solutions but i cant make it work.
Does anyone know why?
Thanks a lot!
Related
(SharePoint online, SPFx, modern website)
My end goal is this :
I want to customize some visual aspects of a SharePoint page (title, left nav bar, fonts, etc.)
I want it to happen only on one page
The solution I chose for that was to create a SPFx web part, as opposed to an extension, which I believe would apply to the entire site. I'm simply going to put the web part on that one page and be done with it.
My issue is :
The CSS gets applied properly to the part of the DOM that represents my web part
the CSS does NOT seem to be applied (at all) to anything else from the page.
For example, I don't see this take effect or even appearing at all in the rendered page :
#spLeftNav {
color: red !important;
}
However, this works as expected :
.myWebPartFooBar {
.container {
color:red !important;
}
}
Question : Is there some sort of sanitation mechanism that I'm missing? Does SharePoint intercept that CSS and prevent it from being applied to anything outside of my web part? I don't see any trace of such protection system in online literature but maybe it's common knowledge.
I had similar problem. The problem is that if you are using scss, compiler translates those css tags #spLeftNav into custom webpart only tags to prevent css mismatch on entire site.
To override it put those global css tag in global variable (this will prevent compiler to change it).
My example of "global css":
:global {
#O365_MainLink_Help {
display:none;
visibility:hidden;
}
.InfoPane-section.InfoPaneSection--properties {
display: none;
}
.o365cs-nav-bposLogo .o365cs-nav-brandingText {
display: none;
}
.o365cs-base.o365cs-topnavBGColor-2 {
background-color: #17375e !important;
}
.o365cs-base .o365cs-nav-rightMenus {
background-color: #17375e !important;
}
#spPageChromeAppDiv,
.ms-Nav
{
background-color: #eeece1 !important;
}
.ms-FocusZone .ms-Nav {
top: 0px !important;
}
#O365_NavHeader button#O365_MainLink_NavMenu,
#O365_NavHeader button#O365_MainLink_NavMenu_Responsive,
.o365button .o365cs-nav-brandingText,
.ms-searchux-searchbox {
display: none !important;
}
.CanvasZone:not(.CanvasZone--fullWidth) .ControlZone {
padding: 0px !important;
}
input:not([type]), input[type=email], input[type=file], input[type=password], input[type=text], select, textarea {
background-color: #eeece1 !important;
border-color: #c8c8c8 !important;
color: #17375e !important;
}
.ms-CommandBarItem-link[disabled] i,
.ms-CommandBarItem-link[disabled] span
{
color: unset !important;
}
.ms-compositeHeader-mainLayout {
height: 77px;
}
div[class^='commentsWrapper_'] {
display: none;
}
span.ms-siteHeader-siteName {
white-space: normal !important;
}
.ControlZone {
margin-top: 0px !important;
}
.ControlZone-control,
.ms-SearchBox,
.ms-BasePicker,
.ms-SearchBox-field {
background-color: #eeece1 !important;
}
.commandBarWrapper .ms-CommandBar {
display: none;
}
.ms-compositeHeader {
padding: 0 32px 0px;
}
}
I've been working on a website that was built in WordPress using bootstrap templates. This website was not originally built by me, so I have troubles with it from time to time when implementing changes. The website uses yarn to build a 'dist' folder from node.js modules and elements contained within the theme folder. The stylesheets are scss files. After the build process finishes, it has created a 'dist' folder that is to be uploaded to the theme folder, which contains all the combined stylesheets, images, etc.
I'm having issues with a form that is created via contact form 7 and I'm not sure if this is an issue relating to the build process using yarn or something else. The issue is with a checkbox that I've added to the form. It works as expected on desktop displays, but when the site is viewed on an iPhone (via Chrome, Safari and Google browser apps) the checkbox tick doesn't appear on click.
Just for clarification, the last few websites I have built myself, that have included a form with a checkbox or checkboxes, are working perfectly across desktop and IOS devices. I use css stylesheets rather than scss, but I have used all the same styles on both the websites that are working fine and the one that is not working on IOS, so I really can't see why the checkbox is not working on mobile. I have also tried applying a couple of other fixes that have also not helped resolve the issue.
Please see below for the html code and scss code for the checkbox section of the website:
<div class="af-field af-field-type-checkbox af-field-checkbox acf-field acf-field-checkbox">
<div class="af-label acf-label">
<label for="brochure-pack-checkbox">Please send me a Giraffe Equity Release brochure pack</label>
</div>
<div class="af-input acf-input">
<div class="acf-input-wrap">
<span class="wpcf7-form-control-wrap brochure-pack"><span class="wpcf7-form-control wpcf7-checkbox" id="brochure-pack-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="brochure-pack[]" value="Please send me a Giraffe Equity Release brochure pack"><span class="wpcf7-list-item-label">Please send me a Giraffe Equity Release brochure pack</span></label></span></span></span>
</div>
<p></p></div>
<p></p></div>
.acf-field-checkbox {
.wpcf7-list-item {
position: relative;
margin-left: 0;
width: 100%;
display: block;
}
.wpcf7-list-item-label {
font-size: 2rem;
font-weight: 600;
line-height: 1.5em;
margin-left: 35px;
display: block;
cursor: pointer;
}
.wpcf7-list-item-label:before {
position: absolute;
left: 0;
width: 28px;
height: 28px;
border: 1px solid #b79c68;
border-radius: .25rem;
display: block;
}
.wpcf7-list-item-label:after {
position: absolute;
content: '\1F5F8';
font-size: 30px;
color: #b79c68;
width: 0px;
height: 0px;
top: 2px;
left: 2px;
opacity: 0;
}
input[type=checkbox] {
display: none;
-webkit-appearance: checkbox;
}
input[type=checkbox]:checked {
+ span.wpcf7-list-item-label:after {
opacity: 1;
}
}
label {
margin-bottom: 0;
cursor: pointer;
display: block;
}
}
I appreciate there may be some styles applied that are not needed, but they are not affecting the checkbox functionality. Once I have found the right solution to get this working for this specific website, I will clean up the styles applied and remove any that aren't necessary.
If anyone has any idea why the checkbox could be not working on this website, when they work fine on the others I have built, I would really be grateful for any hints or advice you could give.
Thanks in advance, if you need anymore information about the issue, then please ask and I'm sure I can clear up anything needed.
For anyone that is interested or has a similar issue, the cause of this problem was this:
.wpcf7-list-item-label:after {
content: '\1F5F8';
}
For some reason that code rendered a tick on desktop but not IOS. Changed to another tick code and resolved the issue.
In my search for a responsive Instagram feed grid, I settled on the following plugin:
https://github.com/cmaseattle/instagram-grid
It was the only one that I found that fetched the like count for each photo.
However, I'm totally lost on how to configure it to fetch the URL of each instagram item (not the direct img link) and then reference that by linking each of the grid items to their appropriate instagram page.
For anyone who is curious, I figured this out with an amalgamation of code snippets
Changed line 116 from
like.innerHTML='<img src="http://cmaseattle.github.io/instagram-grid/insta-heart.png" class="insta-heart">'+d.data[i].likes.count;
to
like.innerHTML='<a target="_blank" href="' +d.data[i].link +'"><span class="link-spanner"></span><img src="http://cmaseattle.github.io/instagram-grid/insta-heart.png" class="insta-heart">'+d.data[i].likes.count;
.link-spanner{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
I also added the following styles to the likes hover div
.insta-likes {
height: 100%;
width: 100%;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.
Hi guys im trying to add a delete icon in my filter. So i use filterStyle class to point to a function. and it works fine i see the icon when i click it the field clears. However the filter doesnt filter anything when im trying to search.<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflo/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
}
</style>
my function is like $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').focus();
}));
and called in my filter filterStyleClass="deletable" i understand my filter uses an ajax call is this affected anyway by this.
This really doesn't look like JSF at all.
You can check out the primefaces filter example.
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml