Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to use code block to insert a floating image


BrookeP
Go to solution Solved by paul2009,

Question

I am just curious as to how to implement this style into future websites. I've just started experimenting with Code Blocks and would like to know how to make the below possible to add tiny details to my websites.

How can I insert a small, floating image like the tiny circle logo as shown in the screenshot below? Anytime I try to insert an image using HTML I can never get it to center WITHIN the code block, it always aligns to the left. And how can I format it to stay consistent across screen sizes such as on her website?

I would like to implement this feature on future sites and would love any help at all as to how to achieve this!

Site referencing: Brighten Made

alt text

screen-shot-2019-07-30-at-41644-pm.png.e0e8c763f138364c6d5fd303c58bad69.png

Edited by bpurnell
Initial Revision
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 0

You should be able to get this effect:

alt text

with code similar to this (adjusting as necessary to meet your needs. Add it to Design > Custom CSS.


#float-section {
   background-color: transparent;
   width: 25%;
   position: absolute;
   z-index: 30;
   left: 80%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
#float-section .sqs-block-code {
   padding: 0px;
}
#float-section .Index-page-content {
   padding-left: 30px;
   padding-right: 10px;
   padding-bottom: 65px;
}

I hope that helps.

-Paul

Squarespace Expert & Professional Developer

Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers.

Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer.

layken2.jpg.e2e8bc3fe235942609e88ec32489b321.jpg

Edited by Paul2009
Initial Revision

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

There are many ways to do this, depending on the situation.

In this example, the image is contained within a Code Block on a separate section of the index (ie another page in the index). Some CSS then moves this page/image into a position that spans the section above.

I hope that helps.

-Paul

Squarespace Expert & Professional Developer

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

@Paul2009 thank you so much Paul! So using this example, let's say I wanted to implement this technique on the website below. I have inserted an image (see below) using a code block under the "Home Page Reviews" section within the Home Index. I'm a visual person, so I thought using an example would help me understand!

Test Website
Password: wedding
alt text

screen-shot-2019-07-30-at-60815-pm.png.fba8202b5439366b9f2c4552dae09a42.png

Link to post
  • 0

@Paul2009 thank you so much Paul! So using this example, let's say I wanted to implement this technique on the website below. I have inserted an image (see below) using a code block under the "Home Page Reviews" section within the Home Index. I'm a visual person, so I thought using an example would help me understand!

Test Website
Password: wedding
alt text

screen-shot-2019-07-30-at-60815-pm.png.1ce92f8ccf05ccb9a04c1e8284ad9ef0.png

Edited by bpurnell
Initial Revision
Link to post
  • 0

No problem. There are some lovely layouts and colors on the site :-)

If you'd like the logo to look something like this (see below) it must be in a section by itself, i.e. a new one under the reviews one.

alt text

layken.jpg.436eaa2ba82433bff2bdaac6fb59a1e7.jpg

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

@Paul2009 thanks so much! Still very much a work in progress.

Yes! So how did you go about doing that? I would create a new page within the index JUST containing that logo image? And then what CSS code specifically did you use to make it look like that? Seeing the code itself or a step-by-step would be super helpful!

Thanks again Paul! You da bomb.

Link to post
  • 0

@Paul2009 thanks so much! Still very much a work in progress.

Yes! So how did you go about doing that? I would create a new page within the index JUST containing that logo image? And then what CSS code specifically did you use to make it look like that? Seeing the code itself or a step-by-step would be super helpful!

Thanks again Paul! You da bomb.

Link to post
  • 0

Yes exactly. You don't want anything else in the same page/section so you'd need to remove the summary block from this one, or place the image in a new page.

Then, we can write the code to match the configuration. (You always need the design and layout BEFORE the code can be written.)

Edited by Paul2009
Initial Revision

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

@Paul2009 gotcha. Thanks! I've created a new section with the image.

What would be the code then that I write to target the image and move it to the desired placement?

Link to post
  • 0

@Paul2009 gotcha. Thanks! I've created a new section with the image.

What would be the code then that I write to target the image and move it to the desired placement?

Link to post
  • 0

@Paul2009 thank you so much Paul! This is a game changer for adding some more customized touches to my websites & implementing more branding marks. You rock!!

Link to post
  • 0

@Paul2009 thank you so much Paul! This is a game changer for adding some more customized touches to my websites & implementing more branding marks. You rock!!

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...