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

Add and style the "Blog post" view on the homepage #49

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

Add and style the "Blog post" view on the homepage #49

AliHassan7 opened this issue May 11, 2017 · 4 comments

Comments

@AliHassan7
Copy link
Contributor

AliHassan7 commented May 11, 2017

  • To begin working on this task, create a branch based off of the currently checked out branch using the following convention: proj-me-initials-49
  • For your convenience, an image of the design has been added to the bottom of this issue.
  • If you haven't already, create at least 4 pieces of content of the "Blog" content type. You can use random titles, descriptions, images, etc.
  • This view (Blog Post) should already be created and can be found at Structure » Views.
  • Edit this view and add a Block display to it. Rearrange the fields so that the "Authored on" field is before the "Title field". Click on the "Authored on" field and click on "Rewrite results". Choose "Override the output of this field with custom text". In the text field, type the following: BLOG // {{ created }}. This will change the output of this field to display something like "BLOG // April 3, 2017", just how it is in the design. Apply this only to the block display and Save the view.
  • To place this view block on the homepage, you will need to use the Panels module.
  • Navigate to Structure » Pages. Edit the "Home" page. Click on the "Home" variant on the left side and then click on "Content".
  • Click on "+ Add new block" and find and select the "Blog post" block. Choose to not display the title and click on "Add block".
  • Update and Save and visit your home page. You should see the blogs view on the homepage!
  • You might notice that the date is in a different format than what is originally in the design. You can fix this by editing the block display of the blog post view and clicking on the "Authored On" field. Under date format, choose custom and refer to the documentation for php date formats to get the correct format. Edit the format as necessary until the format is exactly like this: April 3, 2017. Save the view.
  • You should now style this view according to the design.
    • The background color for the pieces of content should be #f4f4f3.
    • The font color of the word "Blog" should be #c2653b.
    • The font color of the Blog titles should be #382a3b
    • The background image for the top piece of content will be uploaded to this task
    • You should apply a hover effect to this view so that when a piece of content is hovered over, it'll get a background color of #c4673d.
  • Style the rest of this view according to the design and apply SASS as necessary.
  • Upon completion of the task, please commit and push all your work to your fork of the proj-me repository. Additionally, export all your configuration by using the drush cex command while inside vagrant and in /var/www/dev-1/proj-me/web. This configuration will also need to be committed and pushed. 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

@msheikh12
Copy link
Contributor

Started working on this task.

@AliHassan7
Copy link
Contributor Author

blog

@msheikh12
Copy link
Contributor

Completed #72

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

2 participants