Style sidebar widgets

Zeaks
Jr. Bludit
Posts: 4
Joined: Fri Jul 12, 2019 9:59 pm

I've read through the docs but couldn't find much info on this. How do I add classes to sidebar items to style the sidebar widgets? I'm making a bootstrap theme and need to use certain classes in the sidebar. :?:
Any help is appreciated :)
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

It depends from the theme. Normally there is a template sidebar.php.

To answer your question more accurate, you can perhaps give an example.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Zeaks
Jr. Bludit
Posts: 4
Joined: Fri Jul 12, 2019 9:59 pm

Thanks for the reply. I do have a sidebar.php but other than adding

Code: Select all

<?php Theme::plugins('siteSidebar') ?>
I can't figure out how to style anything in it.

Here's an example of basically how I'd like to style each widget plugin

Code: Select all

<div class="card">
	<div class="card-header">
	Recent Posts
	</div>
	<div class="card-body">
		<ul>
			<li>First Post Title</li>
			<li>Second Post Title</li>
			<li>Third Post Title</li>
		</ul>

	</div>
</div>
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

The plugin "Static Pages" for example has the class plugin-static-pages.

Therefore you can use to style the titles of the pages:

Code: Select all

.plugin-static-pages  ul
and

Code: Select all

.plugin-static-pages  li
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
Jay
Master Bludit
Posts: 133
Joined: Mon Feb 11, 2019 8:41 pm

Zeaks wrote: Sat Jul 13, 2019 12:22 am I can't figure out how to style anything in it.
Either you stick to already existing element classes, and stylize them targeting those elements using for example :nth-child() selector.

Or you choose a more invasive method, and change the html structure inside every plugin shown in sitesidebar.
Plugins code doesn't change that often so you might try with one or two plugins.
Look for code placed inside public function siteSidebar()
Zeaks
Jr. Bludit
Posts: 4
Joined: Fri Jul 12, 2019 9:59 pm

Thanks for the replies, I figured this was the case. It looks pretty good as is so I'll probably just leave them with the basic styling, I just wanted to be sure I wasn't missing something.
Maybe this is a feature that could be considered in a future update. Thanks again for the help
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Zeaks wrote: Sun Jul 14, 2019 8:41 pm Maybe this is a feature that could be considered in a future update.
What exactly do you mean? That there were more Bootstrap elements?
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
Jay
Master Bludit
Posts: 133
Joined: Mon Feb 11, 2019 8:41 pm

Edi wrote: Sun Jul 14, 2019 9:34 pm
What exactly do you mean? That there were more Bootstrap elements?
A simple input field in plugin's options allowing to set a custom class would be more than enough. This reminds me one of the basic configuration options for modules in joomla cms.
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Jay wrote: Mon Jul 15, 2019 2:09 am A simple input field in plugin's options allowing to set a custom class would be more than enough.
There is yet a custom class for every plugin. :roll:
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
Jay
Master Bludit
Posts: 133
Joined: Mon Feb 11, 2019 8:41 pm

Edi wrote: Mon Jul 15, 2019 11:36 am There is yet a custom class for every plugin. :roll:

It's hard to disagree.
Unfortunately, it does not make things any easier when it goes to add css frameworks like bootstrap. Easier to add another class to plugin's code, than changing all related classes without breaking whole styling.

That's no problem for me, but bludit aims for a non techie users, thus pointing them to change anything in sourcecode is far away from proper approach in my taste.
Post Reply