SimplePortal
Support => English Support => Topic started by: Burke Knight on May 26, 2015, 01:07:01 PM
-
I am planning on adding a new mobile theme to my site, and a mod that changes mobiles to that theme.
However, I'd like to set the portal to be on that theme, but not to display the side blocks on it.
Is there any way to do this?
-
The idea is the same as the other topic, do it via css. Allow the block to be displayed in all themes, and for the themes you don't want it to show up, deny it via css, something like:
#sp_block_ID { display: none; } that goes in your theme css main file (bootstrap.css for example).
-
You know how long and how many I'd have to do, for that to work? LOL
But, I wonder if would work doing something similar:
#sp_left { display: none; }
#sp_right { display: none; }
-
It should, otherwise just
#sp_block_id, #sp_block_id etc { display: none } I don't think you have more than 10 blocks per side at maximum :) Won't really take long ;)
-
Takes a while to get all the block ID's and write it up... LOL ;)
Going to try my idea first, then if not, I'll have to do it that way.
-
Just enable all blocks, inspect the page and memorize each number or type them down, it's surely faster than c/p one by one :P (Pls no kill me ;D )
-
Better yet, my fine trouted friend.
I did even more than I expected, with my way above.
I now have side blocks on big screens, and none on small screens!
portal.css file, copy to the mobile theme you are using. I have selected Redsy.
Find:
#sp_left
{
vertical-align: top;
}
#sp_right
{
vertical-align: top;
}
Replace with:
#sp_left
{
vertical-align: top;
padding-right: 10px;
}
#sp_right
{
vertical-align: top;
padding-left: 10px;
}
Then you find:
body
{
min-width: 750px;
}
Replace it with:
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {
#sp_main #sp_center {
display: block;
width: auto !important;
padding: 0;
}
#sp_left { display: none; }
#sp_right { display: none; }
}
This makes it so the side blocks have the correct space between them on big screens, but do not show up at all, on mobile devices. :)
-
Well yes you optimized it with the "responsive fix" :) Nice work indeed!
-
How will I get the block I'd?????? Cos I don't understand the I'd you talking about.
-
Guess the I'd you mean is Left or Right!!!!!!?
And please the theme I must to edit. Is it
Boostrap.css in the mobile theme I want to use? Or portal.css
-
Hi and welcome to SimplePortal.
First thing please post a single message instead of two, just use the edit message button ;)
Second thing is the solution, there are 2:
A) In the block list page (admin panel) hover on one of the buttons present next to the block name (activate, modify, move, delete). You will see an id=X in the URL that will be displayed in the bottom-left of your browser (the one that tells you where you are going to end up by clicking a link).
B) Create the block, go to where it is supposed to be displayed, right click, inspect element. Look of for something like "div id="#sp_block_X" the X will be replaced by the number you are looking for.
To clarify, the "Recent Posts" block here on SimplePortal is ID=38, even if the theme is a bit custom it should be clear anyways.
Regards
-
Which css will I edit to input the #block id to display non! Bootstarp.css or portal.css
-
How can I know without seeing it? portal.css should always work by the way. Also... Try it and if it doesn't work do the other one?
-
What am trying to say is! I activate both my L/R s.portal. I don't want the L/R portal to display on mobile! I only Want it to show on computer if I access my forum with my desktop!
-
Yes, follow the instructions and the links already provided.
-
Since my issue, the reason of this topic, is done, I have marked it as solved. :)
-
Since my issue, the reason of this topic, is done, I have marked it as solved. :)
Don't marked it solve! Please am only asking for the css to edit!
If I edit the portal.css it may not display on computer too. Cos the portal.css work for the theme name am using!
@BurkeKnight you already through with this! Tell me the solution or answer to my question or problem am having!!!
-
First off, we are all volunteers. As such requesting things like that is kind of impolite.
Secondly, this topic was created by BurkeKnight and it was (and is) about an issue with side blocks that has been solved by both BurkeKnight himself and me co-operating with him.
Third point is that the topic, to him, is solved. As such, it WILL stay solved because he is opening poster.
Fourth one is to follow the instructions me and BurkeKnight already provided. Do note you will need an hard refresh to see the changes in a css file, which means either purging the forum cache or pressing ctrl+f5 instead of just f5 while refreshing the page.
Last thing:
How can I know without seeing it? portal.css should always work by the way. Also... Try it and if it doesn't work do the other one?
Regards
-
@BurkeKnight you already through with this! Tell me the solution or answer to my question or problem am having!!!
I already told you the answers I know.
I do not know what your forum has for mods, or what your theme has for files.
I do not even know what your forum looks like.
There is no way I can answer anymore without information to use to figure it out.
-
@BurkeKnight you already through with this! Tell me the solution or answer to my question or problem am having!!!
I already told you the answers I know.
I do not know what your forum has for mods, or what your theme has for files.
I do not even know what your forum looks like.
There is no way I can answer anymore without information to use to figure it out.
My mobile & computer theme is Reseller. The block side bar is still showing on mobile. So am asking for the css to edit in the reseller theme. To stop showing the side bar on mobile. Only want it to show on computer.
-
Side blocks on big screens, and none on small screens!
portal.css file, copy to the mobile theme you are using. I have selected Redsy. (Same author of Reseller)
Find:
#sp_left
{
vertical-align: top;
}
#sp_right
{
vertical-align: top;
}
Replace with:
#sp_left
{
vertical-align: top;
padding-right: 10px;
}
#sp_right
{
vertical-align: top;
padding-left: 10px;
}
Then you find:
body
{
min-width: 750px;
}
Replace it with:
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {
#sp_main #sp_center {
display: block;
width: auto !important;
padding: 0;
}
#sp_left { display: none; }
#sp_right { display: none; }
}
This makes it so the side blocks have the correct space between them on big screens, but do not show up at all, on mobile devices. :)
-
Side blocks on big screens, and none on small screens!
portal.css file, copy to the mobile theme you are using. I have selected Redsy. (Same author of Reseller)
Find:
#sp_left
{
vertical-align: top;
}
#sp_right
{
vertical-align: top;
}
Replace with:
#sp_left
{
vertical-align: top;
padding-right: 10px;
}
#sp_right
{
vertical-align: top;
padding-left: 10px;
}
Then you find:
body
{
min-width: 750px;
}
Replace it with:
@media only screen and (max-width: 750px), only screen and (min-resolution: 300dpi) {
#sp_main #sp_center {
display: block;
width: auto !important;
padding: 0;
}
#sp_left { display: none; }
#sp_right { display: none; }
}
This makes it so the side blocks have the correct space between them on big screens, but do not show up at all, on mobile devices. :)
I make this change, but still shows the sides block. Only correct the space between them on big screens but still shows on mobil devices. Im using exodus theme. Same guys from reseller and redsy.
-
You need an hard refresh everytime you change something in css.
(Ctrl + f5) and on mobile it takes longer.