Add a picture separater in menu

Add a picture separater in menu

by Irith Herman -
Number of replies: 52
Hi I"m using moodle 2.2. 1. I want to add a picture like "logo_top" as a separater in the custom-menu How do i make it. 2. Is it possible to add two images at two Edges of the custom-menu? Thanks Irith
Average of ratings: -
In reply to Irith Herman

Re: Add a picture separater in menu

by Mary Evans -

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

In reply to Mary Evans

תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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 reply to Irith Herman

Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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? smile

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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

In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

Hi Mary!

another problem

 I added a table and into it I added a picture, the picture shows with spaces around that I could not get rid of them,
In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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}

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

1. Still  remain a  gray gap in the background.

2.I added this line but nothing happend . it doesn"t move

 

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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.

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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.

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

.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.

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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.

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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;
}

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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:  

In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

 I arranged it .

Thank you!

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

input#username {background: white url(pathtofile/image1.jpg) center center no-repeat;

i tried it didn"t work

 

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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;
}

In reply to Irith Herman

תשובה ל: Re: Add a picture separater in menu

by Irith Herman -
I want yo add a background image in the footer, so tha the login div and the modle icon will be as atop layyer on this background image i tried to chane the code in the php file with no success
In reply to Irith Herman

Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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>

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

#page-footer {
    background-image:  url([[pix:theme|bground]]);
    background-repeat: no-repeat;
    background-position: left top;
    background-color: white;
}

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

This is exactly what i did but i don"t see it working.

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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.

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

You have no height...you put  height0; which is why you don't see the image. You need to give it some hight!  try height: 100px; and see how that looks.

 

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

nothing!

i think that i have to write some echo ..... in the php file that will print the page-footer div.

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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:... ... ...}

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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

In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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; }

 

 

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

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

In reply to Richard Oelmann

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -
In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

It working now!

Thank you very much!

I PUT THE IMAGE IN THE OUTHER

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

So pleased you have your site looking great now...well done! Cheers

If ever you need help with RTL CSS code you should speak to Nadav Kavalerchik

out RTL Language Guru smile

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.

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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!

In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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

In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

the problem resolved

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Miriam Laidlaw -

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.

In reply to Miriam Laidlaw

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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



In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

this is the site address

http://moodle22.tik-tak.co.il/

In reply to Irith Herman

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

Hi Mary

Can you please help me the the problem in the footer?

Thanks Irith

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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.

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

 

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

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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??/

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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...

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

HI Mary

please check on your computer how the footer looks now.

block_action img,  doesn"t change anything

 

In reply to Irith Herman

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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.

HTH

Mary

In reply to Mary Evans

: תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

no , it didnt work

In reply to Irith Herman

Re: : תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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

In reply to Mary Evans

תשובה ל: Re: : תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

HI MARY

ITS STILL DOSN,T WORK

and now i have problem with grade layout.

 

it is too large and  it has a scoller

In reply to Irith Herman

Re: תשובה ל: Re: : תשובה ל: Re: Add a picture separater in menu

by Mary Evans -

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.

In reply to Mary Evans

תשובה ל: Re: תשובה ל: Re: : תשובה ל: Re: Add a picture separater in menu

by Irith Herman -

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

In reply to Irith Herman

Color of :#page-content #region-main-box .region-content

by Irith Herman -
I wanted it to be gray in the front page:
so i wrote this:
#page-content #region-main-box .region-content {
    backgroundnone repeat scroll 0 0 #E4E4E4;
but...
in all the other pages i want it to be white.
Can i do it?
 
 
 
 
 
In reply to Irith Herman

Re: Color of :#page-content #region-main-box .region-content

by Miriam Laidlaw -

Change it to:

#page-site-index #page-content #region-main-box .region-content {
backgroundnone repeat scroll 0 0 #E4E4E4;
}


That will apply the style only to the site's front page (site index).

Average of ratings: Useful (1)