OJS OCS OMP OHS

You are viewing the PKP Support Forum | PKP Home Wiki



How to create two right-sidebars

Are you responsible for making OJS work -- installing, upgrading, migrating or troubleshooting? Do you think you've found a bug? Post in this forum.

Moderators: jmacgreg, btbell, michael, bdgregg, barbarah, asmecher

Forum rules
What to do if you have a technical problem with OJS:

1. Search the forum. You can do this from the Advanced Search Page or from our Google Custom Search, which will search the entire PKP site. If you are encountering an error, we especially recommend searching the forum for said error.

2. Check the FAQ to see if your question or error has already been resolved.

3. Post a question, but please, only after trying the above two solutions. If it's a workflow or usability question you should probably post to the OJS Editorial Support and Discussion subforum; if you have a development question, try the OJS Development subforum.

How to create two right-sidebars

Postby kettgun » Tue Aug 13, 2013 9:17 am

I would like to have two sidebars in the right column position, say, right and right2, so the column will become:
left -- middle -- right -- right2 OR left -- middle -- right2 -- right.

Or, how to move the left sidebar into the right position so that the left sidebar will be next to the right sidebar. Say:
middle -- right -- left(or right2) OR middle -- left(or right2) -- right

Or is there another trick to create two sidebars in the right position?

Any help would be greatly appreciated.
kettgun
 
Posts: 5
Joined: Wed Jul 17, 2013 10:51 am

Re: How to create two right-sidebars

Postby JasonNugent » Wed Aug 14, 2013 5:19 am

Hi kettgun,

Your approach to just move the left side bar over to the right is probably easier and would keep the same amount of screen real estate for reading articles. There would definitely be some modifications to the CSS in order to do this. All of the CSS for determining where sidebars are positioned is dealt with by the plugin for the theme you are using. You would have to modify the plugins/themes/XXXXXX/XXXXX.css file and change the code for #leftSidebar and #rightSidebar in order to move them around.

There may also be modifications required to lib/pkp/templates/common/header.tpl depending on how extensive these changes need to be.

Regards,
Jason
JasonNugent
Site Admin
 
Posts: 877
Joined: Tue Jan 10, 2006 6:20 am

Re: How to create two right-sidebars

Postby kettgun » Wed Aug 14, 2013 11:14 am

Dear Jason,
Thank you very much for the clue. I'll try it and it may take times since I am not familiar yet with the code. I'll be back to you if I got an impasse.
kettgun
 
Posts: 5
Joined: Wed Jul 17, 2013 10:51 am

Re: How to create two right-sidebars

Postby kettgun » Fri Aug 16, 2013 10:54 am

Hi Jason, I am partially successful in making two sidebars by moving the left sidebar to the right position (see Font Size, Journal Help menu/block in the attached screenshots). The remaining problems are the block width and the space between two sidebars that I cannot manage. Here are my steps.

First, I choose custom theme.
You suggested me
to modify the plugins/themes/XXXXXX/XXXXX.css file and change the code for #leftSidebar and #rightSidebar in order to move them around

but there are no #leftSidebar and #rightSidebar in plugins/themes/custom/custom.css

Therefore, I add the following code into custom.css :

Code: Select all
#main {
   padding: 10px 0 0 5px;
   margin-bottom: 50px;
   margin-top: 10px;
   position: static;
}

div #sidebar {
   margin-left: 0;
}

#rightSidebar, #leftSidebar {
   padding-top: 30px;
}


so it becomes:

Code: Select all
#header {background-color: #cccccc;}
#footer {background-color: #cccccc;}

#main {
   padding: 10px 0 0 5px;
   margin-bottom: 50px;
   margin-top: 10px;
   position: static;
}

div #sidebar {
   margin-left: 0;
}

#rightSidebar, #leftSidebar {
   padding-top: 30px;
}

table.listing tr.fastTracked {background-color: #cccccc;}
a {color: #669900;}
a:link {color: #669900;}
a:active {color: #669900;}
a:visited {color: #669900;}
a:hover {color: #669900;}
input.defaultButton {color: #669900;}
body {background-color: #ffffff;}
input.defaultButton {background-color: #ffffff;}
body {color: #009999;}
input.defaultButton {color: #009999;}


Second, modifying the following script in lib/pkp/templates/common/header.tpl

Code: Select all
<div id="body">

{if $leftSidebarCode || $rightSidebarCode}
   <div id="sidebar">
      {if $leftSidebarCode}
         <div id="leftSidebar">
            {$leftSidebarCode}
         </div>
      {/if}
      {if $rightSidebarCode}
         <div id="rightSidebar">
            {$rightSidebarCode}
         </div>
      {/if}
   </div>


to this (changing leftSidebar to rightSidebar):

Code: Select all
[/c<div id="body">

{if $leftSidebarCode || $rightSidebarCode}
   <div id="sidebar">
      {if $leftSidebarCode}
         [b]<div id="rightSidebar">[/b]
            {$leftSidebarCode}
         </div>
      {/if}
      {if $rightSidebarCode}
         <div id="rightSidebar">
            {$rightSidebarCode}
         </div>
      {/if}
   </div>


the result is as follows (main content moves to the left, big space between two sidebars):

screenshot1.jpg
screenshot1.jpg (42.23 KiB) Viewed 802 times

Then I change the parameter as follows (look at 105 px and 195 px):

Code: Select all
#main {
   padding: 10px 0 0 105px;
   margin-bottom: 50px;
   margin-top: 10px;
   position: static;
}

div #sidebar {
   margin-left: 195px;
}

#rightSidebar, #leftSidebar {
   padding-top: 30px;
}


The result is as follows (space problem between two sidebars remains):

screenshot2.jpg
screenshot2.jpg (53.5 KiB) Viewed 802 times

I do not know what's wrong with my steps. My questions are: 1) How to reduce the space between such two sidebars? and 2) How to increase the block/sidebar width?
I have tried to play with css files in folder styles but with no luck (it seems they are all connected or complicated). Hope you could help me. Thanks in advance.
kettgun
 
Posts: 5
Joined: Wed Jul 17, 2013 10:51 am

Re: How to create two right-sidebars

Postby JasonNugent » Mon Aug 19, 2013 9:02 am

Hi kettgun,

Yeah, the custom plugin (in themes/custom/custom.css) lacks the sidebar definitions because it is a 'custom' plugin (i.e., one that is meant to be modified). What browser are you doing the bulk of your testing with? I recommend using Firefox or some other browser that supports the Firebug plugin. It will let you examine the CSS for block elements and you can see what classes are being applied so you can track down the visual items you need to change in your plugin.

Regards,
Jason
JasonNugent
Site Admin
 
Posts: 877
Joined: Tue Jan 10, 2006 6:20 am

Re: How to create two right-sidebars

Postby kettgun » Sat Aug 24, 2013 10:38 am

Sorry for my late response. I use Firefox and can't still manage it. Hope you could inform me the code.
kettgun
 
Posts: 5
Joined: Wed Jul 17, 2013 10:51 am

Re: How to create two right-sidebars

Postby kettgun » Sun Aug 25, 2013 1:43 am

I tried to switch to all available themes -- tried one by one from none, Steel, ClassicNavy, Vanilla, BlueSteel.... to Desert Theme -- but the appearance remains unchanged. Wide space between sidebars and unchangeable block width are still there.
kettgun
 
Posts: 5
Joined: Wed Jul 17, 2013 10:51 am

Re: How to create two right-sidebars

Postby JasonNugent » Mon Aug 26, 2013 6:41 am

kettgun wrote:Sorry for my late response. I use Firefox and can't still manage it. Hope you could inform me the code.


Have you tried the Firebug plugin for Firefox? It lets you examine the CSS of elements on the page and would tell you exactly what you needed to change.

Regards,
Jason
JasonNugent
Site Admin
 
Posts: 877
Joined: Tue Jan 10, 2006 6:20 am


Return to OJS Technical Support

Who is online

Users browsing this forum: Alexa [Bot], Yahoo [Bot] and 4 guests