Hey there ceriseduweb,
Hope you’re well today!
You can change the float of the content area on the right to make your sidebar appear on the left. To do that please add the following custom CSS to your theme custom CSS tab which is located in Appearance >> Theme Options >> Advanced Settings:
.main.col-lg-9.col-md-8 {
float: right;
}
This should make the sidebar appear on the left side.
As for the changes of the sidebar font this should also be possible with some custom CSS, what would you like to change?
Hope this helps 🙂
Best regards,
Bojan
Because of the responsive nature of the theme you really want to use a media query with this else it can cause issues so for one I recommend:
@media (min-width: 992px) {
body .main.col-lg-9 {float:right;}
}
and as Bojan said, if you want to change the fonts you need to be specific about what fonts and post a link.
Kadence Themes
Dear all,
Many thanks for your advices and I take note for the responsive option !
As far as fonts are concerned. I would like to be able to make the font bigger and bold for the main categories to distinguish them from the sub-categories…
Could you suggest a custom CSS for that ?
Many many thanks in advance!
Regards,
Rachel
Hey there Rachel,
Could you please post a link to your site so I can take a look?
Cheers,
Bojan
Hi Bojan,
The website is not online yet so I will be back to you next week when it’s done. Many thanks!
Rachel
Hey Rachel,
If you explain where you want to do that and post a screenshot of the widget in backend that you want to change I could recreate it on my installation help you out with the CSS 🙂
Cheers,
Bojan
Dear Bojan,
Here is the link of the website online now:
What I would like to do is to change the CSS for the fonts, size and colours…Etc in this sidebard to distinguish better the main categories from the sub-categories…
Is that possible?
Many thanks,
Rachel
Dear Support,
This seems to fit this topic, so I’m posting here, this is my first post so please redirect as needed 🙂
I’m using Virtue premium here:
http://www.communityschoolnh.net/news/
I have the Home page set to full width
for a regular, “non-homepage” I’ve selected the sidebar template
http://www.communityschoolnh.net/news/?page_id=5556
I have a Revolution Slider at the top of the content area, that is the full width of the page, and seems to be overlapping the sidebar
I go to widgets, and choose to place any widget in the “primary sidebar”, and it shows up under, or in the same space as the slider at the top of the page:
http://www.communityschoolnh.net/news/?page_id=5556
I would like to place widgets in the sidebar on the right, below the
slider.
Or, place the slider above the page title.
Can I use a “blank” widget at the top of the side bar, to bump
subsequent widgets below the slider?
Thanks for any help,
quinfolk
Hey there quinfolk,
Hope you’re well today!
In future I suggest opening a new thread to avoid confusion and so other members can find this easier. Please try adding this custom CSS code in Appearance >> Theme Settings >> Advanced Options >> Custom CSS:
@media (min-width: 1000px){
aside#ktsidebar {
margin-top: 315px;
}
}
This should make the sidebar appear below the slider 🙂
Hope this helps 🙂
Cheers,
Bojan
Hey again Rachel,
Just realized you posted as well 🙂
Please try adding the following CSS code for parent categories:
ul.product-categories {
font-size: 16px;
font-family: "Times New Roman", Georgia, Serif;
}
.sidebar .product-categories li a, .woocommerce .product-categories li a, .sidebar .widget_categories li a {
color: #000;
}
This should change the font, size, and the color of parent categories. Please replace the numeric value in font size and font family as well as color hex value in the second part. Check this link for web safe fonts:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
As for the sub categories please add the following:
.product-categories ul.children {
font-size: 16px;
font-family: "Times New Roman", Georgia, Serif;
}
.sidebar .product-categories .children li a, .woocommerce .product-categories .children li a, .sidebar .widget_categories .children li a {
color: #000;
}
Change the values for these as well as for the parent ones to what ever suits you the most 🙂
Hope this helps.
Cheers,
Bojan
>>In future I suggest opening a new thread to avoid confusion
got it, I will.
THANK YOU!
Fantastic!
Many thanks again for your help Bojan !
Rachel
