Designing, formatting or Customizing the Floating Table of Contents in Blogger or WordPress Web Topics

Designing, formating or Customizing the Floating Table of Contents in Bloggger or WordPress Web Topics




On this topic you will learn how to design customize or format the floating Table of Contents by yourself without need to be a coding expert. We will show you how to change the followings:

- Floating Location (right & left) and (Up &down)
- Size
- Font color
- Background
- Shown or Hidden first



- Font size and color of ToC title
- Text Padding (distance from the edge)
- Border size and color



Notes:

  • This topic is intended to show you how to customize the already created table of contents on your website.
  • To see how to create floating table of contents you should read the following topics first:
      - How to create simple in-topic Table of Contents (ToC) without JavaScript or Plugin.
  • All discussed steps on this topic and the associated video from blogger BlogSpot, however, it can be used in any website or blogging platform such as WordPress, Wix, WordPress, Tumblr, Medium, Squarespace, Joomla, Ghost, Weebly or any another platform or website, as this method not require to add any plugin to website or blog. All what you need is the access to HTML editing in your blog theme or template. 




FIRST:

How to Change background color of Table of Contents:

1a. Locate the CSS code by searching for toc inside the HTML code of your blog’s or website’s theme.

In blogger, you can click inside the HTML text box and press on Ctrl + F from keyboard, to open search box, then search for toc inside the HTML.


Also you should know that the toc code is not available on any theme, but you should add it manually if you need to add a floating Table of contents to your posts or topics.


This is the CSS code of the Table of Contents:

#toc_container {
    background: #ecebeb none repeat scroll 0 0;
    border: 1px solid #aaa; font-size: 80%; 
    position: fixed; left: 0;  top: 320px; padding: 5px 5px;
    width: auto;
}
.toc_title {
 font-weight: 1000; font-size: 105%; 
 }
#toc {
display:none;
}
.Hide {
  display:none;
}
.toc_list {
    font-weight: 500; padding-top: 2px; padding-right: 5px;
    padding-bottom: 2px; padding-left: 2px; width: 170px;
}


This tag or hex #ecebeb on the second line in the CSS code is the default background color of ToC.

1b. Search google for the color hex using older tag "#ecebeb"

You will get the google color hex with color panel as the first result for your search.

Google color hex


1c. Click on the desired color from color hex panel then copy the hex code of desired color then paste it in place of previous color hex code (i.e. in place of #ecebeb color).

1d. Click on Save theme button to save changes


1e. Reload the page to see the new changes

SECOND:

Changing color of ToC’s Borders:


2a. Locate border: 1px solid #aaa; line and replace #aaa by new desired color from google color hex that you see in 1b step then click save to save your changes.

2b. Reload the page to see the new changes.







THIRD:

Changing font size of ToC:

3a. Locate font-size: 80%; line and increase or decrease 80 value then click save

3b. Reload the page to see the new changes









FOURTH:

Changing floating position of Table o Contents (left or right):

4a. Locate this line: position: fixed; left: line and change left value to right then save theme

4b. Reload the page to see the new changes






FIFTH:

Changing floating position of ToC Up and Down:

5a. Locate top: 320px; line and decrease 320 value to move ToC up or increase 320 value to move the ToC down then save theme

5b. Reload the page to see the new changes




SIXTH:
Changing text Padding inside ToC:

6a. Locate this line: padding: 5px 5px; and decrease or increase one or both 5s values to decrease or increase distance of text from borders, then save your theme to apply changes

6b. To change ToC width, replace the auto by any size in pixel






SEVENTH:

Changing ToC visibility status. (i.e. shown or hidden first)


7a. Locate the following two code lines: 
#toc {
display:none; 
and change none to block, then save your theme to apply changes.


Note: You should change the following JavaScript lines from:


if(f.style.display == 'block')
 f.style.display = 'none';
 else
 f.style.display = 'block';



INTO:

if(f.style.display == 'none')
 f.style.display = 'block';
 else
 f.style.display = 'none';



7b. Reload the page to see the new changes

EIGHTH:

Changing text size and/or color of Table o Contents’ title



8a. Locate font-size: 105%; line and change 105 to change font size, then save your theme to apply changes.

Note: To change title color, add this line: color: #f70206; just below the the following: font-size: 105%; line.

8b. Reload the page to see the new changes



Finally:
You can visit codepen website to test all changes instantly.



codepen website



a. Open the Codepin website.

b. Copy the following HTML code to HTML box on codepen website:
<div id="toc_container">
<div class="toc_title">
Table of Contents:
<a onclick="toggle_visibility('toc');"><button class="Show">Show</button>
<button class="Hide">Hide</button></a> <div id="toc">
<ul class="toc_list">
<li><a href="#First_Point_Header">1. #####</a><ul>
<li><a href="#First_Sub_Point_a">1.a. #####</a></li>
<li><a href="#First_Sub_Point_b">1.b. #####</a></li>
</ul> </li>
<li><a href="#Second_Point_Header">2. #####</a></li>
<li><a href="#Third_Point_Header">3. #####</a></li>
<li><a href="#Fourth_Point_Header">4. #####</a></li>
</ul>
</div>
</div>
</div>

c. 
Copy the following CSS code to CSS box on codepen website:

#toc_container {
    background: #ecebeb none repeat scroll 0 0;
    border: 1px solid #aaa; font-size: 80%; 
    position: fixed; left: 0;  top: 320px; padding: 5px 5px;
    width: auto;
}
.toc_title {
 font-weight: 1000; font-size: 105%; 
 }
#toc {
display:none;
}
.Hide {
  display:none;
}
.toc_list {
    font-weight: 500; padding-top: 2px; padding-right: 5px;
    padding-bottom: 2px; padding-left: 2px; width: 170px;
}


d. Copy the following JavaScript code to JavaScript box on codepen website:


<script type='text/javascript'>
<!--
    function toggle_visibility(toc) {
       var f = document.getElementById(toc);
       if(f.style.display == 'block')
        f.style.display = 'none';
       else
          f.style.display = 'block';
$('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
   $('.Show').click(function() {
    $('#target').show(500);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
$('.toggle').click(function() {
    $('#target').toggle('slow');
});
    }
//-->
</script>





e. Delete the following lines from JavaScript code:
<script type='text/javascript'>
<!--


AND

//-->
</script>



f. Delete the following line from CSS code:
top: 320px;




To see all the steps and the result of Table of Contents designing and customization, you can watch the following video:


Share on Google Plus
    Blogger Comment
    Facebook Comment

1 comments:

  1. Also, portable design was said to cultivate a cleaner idea without space for unessential components or pointless page mess. Webdesign

    ReplyDelete