How to remove the box look in the default manuscript theme and change it full width?

Software Support
1

Hello, I am using default manuscript theme. I want the full width look of the default theme (the full width header and footer is all that needed actually here) but still using with the default manuscript due to its benefits. How should I remove the box outlook and change it back to 100% width?

2

Hi @varshilmehta,

Try the following CSS code:

.pkp_structure_page {
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}
3

Hi, i just want the header and footer to be 100% in width. Is that possible? Or can i put the same color in the background in the sides of the header and footer, so that it look 100%? By using your code, even the main part gets stretched. So everything looks stretched.

4

I’m not sure what you’re asking. As I understand your request, the CSS above will do the trick.

5

I’m neither sure too, but, I was thinking about your request and perhaps what you want is may be achieved with this CSS lines (I test only in Inspector mode of my browser):

h1.pkp_site_name {
    min-width: 100%;
}
ul#navigationUser {
    min-width: 100%;
}
.pkp_navigation_primary_wrapper {
    min-width: 100%;
}

.pkp_structure_footer {
    min-width: 100%;
}

OR

h1.pkp_site_name, ul#navigationUser, .pkp_navigation_primary_wrapper, .pkp_structure_footer  {
    min-width: 100%;
}

Only header and footer will be full width and not content section.

Remember to insert it as last resource to be load, so it can override default css theme parameters (I don’t like use !important)

Hope it helps

Israel

6

Hi, I just want the header and the footer to be 100% in width and not the main content which is between them.

7

Yes, thats what I wanted. However, it didnt work on my site.

8

Did you flush your OJS and browser cache?

If so, I think you gonna have debug your CSS modification, cause I tested it in PKP Journal Demo, which is a fresh install (no modifications at all).

Israel

9

Yes. I have deleted the cache as well.

10

HI @varshilmehta,

When I use the CSS code I attached above, I get the results you describe. The header and footer take up the full width of the screen, but the content on the page stays centred with margins on either side.

11

I took a look at the website you sent via PM. The main content is getting stretched because of the following custom CSS code that you’ve added:

div.pkp_structure_content {
    width: 100%;
    text-align: justify;
}

Take that out and you should get the results you’re looking for.

12

Great. It worked. Thanks every one.

13

Sorry to ask for your help in another question, how can I eliminate the space that exists at the beginning and end.

temporal_2

I want to get something like that:
http://jurnal.htp.ac.id/index.php/keskom

Thank you very much for your help.

14

Hi @Pandora_ramin,

Try these codes in your custom css. If it does not work, please post the link to your site.

.pkp_structure_page {
    margin-top: 0;
    margin-bottom: 0;
}

Regards,

15

It work. Thank you very much.:+1:

16

If you want full-width theme, take a look at: GitHub - pkp/healthSciences: An official theme for OJS 3.1.1+ designed for health science journals or any journal that wants a clean, modern appearance.

1 Like