WordPress.org

1. csv8808
   Member
   Posted 4 months ago #

   Hey guys,

   is it possible to replace the black color in the Menu bar with a background image with the appropriate size? If so, I would much appreciate for information on how to do so. Thank you very much in advance!

2. peredur
   Member
   Posted 4 months ago #

   First, you should never alter any of the default themes except via a Child Theme. If you don't, a WP upgrade can overwrite your changes. It's good practise anyway and only takes about five minutes to create a minimal theme and activate it.

   When that's done, just set a rule for the #access id in your child theme's style sheet after the @import statement that imports the parent theme style sheet. Something like:

   #access {
     background: /* your stuff goes here */;
   }

   Cheers

   PAE

3. csv8808
   Member
   Posted 3 months ago #

   thank you very much, that alread helped a lot!

   i did the following:

   /* =Menu
   -------------------------------------------------------------- */
   
   #access {
   	background-image: url("http://www.bwlkurse.de/repetitorium/menu.png");
   	display: block;
   	float: left;
   	margin: 0 auto;
   	width: 100%;
   
   }

   however I have the problem, that on small screens (i.e. laptop), the menu bar will stick out on the right side which obviously looks awkward. I thought I could solve this by setting the width to 100%. Works fine on my iMac, but not on my smaller windows laptop. Any ideas? Thank you!

4. peredur
   Member
   Posted 3 months ago #

   If you mean that the positioning doesn't work right in IE, then you can include some conditional comments for IE. Check that everything works OK in proper browsers (Firefox, Chrome, Opera, Safari) and if it does, then just make special rules for the broken ones (i.e. IE). You'll need to check all relevant versions of IE, since they're all broken in different ways.

   If your rendering is inconsistent between standards-compliant browsers, then you need to look to your code. Use Firefox' Web Developer's Toolbar to submit your page(s) to the w3c validator and fix any errors, and warnings if you can. Then have another go at getting your positioning right.

   I also see you're not using a child theme. Don't say you weren't warned :)

   HTH

   PAE

5. csv8808
   Member
   Posted 3 months ago #

   hehe thanks, I will make a child theme asap. The problem with the background image sticking out beyond the borders of the page seems to be a problem with all small laptops (i.e. small screens / resolution). I've tried the Toolbar, but now luck. Any suggestions on how to properly fix the code? Sorry, I'm a css newb. Thanks for your help peredur!!

Reply

You must log in to post.