DevonHarris

@creedon I'll be damned hahahha, who knew the solution was so simple!  I'm glad they got intuitive on this!  Thanks again for all your help!!

4 hours ago, creedon said:

Here is what I see when I make the change.

 

 You do have to make the change for each icon.

Let us know what you find out.

ahhh!  I was removing the wrong selector, THANK YOU SO MUCH!!!

14 hours ago, creedon said:

Remove :not([data-is-open="true"]) from your CSS. The not is saying show only when the accordion item is not open.

Let us know how it goes.

didn't work 😞. This is the live page. 

https://www.tlastmarks.com/health

I removed both the entire line, and only the part you mentioned, and both make the icon disappear when the accordion item is open.  Idk what to do 

On 7/21/2021 at 4:46 PM, creedon said:

Remove the following code, make a copy somewhere.

.markdown-block h6::before {
    content: '+';
    float: right;
    position: absolute;
    right: 0
}

Replace the following code...

.markdown-block h6::after {
    content: '+';
    float: right;
    position: absolute;
    right: 0
}

...with...

.markdown-block h6::after {
    content: '+';
    position: absolute;
    right: 0
}

.markdown-block h6.plus-minus::after {
    content: '-';
}

 

I don't know of any code for this one.

Let us know how it goes.

hi!  I've changed my + icons to be individual image URL's, but I'm having a problem that the image disapears when the accordion item is open.  I'd like to have the + icon (in this case my image) still visible when the accordion item is open.  Here's the code I have:

#block-yui_3_17_2_1_1652669657981_4158{
.accordion-item:nth-child(1):not([data-is-open="true"]) .plus {
    background-image: url(https://static1.squarespace.com/static/610c171afa90c65ad8ab367b/t/62825e96f30e9a0f7f07d9aa/1652711062836/health-safety-icon-tla.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
  .accordion-icon-container{
    height: 150px !important;
    width: 150px !important;
    margin-right: 5%;
  }
:not([data-is-open="true"]) .plus div {
    display: none;
  }}

and here is the page where it's posted:

https://www.tlastmarks.com/health

Any ideas would be greatly appreciated!  thank you so much!

1 hour ago, creedon said:

Please see Accordion Block Top Bottom Border Hide.

Let us know how it goes.

@creedon this is amazing!!  Thank you so much! 

On 5/16/2022 at 2:01 PM, DevonHarris said:

hey @tuanphan - great codes thanks!  I have subtitles on my accordion, and also a picture, but the picture only aligns with the main title, not the subtitle too.  Is there any way to do that?  And still have the + icon on the right?  https://www.tlastmarks.com/health.  thanks!!

 

Kindof like this:

 

 

@creedon @bangank36 any ideas?  I'm also looking to remove the accordion divider on only the top and bottom

hey @tuanphan - great codes thanks!  I have subtitles on my accordion, and also a picture, but the picture only aligns with the main title, not the subtitle too.  Is there any way to do that?  And still have the + icon on the right?  https://www.tlastmarks.com/health.  thanks!!

Kindof like this:

On 3/13/2022 at 7:03 AM, tuanphan said:

Edit this code

<div class="detail active">
          <img src="https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/607efb61e262694be0d3d65f/1618934625616/CredibilityIcon.png" alt="discovery phase photo" width="25%">
			<h2>Meet &amp; Greet</h2>
			<p>Are we right for each other?  </p>
        </div>

to this

<div class="detail active">
          <img src="https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/607efb61e262694be0d3d65f/1618934625616/CredibilityIcon.png" alt="discovery phase photo" width="25%">
    <div class="detail_text">
			<h2>Meet &amp; Greet</h2>
			<p>Are we right for each other?  </p>
        </div></div>

Next, add this to Design > Custom CSS

/* vertical tab text image */
@media screen and (min-width:992px) {
div.detail img {float: left;}
div.detail .detail_text {
    float: left;
    margin-left: 20px;
}
div.detail .detail_text h2 {
    margin-top: -10px;
    margin-bottom: 0;
}}

 

@tuanphan that worked, thank you so much!!!   

@LisaBennett did you ever figure out how to add the images?

hi @tuanphan this code worked great!!  Is there any way to make the image span the height of the tabs but only half the width, so the image floats left and the text floats right?  Please see my link, I added a filler image for now, lmk if you know how to do this, thank you so much!!  https://www.breakpointbranding.com/services

On 3/3/2022 at 5:03 AM, tuanphan said:

Can you share link to page where you have problem? We will try checking it again

Thanks @tuanphan but I just solved it by editing the degree direction of the text within the code 🙂. Square Stylist has a gorgeous sideways accordion plugin too if anyone is looking for an easy solution.  Not sure how she did it, but it looks cool!

https://www.squarestylist.com/shop/vertical-tabs

On 2/6/2022 at 10:12 AM, bangank36 said:

Have you created the page with this rainbow yet? Can you share it with us?

Hi!  I'm still working on it.  Unfortunately it really can't be done on SS but rather I've been working on the coding.  Could use some help though!  I've managed to get the red and orange done, but not the rest.  I merged a generic flexbox code with this pre-made rainbow code, and inserted the text.  Except it needs a little work and I honestly haven't had the time 😕   The one major thing I can't figure out is why the 'red' text isn't appearing when the mouse hovers on the right side of the rainbow, and only appears when the mouse hovers on the top or left...I'm also having trouble bottom-aligning it.  I had to add so many 'wrapper' tags I think I confused myself haha!

The regular rainbow code is here, courtesy Megan Elizabeth:
https://codepen.io/meganeday7/pen/xxqYjxZ

And my flexbox, text reveal rainbow is here:
https://codepen.io/Devonharris4/pen/mdqOaKB

hey @tuanphan and @ievavi were you ever able to figure out how to make it stacked on mobile?  Additionally I'm wondering how I might be able to change the text direction to be reading upwards instead of downwards?  I think it's just editing the directional degrees.  Lmk if you know, thanks!!!  Also I'm wondering if the codepen has to be quoted in the html as it is in Tuanphan's answer?  I'd love to design a similar concept but personalize it with some more customization.

11 hours ago, tuanphan said:

/home page looks fine. Can you take a screenshot of text which you have problem?

Thanks for taking a look!  For anyone else looking to achieve this, the code I used was 

.list-item-content{
  text-align: center !important;
}

On my h3 tag I have coded 

display: inline !important;

Site URL: http://www.tlastmarks.com

Hi everyone!  

My client is looking to have a completely responsive/interactive rainbow on their website.  Each 'color' of the rainbow corresponds to a different 'trait'.  The client would like the rainbow to ideally have a hidden/reveal feature, in which hovering over the different colors would reveal their matching 'trait'.  See below for a quick drawing of what they are looking for.  I understand this would likely require java and/or jQuery which I know nothing about.  To confirm, natural state would show no text, hover states would reveal different texts.   Ex: when Red is hovered, the text for "kindness" appears, when Green is hovered, the text for "generosity" appears, etc.  

Hoping and praying someone can help me figure this out.  

@bangank36 @creedon

On 9/27/2020 at 6:17 PM, tuanphan said:

Can you share link to page where you use hightlighted text? WE can check easier.

Hey @tuanphan I'm having a similar issue.  In CSS I've coded a Linear Gradient highlight, but when I use it for my list-item-titles and gallery-titles, it's not centered...I'm not sure what parent selector to target to make it work across the site.  Any suggestions?  www.TLAStMarks.com/home

Site URL: https://www.tlastmarks.com/home

Hi!  I'm wondering if anyone can help me with the proper code for the following, as I can't seem to get it right....

1) Center my Gallery Section Titles...my additional CSS Code for the linear gradient seems to be messing it up.  I've tried applying a display: inline property but it doesn't seem to work 😕

2) I've changed the color of this button within the site styles and for some reason it's not saving 😕. Would like it to be light blue

3) Have control over the image sizes in mobile.  I tried targeting the img{width and margin} but that didn't work 😕

Thank you so much!!!

@tuanphan @bangank36 Having a slight problem- I added the code to accommodate 7 columns but it hasn't changed anything 😕 Hoping you can assist, www.tlastmarks.com/enrichment. Many thanks!!

hey @tuanphan do you know how to get the arrow right-aligned?  I tried

.chevron--down{
float: right !Important;
}

but nothing happened 😞. Also is there a way to reduce it's size?  Idk why my code isn't working, hopefully you can help, thanks!!!!  

hi @GeraldineLee thanks so much for the suggestion!!!  Unfortunately that might not be the best solution for these clientele, I believe the site owner would rather collect the information all up-front at time of booking.  I still have to learn more with the workshops though.  I find SS is very limited in this arena, and would love to see them expand the options a little more.  i.e. repeated every week, reflected in the calendar, multiple payment options, and advance their membership areas to house user profiled, for users to 'repurchase' workshops for example, without having to fill out the mandatory form again.

Thanks again for your idea!!!  🙂

@tuanphan you're amazing, THANK YOU SO MUCH!!!  Yay!

For anyone else looking to disable portfolio sub pages, @tuanphan code enabled me to keep the project title on hover, but remove the linked sub-page.  On hover, the thumbnail image shows the project title, but when clicked, it remains on the main portfolio page.  Thanks again!!!

@tuanphan sorry I sent you to the wrong page...if you go to www.BAHFineArt.com/portfolio, one painting is currently uploaded.  If you click on the picture thumbnail, you are redirected to a portfolio sub page.  I was able to target the overlay title text, but when I tried adding a "pointer events: none" to the CSS, it didn't work.  I'm wondering if I can have it NOT direct to a sub page.  Artist doesn't want to upload all of that info yet, just wants a simple portolio page with thumbnails and no redirect.  Hopefully you can help!  I feel like it's probably a Page Advanced Code Injection thing but I just can't figure out how to target it...

hey @tuanphan no I have not- if you click on the 'portfolio' thumbnail, it links to a new url.  Any way to remove the pointer event and have it just stay on the portfolio page?  Thanks!!

@nicolitebrite any answer?  Would love to know how to disable individual sub pages....

hey @tuanphan can you check out BAHFineart.com - under the porfolio and archives section- artist just wants to show her artwork and their titles but not link it to a new page.  Any way to do this?  Thanks so much!!