Enlarge header image in Thanks, Roy

Omeka Classic Themes
1

Hallo,
how can I change the size of the Header background image?
And also how to change the width of the black bulk underneath?
please could you tell me where and how to change this

Thank you for help

2

All of these changes can be made by downloading and installing the CSSEditor plugin. This plugin will allow you to override the current theme’s CSS.

  1. How would you like resize the header image, i.e. make it narrower, shorter, etc?
  2. You can change the black border with the following CSS override:
header {
   border-bottom: [your-width] solid black;
}
3

Hi Kim,
thank youvery much for answering!
I downloaded the css editor, but I musst confess I am not sure how it works, where do I insert the changes? Under Plugins/Css Editor/configuring? Or do I need to open the index page in a Programm like Brackets ? would the change be even in the Index page or Part of a Stylesheet? – sorry if These are silly questions…
I would like to reize the header image a bit higher, as it is so narrow, you hardly can graspe whats on the picture…
I send you the link, if this is any help…
http://theweightofthings.org.www358.your-server.de

Tanks again

4

Yes, CSSEditor’s configuration interface is where you would place your overrides.

If you’d like to change the height of the header, my recommendation would be to adjust its padding.

header {
   border-bottom: [your-width] solid black;
   padding: [vertical-padding] 0;
}

Adjusting the height this way will help keep the site name vertically centered.

5

Thank you, Kim!
But the plugin clears the text just after I click on save and does not change anything in the appearance.
Is maybe the header not allowed to change?

6

Hmm, that’s not supposed to happen. Can you post a screenshot of what you enter into the configuration field?

7

18

8

This is closer to what you want:

header {
    border-bottom: 5px solid #000;
    padding: 0;
}

If you’d like the border styles broken out for your own clarity, you can do this:

header {
    border-bottom-width: 5px;
    border-bottom-color: #000;
    padding: 0;
}
9

Thanks, that looks better :slight_smile:
but still the css editor does not take the change
It just kicks me out, back to the plugin overview

I wonder what i am Doing wrong? should not be so complicated - copy past in the css editor…

10

I also turned off the html filtering on the security settings
, but still not working

11

Ah, the version of CSSEditor I was using hadn’t been released yet, but we’ve officially updated it today. The update supports styling of HTML5 elements like header. Please redownload, install, and try again: https://omeka.org/classic/plugins/CSSEditor/

12

Hey Kim,
Great, thank you so much!!!
I succeded now to change the bordersize - so exiting, ist like Magic …

Can you also tell me what would be a proper command to change the size of the header image? I Kind of would like it to be double the height is has now, but still be responsive of course.
In the code I found this part which does not seem to say anything about the size:

header {background:transparent url(“http://theweightofthings.org.www358.your-server.de/files/theme_uploads/2847ac0a2933f9c59906898945053d1e.jpg”) center left no-repeat;}

and somewhere i found
role: banner

can you also help me with this?

13

The padding was my suggestion for changing the header image size. Try experimenting with an amount to add to the top and bottom of your header. This will keep the site title vertically centered.

header {
    border-bottom: 5px solid #000;
    padding-top: [half-your-height-here];
    padding-bottom: [half-your-height-here];
}
14

Thank you so much!!!
It works, i am so happy …

15

Can I also ask you how to change the font size of the Items Titels?

16

This topic was automatically closed 250 days after the last reply. New replies are no longer allowed.