Problem with personalization css in OJS 3.1 Bootstrap3 Theme

Software Support
1

Hello…

I have installed the OJS 3.1 version and I am trying to modify the design through CSS.

I have the following problem:

I created the rjd.css file and placed it in the style folder.
I added this line in the BootstrapThreeThemePlugin.inc.php file:

$this->addStyle(‘rjd’, ‘styles/rjd.css’);

But the changes do not appear. I’ve done the removal of the files in cache both browser and server but everything remains the same.

It seems that the CSS file does not have priority then it reads it but it overwrites it with the css of the theme by default.

This is the web site: https://revistajusticiayderecho.com/index.php/rjd/index

Can you help me with this?

2

The CSS should comply with the rules of specificity (priority). Did you try to make you selectors more specific? You could check it with your browser.

3

Thank you very much @Vitaliy… your answer solved the problem …

I added !important; to each CSS line.

In previous works (OJS 3.0.2) it was not necessary to add “!important;” I made several adjustments to different pages in OJS 3 but in none I needed to use! important;

Now it is necessary to use !important; in each new modification?

4

This modificator is usually used as an exception. I recommend to explore CSS specificity/priority/rules in google. It is quite big topic. For example you can use several parent or more specific selectors to override previous css selectors. Let me know if you don’t find this info after the search.

5

Hello again…

I could not make changes in another way.
I only managed to make modifications using “!important”

In my previous works with other magazines I did not have to use “!important”, I just added the new css path (styles/rjd.css) in “BootstrapThreeThemePlugin.inc.php”

I add

public function init() {

    $this->addStyle('rjdua', 'styles/rjd.css');

But now it does not work.

Can you help me to make the css file rjd.css the one that has priority?

6

For example:

#elementId will override .elementClass,

div#elementID wil override '#elementClass`,

.parentElement div.elementClass will override div.elementClass,

.parentElement .parentElement div.elementClass will override previous example,

.parentElement .parentElement > div.elementClass will override previous.

etc.

1 Like
7

https://www.w3.org/TR/CSS2/cascade.html#specificity

1 Like
8

@Vitaliy

Thank you very much for the help and the links!

9

Por favor me puedes ayudar. Me gusta como está la página de tu revista como lograste que tu logo aparezca en medio y grande, te agradecería mucho me compartas el código.

10

Hi! @Pandora_ramin
can you give me the link to your web page?

1 Like
11

Gracias por responder.
Mi revista está en http://disertante.com/magazine/index.php/Vol1
Quiero colocar el logo en el centro y que el menú aparezca debajo del logo.
Agradezco si me puedes ayudar.

12

POr favor me ayudas con el código que usaste para conseguir que tu logo esté en el centro y que dabjo aparezca el menú.
Mi revista está en http://disertante.com/magazine/index.php/Vol14
Agradezco si me puedes ayudar.

13

@Pandora_ramin All the times I have wanted to look at the code of your web something does not work or the link tells me page does not find. The few times I have been able to enter I find a different scenario. You have been constantly changing the codes so I can not help in that case because I can not restart the work every time you change the design.

I do not know what version OJS is using and I can not help you if you constantly modify the header design.

14

Sorry to try to fix the problems I reinstalled the OJS and changed, some things.
But my magazine is in:
https://disertante.com/revista/index.php/index

Create this post:

15

What don’t you understand from previous replies?

16

Hello… @Pandora_ramin

1.- You have version ojs 3.1.0-1 installed
2.- You have installed the Thema defaultManuscript.
2.- It seems that you made some modifications in https://disertante.com/revista/index.php/index3 (see image), but I can not find the codes you used to make the changes (maybe there are errors in the installation).

This is how your OJS installation looks: otro

This is how my OJS installation looks: MI

3.- On my server install a new version ojs 3.1.0-1. Also install the Theme defaultManuscript v.1.0.1
4.- The code to put the logo to the center and to show the menu below is this:

@media (min-width: 992px) {
.pkp_site_name {
text-align: center;
}
}

If you have applied modifications this code may not work.
If you want to see the working code, retype OJS 3.1.0-1, reinstall Theme defaultManuscript 1.0.1 (Release 1.0.1 · NateWr/defaultManuscript · GitHub).
You can then continue with the other changes for your site.

You should consider that I am not sure if the version of the theme defaultManuscript v.1.0.1 is compatible with the OJS version 3.1.0-1 (I am not currently using that theme). Maybe you can ask your creator (@NateWr) about compatibility.

Greetings.

1 Like
17

Hi @David_Alarcon_davidy,
I think you have installed a single journal and what you have posted is the home page of that journal.

But, @Pandora_ramin, seems to have installed two journals and what her link shows is the home page of the site, not the journal. Once you click any one out of two of her journals, I hope you will get home page of a journal which resembles yours.

Regards,

18

@anupent … thank you very much for the clarification!!!
@Pandora_ramin here the code:

@media (min-width: 992px) {

.pkp_site_name {
text-align: center;
}
}

@media (min-width: 992px) {

.pkp_site_name {
text-align: center;
}
}

.pkp_navigation_user_wrapper {
position: unset;
}

@media (min-width: 992px) {
.pkp_navigation_user_wrapper {

width: 50%;

}
}

See:
otro2

I do not like it! … I personally believe that the best place for this menu is where it is located by default.

Regards!

1 Like