Banner below header

  • Unknown's avatar
    centreculturelrusse · Member ·

    Hi, I would like to insert a banner above and below the header picture. How can I do that ?
    I would like to write the tittle above the header too, I have the Custom Design but I can not find the right code CSS.

    For the banner I wrote:

    <div class=”bandeau”>
    <div class=”blanc”></div>
    <div class=”bleu”></div>
    <div class=”rouge”></div>
    </div>

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, to move the site title and description above the header image, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. 

    .site-branding {
	position: relative;
	padding-top: 90px
}

.site-title {
	position: absolute;
	top: 0;
}

.site-description {
	position: absolute;
	top: 30px;
}

    Have you uploaded your banners to your media library? Images can be inserted above and below the header image with CSS, but they cannot be linked. CSS is a styling document and HTML cannot be put into CSS.

  • Unknown's avatar
    centreculturelrusse · Member ·

    Thank you very much thesacredpath !!!! It’s perfect !
    I have uploaded all my banners from my media library, do you think I have to insert these pictures on CSS ?

  • Unknown's avatar
    thesacredpath · Member ·

    That’s great. I would expect the banners will all have to be done with CSS, which can be tricky sometimes if the theme you are using doesn’t have enough divs in the right places. It is also a bit complicated on responsive width themes, such as Motif. If you narrow down your browser window, you will see that the site title and description moves to the right as you narrow down the browser window and end up taking up the entire space above the header image once you get down to phone widths. Are you wanting to replace the site title and description?

    Can you give a listing of the banner URLs from your media library and where you wish to put them and then I can have a better idea how to tell you to proceed?

  • Unknown's avatar
    centreculturelrusse · Member ·

    Here is the link of the banner in my media library

    https://centreculturelrusse.files.wordpress.com

    I wish put it above and bellow my header picture. If you want an example, look on our former website www.centre-culturel-russe-monaco.com.

    I think the site title and his description will stay at their place, above the banner and header picture, it will be feasible ?

  • Unknown's avatar
    thesacredpath · Member ·

    On your old site, I see a Centre Culturel Russe De Monaco image at upper left above the header image and then nothing below the header image except for content. I don’t see an image in your media library like the one on your old site.

  • Unknown's avatar
    centreculturelrusse · Member ·

    On the former site there is a banner in white/blue/red above and below the header and I would like to do exactly the same thing but I do not know how the designer did.

    How can I show you my picture – banner in my media library ?

    What you saw is the former logo, but I do not want that, the new logo is on each picture header on www.centreculturelrusse.com and I want just a band with three color which border the diaporama.

    Maybe I give bad explication…

  • Unknown's avatar
    thesacredpath · Member ·

    Nope, your explanation is fine. This took a little doing, but add the following CSS and see what you think. 

    .site-image img {
    background: none repeat scroll 0 0 #fff;
    padding-top: 8px;
    position: relative;
    padding-bottom: 8px;
}
.site-image {
    border-bottom: 7px solid #fc2e30;
    border-top: 8px solid #fc2e30;
    margin-bottom: 0;
    background: #4273cf;
    padding-top: 8px;
}
  • Unknown's avatar
    centreculturelrusse · Member ·

    Waouh it’s perfect, I want to thank you a lot for your help!
    I have many difficulties to work on the css even with all documentation on internet, but I really want to learn and work with, do you have a good book to teach me?

    Because on the HTML I wrote this code
    <div class="bandeau" > "header" etc but anything worked !

  • Unknown's avatar
    thesacredpath · Member ·

    <div class=”bandeau” > “header” would have to go into the theme php script files, and we can’t edit those at WordPress.com. HTML cannot be added to CSS. CSS is a styling document used by the browsers to style and place the elements of a web page.

    At the top of the main CSS forum page, is a sticky post called Learning about CSS, which has several links to resources here and there are links to tutorials that you can do.

  • Unknown's avatar
    centreculturelrusse · Member ·

    Hi thesacredpath,

    If I want to change color of my banner as : white -> blue -> red above the picture and keep the second below as it. What I have to change ? 

    .site-image img {
    background: none repeat scroll 0 0 #fff;
    padding-top: 8px;
    position: relative;
    padding-bottom: 8px;
}
.site-image {
    border-bottom: 7px solid #fc2e30;
    border-top: 8px solid #fc2e30;
    margin-bottom: 0;
    background: #4273cf;
    padding-top: 8px;
}
  • Unknown's avatar
    rachelmcr · Member ·

    Hi there,

    One of my favorite ways to figure out how existing CSS styles are set up is to use the tips in our How to Find Your Theme’s CSS guide. With that approach, you can use your browser’s inspector to investigate how the current CSS is done and try out your own changes — that’s how I’ve figured out what to change below:

    In this case, the red line at the top of the image is controlled by the “border-top” rule here:

    .site-image {
    border-bottom: 7px solid #fc2e30;
    border-top: 8px solid #fc2e30;
    margin-bottom: 0;
    background: #4273cf;
    padding-top: 8px;
}

    The white line both above and below the image is controlled by the background color #fff in this CSS:

    .site-image img {
background: none repeat scroll 0 0 #fff;
padding-top: 8px;
position: relative;
padding-bottom: 8px;
}

    That makes it a little trickier to just switch the colors above the picture, since the white color both above and below the picture are defined by the same CSS rule.

    One approach would be to remove the padding at the top of the image (so the white background doesn’t show up there) and add a top border to the image instead, like this:

    .site-image img {
border-top: 8px solid #fc2e30;
padding-top: 0;
}

    Then, you can change the .site-image top border to white instead of red:

    .site-image {
border-top: 8px solid #fff;
}

    Please let me know if you have questions about that. :)

  • Unknown's avatar
    centreculturelrusse · Member ·

    I think I succeeded ! Please see my website and let me know !

    My CSS rule is : 

    .site-image {
    border-bottom: 7px solid #fc2e30;
    border-top: 8px solid #fff;
    margin-bottom: 0;
    background: #4273cf;
    padding-top: 8px;
}

.site-image img {
	background: none repeat scroll 0 0 #fff;
	padding-top: 8px;
	position: relative;
	padding-bottom: 8px;
}

.site-image img {
border-top: 8px solid #fc2e30;
padding-top: 0;
}
  • Unknown's avatar
    rachelmcr · Member ·

    That looks great! :)

    One last thing you can do, just to clean up the CSS you’re using, is to combine the two CSS selectors here:

    .site-image img {
	background: none repeat scroll 0 0 #fff;
	padding-top: 8px;
	position: relative;
	padding-bottom: 8px;
}

.site-image img {
border-top: 8px solid #fc2e30;
padding-top: 0;
}

    Into a single one like this:

    .site-image img {
	background: none repeat scroll 0 0 #fff;
	position: relative;
	padding-bottom: 8px;
	border-top: 8px solid #fc2e30;
	padding-top: 0;
}

    That’s just to make the CSS a bit cleaner and more consolidated — either way, you’ll get the same effect on your site.

  • The topic ‘Banner below header’ is closed to new replies.