Business Line

nick983800

I built a tab show, and use s5_tab1 & s5_tab2 (the content is picture). I want to click the text tile of s5_tab1 & s5_tab2 to see what I would like to see. But I found out in the complete page there's not any text bottom show up, just (very) small pictures come for choosing.
In my previous template of business_pro, the tab show can setting the color, but in buisness_line, the Tab color can't be set up.-

I can't share the line to you, because it's a close environment.
Can you help me about it?

With Best Regards,
Nicholas Chen

dominic

Hi nick983800,
You need customize the CSS to show the button, you can try the following CSS code:

.s5_tab_show_slides_buttons_top {
  margin: 0;
  display: ;
}
.s5_tab_show_slide_button_active, .s5_tab_show_slide_button_inactive {
  width:   100% !important;
  height: 45px !important;
  border-radius: 0 !important;
  color: #000 !important;
  line-height: 45px;
}
.s5_tab_show_button_img_present .s5_tab_show_button_text {
  position: relative;
  transform: none;
  top: auto;
  left: auto;
  color: #fff;
  width: auto;
}
.s5_tab_show_slide_button_active, .s5_tab_show_slide_button_inactive {
  padding: 20px 0 !important;
}
.s5_tab_show_center_tabs_enabled .s5_tab_show_slides_buttons {
  display: flex;
}

nick983800

dominic

Question is how do I proceed it?
should I crease own css or just add these you mentioned on the css of buisness line?
And where should I add these information on? because I don't know how.

Now I'm just doing the website, and absolutely don't know about the css, so could you send me the detail how with picture one by one?

With Best Regards,
Nicholas Chen

nick983800

dominic

I know where is the css, but don't know how should I do what you want me to do.

With Best Regards,
Nicholas Chen

nick983800

should I add what you wrote on mod_s5_tab_show (default.php)????

Nicholas Chen

dominic

Hi nick983800,
You can add the CSS code to the templates/business_line/css/custom.css file:

nick983800

dominic

I can't find custom.css on this list.
should I add one named "custom.css"?
Then, I should I use it?

nick983800

please kindly guide me

nick983800

I follow what you tell me, but nothing happened.
It should have something I don't know how to do.

With Best Regards,
Nicholas Chen

nick983800

I really hope you have a manual book to guild customer how to operate it. I use your template over 10 years; just buy business line on February.

Nicholas Chen

dominic

Hi nick983800,
You can create the custom.css file in the templates/business_line/css folder to custom CSS of your site.
Also, you can give me the site URL for further checking, if you still face this issue.

nick983800

do somebody can help me about after build the custom.css, then how do I do the next for the S5 tab show module?
Because nothing happen, I think it should be some procedure I don't do.

With Best Regards,
Nicholas Chen

nick983800

Finally, I try everything, then successful.
After made a custom.css, then I need to write the file name on the column of "Custom Class", then it worked.

nick983800

the css code of the s5 table show can't be like business pro, can you help me to make the similar one, such like

horizontal button
button width be flexible based by text
as you can see from the picture the content of s5_tab1 is not in central, please make the content to to central.

Please, and thank you.

Nicholas Chen

nick983800

dominic can we use anydesk to see it? because my site doesn't open outside. Is it possible?

With Best Regards,
Nicholas Chen

dominic

Hi nick983800,
I have tested it on our localhost, you can add the following CSS code to your custom.css file:
NOTE: Create the custom.css file in the templates/business_line/css folder

.s5_tab_show_slides_buttons_top {
  margin: 0;
  display: flex;
  border-bottom: 3px solid #fd5800;
}

.s5_tab_show_slide_button_active, 
.s5_tab_show_slide_button_inactive {
  width: 10% !important;
  height: 0px !important;
  border-radius: 0 !important;
  color: #fff !important;
  line-height: 0px;
  text-align: center;
  font-weight: bold;
  background: #3c3c3c !important;
  margin-left: 1px !important;
}

div.s5_tab_show_slide_button_active {
  background: #fd5800 !important;
}

.s5_tab_show_button_img_present .s5_tab_show_button_text {
  position: relative;
  transform: none;
  top: auto;
  left: auto;
  color: #fff;
  width: auto;
}
.s5_tab_show_slide_button_active, 
.s5_tab_show_slide_button_inactive {
  padding: 20px 0 !important;
}
.s5_tab_show_center_tabs_enabled .s5_tab_show_slides_buttons {
  display: flex;
}

.s5_tab_show_outer1 {
  padding: 0;
}

.s5_tab_show_slides_container_wrap_outer {
  margin-top: 20px;
}

This is the result after adding the CSS:

nick983800

The S5 Tab Show function is not equivalent to the original function on shape 5, especially on business line template. It becomes useless and not compatible to business line template. very terrible.

Nicholas Chen

nick983800

dominic Dear Dominic, I really must say "thank you very much". It's very important function for me and my company web design. You save the function in business line. It's a long procedure to go on the website construct; believed you will help me to improve some bug in the business line template.

Thank you again.

With Best Regards,
Nicholas Chen

nick983800

dominic

But the new issue is when you make the website to be shown in smaller device or make the browser to be smaller, the button will not be responsive according to the device in using.
You can refer to my old version website, the S5 Tab Show: https://www.vtx-precision.com/products/planetary-gearboxes/all-purpose-gearbox-dh-series.html
on the bottom of any tab, there're too many blank remaining, especially when you small the browser, the condition be more serious, like picture shown; may I know there's any way to solve it?

I think you need to modify something again.

With Best Regards,
Nicholas Chen

dominic

Hi nick983800,
About the mobile issue, you can add the following CSS to the custom.css file:

.s5_tab_show_hide_tabs_enabled .s5_tab_show_slides_buttons, .s5_tab_show_hide_arrows_enabled .s5_tab_show_next_prev_wrapper {
     opacity: 1; 
}

@media (max-width: 767px) {
    .s5_tab_show_slide_button_active, 
    .s5_tab_show_slide_button_inactive {
       width: 30% !important;
    }
}

The tabs module will be different between the templates. Also, about the many blanks remaining in the tabs, could you let me know the position that you are using?