Change banner height in Engineer theme

Classic Themes
1

Hi
I’ve come back to Rapidweaver recently and upgraded from RW6 to RW 8 after spending a lot of time in years gone by on this forum.

I like the Engineer theme but would like to be able adjust the banner height.
Can anyone help me ? Is there a simple CSS solution?
I’ve seen how to do this with Mountain theme.

Thanks
Michael

2

There is the option to HIDE the default banner in the Master settings.
You can then add your own.

3

Thanks Chuck. Yes I can see how to hide the banner, on Master settings and on each page individually as well. How would I then add my own though? Sorry if I’ve missed something obvious.

4

Once the banner is hidden, you can then add anything you like in that space, for instance;
(free/donation?) http://defligra.com/free-stacks/height-and-space-stack/
Or you can use a specific banner stack:
https://rapidweavercommunity.com/search?q=banner
Or just be creative with the included RW default stacks.
Experiment :wink: Find a design you like and try and create it with the tools you already have.

5

You’re assuming that they are using a stacks page.

If you want to put out a URL to at least a test page, someone could probably give you some CSS to change the built in banner size.

6

Thanks again Chuck. I’d forgotten about using Stacks to do this. That could be a good workaround.

7

Thanks Doug. I’ll do that. I’m trying with some CSS gleaned from answers to similar questions for other themes, appreciate the help i’ll upload once its a bit more sorted.

8

I’ll be back in my office in about an hour, if you have a test page out (doesn’t need anything special) I’ll have a look.

9

Thanks Doug, much appreciated

Ive uploaded a test site to here:
http://cubey.org/anyamount/

I used this CSS which I got from an answer to a similar question but for another theme.

.hero,
.hero-background {
height: 55vh;
}
@media screen and (min-width: 768px) {
.hero-title {
padding-top: 30px;
}
}

1 Like
10

Very nice.

11

Ok took a quick look, the first part of the CSS is working alright:

.hero,
.hero-background {
height: 55vh;
}

The second part of the CSS doesn’t work on this theme:

@media screen and (min-width: 768px) {
.hero-title {
padding-top: 30px;
}
}

Heres why, ton this theme the container that positions the title and slogan uses absolute positioning. That means any padding on the child element won’t affect the position of the title.

In this theme, this is the code the effects the title and slogan:

.hero-content {
    position: absolute;
    bottom: 20%;
    width: 100%;
}

Now because it is set to a percent on the bottom, It should adjust OK at different screen heights. You could, of course, change that value to anything you like:

.hero-content {
    bottom: 15%;
}

and if you wanted to change that for just Medium (≥768px) and larger screens then you would wrap the code in a media query like this:

@media screen and (min-width: 768px) {
   .hero-content {
       bottom: 15%;
   }
}

So the ending code would look like this:

.hero,
.hero-background {
height: 55vh;
}
@media screen and (min-width: 768px) {
   .hero-content {
       bottom: 15%;
   }
}

Of course, you would need to change the values of height set in VH(ViewportHeight) and bottom set in percent

.

2 Likes
12

Doug thanks so much for giving this your time.
I’m very grateful. That all makes perfect sense and I can implement with confidence !

1 Like
13

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