ValueResonance

On 9/6/2023 at 4:03 AM, tuanphan said:

Use this code

div#block-28ff22f97cb72389519d h1 {
    font-family: 'Roc Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 4rem !important;
    line-height: 1.8 !important;
}

Mmm.  There is still something wrong with it.  The code did change the text, but not to the same weight and size.  I looked under styles and it confirmed that they are different, even though they are the same in the code.  

I tested to change weight from 600 to 400 to see what would happen.  No change occurred, so something is preventing the code from being applied.  

If you see it on Moble, the difference is really marked.  There is something wrong with this code.

I left it up with your code so you can see that they are still not the same (Compare the `s´ for example).

Any ideas?

Best wishes

I have a similar problem here.

I have a title on the home page `services´ which uses the standard H1 and started with a blank section..

I also have other sections that use pre-designed templates.  They do not use the standard H1/2/3/4.

I would like to get the `services´ title to be the same size as the other titles on this page without affecting the titles on the rest of the site. 

You can see this at ; https://www.valueresonance.space/

In the screenshot attached they look quite similar.  This is becuase I zoomed out to 37% to get both to appear on the screen together.  If you go to the actual URL you can see the `SERVICES´ is much bigger and bolder.

I tried wit this:  

/*SERVICES TITLE FONT */
#collection-28ff22f97cb72389519d
H1 {
  font-family: 'Roc Grotesk', sans-serif !important; font-weight: 600 !important; font-size: 4rem !important; line-height: 1.8 !important;}

But it did not work.

Any help welcome.

Thanks

9 hours ago, tuanphan said:

If you want to change it to blue, same as desktop, use this new code

/* header mobile linkedin icon */
body.header--menu-open header#header div.header-menu-actions-action--social a {
    background-color: #2a67b2 !important;
}

 

YES!!!

Thanks again.

On 8/25/2023 at 3:28 PM, tuanphan said:

#2. Just remove .homepage

#3. Change #1 code to this

/* header mobile linkedin icon */
body.header--menu-open header#header div.header-menu-actions-action--social a {
    background-color: var(--primaryButtonBackgroundColor) !important;
}

 

@tuanphan#..

2#   Yes!! worked.  Now desktop LI icon is in the correct blue

3#   No.  Did not work.  I replaced the code in #1 as you say and it changes the desktop icon back to pink (The Primary Button color in that style).  The mobile menu stayed the same.

In your code you have written `PrimaryButtonBackgroundColor´.  It seems like a mistake becuase it is clear that this would not be the right colour.  Maybe I am not clear?

You can see in #1. The blue color is a special colour just for this icon:

/* LinkeIn icon color in banner */ 

body header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

-----------------------------------------------------------------------------

See attached image.  This blue has to become rgba(42,103,178,1)...same as desktop header.

Am I explaining ok?

mmm.

The 2nd part worked and now I can see the menu on all devices.  I adjusted the 100px down and now it fits.

Also, I now have the LI social icon on all menus , desktop and mobile.

However, it appears in different colours.

1. Desktop: Home page (LI blue) Correct!

/* LinkeIn icon color in banner */ 

body.homepage header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

2). Desktop: Other pages Pink as secondary button colour from `style 1´

Can I change the word `homepage´ in the code above to `all pages´ or some alternative to make this happen across all pages?

3).  In Mobile the LI social icon appears in dark blue.  I need to also change all these to the LI social blue to be consistent with the desktop.

See images attached. Sorry for my horrible writing with a mouse! Hopefully its clear.

Thanks

@tuanphan 

Progress but not solved.  There are two problems.

1).  The contact button appears now but ONLY if you `click´ it from the home page. From anywhere else it does not appear.

2). The entire menu is longer than the screen on some phones, and so both the `LI´ icon AND the contact button need to move up. Perhaps the menu items themselves need to move up too.  Perhaps there is some default padding I can remove.  It would be good if the solution contained some numbers that I can adjust to get the spacing right, but I guess that depend more on Squarespace than on you!

Thanks 

Hi @tuanphan I may as well tag the guy with the best answers on here!

Do you have any idea how to make lightbox images zoomable on mobile? Seems like there is lot of demand and confusion about this!

Best wishes

@tuanphan

/* LinkeIn icon color in banner */ 

body.homepage header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

This is the code that Used to change the icon colour.  I just used the standard options to add the icon.

As usual, your suggestion worked!  

Thanks!

@tuanphan

This is what I am trying to do.  For some reason, when I added the icon, the contact button disappeared in the menu

Solved.  closed Browser, Cleared cache and it came bac eventually.  took a long time, maybe it was open in a window somewhere!

https://www.valueresonance.space/

I seem to have it working on mobile in the LinkedIn blue colour, but on desktop it stays pink!

I would be surprised if it was due to the cache because other updates go through within seconds no problem

Hi @tuanphan

https://www.valueresonance.space/

Thanks

@tuanphan

Please see attached.  I am trying to get the Linked In icon to be in the Linked in brand colour blue.

It worked at first, and then for some reason stopped working!!!  Any ideas?

Best wishes and TX

Hi @SamKahn

Could you post a link to the solution here?

I am struggling with the same thing and cannot find the post you are referring to.

Thanks

Ah. I solved it by adding it twice and replacing right with left the second time.  perhaps there is more elegant solution, but this worked!

getting closer!

This solved the right arrow, but now the left.

I saw that the word `right appears.

-------------------------------

#itemPagination.bright svg.caret-right-icon--small {
    stroke: white;
}

-----------------------------

so something like:

------------------------------

#itemPagination.bright svg.caret-right+left-icon--small {
    stroke: white;
}

-------------------------

Unfortunately, my little guess didn't work though 😒.  How do I add both arrows to this?

Thanks

OK....now its just this theme...great!

is there a way to include these arrows?

On 3/26/2023 at 1:12 PM, ValueResonance said:

I only want to change it for this page, not others. 

@tuanphan  This is what I was trying to say.  JUST for this theme or page.  (plus  < and >)

@tuanphan

fantastic!  

Unfortunately it changes all styles not just this one, so when I use other themes, it becomes illegible.  This change is to affect ONLY theme Bright 2

Here you can see that it changed the colour on ALL themes and so made `Lightest 1´ for example, illegible.

It did not include the arrows though.  Is there a way to make this  change UNIQUE to the `Bright 2´ theme and add the arrows?

Kind regards

@tuanphan

Solved.  thanks.  I @ you in a different thread about another issue. Thanks

Hi

@tuanphan

I have been trying to get the navigation for the menu on just this page to turn white instead of blue.  Can not find this setting anywhere in the colours.  I only want to change it for this page, not others. 

https://www.valueresonance.space/projects/farm-direct-flowers-online

Can you help?

Ahhhh...Yes!!  Good one! hahaha

@tuanphanHi ...me again!

Same issue.  I just tried to put this code in my own carousel on a portfolio page:

https://www.valueresonance.space/projects/ghn

Looks like the first part of your code (bold below) is the part that will change for my page, but how?  This does not contain the Date section ID format that I understand. (section[data-section-id="6415c7ae4be8170d0f94946e"])  So how do I need to adapt this? 

div#block-yui_3_17_2_1_1594008945407_17850 .sqs-gallery .sqs-wrapper {
    left: 0 !important;
    width: 100% !important;
    text-align: center;
    display: flex;
    justify-content: center;
}

Here is a screen shot for mobile viewer (checked on an android and it IS displaying like this)

Screen shot for desktop:  Also off centre:

Meanwhile on other pages, this is not a problem, so whatever solution I use needs to not move the others.

What do I need to change in your code?

Kind regards

@tuanphanYes!  Worked a treat!

Fantastic thanks!

@tuanphan

I did manage to get the ID and make the images working.  I am now trying to get them to hover in the exact same way as they do in the portfolio.

https://www.valueresonance.space/projects

I started a new post coz it's a new topic.  Will also @ you about another issue, but in the relevant topic.

a thousand thank you's.  It means a lot to know somebody can help when ideas run out!