Jump to content

Adding "Forte" template features to my webpage

Recommended Posts

Site URL: https://forte-demo.squarespace.com/

Hi, this is my first post so be gentle 😊 

There are a couple of features that I would like to add from this Squarespace template: https://forte-demo.squarespace.com/ to my own webpage on here.

I'd like to make the dropdown menu for "projects" positioned lower and with a small arrow/triangle at the top (I've attached a picture of the menu). Also, I'd like to know how to style the dropdown menu - is this an option on Squarespace? For example, how do I position the list on the left-hand side, rather than the right?

1073052214_ScreenShot2021-12-19at17_18_03.png.1cdd679371f9512ed7fe133a4f00f385.png

This is how mine looks at the moment:

2097439970_ScreenShot2021-12-19at17_25_42.png.6470f730fcf50b75dec608c0fe9f8013.png

I would also like the effect of when you mouseover the top menu, the opacity of the mask covering the image fades in. 
 
Thanks so much for your help!!
 
Tomm
Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 1/3/2022 at 11:49 AM, tommmmusic said:

Thanks so much Tuanphan, that's a great help and happy new year! 

Does this link work for you? https://accordion-jaguar-tztz.squarespace.com/config/

Regards,

Tomm

The site is private. Can you setup password & share url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/6/2022 at 4:13 PM, tommmmusic said:

Sure! It's https://accordion-jaguar-tztz.squarespace.com/

and the password is:

ost

Please let me know if you have any other questions. Many thanks! 

Add to Design > Custom CSS

/* dropdown with arrow */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
    margin-top: 10px;
}
.header-nav-folder-content:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-width: 0 0 10px;
    border-style: solid;
    border-right: solid 10px transparent;
    border-left: solid 10px transparent;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
}
.header-nav-folder-content * {
    text-align: left !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

Thanks so much Tuanphan! That's great, really appreciate that. I've updated the css, and it worked - there's just a few changes I'd like to make, based on the same Forte template. 

1. I'd like the dropdown box, that appears, to have white background, with black font.

2. I'd also like to reposition the text to the left, not centred, and to make the box bigger like Forte (when the box is smaller, it's harder to get make a selection on that dropdown menu)

3. When you mouseover the different page options (movies/tv, I may add more), can you make the selected page have an underline animation?

I've attached a screenshot of how the Forte dropdown looks.

Thanks again!

Tomm

 

Screen Shot 2022-01-25 at 16.19.31.png

Link to comment

#1. #2. Use this CSS

.header-nav-folder-content {
    background-color: white !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.header-nav-folder-content a {
    color: black !important;
}
.header-nav-folder-content:before {
    border-color: white;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

#3. Can you describe the underline animation?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

Hey Tuanphan, thanks for the code. Just a few more things, would be a great help! I've attached a picture showing how I'd like it to look

Forteboxleft.png.64589cbea551343e098cf4cb36d6840c.png

1. I'd like the drop down box to extend further out and to be a wider box than currently

2. The sub-headers inside the drop down box to be located on the left-hand side, the same as in the Forte template

3. Can we change the font on the top menu to the same as Forte template, which is Futura PT? I'm guessing that the page title ("Tomm Matthews"), on the left, will have to also follow the same font? 

4. I'd like to change the font in the drop down menu to Proxima Nova, again as in Forte template

- For the underline animation in the drop down menu, I've taken a video of how it can look:

Again thanks so much for your help and Happy Lunar New Year!

If you have any confusion, please do let me know.

Tomm

Link to comment

Hey Tuanphan, just another two details:

5. The "Contact Me" on the top menu, I want to have the exact same as font and look as "Projects" and "About", without a border round it. I've attached a video of how it would look, so where it says "Read Me" on Forte, mine would say "Contact Me". Also, I would like to animate the selection with underline (.mov file like above message may need to be downloaded).

Thanks so much!

Tomm

 

 

Link to comment
  • 2 months later...

Try this CSS

.header-nav-folder-content {
    min-width: 350px !important;
}
div.header-nav-item>a {
    font-family: futura-pt !important;
}
div.header-nav-folder-item a {
    font-family: proxima-nova !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hey, thanks for the CSS - I don't think this is really working, there's just too many things that I'm not happy with using this particular template - I really just want to start over, delete this webpage & template and completely start over using the Forte template from the start.

Could you please give me clear instructions on how to do that?

Many thanks again!

Link to comment
5 hours ago, tommmmusic said:

Hey, thanks for the CSS - I don't think this is really working, there's just too many things that I'm not happy with using this particular template - I really just want to start over, delete this webpage & template and completely start over using the Forte template from the start.

Could you please give me clear instructions on how to do that?

Many thanks again!

You can't transfer between SS 7.1. - 7.0. You need to start a new trial with Forte Template Here

https://www.squarespace.com/templates/browse/v7

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.