WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
[resolved] [closed] Header banner (25 posts)

  1. drandrei04
    Member
    Posted 1 year ago #

    How i can put an image, under the site title? Your theme is very cool, but i would like to have a photo there.. it's possible?

    that's my site... under Draghici Andrei and the motto... it's posible?
    I saw it's an element under them... i'm using Opera - Inspect element ;)

    Thanks.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have a plugin that provides Custom CSS functionality?

  3. drandrei04
    Member
    Posted 1 year ago #

    I'm not sure, i'm using Montezuma theme... i have options for CSS in settings.... so it's posible to have custom css functionality.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to your website, I can't view the demo website. It's broken.

  5. drandrei04
    Member
    Posted 1 year ago #

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Example;

    Do you want the background image to be this wide http://awesomescreenshot.com/066vr0t10 ?

    Or this wide http://awesomescreenshot.com/09evr0wd4 ?

    In the meanwhile, download (and install) this Custom CSS Manager plugin. It'll hold the CSS modifications necessary to implement your query.

  7. drandrei04
    Member
    Posted 1 year ago #

    First example, i'll download the plugin right now.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Add this to the Custom CSS section of the dashboard (once the plugin is activated);

    #banner-bg {
     background: url(theURLtoYourImage.andTheFileExtensionOfIt);
     /* E.g;
     url(http://upload.wikimedia.org/wikipedia/commons/b/be/Vatican_City_at_Large.jpg)
     */
    }
  9. drandrei04
    Member
    Posted 1 year ago #

    Not working, but i've read something on a forum( i can edit from the theme menu... a file called header.php) so.. it's php...
    i've tried something here, but all what is done... in the place under text.. in left corner up.. showed up a small empty image...
    how i must write?

    this is the text in header.php:

    <div id="banner-bg" class="cf">
    	<div id="banner" class="row">
    		<div id="logo-area" class="col5">
    			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
    				<a>"><?php bloginfo( 'name' ); ?></a>
    			</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
    			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    		</div>
    		<?php wp_nav_menu( array(
    			'container' => 'nav',
    			'container_class' => 'menu-wrapper col7',
    			'container_id' => 'menu1-wrapper',
    			'menu_id' => 'menu1',
    			'menu_class' => 'cf menu',
    			'theme_location' => 'menu1',
    			'fallback_cb' => 'bfa_page_menu'
    		) ); ?>
    	</div>
    </div>
    
    <a>" class="rsslink" title="<?php _e( 'Subscribe to RSS Feed', 'montezuma' ); ?>"></a>
    
    <div id="breadcrumbs1-bg">
    	<nav id="breadcrumbs1" class="breadcrumbs lw">
    		<?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
    	</nav>
    </div>

    ........................................................
    and my edit... ( i've made a folder in wp-content/themes/montezuma/images called header and put the "panorama 1.jpg" in : so where i went wrong? open my site again to see the empty img please

    <div id="banner-bg" class="cf">
    	<div id="banner" class="row">
    	<img src="http://draghici-andrei-photos.p.ht/en/wp-content/themes/images/header/panorama 1.jpg" >
            <div id="logo-area" class="col5">
    			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
    				<a>"><?php bloginfo( 'name' ); ?></a>
    			</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
    			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    		</div>
    		<?php wp_nav_menu( array(
    			'container' => 'nav',
    			'container_class' => 'menu-wrapper col7',
    			'container_id' => 'menu1-wrapper',
    			'menu_id' => 'menu1',
    			'menu_class' => 'cf menu',
    			'theme_location' => 'menu1',
    			'fallback_cb' => 'bfa_page_menu'
    		) ); ?>
    	</div>
    </div>
    
    <a>" class="rsslink" title="<?php _e( 'Subscribe to RSS Feed', 'montezuma' ); ?>"></a>
    
    <div id="breadcrumbs1-bg">
    	<nav id="breadcrumbs1" class="breadcrumbs lw">
    		<?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
    	</nav>
    </div>
  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Not to sound big-headed, but it's a lot easier to go through the technique I suggested. To set a background image in CSS.

    I think the problem you're having is the image cannot be found. In the CSS, if you use the background image that I exampled (which can be found), the code should work.

  11. drandrei04
    Member
    Posted 1 year ago #

    Yes.. you're right.
    I've uploaded from the site option the image.. it said "error:the file has more than 8 mb"... i've uploaded another image.. it worked... i've copied the link to the image... and put it in your css... working... but... still i have some problems... open the site... the image is bigger then background size... i think it has 2800/3000.... what ever... which size what the background has? i can redimension it from css .. or i must do it manually?

    and the menu is over the image... take a look please

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Oh I used the wrong CSS selectors.
    In the code, instead of this;

    #banner-bg

    Use this

    #banner
  13. drandrei04
    Member
    Posted 1 year ago #

    ok.. this is the difference from your examples, but menu is still over the image... and the size is still big .... you didn't answered to my question :(

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    What was your question? Make it clear.

  15. drandrei04
    Member
    Posted 1 year ago #

    If you open my site... you will see.
    The problem is: the image has a big size(2928x 798 pixels), what is the size in pixel to enter propertly in the banner... i can reduce it to that size from a css code.. or i must reduce it from Photoshop for e.g... and the second problem, is: a menu is over the image.... what i can do?

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    The image is particularly large, yes, but you can resize this in CSS.

    Example;

    #banner-bg {
     background: url(theURLtoYourImage.andTheFileExtensionOfIt);
     /* E.g;
     url(http://upload.wikimedia.org/wikipedia/commons/b/be/Vatican_City_at_Large.jpg)
     */
     background-size: 100%;
    }

    Is the menu not supposed to be over the image? I don't understand your query in what you want to do.
    If you want the menu to be transparent, add this;

    #menu1-wrapper {
     background: transparent;
    }
  17. drandrei04
    Member
    Posted 1 year ago #

    Yes.. now it's almost ok :)
    If is #banner-bg... is on wide.. and because the site title is in sky zone.. it's visible... if i put "#banner {" the image is reduced ok, (it's like the big image) but the text isn't very visible... i can change the colour to title?
    the menu is cool!

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Change the colour of which title, to what colour?

  19. drandrei04
    Member
    Posted 1 year ago #

    the second text... not site title... the motto.. or something..( when i created the site - there writes - Just another wordpress site) that text :D... give me the examples of white... blue... but you can leave me an example how to change the site title colour.. just in case :)

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    It's still not clear which text you're referring to, whether the site title or the site description.
    Here's the site description colour change;

    #tagline {
     color: white;
    }
  21. drandrei04
    Member
    Posted 1 year ago #

    Both... and how to make 2 colors at the site title, and the menu text color? what i i've maked transparent? the stock color si black.. if i go with the cursor on it.. the text becomes blue... the black colour for example...
    i will be back after 3 hours... how can i find you.. can you leave me a skype/ or something?
    and if i can thanks to you with something.. i don't know.. a like to your project... to mention you on my site... i'm open :)

    i can't donate.. i'm student... i'm 16 years old.

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

    Create a new thread on this query when you're back. This way you'll have the entire WordPress.org forum community for support.

  23. drandrei04
    Member
    Posted 1 year ago #

    Ok... i can close that topic?

    Thanks a lot!

  24. Joshua B
    Member
    Posted 1 year ago #

    What would the ideal header banner size be in pixels if someone else wanted to incorporate a banner like this?

  25. drandrei04
    Member
    Posted 1 year ago #

    Joshua B, if i remember well, if you put in the CSS:
    #banner {
    background: url(theURLtoYourImage.andTheFileExtensionOfIt);
    /* E.g;
    url(http://upload.wikimedia.org/wikipedia/commons/b/be/Vatican_City_at_Large.jpg)
    */
    background-size: 100%;
    }
    The picture will auto size the image for you. But... In edges, you will have blank part( a small blank from left to the image, and a small blank from right to image).
    Example : example so will look!
    If you want this the css won't auto size the image.. and i don't know why :( But for my site it look cool in this mode.. because my image in the up has sky.. so the text is very visible :D.

    My site: Click here .

    I hope to be enough :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic