Page 1 of 1

sidebar issue

Posted: Wed Dec 01, 2021 9:17 am
by Laurent
Hi all,

I am discovering Bludit little by little and I did so modifications on the default theme "blogx" to personalize it .
But I have a little thing I don't find solution : it's about the sidebar.
I could do some changes. Per example, I did in way that the text is aligned to right. Tags are in smaller size and in inline way. The menu categories a bit bigger.
It was rather simple by some hacks on PHP files and CSS.

But, I would like all this plug-ins on the sidebar are in inline way and text centred when we look the site in responsive mode (@media max-width:768px)... and I don't find out how to do that. I try many ways, but no one worked.

So, if some body has solution, it would be welcome.

PS I hope my message is understandable.

Re: sidebar issue

Posted: Wed Dec 01, 2021 10:24 am
by Laurent
Hi again,

I found out. I needed to modify also the file "index.php" of the theme.

Stupid I am.

Re: sidebar issue

Posted: Wed Dec 01, 2021 10:46 am
by Edi
Laurent wrote: Wed Dec 01, 2021 9:17 am But, I would like all this plug-ins on the sidebar are in inline way and text centred when we look the site in responsive mode (@media max-width:768px)... and I don't find out how to do that.
You can give the class of the sidebar the following rules for the media query:

Code: Select all

@media (max-width: 768px) {

   .col-md-3 {
      display: inline;
      text-align: center;
   }

}

Perhaps I do not understand your question....

Re: sidebar issue

Posted: Wed Dec 01, 2021 1:49 pm
by Laurent
Thank Edi,

You understood right.
The only difference, it's I put my own div class because I like to use my own CSS file. I can modify more easily like I want (and I don't want to do any changes in the bootstrap.css).

So, I hack the index.php and and change as

Code: Select all

<div class="col-md-3 site-sidebar">
And in my CSS file I did about like you write

Code: Select all

@media (max-width: 768px) {

   .site-sidebar {
      display: inline;
      text-align: center;
   }

}
It works like I want.