Concrete5.7 - How To Customise Themes

Permalink
I can't find a single place from where I can customise my own theme.

I've copied the default elemental theme folder to application/themes, renamed it, changed a few things as is said in here:

https://www.concrete5.org/documentation/how-tos/designers/how-to-cop...

installed and activated the theme, created my own preset - everything works fine. I can change colors and all what's in the preset file.

Where should I customise my theme? In the presets? In that case, what is the page design for? Or it's either or: you can only choose either the preset or change individual colors?

And where can I add my own elements of css to make changes in addition to what's only available in the preset? Say, if I make my own block, should I customise the theme or add css to my block's code? How can I change the header or footer layout? Because the cells are not editable (can't change their position or size).

How can I change my background image? If I substitute the theme's images/background.png, it only changes the top section of the footer, everything else is white. If I change the transparency in the page design - no effect.

Thank you.

P.S. Caching is OFF

linuxoid
View Replies:
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi linuxoid,

In your copy of the Elemental theme, there will be a folder called "css". This folder contains .less files that store the theme CSS and CSS for some of the concrete5 core blocks.

At the bottom of the main.less file, you can add additional CSS styles written in the standard way. If you want to customize the CSS written in Less, then you will need to read about using Less -http://lesscss.org/features . Less adds new features to CSS like variables, functions, nesting, and importing other less files.

Themes in concrete5 5.7 do not have to be written in Less, but if you want theme presets or customizable styles, then Less is required.
WillemAnchor replied on at Permalink Reply
WillemAnchor
lot's of questions :D
I can't answer them all in one sentence but i'll give you a few leads. Also have a good read in the developers section.

Maybe this add on (by MrKDilkington) will help you setting your background:
https://www.concrete5.org/marketplace/addons/mrkdilkington-full-scre...

When you create a block, you can add a css file to it in it's package.
Good practice would be to set basic css styling in the block and, if needed, set additional theme-specific css for that block in your theme.
linuxoid replied on at Permalink Reply
linuxoid
Ok, I finally got it. I've replaced the background.png and made all backgrounds (header, footer, body etc.) transparent.

Now, I want to move the header dropdown menu from the Header Navigation Area to the Page Header and make it to look like buttons instead of text.

How can I do that? What exactly do I have to change?

I tried my own preset - I can change some colors, but not all. I tried the header.less by moving the 'nav' from the 'header' to the 'main'. But if I set a background color to the 'nav' - it has no effect. I can change 'ul' and 'li' background colors, but not the whole 'nav' panel.

What I want to do is to have a colored nav panel and menu buttons in it.

Thank you.
WillemAnchor replied on at Permalink Reply
WillemAnchor
hi linuxoid,

You probably already set a "responsive" template to your navigation block ?
So that would be the place to look.

Setting the background for the nav is probably overruled by some other css. You might have to be more specific on your selector. Check the current nav with a tool like firebug to see how it's set now and by what.
linuxoid replied on at Permalink Reply
linuxoid
Yes, the menu design is set to Responsive and it works fine when it's in the top header section. But when it was moved to the 'main', the design obviously didn't work. That's why I cut the 'nav' section from the 'header' and put it into 'main'.

I've checked the presets, main, header, body and other .less files, I couldn't find any other places where to set the nav panel background color.
WillemAnchor replied on at Permalink Reply
WillemAnchor
On second thought...this is what i did in one of my modified header.less files:

nav {
    .dropdown{
      &:after {
        content: ' ▶';
      }
      &:hover {
        &:after {
          content:'\25bc';
        }
      }
    }
    ul {
      a {
         padding-left: 7px;
         padding-right: 7px;
linuxoid replied on at Permalink Reply
linuxoid
I don't see how you change the 'nav' background here. I mean the whole nav panel, the whole row background color.
WillemAnchor replied on at Permalink Reply
WillemAnchor
I'm a bit lost.
Thought you also wanted buttons...
And you now want your nav in main ? not in header...that's also different.

if you look at header.less, the whole nav css is within the header:

header {
...
nav {
...
ul {
   background-color: #003399; // set background here (but it only works for nav blocks in header!)
...
}}}


If you really want these nav styles to work in main, you will have to create them there.

Good luck !
linuxoid replied on at Permalink Reply
linuxoid
WillemAnchor,

I've noted above that I have moved the 'nav' section from the 'header' to 'main', so the default style works fine in the main top header panel now. But what I want to do is to change the whole 'nav' panel background color. If I do this:
header {
    ...
}
main {
    nav {
        background-color: #0000FF;
        ...
        ul {
            ....
        }
    }
}

nothing happens, it's the same as the default body background, which is transparent.

What you showed, if you change the UL background color, it only sets color to the 'ul' portion of the panel, not the whole row! I want the whole row to have my own vackground color.

Could it be that the body's transparent setting overrides the child's nav color setting?
WillemAnchor replied on at Permalink Reply
WillemAnchor
[code]
// main.less
nav { background-color: green;}
nav ul { background-color: blue;}
nav ul li { background-color: red;}
nav ul li:first-child { background-color: grey;}
nav ul li ul { background-color: pink;}
nav ul li ul:first-child { background-color: black;}
[\code]

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...

have fun adapting it to your flavour
linuxoid replied on at Permalink Reply 1 Attachment
linuxoid
WillemAnchor,

Please have a look at the attached picture and see what I mean.

That changes backgrounds of all the menu elements. That's fine. But it does NOT change the whole (screen wide) nav panel background!!! The nav panel is NOT green.
WillemAnchor replied on at Permalink Reply
WillemAnchor
you could do
nav { background-color: green;}
nav ul { background-color: inherit;} // if not set it will be transparent
nav ul li { background-color: inherit;}


But that's not the problem.
What you write now, is that you want it to be screen wide (or at least as wide as the rest of the content). Sorry, I assumed that your row applied to the first ul row.
The background will only be as wide as the nav you apply it to.

Try to set a background to it's parent.
Maybe even simpler, change the background of the nav block in edit mode.

that said...I would not place the nav in main, but create a new page template with area's that meet your needs. You can create a navigation area as wide as you like, and it would be global.
linuxoid replied on at Permalink Reply
linuxoid
I've just copied the
<?php
    $a = new Area('Page Header');
    $a->enableGridContainer();
    $a->display($c);
    ?>

from the left_sidebar template into the default:
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<main>
    <?php
    $a = new Area('Page Header');
    $a->enableGridContainer();
    $a->display($c);
    ?>
    <?php
    $a = new Area('Main');
    $a->enableGridContainer();
    $a->display($c);
    ?>
    <?php
so that I can have the same page wide nav block as in the side bar page. And I want that Page Header to have a background color. So the parent of the Page Header will be Main now. But if you set a background color to main, the whole main will change.
linuxoid replied on at Permalink Reply
linuxoid
The more I try to change something, the less I understand it.

It turns out no matter what I change in the 'nav' part of the header.less, it has no effect at all, nothing changes: no background color, no position, no padding.

I can change settings for 'ul' and 'li', but not the 'nav'. For example, if I change the 'ul' margin-top, the whole width of the header changes. But all I want is to move the menu down and change its background color.

Any ideas what's preventing it? Thank you.
linuxoid replied on at Permalink Reply
linuxoid
Could it be that all less files in the bild folder and the main.less are overriden by something else somewhere? Anyone could tell me by what? Will really appreciate it.