Development questions

So I am working on a gamers community which focusses on gamers with a disability. Every gamer is welcome but it is mostly to help disabled gamers with advice, information, tips and resources for making gaming more accessible.

I am running into some issues so I have questions. I am using the Lucid template.

How can I set a different height for only the homepage cover?

What is the default size image to use for covers?

image_transcoder.php?o=bx_froala_image&h=538&dpx=1&t=1541948004

The cover crop system does not really work. See image below. Top image is cropped to fit but as you can see the image below shows it is not displaying the cropped image.

image_transcoder.php?o=bx_froala_image&h=539&dpx=1&t=1541948232

For mobile profile cover, I want to know how to set the height.

image_transcoder.php?o=bx_froala_image&h=540&dpx=1&t=1541948314

Where do I configure font color for the mobile menu?

image_transcoder.php?o=bx_froala_image&h=541&dpx=2&t=1542018229

  • View
    880
  • More
Replies (8)

    • Can anyone help me in the right direction?

      • Hello Harvliet Dalgety!

        Let's review your questions:

        1) The cover sections on the homepage and on the profile area have the own CSS classes: bx-cover-homepage and bx_persons_cover. So in your case, you may go to Studio->Lucid->Styles area, create the new Mix and then edit there Custom Styles field. Add there the own settings for the mentioned classes and press the "Save" button.

        2) The same way to customize the necessary settings for the mobile devices, just use the media queries like this one:

        @media (min-width:500px){/*Class name*/{/*properties*/}} 

        3) Again, you may use the "Custom Styles" to set the specific color for the mobile menu.

        4) About the "wrong crop" form your example I may suggest that it is just the cover view's settings. When you'd correct them like in the previous point the whole picture will appear.

        • Thanks for the help

          • So I almost got it working correct for desktop but I have a question for mobile. In which css file would I find the mobile styles code so I know what to write at Lucid custom styles?

            • I have tried this in Custom Styles:

              @media (min-width:500px) { .bx-cover-homepage {

              height:300px;

              } 

              }

              It does not work. Did I do it wrong?

              • Seems deal is in min-width. For the beginning, you may remove this part. BTW, it's good to read more about @media here

                • This is what I used at Custom Styles but the desktop css overrides it. Desktop height is used on mobile too.

                  @media { .bx-cover-homepage { height: 300px; }}

                  @media { .bx_persons_cover { height: 200px; }} 

                  • Provide me your operator access details via the Messenger, I'll check this solution.

                    Login or Join to comment.