Gap between sections

Please can you advise where I can look to alter the gap between sections on the issue or front page. I have looked at this post: https://forum.pkp.sfu.ca/t/solved-long-gap-between-journal-sections/49355 but I don’t know which file to open. See https://murmurations.cloud
Using bootstrap 3 on OJS 3.2.1.1
Thanks

The file is in the post you referred - plugins/themes/default/styles/objects/issue_toc.less

Thanks but changing padding to padding-left didn’t make any difference (advised as a solution by person in other post I mentioned).

Here is the current code. Some advice would be valued.

	.galleys,
	.section {
		position: relative;
		margin: @triple -@double;
		padding: @triple;

		&:before {
			content: '';
			position: absolute;
			top: 45px;
			left: 0;
			width: 100%;
			border-top: @bg-border;

Hi all,

If you modify a .less file, make sure to remove cache/*.css to cause the compiled CSS to be re-generated.

Regards,
Alec Smecher
Public Knowledge Project Team

thank you. any hints on how I would go about this? Is it an OJS or browser side cache?

Hi @gail,

This is on the server side; you’ll need to use a file manager on your server (usually available through CPanel) or, if you’re familiar with it, secure shell.

Regards,
Alec Smecher
Public Knowledge Project Team

do I need to delete or add something to the file

Hi @gail,

You need to remove cache/*.css to cause OJS to re-generate it.

Regards,
Alec Smecher
Public Knowledge Project Team

I’m sorry, Alec and co, but I don’t know where to delete cache/*.css

An alternative is to save the theme in your website settings of the journal (just click Save button in the Settings > Website > Appearance Tab), then reload the (or Shift-Reload) the journal page in the browser twice so that also the browser’s cache is overwritten.

Thanks, I tried this alternative save option and it did reload the page with content changes but it hasn’t actually altered the layout. I changed padding to padding-left:
.galleys,
.section {
position: relative;
margin: @triple -@double;
padding-left: @triple;

What else can I try?
On the opening page, there is the correct spacing between Editorial and Poetry. Then there is a long gap before the section Articles and before the section Flash Tales.
murmurations.cloud
And with this issue of the journal, all normal spacing except just before the Revivals section: Vol. 2 No. 1 (2019) | Murmurations: Journal of Transformative Systemic Practice

Hi @gail,

I am not sure, but it looks like there is a ‘media element’ in the css where you can probably fix this.

If you change the “overflow” from “hidden” to “initial” - it seems to take care of things, see attached screenshot.

image

Result:
image

Hope this helps!
Best wishes,
Emma

Hi @OpenAcademia,
I can’t see anything like that in my code. See below.
I notice the gaps in past archived issues too. So is that to do with different files or one overall file that dictates how space is organised?

/**

  • @file styles/objects/issue_toc.less

  • Copyright (c) 2014-2020 Simon Fraser University

  • Copyright (c) 2003-2020 John Willinsky

  • Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.

  • @brief Styles applying to an issue table of contents view

  • @link templates/frontend/objects/issue_toc.tpl
    */
    .obj_issue_toc {

    .cover {
    display: block;
    margin-bottom: @double;

     img {
     	display: block;
     	max-height: 250px;
     	width: auto;
     }
    

    }

    .description {

     > *:first-child {
     	margin-top: 0;
     }
    
     > *:last-child {
     	margin-bottom: 0;
     }
    

    }

    .pub_id {
    margin: @double 0;

     .type {
     	font-weight: @bold;
     }
    

    }

    .published {
    margin: @double 0;

     .label {
     	font-weight: @bold;
     }
    

    }

    .articles {
    &:extend(.pkp_unstyled_list);
    }

    .sections:not(:first-child) {
    margin-top: @triple * 2;
    }

    .section:last-child .articles > li:last-child {
    margin-bottom: 0;
    }

    .galleys_links {
    &:extend(.pkp_unstyled_list);
    margin-top: @base;

     li {
     	display: inline-block;
     	margin-right: 1em;
    
     	&:last-child {
     		margin-right: 0;
     	}
     }
    

    }

    @media(min-width: @screen-tablet) {

     .heading {
     	.pkp_helpers_clear;
     }
    
     .cover {
     	float: left;
     	width: 25%;
     	height: auto;
     	max-height: none;
     	margin-right: @double;
     }
    
     .galleys,
     .section {
     	position: relative;
     	margin: @triple -@double;
     	padding-left: @triple;
    
     	&:before {
     		content: '';
     		position: absolute;
     		top: 45px;
     		left: 0;
     		width: 100%;
     		border-top: @bg-border;
     	}
    
     	> h2,
     	> h3 {
     		display: inline-block;
     		position: relative;
     		left: -15px;
     		margin-top: 0;
     		padding: 0 (@triple / 2);
     		background: @lift;
     		font-size: @font-bump;
     		font-weight: @normal;
     		line-height: @triple;
     		color: @text-light;
     	}
     }
    

    }

    @media(min-width: @screen-desktop) {

     .galleys,
     .section {
     	margin: @triple -@triple;
     }
    
     .cover {
     	margin-right: @triple;
     	margin-bottom: @triple;
    
     	img {
     		max-height: none;
     	}
     }
    

    }
    }

Any other help please on how to reduce gaps between the sections on this journal? https://murmurations.cloud
Thanks

A good and simple option is to use the Web Inspector tool of your browser (all modern browsers offer this tool). You can choose the element using mouse hover and then inspect and identify the responsible CSS code. Even it allows to change and test the CSS code on the fly and test its effect on element, although you can’t save it permanently, because you just change the current calculated DOM of the browser. See attached screenshot as an example.

After you have found the responsible CSS, you may then find and change it in the .less code (e.g. if you use a Linux/Unix based server, by using a recursive grep on the files).

Suggestion to theme developers: It would be good if the parts of the .less files would be commented more, especially for the default theme.

web_inspector

This isn’t an answer to my question. Not everyone here is trained in coding.

No, it was a hint on how you could help yourself, then finally it is you who has to do the changes. And the browser’s web inspector is best and easiest tool to start with.

You mentioned that you use a bootstrap theme in your original post. Maybe some confusion comes from there, because most of the posters here refer to the default theme, which may have a different .less file structure.

You may be right about needing to change a different file in Bootstrap. I ask here not for others to do anything for me but so I can learn and problem solve. There is a limit to my available time and knowledge. If you know of someone who can help with some of these things on a paid basis, please let me know.