Modify header on Split theme

RapidWeaver Classic General
1

Hi,
I need your help. I’m using the theme Split, I would like to use my personal banner I already have 960x150.
I use the css code for put it into the site, I put in into resources.
Now I can see my banner but it’s too large, and especially too high. I think I need a code for select the header size by css code. Also, browsing the site on mobile device, I noticed the header wasn’t responsible, the text on the page yes, the header no. I need an header responsible. Please help me.
Thank you very much.

2

A URL to your site would help people give you a hand. Also maybe a screen shot of what custom CSS you have tried.

3

www.ericclapton.it/index.html
I cannot see the jpg on home page, why?
Thank you

4

Don’t know what you are expecting to see, but this is what I see:

2017-06-23_10-56-17.png1134×530 305 KB

5

The split them adjust the size of the banner area based on screen width breakpoints. How large at what screen size do you want to make it?

Would like a look at the CSS code you used please.

1 Like
6
  • On my header, there are 3 photos on the left and 3 photos on the right.
    In your page isn’t displayed in its entire size.
  • The “Links” section on the menu appear in the 2nd line…
    -Why I can’t see the photos I’ve put in the homepage?

I use this css code:

#intro #intro-background {
background: url(%resource(banner2new.png)%) no-repeat center center;
background-size: cover;
}

#headerImage { background-image: url(%resource(banner2new.png)%); }

7

Try changing the first CSS to this:

#intro #intro-background {
    background: url(/resources/banner2new.png);
    background-size: 100% 100%;
}

That should get your 3 pictures back.

As for the links going to the 2nd line you have too many characters in the page names. You would need to reduce the number of pages or shorten the names.

Don’t know how or where you put this photos.

2 Likes
8

The css code works! Thank you!
So, now remains two little problems to solve.

  1. Is there a code for make the header less height?
  2. I put the photos in the home page with drag and drop way, of copy, paste.
    I can see them in preview but not in the published site.
9

for changing the intro size (the picture try this

/*This is for largest break point was hieght 300px margin-top 0*/
@media only screen and (min-width: 1170px) {
  #intro {
      height: 200px;
      margin-top: 70px;
  }
}
/*This is for Mid break point was hieght 200px margin-top 70px*/
@media only screen and (min-width: 768px) {
  #intro {
      height: 150px;
      margin-top: 85px;
  }
}
/*This is for smallest size was hieght 150px margin-top 50px*/
/*Note I did not change this you may want to */
#intro {
  height: 150px;
  margin-top: 50px;
}

You may play with the values.

As for you pictures your getting errors (403 Forbidden) check your URL’s

2017-06-24_09-54-18.png1355×221 36 KB

If you still have problems this might help:

2 Likes
10

Thank you!
Is there a code to play with the margin-bottom? I try to use a similar code with margin-bottom but he doesn’t change.

11

What are you trying to do with the margin on the bottom. Margins don’t always work the way you would think they should. Top and bottom margins can collapse from one element to another.
Best to tell what you want to achieve.

2 Likes
12

I would live to move up a little the bottom margin.

13

What your arrow is pointing at is part of the secondary navigation and has no margins set. It does have a line-height and height set.

.secondary-nav ul ul {
   line-height: 48px!important;
  height: 48px;
}
2 Likes