Squarepegroundhole01 Posted April 1 Share Posted April 1 www.michaelaguocha.com Pass:AguochaAccess How do I add custom text on a banner? I want to add text to the center of my Home Page, but it doesn't allow me to do so (I had to add a banner with text already on it). Link to comment
tuanphan Posted April 2 Share Posted April 2 Add it to Design > Custom CSS body.homepage:after { content: "I'm a Full-Stack Product Designer from Boston, Massachusetts"; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; color: #f1f; font-size: 50px; text-align: center; width: 65%; } 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
Squarepegroundhole01 Posted April 5 Author Share Posted April 5 (edited) This works, except the text still appears when the banner of the other portfolio items are revealed (when I hover over the portfolio menu items). Also, It remains in the same position no matter where I scroll on the screen. How can this code be modified so that the text only appears in the center of the default banner, and disappears when another cover images appear? Edited April 5 by Squarepegroundhole01 Link to comment
Squarepegroundhole01 Posted April 5 Author Share Posted April 5 (edited) for more context. I'm looking for behavior similar to the Hensen template in 7.0 The home page can display default response text (it's not a static image) However, when you hover over the links, it displays the second image (the text disappears). I want to do that for my page. Additionally, I like some code highlighting (not just underlining) the link I'm hovering over. Edited April 5 by Squarepegroundhole01 Link to comment
tuanphan Posted April 7 Share Posted April 7 You mean hover on these items >> The text should disappear? 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
Squarepegroundhole01 Posted April 7 Author Share Posted April 7 no, the code you provided previously keeps the text on the center of the screen even after I hover over the portfolio links. I need the following code modified so that the text disappears when I hover over the portfolio links. The customer text should also only be in the center of the banner image. body.homepage:after { content: "I'm a Full-Stack Product Designer from Boston, Massachusetts"; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; color: #f1f; font-size: 50px; text-align: center; width: 65%; } Link to comment
tuanphan Posted April 7 Share Posted April 7 6 hours ago, tuanphan said: You mean hover on these items >> The text should disappear? Yes. I meant hover on these links >> hide text in the above code. Is that right? If not, which links are you referring to? 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
Squarepegroundhole01 Posted April 7 Author Share Posted April 7 Quote Yes. I meant hover on these links >> hide text in the above code. Is that right? Yes that is correct; apologies for the misunderstanding. But I would also like to ask if there is any code for highlighting (not underlining) active text. The links are hard to read once the background image appears Link to comment
tuanphan Posted April 8 Share Posted April 8 On 4/2/2023 at 3:17 PM, tuanphan said: Add it to Design > Custom CSS body.homepage:after { content: "I'm a Full-Stack Product Designer from Boston, Massachusetts"; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; color: #f1f; font-size: 50px; text-align: center; width: 65%; } Use this new code body.homepage ul.portfolio-hover-items-list li:after { content: "I'm a Full-Stack Product Designer from Boston, Massachusetts"; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; color: #f1f; font-size: 50px; text-align: center; width: 65%; line-height: 1.5em; } body.homepage ul:hover li:after{ visibility: hidden !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
Squarepegroundhole01 Posted April 8 Author Share Posted April 8 (edited) The code you provided keeps the pink text fixated in the middle of the screen until the banner is off-screen. I need the pink text in the middle of the banner, not the page. So the pink text should move up as I scroll down the page. (refer to the image below. I scrolled down to the middle of my home page. Ideally, the pink text should be where the white text is). Another issue - the pink text disappears when my cursor hovers over it. I only need the pink text to disappear when I hover over the links, not the text itself. body.homepage ul.portfolio-hover-items-list li:after { content: "I'm a Full-Stack Product Designer from Boston, Massachusetts"; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; color: #f1f; font-size: 50px; text-align: center; width: 65%; line-height: 1.5em; } body.homepage ul:hover li:after{ visibility: hidden !important; } Edited April 9 by Squarepegroundhole01 Link to comment
Squarepegroundhole01 Posted April 18 Author Share Posted April 18 can I get an update on this request please? Link to comment
tuanphan Posted April 22 Share Posted April 22 So the pink text should move up as I scroll down the page I have no ideal to achieve this. 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
Squarepegroundhole01 Posted April 22 Author Share Posted April 22 Do you have any other ideas or options for what I can do with the text here? This is the first screen users see when they log on to my page, so I like to provide a good first impression. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment