HELP ME please.
On my Squarespace website I would like to duplicate a portfolio entry and retain the design settings of it. In particular, the background image. The portfolio entry “2050/1” has been setup correctly using code. There is an artwork background that runs behind the portfolio gallery and the footer. When I click ‘duplicate’ in the settings for this entry it creates a new portfolio entry but it has a white background, see “2050/1 (copy)”. Is there a way to duplicate the page, and many more pages, without having to individually add code? Please refer to links attached.
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9-3pcl8
Thanks!
The following CSS, added via Custom CSS / CSS Editor will achieve that.
.collection-60b8480265d7df4bcf8f97ed .page-section:first-child .section-background:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
transform: scale(100%);
background-image: url(https://images.squarespace-cdn.com/content/v1/601a2e3ab7c076212fdf7cc4/1627276381665-TKPRGQK0WMFOD4SMWKS0/Paintings_tall+test.jpg?format=2500w);
}
.collection-60b8480265d7df4bcf8f97ed .page-section:last-child .section-background:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: absolute;
background-attachment: fixed;
transform: scale(100%);
background-image: url(https://images.squarespace-cdn.com/content/v1/601a2e3ab7c076212fdf7cc4/1627276381665-TKPRGQK0WMFOD4SMWKS0/Paintings_tall+test.jpg?format=2500w);
}
Note that the URL that is used is the image URL to the image that you uploaded as the background image to the section in the initial post. Instead, you could upload the image via the "Manage Custom Files" option, and then use the URL to that image instead.
Related
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
I'm using iViewUI for my Tag component, but I wanted to customize its size and where the "X" close button is.
I was able to change the width by simply adding a class to the Tag, but for some reason, even i'm trying to override also its children icon, is not responding to the change at all, is not applying it. Checked on browser, not adding it there either.
This is what I've done so far:
<Tag class="Badge-tag" color="warning" closable #on-close="removeTag">{{ badge }}</Tag>
Then on the less file I added the following:
.Badge-tag {
width: 60px;
position: relative;
.ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I had no luck at all. I don't know why is not setting it.
If you put above css as global css, I think it should work.
I create a demo on jsfiddle here, please check
If you use scoped css, you can try using deep selector
.Badge-tag {
width: 60px;
position: relative;
/deep/ .ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I have a store https://firefits-com.myshopify.com and Fashe colorlib theme is installed.
Issue
The product name is clickable and redirects me to the product detail page but the images are unclickable and do nothing when i hove mouse to it.
What I want
I want the product images that clickable and redirect me to product page as the product name do.
I have searched a lot on Shopify forums, their e-commerce university and theme help but none of them help me.
Your CSS is making things difficult. The grey overlay is in front of the go to page link wrapping the image so the link is unclickable.
Adding something like this your assets/custom.css stylesheet starts to address the issue but you have a bunch more things to do so that the overlay functions the way you want it to.
.block2-img.wrap-pic-w {
width: 100%;
height: 0;
padding-top: 133%;
}
.block2-img a {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: transparent;
margin: 0;
}
I have to make some changes on the ui. Now I try to replace the built-in sensenet logo, but I am stucked. I tried to change /Root/Global/images/sensenetlogo.png but there is no option to replace it.
The logo is defined in a css file (/Root/Skins/sensenet/styles/skin.css)
Search for this part:
.sn-layout-inter-index .sn-slogen {
position: absolute;
left: 5px;
top: 13px;
font-size: 16px;
color: #fff;
font-weight: normal;
background: url(/Root/Global/images/sensenetlogo.png) no-repeat;
padding-left: 150px;
padding-top: 10px;
padding-bottom: 10px;
}
and change the background-image url. This will will replace the logo on the homepage.
Replacing the logo on other subpages change the logo url the same way at
.sn-layout-intra .sn-layout-head .sn-logo, .sn-layout-inter .sn-layout-head .sn-logo, .sn-layout1 .sn-layout-head .sn-logo {
...
}
If you installed sensenet from source make sure that you changed the .css file both in the file system and through sensenet's admin surface (Content Explorer).
Here is the site-to-be (work in progress still)
http://www.fairhavenstorage.com/DRAFT
On a desktop screen it's fine, but on a mobile device, the site title and description do not budge. I added some custom CSS to allow the logo to display beside the site title - here is what I entered:
#logo .site-title, #logo .site-description {
display: block !important;
}
.site-title {margin-top: 26px;}
#logo img {
float: left;
margin-right: 20px;
}
#logo {
float: left;
width: 800px;
}
And for the image on the right side of header, I entered this:
.header-widget {
float: right;
width: 200px;
margin-top: 10px;
}
It's not looking good on my iPhone and I'm unsure what to do. If anyone can suggest a fix, that would be greatly appreciated!
try and deactvate or override existing css . There are #media queries in your existing css