Total newbie, in urgent need of help (custom styling on bedrock theme)

Using Concrete / Help
1

I’ll be straight to point - I need to understand how to style with custom CSS for basically everything on the site!

My assigned task is to redesign this website with custom CSS. There are no content updates luckily, but I’m totally lost on how to begin with the styling. Am free to design as I please, but am directionless in terms of how it even works and how do I style the header and the footer and the content and the images etc.

Website’s on Concrete V9, and I am given the Basic Bedrock theme to work with (though can change to Atomik, but it hasn’t been recommended since my client wants it to look different than the standard Concrete look).

I am skilled with CSS and JS, but have never touched PHP my whole life.

Really urgent and I need something to show ASAP.

Would appreciate any and all help/guidance I can get!

2

There is a README.md file in the basic bedrock package that includes instructions on how to customise the theme. You’re going to need to install/use Node / NPM / Laravel Mix to build your CSS. You might want to take a look at:

for more information on getting this working.

2 Likes
3

I am happy to talk it over with you. It not that hard once you understand the basics.

hello@tm-designs.co.uk

4

Hi! Thank you so much for the guidance. While going through resources, I also stumbled upon converting an HTML theme to Concrete. I was wondering if this could better suit my needs while still being easy enough to get everything up and running.

5

There are certainly many ways to build themes, and converting an HTML page into a theme is one way, for sure. Working with scss instead of less files is certainly a step up but ultimately Bootstrap 5 is more flexible that Bootstrap 3, so the pain was worth it.

If you do decide to go down that route, make sure that all your css is within the .ccm-page class, so that it doesn’t interfere with the CMS editing interface.

7

Thank You!

Yes, so far, the HTML to theme route seems to be a helpful as I’m able to design with a free hand in a better dev environment. Though not sure how well would it pan out when I make the text boxes and the images editable from within the CMS.

Is there be anything I should be aware of? For instance, there’s going to be 6 pages, 5 of which will look about the same and only the landing page would be all bling. It’ll have lots of custom CSS & JS as well for animations and the like for reveal/button hover effects

8

You might want to suppress the “bling”, particularly any scripts and animations that are running when the page is placed in edit mode. This can be done in the theme’s page templates by getting the current page object:

$page = Page::getCurrentPage();

and then testing if it is in edit mode with

$page->isEditMode());

and if it is, not activating any scripts etc.

Note also that when the page is in edit mode, the html node of the page acquires the class .ccm-edit-mode, so you can override any css that might otherwise interfere with the editor interface.

Additionally, a boolean variable CCM_EDIT_MODE is set in the page header, so your scripts can know whether they should activate or not.

1 Like