Home› General Discussion

Portal Home Page text

Dan_StyanDan_Styan Customer IT Monkey ✭
in General Discussion
Hello,

I need to add some permanent text on the homepage just above/below the search bar (which I will hide eventually along with the title text)

Any idea on how to do this? I've had a look but can't see anywhere to put it.

Thanks

Best Answer

Answers

  • Geoff_RossGeoff_Ross Cireson Consultant O.G.
    Dan,

    Does this thread help?

    https://community.cireson.com/discussion/comment/4217#Comment_4217

    Geoff
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    It looks like your response will d othe trick; however where do I put that bit of code?

    I'm guessing it'll be in the iis folder for CiresonPortal somewhere?
  • Geoff_RossGeoff_Ross Cireson Consultant O.G.
    In custom.js

    CiresonPortal/CustomSpace/custom.js
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hello,

    I have put this in and restarted the cache builder but i'm not seeing it
  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    Clear your local browser cache. Your workstation may not be downloading the updated custom.js file.
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Tried that, nothing ever easy eh!
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hello,

    I left this over the weekend and it's still not working.

    FYI what I done was put in the CustomSpace folder I created a custom.js and literally pasted

    text = $('<div><h3>Some Text Here</h3>')
    text.insertBefore('#side_nav_toggle')

    Thanks
  • Geoff_RossGeoff_Ross Cireson Consultant O.G.
    Hi Dan,

    I think it will be a timing issue. That code runs straight away at which point other code is still building the page so the element you are trying to find and insert before does not yet exist.

    You can fix this with a small JavaScript timeout (bit of a dirty hack) or a Mutation Observer (quite complex JS)

    Do you have any internal Web Developers you can tap into?

    Geoff
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hello,

    It's been left a few weeks now and still not there, so it's definitely not working for us, so something is not quite right.

    Please advise 
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    Hi @Dan_Styan

    As Geoff pointed out the easiest way is to use a timeout, see example below:
    // target a specific page, otherwise only use the setTimeout!<br>if(window.location.href.indexOf("ServiceCatalog/Listing#/") > -1) {<br>&nbsp;setTimeout(function() {<br>&nbsp;&nbsp;text = $('<div style="margin-left: 80px;"><h3>Some Text Here</h3></div>')<br>&nbsp;&nbsp;text.insertBefore('#main_wrapper')<br>&nbsp;});<br>}

    However based on your code the text would be inserted in the header which have a fixed position an height rendering it overlapping with the first menu item, it would require some css styling atleast if you want it positioned under the searchbar in the top navbar!
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hello,

    I've placed that code in custom.js and it's still not appearing on the home page for the portal
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    edited January 2017
    Please note that the above code snippet will only show if you are using the new service catalog. Tested it with portal v7.1 successfully.

    It's also best to wait for the DOM to be ready, otherwise it might not show, so wrap your code with the following statement:
    (If you always want your custom code to show omit the if clause and only paste this into custom.js)
    $(document).ready(function (){<br>&nbsp;setTimeout(function() {<br>&nbsp;&nbsp;text = $('<div style="margin-left: 80px;"><h3>Some Text Here</h3></div>')<br>&nbsp;&nbsp;text.insertBefore('#main_wrapper')<br>&nbsp;}, 1000);<br>}
    This will NOT be inserted in the header but will effectively let you know if it worked as I will show in the main content area.

    To actually remove the title and search in the header use css and paste the following in custom.css:
    .navbar-header h4, .navbar__search {<br>&nbsp;&nbsp;&nbsp; display: none;<br>}

    And then append whatever you want in the header (custom.js):
    $(document).ready(function (){<br>&nbsp;setTimeout(function() {<br>&nbsp;&nbsp;text = $('<div><p style="color: red;float: left;">My custom text</p></div>')<br>&nbsp;&nbsp;text.insertBefore('#side_nav_toggle')<br>&nbsp;}, 1000);<br>}
    BUT if you only want to add some custom text to the header I would use a CSS only solution and place it where needed, lot's of way really so this is just an example (custom.css):

    .navbar-header.headerContent h4, .navbar__search {<br>&nbsp;&nbsp;&nbsp; display: none;<br>}<br>.navbar-header.headerContent:before {<br>&nbsp;&nbsp;&nbsp; content: 'My custom text';<br>}<br>.navbar-header.headerContent {<br>&nbsp;&nbsp;&nbsp; color: red;<br>&nbsp;&nbsp;&nbsp; float: left;<br>}
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hello,

    That seems the closest but I need it just above "Need help finding what you are looking for" (this along with that search bar will be hidden eventually)

    I've tried putting the div class there but that doesn't seem to be working, I assume it'll just be text.insertBefore('.divnamehere')?

    Thanks
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Just before page_content is ideal if that helps
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    edited January 2017
    Hi,

    Based on your code snippet (#side_nav_toggle) I thought that you wanted to insert your custom text into the header.

    To use a CSS only solution (no need to touch custom.js), remove all custom code from the thread in custom.js & custom.css and place the following in custom.css:
    <div>.service-request-body .search-title,<br>.service-request-body .search-wrapper {<br>&nbsp;&nbsp;&nbsp; display: none;<br>} <br>.search-row .service-request-body:before {<br>&nbsp;&nbsp;&nbsp; content: 'My custom text';<br>&nbsp;&nbsp;&nbsp; font-size: 18px;<br>&nbsp;&nbsp;&nbsp; font-weight: 400;<br>}</div>

    Clear your browser cache between edits to make sure that the new content gets downloaded!
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hello,

    Thats exactly where it needs to be! The only thing is though is it possible it can be done in JS? That way I can style it how I want as it'll need to be in it's own div's.

    I can do the styling just no idea about the JS and I believe you can't enter html code into the css content bit.

    Thanks
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    Hi,

    Styling is always done with CSS, just a matter of if you want it to be in a custom.css file or inline in your html markup but if you want more elements than just a simple text string your'e force to go with JS.

    To remove the search bar just use the first rule from above:
    .service-request-body .search-title,<br id="null">.service-request-body .search-wrapper {<br>&nbsp;&nbsp;&nbsp; display: none;<br>}

    To add your custom html markup with jQuery:
    $(document).ready(function (){<br> &nbsp;// if on home page<br>&nbsp; if(window.location.href.indexOf("94ecd540-714b-49dc-82d1-0b34bf11888f") > -1) {<br>&nbsp;&nbsp;  setTimeout(function() {<br>&nbsp;&nbsp;&nbsp;    text = $('<div><h3>Some Text Here</h3>');<br>  &nbsp;  &nbsp;&nbsp;$('.search-row .service-request-body').prepend(text);<br>&nbsp;&nbsp;  }, 1000);<br>&nbsp;&nbsp;}<br>}

  • Dan_StyanDan_Styan Customer IT Monkey ✭
    I've pasted that and nothing again.



    This is where i'd like it to be
  • seth_coussensseth_coussens Member Ninja IT Monkey ✭✭✭✭
    Quick and dirty... this will do what you want if you add it to your custom.js

    var observer = new MutationObserver(function (mutations) {
    var targetElement = $("h3.search-title");
    console.log('Found target:', targetElement.length, targetElement);

    if(targetElement.length > 0) {
        targetElement.prepend('<h3>My Text Here</h3>');

        observer.disconnect();
    }
});

// Notify me of everything!
var observerConfig = {
    attributes: true,
    childList: false,
    characterData: false,
    subtree: true
};

// Node, config
$(document).ready(function () {
    var targetNode = document.getElementById('main_wrapper');
    observer.observe(targetNode, observerConfig);
});

  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Hi Seth,

    Almost, it all works great but when I hide use search-title {display:none;} it dissapears

    We currently have the search title and search box, but as we only have 2 choices its pointless.

    very close!
  • seth_coussensseth_coussens Member Ninja IT Monkey ✭✭✭✭
    Are you just trying to replace the text to say something else?
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    I was hoping it would be seperate like what you posted, just in case we ever do need the search title and search bar back (if we have more request offerings in the future)

    Is there a way what you posted to worth whether search-title is displayed or hidden?
  • seth_coussensseth_coussens Member Ninja IT Monkey ✭✭✭✭
    You can hide any of that via CSS which would mean it never goes away permanently. That's why I'm asking. I guess that this point I'd ask ultimately what it is you want to see today, and we can give you a way to do that, keeping in mind that all changes we make to the custom space are always reversible. 

    So perhaps take a moment to better define your desired end result in greater detail?
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    No problem


    Exactly like above, that way I can then put in my own css for "texthere" (or another css name I choose). Once I get something like that I can easily go from there with my own html & css to style how i'd like it to be, but it's just getting the baseline sorted first but like I said earlier JS goes straight through me.

    Thanks
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    Hi Styan,

    Still don't get your end-game here.
    If you only want CSS styleable text then I would go for my CSS only solution otherwise Seth's mutation observer pattern (cleaner then timeouts) and prepend it into a element which you do not hide with 'display: none' - if you actually need other functionality which a text element cannot provide.
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    The problem with CSS only text is I cannot insert HTML code, which is unfortunately no good for this case
  • seth_coussensseth_coussens Member Ninja IT Monkey ✭✭✭✭
    What I gave you inserts the HTML though, so what is the issue you are having with that? If you're hiding it when hiding the search back then you are just targeting the wrong node to hide, or you adjust the target for my code to something above the search box.
  • Dan_StyanDan_Styan Customer IT Monkey ✭
    Thats it, all working absolutely fine, I can show/hide the search as I like and all working.

    Thank you all!!
  • Alfie_ThomasAlfie_Thomas Customer IT Monkey ✭
    edited August 2020

    Wicked thread, thank you.

Sign In or Register to comment.