I have been trying to do some custom CSS changes to my website and I need help with a few things.
1. In the mobile version of the post page, how do I reduce the size of the post tags?
2. In the mobile version, the horizontal tab component piles every tab on top of each other. Is there any way I can have maintain the horizontal orientation of the tabs on the tab component and display an horizontal scroll in the mobile version?
3. My website is in Portuguese. How do I change the language of the automatic buttons and links (Next Post, etc.) in the blog templates? The date format is also set to the American format (month, day, year), and I would like to change this format to day month year.
I have attached screenshots of the current itens I would like to modify.
2. Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
2. I have tried applying the custom Css provided but it did not work. This is the link of the page I'm trying to modify https://barralparente.com.br/areas-de-atuacao/. I would like to have the tabs on an horizontal scroll in the mobile version, similar to the attached screenshot
1. Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
2.Thats not possible however you can center the tabs using this css:
@media only screen and (max-width: 1000px) {
.tabbed[data-style*="minimal"] > ul li:not(.cta-button) a, .tabbed[data-style*="minimal"] > ul li:not(.cta-button) {
width: 100% !important;
text-align: center;
}
}
About number 2 (tab component) I have noticed that if I hide the title of the tabs on the mobile version I achieve one single horizontal line (attached file). Is there a custom CSS to remove the tabs title only in the mobile version?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.tabbed[data-style="minimal"] .wpb_tabs_nav li span {
display:none !important;
}
}
Hello Salient Support,
I have been trying to do some custom CSS changes to my website and I need help with a few things.
1. In the mobile version of the post page, how do I reduce the size of the post tags?
2. In the mobile version, the horizontal tab component piles every tab on top of each other. Is there any way I can have maintain the horizontal orientation of the tabs on the tab component and display an horizontal scroll in the mobile version?
3. My website is in Portuguese. How do I change the language of the automatic buttons and links (Next Post, etc.) in the blog templates? The date format is also set to the American format (month, day, year), and I would like to change this format to day month year.
I have attached screenshots of the current itens I would like to modify.
All the best
Lena
Hey L,
1. On Which page can i a find the tag element ?.
2. Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap >a { font-size: 12px !important; padding: 1px 9px; }3. Please see: http://themenectar.com/docs/salient/translations/ .
Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for the prompt reply!
1. I would like to decrease the size of the post tags on the mobile version of this link (and all post pages): https://barralparente.com.br/2019/02/11/notas-a-minuta-de-contrato-de-arrendamento-do-tecon-2-suape-2/
2. I have tried applying the custom Css provided but it did not work. This is the link of the page I'm trying to modify https://barralparente.com.br/areas-de-atuacao/. I would like to have the tabs on an horizontal scroll in the mobile version, similar to the attached screenshot
3. I will take a look at the link you provided.
Thank you!
Hey Again,
1. Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#page-header-bg[data-post-hs="default_minimal"] .inner-wrap >a { font-size: 12px !important; padding: 1px 9px; }2.Thats not possible however you can center the tabs using this css:
@media only screen and (max-width: 1000px) { .tabbed[data-style*="minimal"] > ul li:not(.cta-button) a, .tabbed[data-style*="minimal"] > ul li:not(.cta-button) { width: 100% !important; text-align: center; } }Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for the message.
Issue no. 1 has been resolved beautifully.
About number 2 (tab component) I have noticed that if I hide the title of the tabs on the mobile version I achieve one single horizontal line (attached file). Is there a custom CSS to remove the tabs title only in the mobile version?
All the Best,
Lena
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .tabbed[data-style="minimal"] .wpb_tabs_nav li span { display:none !important; } }Thanks
ThemeNectar Support Team
It worked great, thanks!