0

I need to update one of my pages that contains portraits and bios -to one that has a hover effect with a drop down field that shows the bio. I found code here that does exactly what I need (How to show text on image when hovering?) and I tested it out on another site to make sure it's working correctly. Problem is, when I put it on my page template, all the header and footer coding (color, font, styles, etc.) are overwritten by the code that I've pasted in. I'm not a coder and only know a little bit of the terminology and how it all works (so please be specific with your responses). I am thinking I need the new code to be in some kind of container that keeps the default page/site styles intact but I'm not sure what to put to do that. I'm also not sure if my new hover code is in the right place. The original code on my template is this:

<!DOCTYPE html>
<html lang="en">
<!-- Head Tag -->
[[$head-tag]]

<style>
.top {
margin-bottom: -75px;
}
</style>
<body>
[[$gtm]]

<!-- Navigation -->
[[$navigation]]

<!-- PAGE CONTENT -->

<section class="top">
    <div class="container">

        [[$top-page-info]]


        <div class="row body-copy">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
[[*content]]
</div>
            </div>
        </div><!--end row-->
    </div><!--end container-->
</section>
<section class="leaders">
    <div class="container">
        <div class="row">


            [[!getPage? 
                &amp;elementClass=`modSnippet` 
                &amp;element=`getResources` 
                &amp;parents=`14` 

                &amp;depth=`0` 

                &amp;pageVarKey=`page` 
                &amp;includeTVs=`1` 
                &amp;processTVs=`1` 
                &amp;includeContent=`1` 
                &amp;showHidden=`1` 
                &amp;sortby=`{"publishedon":"DESC"}` 
                &amp;tpl=`LeaderTpl`]]


        </div><!--end row-->





    </div><!--end container-->
 </section>



<!-- PAGE CONTENT END-->


<!-- Footer -->
[[$footer]]

<!-- JS Includes -->
[[$js-includes]]



</body>

</html>

Should I insert the new code in place of the "!getPage?" section (though I'm wondering if deleting some of that is removing code that I need for the default page settings/styles) or should it go below it, just above the line at the end that closes the div and ends the container?

Any help or direction would be greatly appreciated. (And please be specific as I don't really understand all this language.) TIA

blucajun
  • 9
  • 5
  • You reference some code but that is not in your pasted set of code. Try to narrow down your question with some actual rendered markup or give more details. For example `[[$top-page-info]]` and that `[[!getPage?` is not really HTML and comes from or references some other associated code or library that we have no knowledge of. – Mark Schultheiss Dec 17 '18 at 15:39
  • Those are references to chunks (the site uses templates that contain callouts (I think that's what it's called) to chunks that contain the information to put on the page. For instance, the code for [[$top-page-info]] pulls in a chunk that contains this:

    [[*pagetitle]]

    [[Breadcrumbs]]
    – blucajun Dec 17 '18 at 15:59
  • sorry, I can't figure out how to save the code above as formatted code instead of inline text. :/ – blucajun Dec 17 '18 at 16:00
  • In any case, none of the chunks or snippets contain anything that affects the overall formatting of the page (background colors and styles). All that comes from the css file. – blucajun Dec 17 '18 at 16:02
  • And for example you have no CSS file (or its content) in the question which directly relates to CSS. Anything with a `class="` which is referenced in CSS is relevant perhaps. – Mark Schultheiss Dec 17 '18 at 18:56
  • I’m sorry, I didn’t know I was supposed to paste my entire css file (& all the corresponding chunks, snippets, etc.) here for all the world to see. Forgive my ignorance, but I truly don’t understand why seeing the css code is necessary. What I’m looking for is help on how to prevent the new code from overwriting the default css code. (i.e., am I supposed to section the new code off somehow to make the settings contained within the new code only apply to that section?) Thank you for making someone trying to learn coding on their own feel so welcome in seeking help here. – blucajun Dec 17 '18 at 22:11
  • CSS is just THAT - Cascading Style Sheets - so if something before/above is present, stuff after that effects it - think further down the cascade (like a waterfall) will override that above. SO, it is as if we cannot SEE your waterfall (cascade) without the CSS so we have no idea how it is behaving. Example: you have cold white water, then add blue dye later in the cascade you have cold blue water and then heat it, you get hot blue water. All we see is the hot blue water at the end. AND you have a box half way down (DIV) where you have fish in it. We see the box of fish with in water. – Mark Schultheiss Dec 18 '18 at 13:30
  • SO, right now all we see is a window you say looks upon a waterfall, no water or fish or color etc. since it is just a blank window with some rocks (the top of the waterfall) we cannot help you with the waterfall. I hope that analogy helps. Create the MINIMAL of that https://stackoverflow.com/help/mcve – Mark Schultheiss Dec 18 '18 at 13:32
  • Thank you but I figured it out on my own. Simply put, the hover code (that I posted the link to) contained information at the beginning of the code that called out it's own css styles (I may not be wording that correctly, but again, forgive me but I'm not an expert here). So that code was taking precedence on the template and overriding the css code for my site. I should have realized that immediately. I have my page working properly now and all is well. – blucajun Dec 18 '18 at 14:08

0 Answers0