How to remove borders from OJS default theme using custom css

Software Support
,
1

I am trying to remove the borders in the default OJS theme (3.4.0.4) using a custom CSS file, but am having difficulty in getting this to work. I’ve tried various things, and I am obviously missing something that is probably obvious.

What I would like to do is remove the

  • vertical borders on the left and right of the screen, as well as the vertical border of the sidebar.
  • horizontal borders between sections
  • all borders around the announcements

Any help would be greatly appreciated!

2

The vertical borders are defined in body.less. Look for “// Full-height borders wrapping primary content column”, remove the width attribute in the before/after section

3

Can you do this in a custom CSS, or do I need to modify the files in the theme for this?

4

I newer worked with custom CSS. I also don’t modify the default theme. For each journal I create a clone theme plugin from the default theme plugin. This gives much more flexibility, especially in the header/footer layout. Also it allows to override templates (by copying them to a templates directory within the plugin as in [ojs_root]/templates and [ojs_root]/lib/pkp/templates ) without having to touch the original templates. In addition, one can always revert to the default theme if something does not work.

5

I kind of need to use custom CSS, as I don’t have command line access.

6

Hi @Mrak, if you are only working with css stylesheets, make sure to check the ::before and ::after elements when you are inspecting the CSS to determine how to target different areas, as some borders and background colours are being set on these elements.

1 Like
7

Hi @Mrak ,you can copy and paste the code below into your custom css file.

.pkp_page_index .cmp_announcements {border:none;}

.pkp_structure_main:after,
.pkp_page_index .cmp_announcements>.obj_announcement_summary:before,
.obj_issue_toc .galleys:before, .obj_issue_toc .section:before {display:none;}
2 Likes