Style sidebar widgets

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

Fri Jul 12, 2019 10:03 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: 1629
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Fri Jul 12, 2019 10:27 pm

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

To answer your question more accurate, you can perhaps give an example.
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
Zeaks
Jr. Bludit
Posts: 4
Joined: Fri Jul 12, 2019 9:59 pm

Sat Jul 13, 2019 12:22 am

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: 1629
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sun Jul 14, 2019 1:32 pm

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
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
Jay
Master Bludit
Posts: 73
Joined: Mon Feb 11, 2019 8:41 pm

Sun Jul 14, 2019 3:04 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

Sun Jul 14, 2019 8:41 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: 1629
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sun Jul 14, 2019 9:34 pm

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?
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
Jay
Master Bludit
Posts: 73
Joined: Mon Feb 11, 2019 8:41 pm

Mon Jul 15, 2019 2:09 am

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: 1629
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Mon Jul 15, 2019 11:36 am

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:
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
Jay
Master Bludit
Posts: 73
Joined: Mon Feb 11, 2019 8:41 pm

Mon Jul 15, 2019 6:36 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