Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create and style the "Template programmed by students" block #47

Open
AliHassan7 opened this issue May 11, 2017 · 5 comments
Open

Create and style the "Template programmed by students" block #47

AliHassan7 opened this issue May 11, 2017 · 5 comments

Comments

@AliHassan7
Copy link
Contributor

AliHassan7 commented May 11, 2017

Set up:

  • Before working on this task, ensure that you have successfully downloaded Drupal Console by completing this short task: Install Drupal Console

  • To begin working on this task, create a branch based off of the updated develop branch using the following convention: proj-me-initials-47

  • This task involves creating a custom block that will be placed inside our custom proj_me_core custom module. Ensure that you have already created the custom module from the following task: Create a custom module using the Drupal Console

  • Let us use the Drupal console to create a custom block which will contain HTML for the "Template programmed by students" block!

    • Inside of vagrant and in proj-me, run the following command to create a custom block using Drupal Console: vendor/drupal/console/bin/drupal generate:plugin:block.
    • First question that the Drupal Console will ask you is "Enter the module name". Drupal Console is asking which module you want to put this custom block in. We want to put this custom block in our custom module that we created in the task mentioned earlier, so answer this question by typing the modules machine name: proj_me_core.
    • Enter the plugin class name: DebugAcademy
    • Enter the plugin label: Debug Academy Block
    • Enter the plugin id: debug_academy_block
    • Enter the theme region to render the Plugin Block: (Just hit Enter on your keyboard and it'll go to the next question)
    • Do you want to load services from the container: no
    • Do you want to generate a form structure: no
    • Do you confirm generation: yes
    • You have successfully created a custom block inside of a custom module. How impressive is that!
  • To place your block in the footer region, navigate to Structure » Block Layout and place it in the footer region. (Under footer region, click on Place block and Search for the "Debug Academy" custom block).
    To see the code of your block, use your file finder to navigate to your custom module located at proj-me/web/modules/custom/proj_me_core/ and use sublime text to open the file located at src/Plugin/Block/DebugAcademy.php.

    • To add HTML to your custom block, place your HTML inside the single quotation marks following $build['debug_academy_block']['#markup'] =.
  • This task consists of Adding the "Template programmed by students of the career-changing Debug Academy." text. You can style the block using SASS and then compiling it like you have been. Note that "Debug Academy" should be highlighted, underlined, and should link to debugacademy.com

  • For your convenience, an image of the design has been added to the bottom of this issue.

  • The background color of the block is #181818. The font color is #525252. The "Debug Academy" color is #ffae3f.

  • This color of the bottom border should be #292929.

  • Apply other SASS styling as necessary

  • Upon completion of the task, please commit and push all your work to your fork of the proj-me repository. You do not need to export your configuration for this task. Remember to create a pull request.

  • Leave a comment on this issue when you:

    • Start working on this task
    • Have a question about this task
    • Complete this task (please comment on this task with a link to your pull request).
@AliHassan7
Copy link
Contributor Author

debug - homepage

@ByronGary
Copy link

working

@ByronGary
Copy link

finished 0bf418c

@msheikh12
Copy link
Contributor

Started working

@msheikh12
Copy link
Contributor

Completed #82

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants