I installed eshop plugin in wordpress and I've beed told I should hide the span to hide the title
this is the code
<ul class="eshop rand"><li class="eshop-product-127"><a class="itemref" href="http://localhost/sab/to-40-gr-mix/"><img ilo-full-src="http://localhost/sab/wp-content/uploads/2013/07/DSC_4171-150x150.jpg" src="http://localhost/sab/wp-content/uploads/2013/07/DSC_4171-150x150.jpg" class="attachment-150x150 wp-post-image" alt="DSC_4171" height="150" width="150"></a><span>to 40 GR MIX</span>
I want to hide the span inside that ul with that class (eshop rand)
remember I can't assign an id to that span
thank you
You could use this css class
.eshop.rand span
{
display: none;
}
or
.eshop-product-127 span
{
display: none;
}
Related
Is it possible to have a web part in SPFx which has (for example) a property "divWidth"
and it be a numeric value in px.
Then then a div renders with the width specified in the web part?
I know you could probably do it with inline styles but can you pass the value to an SCSS file?
Thanks P
Create the CSS Variables, for example based on the web part properties
let styleBlock = { "--tileWidth": this.props.width + "px",
"--tileHeight": this.props.height + "px" } as React.CSSProperties;
render it like:
<div className={`${styles.linkTiles} ${styles.tileCont}`} style={styleBlock}>
css will be like:
.linkTiles {
&.tileCont {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.tile,
.tileFlip,
.tileFront,
.tileFront>img,
.tileBack {
width: var(--tileWidth);
height: var(--tileHeight);
}
Using CSS Variables to Morph Your SPFx Design at Run Time
Hello I'm new to Hybris Development,
I want to create a component or a widget to switch between Grid and List View in products page template, in Smartedit there is a productList and a productGrid page types, I want to somehow combine both of the page templates together, whether by adding a new widget or building a whole page template the ground up.
Thanks,
Would you consider doing it with js and css ? You can add some ui element and toggle classes for product-grid section. Then write specific css styles for that class to make it look like list/grid.
CSS:
/* product items - depends on your class names */
.js-list-view .product-item {
width: 100%;
}
.js-list-view .product-item a, .js-list-view .product-item .addtocart {
width: 25%;
display: inline-block;
}
.js-list-view .product-item .details {
width: 50%;
display: inline-block;
}
/* button-switcher */
.list-view-btn-text, .grid-view-btn-text {
display: none;
}
.product-grid-toggle:not(.grid-view-btn) .list-view-btn-text {
display: block;
}
.product-grid-toggle.grid-view-btn .grid-view-btn-text {
display: block;
}
JS
$('.product-grid-toggle').on('click', function () {
/* add js-list-view class to the wrapper of product items */
$('.product-grid').toggleClass('js-list-view');
/* switch text for the button */
$(this).toggleClass('grid-view-btn');
});
html for Switcher - you can create productListSwitcher.jsp and then put it in the impex to the slot you need. Or add the button directly into the the jsp file with product list. Depends on your project structure.
<button class="btn product-grid-toggle grid-view-btn">
<span class="list-view-btn-text">List view</span>
<span class="grid-view-btn-text">Grid view</span>
</button>
I want to retain rails_admin breadcumb as is but without a link to dashboard page. I am not clear on how to achieve this. I have tried looking into rails_admin codebase but I am not sure how to make this possible.
I figured out one way would be to hide it via css.
Adding following css in app/assets/stylesheets/rails_admin/custom/theming.scss hides the link:
ol.breadcrumb li:first-child {
display: none;
}
Had to add extra css to correct placement of separator /, this override rails_admin default before selector behaviour:
.breadcrumb > li + li:after {
content: "/ ";
padding: 0 5px;
color: #ccc;
}
.breadcrumb > li + li:before {
content: "";
padding: 0;
}
I'm trying to display a sidebar on the left side of a google map. The sidebar width is 380px and I need the map canvas div to take up the remaining width but I have no luck so far accomplishing this.
The map div must have width and height declared, otherwise it doesn't work.
I was trying to find a width 100% minus X pixels solution but no of them is working in this case.
Does anyone has an idea how to do it?
Thanks.
I tried this, but it looks that it doesn't apply to the map canvas div:
$(document).ready(function(){
$(window).width();
$(document).width();
var width1 = $(document).width();
var width2 = $("#left").width();
var canvas_width = width1 – width2 + "px";
$('#map_canvas').width = canvas_width;
});
I had exactly the same problem, but managed to fix it.
For example, if your sidebar div is 200px wide set an extra div container around the div in which Google Maps writes its content.
For that div-container set
position: absolute;
left: 200px;
right: 0;
height: 100%
Works like a charm, also when resizing. Let me know if this solution doesn't match your situation.
I am doing this (also sidebar + GM) with relative width and min-widths. I can toggle the sidebar visible / invisible. In order to save the original values see: Getting values of global stylesheet in jQuery ).
Btw, I think you assignment in js is wrong, it should be element.**style**.width or in jQuery $("#id").width(value):
How to set width of a div in percent in JavaScript?
The styles:
#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}
#sideBarLocation div {
display: inline;
}
#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}
with HTML:
<div id="sideBar">
<!-- tab location starts here -->
<table id="sideBarLocation" class="sideBarStandard">
...
</table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>
Is it Possible to remove header from DOJO Grid?
In your css, do this:
.dojoxGridMasterHeader { display: none; }
Hope this helps.
it is better to specify in which grid you want to remove header, for example by using id of your parent div:
#myDiv .dojoxGridHeader {
display: none;
}