Hi,
To do this successfully you would need to add a span tag around the top level menu items. You could probably do this in a theme like Afterburner that uses a renderer (see afterburner/renderers.php) which change the way the menu looks and works.
Other than that there is no easy way at all as the way the menu is coded using the YUI Library. You could try Googleing YUI3 CSS Menu Widget and see what you can find?
Cheers
Mary
Thanks Mary!
According to your advice I changed the theme to Afterburner.
I was not sure how to do what you said to me, but I played a little bit with the css.
I received the separating whites without a background image but I have big spaces between the items drop-down menu, maybe you can help me
This is the site link:http://moodle22.tik-tak.co.il/
I have 2 more questions:
1. how can i change in the calander header the background color to white.(where the month name is written
if i change the block background to white it changes all the blocks in the site.
2. i want to put a picture behind the login user name box and behind the password box, is it possible?
Thanks
Irith
In the attached image you will see I used FIREBUG to look at the code on the page and was able, by using the tools in this FireFox Add-On, to change the look of the calendar. I presume this is the calendar you are talking about?
As for adding images behind the login Username and Password. Here again I used FireBug to inspect the code for that element which is as follows...
input#username {background: white url(pathtofile/image1.jpg) center center no-repeat; }
input#password {background: white url(pathtofile/image2.jpg) center center no-repeat; }
I hope this is what you mean?

Hi Mary
Thank you again!
1. About heading ofcaledar, I did not make clear in my question.
I want the whole area under the name of the month will be white. I enclose a picture

2. As for the custom menu Two problems:
There is a big space between the items when you click the menu,
And when I pass the English language picture of the menu moves to the right
תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi Mary!
another problem
Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
1. div#inst20.block_calendar_month div.content div.calendar-controls {background-color: white}
2. Instead of changing the main theme's CSS for the menu and anything else, as the theme should work OK in RTL language, you need to create separate rules to work in RTL and add .dir-rtl in front of the rule so that they work when Hebrew is selected in the language menu.
However, the alternative now is to add this rule in the Afterburner Settings page..Custom CSS box...or directly into the afterburner-menu.css file
.dir-ltr #custommenu {margin-left: -17px;}
So this works when a Left to Right language is selected.
3. The above table needs some styling I'll take a look at that later and let you have the code.
div.region-content div.box ul.section li#module-28.activity div.mod-indent div div.no-overflow div.no-overflow table td { padding: 0}
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
1. Still remain a gray gap in the background.

2.I added this line but nothing happend . it doesn"t move
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
1. CSS for Calendar...
#inst20.block_calendar_month div.content div.calendar-controls {
background-color: white;
padding-bottom: 10px;
}
.block .minicalendar {
margin: 0 auto;
width: 100%;
}
2. CSS for Menu bar
Put the CSS back to what it was originally.
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi Mary
in the Menu.css
#custommenu {
width: 997px;
padding: 0;
clear:both;
height: 55px;
background-image: url([[pix:theme|header]]) ;
/*background: #659f34;*/
margin-top:-7px;
position:absolute;
margin-left:-17x;
}
.dir-rtl#custommenu
{
margin-right:-17px ;
}
in the RTL.css
.dir-rtl#custommenu
{
margin-right:-17px !important;
}
It doesn"t work when i change language.
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
.dir-rtl #custommenu { margin-right:-17px }
Who put position: absolute in the CSS I don't recall seeing this before?
position for the image should be X,Y axis settings like left top or 17px top this is 17px to the left with the image at the top of the div container.
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Do you mean this:
#custommenu {
margin-left:-18px;
margin-top:-10px;
width: 997px;
padding: 0;
clear:both;
height: 55px;
background-image: url([[pix:theme|header]]) ;
}
tht margin-top doesn"t move the image
and
this .dir-rtl#custommenu
{
margin-right:-14px;
}
doesn"t overrids it.
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
No not that at all.
When you add an image it is automatically given the location left top. So to move the image you could try -17px 0 like so...
#custommenu {
background-image: url([[pix:theme|header]]);
background-position: -17px 0;
background-color: transparent;
background-repeat: no-repeat;
}
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
the background-image should be the top layer that was the reason I did position:absolute
Any way it didn"t work with the code you sent to me.
this is the way that the background-image should be:
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
I arranged it .
Thank you!
input#username {background: white url(pathtofile/image1.jpg) center center no-repeat;
i tried it didn"t work
Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
You seem very persistant! LOL
You know you too can use Firebug to find all these fixes.
div#inst16.block_login div.content form#login.loginform div.c1 input#username, input#password, input[type="text"],
div#inst16.block_login div.content form#login.loginform div.c1 input[type="password"], textarea {
background-color: white;
background-image: url([[pix:theme|login_text_field_btm]]);
background-repeat: no-repeat;
background-position: left top;
border: 2px inset threedface;
color: #4B4B4B;
cursor: default;
width: auto;
}
It looks like you have broken the footer!
The section from the START OF FOOTER should look like this...
<!-- START OF FOOTER -->
<?php if ($hasfooter) { ?>
<div id="page-footer" class="clearfix">
<div class="footer-left">
<?php if ($hasfootnote) { ?>
<div id="footnote"><?php echo $PAGE->theme->settings->footnote;?></div>
<?php } ?>
<a href="http://moodle.org" title="Moodle">
<img src="<?php echo $OUTPUT->pix_url('footer/moodle-logo','theme')?>" alt="Moodle logo" />
</a>
</div>
<div class="footer-right">
<?php echo $OUTPUT->login_info();?>
</div>
<?php echo $OUTPUT->standard_footer_html(); ?>
</div>
<?php } ?>
<div class="clearfix"></div>
</div>
</div>
<?php echo $OUTPUT->standard_end_of_body_html() ?>
</body>
</html>
where AND HOW can I put in the footer a background-image.
I put the footer logo pictur as an image so i couldn"t move the moodle logo above it
Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
#page-footer {
background-image: url([[pix:theme|bground]]);
background-repeat: no-repeat;
background-position: left top;
background-color: white;
}
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
This is exactly what i did but i don"t see it working.
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Try...
Site Administration > Development > Purge all caches
Clear your browser cache too.
I'll take a look at the site and to check if I see anything wrong.
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
You have no height...you put height: 0; which is why you don't see the image. You need to give it some hight! try height: 100px; and see how that looks.
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
nothing!
i think that i have to write some echo ..... in the php file that will print the page-footer div.
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
NO!!!!
You need to change the way the divs are in the footer.
Wrap the footer left and footer right with a new div container call it footer-outer
<div id="footer-outer">
<div id="footer-left"><div>
<div id="footer-right"><div>
</div>
also add 300px to the #page-footer height as well as the b/ground image you have there.
Now add #footer-outer { margin-top: 35px; padding-left: 20px;}
#page-footer { height: 300px, background-image:... ... ...}
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
i"m waiting for the server, there is no internet now at my place,it is from my cell phone, as soon as it returns, i"ll try it
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
nothing
this is the code
<!-- START OF FOOTER --> <?php if ($hasfooter) { ?> <div id="page-footer" class="clearfix"> <div id="footer-outer"> <div class="footer-left">
<?php if ($hasfootnote) { ?> <div id="footnote"><?php echo $PAGE->theme->settings->footnote;?></div> <?php } ?>
<a href="http://moodle.org" title="Moodle"> <img src="<?php echo $OUTPUT->pix_url('footer/moodle-logo','theme')?>" alt="Moodle logo" /> </a> </div>
<div class="footer-right"> <?php echo $OUTPUT->login_info();?> </div> </div> <?php echo $OUTPUT->standard_footer_html(); ?> </div> <?php } ?> <div class="clearfix"></div> </div> </div> <?php echo $OUTPUT->standard_end_of_body_html() ?> </body> </html>
This is the css
Page Footer -----------------------*/ . #page-footer { background-image:url([[pix:theme|fotter]]) ; }
#page-footer a:link, #page-footer a:visited { color: #aaa; text-decoration:none; } #page-footer a:hover, #page-footer a:active { color: #c30; text-decoration:none; }
#footer-outer { margin-top: 35px; padding-left: 20px; }
#page-footer .footer-left { float: left; text-align: left; color: #999; } #page-footer .footer-left p { margin: 0; padding: 0; font-size: 100%; line-height: 1; } #page-footer .footer-right {
float: right; text-align: right; }
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi Irith,
Just to check as you are trying to add an image to the footer - what is your image actually called? Your css is calling an image called fotter rather than footer???
Page Footer -----------------------*/ . #page-footer { background-image:url([[pix:theme|fotter]]) ; }
Richard
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
It working now!
Thank you very much!
I PUT THE IMAGE IN THE OUTHER
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
So pleased you have your site looking great now...well done! ![]()
If ever you need help with RTL CSS code you should speak to Nadav Kavalerchik
out RTL Language Guru
Nadav and I have been trying to fix Moodle 2.3 for RTL coding problems. We still have a lot to do as you can see in MDL-30337.
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
i was so happy that i finished and in one moment all the hebrew part disappeared,
i downloded the theme and extract again the afterburner thene but this is not the problem, when i change to hebrew i got a clean page.
HELP!
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi Mary
I worked on it from the begining, i stil don"t know what happened.
i need to to wrie a line ib hebrew in the footer
?
how do i do it
and an image of a line under it
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
the problem resolved
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hello Irith,
Do you want to post the solution here? That way if someone else is having the same problem, they can try your solution themselves.
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
hi
i thought i solve th eproblem but there is still something i dont know
how to fix.
I put the line-imagee as a background in a diffrent class and the text in a diffrent class.
html.yui3-js-enabled body#page-site-index.course div#page-wrapper div#page div#page-footer.clearfix div.footer-outer div.footer-left div.company div div.line
{
background-image: url([[pix:theme|footer/kav]]) ;
width:740px;
height:1px;
position:relative;
float:left;
top:0px;
left:-30px
}
html.yui3-js-enabled body#page-site-index.course div#page-wrapper div#page div#page-footer.clearfix div.footer-outer div.footer-left div.company
{
float:left;
margin-left:270px;
}
i"m not so strong in css, so i don"t know how to wrie the short path).It works ok in the front page but when i"m getting inside all the style disapears
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
this is the site address
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi Mary
Can you please help me the the problem in the footer?
Thanks Irith
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
I am happy to help upi all I can, but I am not sure what it is you are having problems with as your site looks OK to me.
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
I put the line-image as a background in a diffrent class and the text in a diffrent class.
html.yui3-js-enabled body#page-site-index.course div#page-wrapper div#page div#page-footer.clearfix div.footer-outer div.footer-left div.company div div.line
background-image: url([[pix:theme|footer/kav]]) ;
width:740px;
height:1px;
position:relative;
float:left;
top:0px;
left:-30px
}
html.yui3-js-enabled body#page-site-index.course div#page-wrapper div#page div#page-footer.clearfix div.footer-outer div.footer-left div.company
{
float:left;
margin-left:270px;
}
( i"m not so strong in css, so i don"t know how to write the short path).
It works ok in the front page but when i"m getting inside or choosing somthing from the right side all the style disapears
correct
incorrect
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi,
I see what you mean now.
Here is a simpler way to add the text and the line all together.
So you can delete line divs as they are not needed.
But leave the company one as it is. Now all you need to do is add this CSS inplace of what you have.
.footer-left .company {
border-bottom: 1px solid green;
float: left;
height: 25px;
margin-left: 252px;
text-align: right;
width: 740px;
}
I think you will find that will work better.
Mary
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Thank you again !
It works good in chrom and firefox both in english and in hebrew'
but in Internet explorer in the english version the footer logo moves to the right.
I have anotthe problem here
I can"t make it to put them at the same height??/
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
The problem in IE is that it is picking up Hebrew as the main language, and so show it that way,
In FireFox I see your site as a LTR langage and if I swap it to Hebrew then logo switches sides too.
You can fix this in CSS with...
You could try this...
.block div.block_action img {
margin-top: 3px;
margin-right: 3px;
position: relative;
top: 6px;
}
תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
HI Mary
please check on your computer how the footer looks now.
block_action img, doesn"t change anything
Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu
Hi,
You have some errors in afterburner_blocks.css
at line 12 you have paddin-top: 4px this is a typo and should read...
padding-top. 4px;
And at line 58 you have a dot . after the selector name ... you need to remove it
.block . {
}
As for the code...If you make top: 0; that looks to work.
Mary
no , it didnt work
Try the attached afterburner_blocks.css, I made a few amendments to it. There where some conflicting rules and one was overwriting the other.
It should work in both languages.
Mary
תשובה ל: Re: : תשובה ל: Re: Add a picture separater in menu
HI MARY
ITS STILL DOSN,T WORK
and now i have problem with grade layout.
it is too large and it has a scoller
Re: תשובה ל: Re: : תשובה ל: Re: Add a picture separater in menu
I am just wondering how you have your site set up. Do you have Hebrew as the default language for the site as I see all the block headings in English whenever I view your site. Yet when I visit another site, in say Italy it is all in Italian, so perhaps you have the wrong language settings for your site. I think you still have it set as default english! In which case it will not be working correctly in Hebrew.
תשובה ל: Re: תשובה ל: Re: : תשובה ל: Re: Add a picture separater in menu
Yes, English is my default language
I set it now to English, i don"t see any difference
and still this 2 icons are not in the same line
Re: Color of :#page-content #region-main-box .region-content
Change it to:
#page-site-index #page-content #region-main-box .region-content {
background: none repeat scroll 0 0 #E4E4E4;
}
That will apply the style only to the site's front page (site index).