Tiny align issue - please help! My first theme attempt

Tiny align issue - please help! My first theme attempt

by Just Dave -
Number of replies: 7

Hi

I've been working on my first moodle theme(customized from the formal_white theme) but have run into a tiny alignment problem. I'm not even sure how to word this right, but please look at the pictures attached.

martin got it right

The above pic is a screenshot of part of the moodle.org frontpage. See how the search block heading and the front page Welcome heading is aligned? That's what I'm desperately trying to achieve. Please see below:

my theme, legend and search block not aligned...

This is a screenshot from my theme, notice how  it's not aligned nicely sad I have my moodle site config set to display arb html on the front page and have the front page articles set up using <fieldset> and <legend> tags just like Martin has used.

I'm using moodle version 1.5.2. The <fieldset> and <legend> tags are inserted into a label on the front page, I tried placing them in the topic heading section but it didn't make a difference sad

I only started messing around with moodle about 7 weeks ago and my CSS knowledge isn't brilliant but if anyone could give me any pointers at all I'd be truely greatfull! smile

Thanks Martin for developing such a great learning system and thanks to the online moodle community for all the help, I've found a solution on these forums to almost all the problems I've come across! 

Dave

Average of ratings: -
In reply to Just Dave

Re: Tiny align issue - please help! My first theme attempt

by IvaN LAM -
Hi,

Actually, I am facing the same problem.

I found that there is a spacer image at that position, with height = 12px.
see attachment

How can I remove this spacer image? or I should keep this and find some other methods?

Cheers!
Attachment margin_problem.gif
Average of ratings: -
In reply to Just Dave

Re: Tiny align issue - please help! My first theme attempt

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Dave (and Ivan)

Trying to help you, I need more info. please.

Which moodle theme are you using? (standard, other, as is or customized?)

I do not understand how you achieve the following: "The <fieldset> and <legend> tags are inserted into a label on the front page, I tried placing them in the topic heading section but it didn't make a difference".

Please provide a concrete example of your HTML coding, not just the resulting screen dump. Also, if at all possible, the URL of your site (post it here or send me a private message).

Where are those tags? are they classes? wide eyes

Joseph

Average of ratings: -
In reply to Joseph Rézeau

Re: Tiny align issue - please help! My first theme attempt

by Just Dave -

Hi Joseph,

I am using the standard formal_white theme, and customized it. I've sent you my URL via a private msg approve

Sorry I wasn't so clear in my origional post. Basically I've got a moodle site set up, with the "Front page format" setting in the site settings, set to "Show arbitrary HTML or activities (topic section)"

I then turned edit mode on and edited the "Summary of Site" section. From there I went into HTML view and added:

<fieldset><legend>Welcome</legend><br>Welcome paragraph goes here</fieldset>

From the screenshots in my previous post you can see the legend block doesn't line up nicely with the sideblock.

I added the following into my theme's fw_layout.css for the legend and fieldset tags:

fieldset {
  margin-bottom: 20px;
  border: #333366 solid 0px;
  background-color:#F7F5F5;
  -moz-border-radius-bottomleft:20px;
  -moz-border-radius-bottomright:20px;
  font-size: 0.95em;
  padding: 0.5em;
}

legend {
  border: #DDD solid 0px;
  background: url(pix/grad/bg_bread_alch.jpg) repeat-x;
  background-position:top;
  background-repeat:repeat-x;
  padding: 0.5em
}

Please discard "The <fieldset> and <legend> tags are inserted into a label on the front page, I tried placing them in the topic heading section but it didn't make a difference" from my previous post... I'm not sure what I was trying to say here now that I've re-read it.

Thanks in advance big grin

Dave

Average of ratings: -
In reply to Just Dave

Re: Tiny align issue - please help! My first theme attempt

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Dave,

I've looked at your site home page and read your explanations above. I'm afraid what you want to achieve will be diffcult because it is really different from the behavior of the formal_white theme, which you have customized a lot.

I think there is a conflict between the fieldset & legend style and the gradients style you have put in your block headings.

In a normal, non-customized formal_white configuration, the top line of the topmost block on the left (and on the right) is perfectly aligned with the top line of the central sitetopic table, as you can see on the attached screen dump.

If you really want the top of the gradient of the topmost block(s) to be aligned with the top of the gradient of the title of your sitetopic, you should probably begin with dropping the fieldset/legend combination.

Then, one reason why the gradient of the block is not aligned with the gradient of the sitetopic table may be because their font-size is different. Please check this.

Sorry I am not able to help you much, but it's really hard on account of your customization.

Hope you will make it work in the end,

Joseph

Attachment Image1.jpg
Average of ratings: -
In reply to Joseph Rézeau

Re: Tiny align issue - please help! My first theme attempt

by IvaN LAM -
Hi Dave and Joseph,

Please have a look at the attached image, I find a SPACER.GIF image at "THAT" position.  I have no idea it's my own problem or not, but I am sure I haven't added it by myself.  And Joseph, from your attached image, it seems that you don't have this "spacer" image in your theme, Dave, could you please check whether you've this "spacer" image?

I am trying to customize a new theme based on the standard theme.

However, I've tried to add the following code into my xxx_layout.css file.

.field01 {
  background-color: #ffffff;
  padding-top:0px;
  margin-bottom:8px;
}

.legend01 {
  border: 1px solid #bbbbbb;
  background-image: url(<?php echo "$CFG->wwwroot/theme/$CFG->theme" ?>/pix/header_bar.jpg);
  background-repeat: repeat-x;
  background-position: left top;
  padding-top:6px;
  padding-left:3px;
  padding-right:3px;
  padding-bottom:4px;
  color: #000000;
}

.spacer {
  height:0px;
}

Althought it works, I am not sure whether setting the class "spacer" to height=0 will affect the other parts of the site.  Could anyone please advise?

Cheers,
IvaN
Attachment margin_problem4.gif
Average of ratings: -
In reply to IvaN LAM

Re: Tiny align issue - please help! My first theme attempt

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Ivan,

The spacer IMG tag is automatically added by Moodle.

If setting it to height:0px works, why not do it? If you think it might exist in other parts of the Moode site (and have adverse effects there), then format it as:

#course-view .section .spacer {height:0px!important}

rather than simply .spacer {height:0px!important}

Hope that helps,

Joseph

PS If you want further help on your site home page, you can send me the URL privately.

Average of ratings: -
In reply to Joseph Rézeau

Re: Tiny align issue - please help! My first theme attempt

by Just Dave -

Hi guys,

Apologies for not replying sooner, my line went down at home for the last few days and I couldn't get online.

Thanks for the advice Joseph, I think your right about it being difficult as I've customized the my version of the formal_white theme quite a lot. To tell the truth I haven't really worked alot on this problem over the last few days but I'm going to try get it right tonite. I'll start by dropping the fieldset/legend combination like you say and examining the gradient setting for the fieldset & legend styles.

Ivan: I'll give your method a go tonite aswell and see if it works however I couldn't see a spacer img with my theme, perhaps I'm looking in the wrong place... my CSS knowledge is very limited!

Again thanks for all the help, so far my first attempt to customize a moodle theme has been a great learning experience!

Dave

Average of ratings: -