custom block doesn't

custom block doesn't

by Carlos Zurera Andrés -
Number of replies: 7

Hi there, i have a problem with a custom block. When I am located in the navigation area my block has the correct format but if I go to the administration area the format of the block changes to a bad way showing all the letters it completly show in a wrong way.

I attached two screenshots that shows the good way and the bad way of my plugin.


Any suggest?


Thanks a lot!

Attachment bad way.jpg
Attachment good way.jpg
Average of ratings: -
In reply to Carlos Zurera Andrés

Re: custom block doesn't

by Suraj Kumar -
It might happen due to
  1. Tag is not closed properly in your block's get_content(). Debug this code by assigning a simple html to this variable, $this->content->text
    e.g. -
    $this->content->text = '<div> This is to test bad html ln block's content </div>';
    Now, check this code on both of the pages. If content's text is not getting messed, it means there is something error in html structure. Find and correct them. if it does not work check the point2
  2. Some css rules might be violating

Thanks

Suraj

Average of ratings: Useful (1)
In reply to Suraj Kumar

Re: custom block doesn't

by Suraj Kumar -

A minor correction. Use double quotes(" ") in place of single quotes(' '). I had written single quotes in content itself(at block's) .

$this->content->text = "<div> This is to test bad html ln block's content </div>";

Average of ratings: Useful (1)
In reply to Suraj Kumar

Re: custom block doesn't

by Carlos Zurera Andrés -

Thank u so much for your help!


The problem is the next one:


I use this code to take the configuration of a html file:


public function get_content() {

global $CFG;

$fichero = file_get_contents($CFG->dirroot.'/blocks/access_mouse/index.html');


and I have this css in that file:


<style>

.buttons{

margin-top: 50px;

overflow: hidden;

}


a:focus, input:focus{

border: 5px solid red;

}


input:focus+label{

color: #f00;

}


div:focus{

border: none;

}


#nextButton {

display: none;

}


.btn{

padding: 20px;

float: left;

text-align: center;

background: #ccc;

margin: 10px;

color: #fff;

cursor: pointer;


-webkit-touch-callout: none;

   -webkit-user-select: none;

   -khtml-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

}


  </style>


I don't understand very well where can I do that test :/



Average of ratings: -
In reply to Carlos Zurera Andrés

Re: custom block doesn't

by Suraj Kumar -

Dear Carlos,

From your shared code :

public function get_content() {

global $CFG;

$fichero = file_get_contents($CFG->dirroot.'/blocks/access_mouse/index.html');


As I understood, you are getting contents and styles of your custom block form this file - $CFG->dirroot.'/blocks/access_mouse/index.html

There might be some css rule that is breaking and causing the break of block's content.

My suggestion for you to follow the standard rule of Moodle for creation of block. Put css in a separated file - "styles.css" so that the rule would only be applied on that block's content unless it is to be applied on whole.

So, the styles of block access_mouse should be written in file - styles.css (if not, create new one) under directory blocks/access_mouse

All styles should be written in this way -
.blocks_<block-name> .<style-on-html-file>

Example, for block access_mouse, css should be written as -

.blocks_access_mouse .buttons{

margin-top: 50px;

overflow: hidden;

}


So, the steps to follow are :

  1. On block access_mouse, remove styles from html file and put them on styles.css as mentioned above.
  2. Styles of styles.css will automatically be attached with block; so don't worry of attaching of styles.css file on block page.
  3. Add file styles.css(if not there) on your custom block too. Follow the same convention of writting css on block. I guess your block name is accesibilidad_raton, then

    .blocks_accesibilidad_raton .buttons{

    margin-top: 50px;

    overflow: hidden;

    }

    Even you can copy whole styles of "access_mouse", paste them into your custom block and change the name of block accordingly into the css file

  4. Now, You nothing have to change in your custom block.

  5. Check both the blocks.


Happy helping you. Do let me know if still does not work.

Thanks.
Suraj
Average of ratings: Useful (1)
In reply to Suraj Kumar

Re: custom block doesn't

by Suraj Kumar -

FYI


.blocks_<block-name>  <spacebar>  .<style-on-html-file>

Example, for block access_mouse, css should be written as -

.blocks_access_mouse   .buttons{

margin-top: 50px;

overflow: hidden;

}


Average of ratings: -