How can I add tabs into my web pages?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I am trying to add tabs to my web part and I try some of the ways suggested on developer web sites. I tried adding javascript, CSS and HTML, but it does not seem to work. It is especially not getting the ul styles from CSS. This article explains what I am trying to accomplish:

http://www.elated.com/articles/javasc...

For reference, my website is http://travelbyvideos.com/

Any help appreciated.

Thanks!
Photo of Murat Jones-Güngör

Murat Jones-Güngör

  • 4 Posts
  • 0 Reply Likes
  • frustrated

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Murat,

Are you adding all of the code they provide into an HTML widget?

And also, are you wanting to make all of your pages like this?

We look forward to helping you with this.

Kind regards,
Nathan
Photo of Murat Jones-Güngör

Murat Jones-Güngör

  • 4 Posts
  • 0 Reply Likes
Hello,

Thanks for replying.

No, I add javascript code into the header part (site>site properties>site tracking code>header code), ul (ul#tabs) styles into CSS (site>site properties>site CSS), and to create the tabs, I add the ul and div codes into the HTML widget. However, when the page loads, ul style is not picked up, so the browser displays it in simple unordered list form. Then, I look at the page source to see if the ul styles was part of CSS, and I cannot find it.

I have deleted all the codes from the site now.

I plan to add this to all the pages, except homepage, about and contact pages.

Thanks,
Murat
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Murat,

In your tracking code, is the JavaScript in <script></script> tags or not? If they aren't they should be set up like this:


<script type="text/javascript">
***JS CODE HERE***
</script>



Also, do you have Yola Silver or Free?

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Murat,

I'll leave you in Nathan's capable hands! If you guys need any help, give me a shout :)
Photo of Murat Jones-Güngör

Murat Jones-Güngör

  • 4 Posts
  • 0 Reply Likes
Hey guys,

Thank you for the responses. Very much appreciated. I created a page to test with tabs. It's available here:
http://www.wheretheheckismrjonesgungo...

Yes, JavScript tags are there.

One note- in CSS, I did not insert the code for body since the current CSS already has that. I only added ul#tabs.

I have a silver account. You are welcome to go in and look at code, if you can.

Thanks,
Murat
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Murat,

Unfortunately, I'm not able to login to your account because I'm not an employee, I'm a Yola Champion. (Respected and trusted members of the community appointed by the company to help provide expert advice to customers.)

I looked at that page and I see how there isn't any style for some reason. I looked at your page source and the JavaScript is there. But, in the custom CSS section, I'm not seeing the CSS.

Is the "Disable Site CSS Overrides" check box checked? If it is, that's why the style isn't being added.

When you're in the CSS editor, could you try unchecking that and see if that works? I have provided some screenshots below.





Then, click on "OK".

Please let me know how that goes for you.

Kind regards,
Nathan
Photo of Murat Jones-Güngör

Murat Jones-Güngör

  • 4 Posts
  • 0 Reply Likes
Nathan,

Thanks! You were spot on. I unchecked the box. You should work for Yola!

One note- I had to copy the existing CSS and paste it into this area before unchecking the box. Otherwise, the styling went wrong. After that I played with styles to match the general colors.

Finished product is here if you are interested:
http://www.wheretheheckismrjonesgungo...

Thanks,
Murat
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome, glad I could help. :) The tabs look great!
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Nice work Nathan :) Thanks for helping here!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome :)