Remove a Mapped Element Using CSS

There are times when you may want to "hide" mapped elements, such as breadcrumbs or the bottom navigation bar from your site's template. You can easily do this by changing the CSS file of the template in question.

NOTE: This particular "fix" will remove the element throughout the website.

  1. Begin by opening your Frontend.
    For this how to, we will eliminate the bottom navigation bar.
  2. Scroll down to view the navigation bar.
  3. This template is the WEC New Beginnings template. However, each template has a "code" number for efficient storage purposes. To edit the CSS file, you need to know what this code is.
  4. To find the code, right click on the page and view the source code.
  5. This is the raw HTML code that generates your site's webpage.

    The template code is found within the CSS URL inside the <head> tag. Scroll down to find the template's CSS file and note the exact code name of the template.
  6. Note that the URL not only tells you the name of the template (template15), it also tells you which sub-directory you can find it in (fileadmin/tv-templates). Make a note of this information and return to the Backend.
  7. To find and edit the CSS file, click on the Filelist tool and navigate to the location of the template (in this case, fileadmin/tv-templates/template15).
  8. The CSS file is located here and can be edited here. For this how to we will leave it in this directory; however, it would be a better practice to copy this CSS file into the /ext-templates folder, edit it, and then point the template to the new file.
  9. To edit the CSS file, click on the styles.css icon and select Edit.
  10. Scroll down to the element you want to hide. In this case, the bottom navigation section.
  11. To hide the element, add the CSS attribute and selector

    display:none;

    at the top of the element's id. Don't forget to include the trailing semi-colon. You can add the attribute and selector to each id or class if needed (though it is seldom needed).
  12. Save your work when done and go to your Frontend to see the results.
  13. Notice that the bottom navigation element is no longer visible in the Frontend.
  14. If you decide later you want make it visible, simply return to the CSS file and remove the display attribute.

<//span>

Tutorial

 Movie Tutorial Click to see tutorial for: Remove a Mapped Element Using CSS